Vector.js

Vector is an open source javascript library for creating interactive graphics. View the repository, browse the API, run the tests, or meet the team.

Line Defined by Two Points Open in Sandbox

Description

This interactive demonstrates how a line is uniquely defined by two points.

Script

/**
* @title Line Defined by Two Points
* @description This interactive demonstrates how a line is uniquely defined by two points.
* @tags [math]
*/
import { Interactive, getScriptName } from '../../index.js';
// Initialize the interactive
let interactive = new Interactive(getScriptName());
interactive.border = true;
// Create three control points
let p1 = interactive.control(200, 100);
let p2 = interactive.control(400, 200);
addLineBetweenPoints(p1, p2);
// Draws a line between two points
function addLineBetweenPoints(point1, point2) {
    let line = interactive.line(0, 0, 0, 0);
    line.addDependency(point1, point2);
    line.update = function () {
        let slope = (point2.y - point1.y) / (point2.x - point1.x);
        let b = point2.y - slope * point2.x;
        if (isFinite(slope)) {
            this.x1 = interactive.minX - 10;
            this.y1 = slope * this.x1 + b;
            this.x2 = interactive.width + 10;
            this.y2 = slope * this.x2 + b;
        }
        else {
            this.x1 = point1.x;
            this.y1 = interactive.minY - 10;
            this.x2 = point1.x;
            this.y2 = interactive.maxY + 10;
        }
    };
    line.update();
    return line;
}
let text = interactive.text(100, 100, "(100,100)");
text.style.fontFamily = "KaTeX_Math";
text.update = function () {
    this.x = p1.x + 15;
    this.y = p1.y - 15;
    this.contents = `P<tspan baseline-shift = "sub">1</tspan>`;
};
text.addDependency(p1);
text.update();
let text2 = interactive.text(100, 100, "(100,100)");
text2.style.fontFamily = "KaTeX_Math";
text2.update = function () {
    this.x = p2.x + 15;
    this.y = p2.y - 15;
    this.contents = `P<tspan baseline-shift = "sub">2</tspan>`;
};
text2.addDependency(p2);
text2.update();
//# sourceMappingURL=line-defined-by-two-points.js.map