Vector.js

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

Number Line Open in Sandbox

Description

This interactive demonstrates the cartesian coordinate system.

Script

/**
* @title Number Line
* @description This interactive demonstrates the cartesian coordinate system.
* @tags [math]
*/
import { Interactive, getScriptName } from '../../index.js';
/**
* A point has an x position and y position
*/
class Point {
}
// Initialize the interactive
let margin = 32;
let interactive = new Interactive(getScriptName(), {
    height: 100
});
interactive.originX = interactive.width / 2 + margin;
interactive.originY = interactive.height / 2 + margin;
interactive.width += 2 * margin;
interactive.height += 2 * margin;
// interactive.style.overflow = 'visible';
// Create three control points
let point = interactive.control(0, 0);
let xAxis = interactive.line(-interactive.width / 2 + margin, 0, interactive.width / 2 - margin, 0);
point.constrainWithinBox(xAxis.x1, 0, xAxis.x2, 0);
let boxConstraint = point.constrain;
point.constrain = (o, n) => {
    // first snap to grid
    let x = 50 * Math.round(n.x / 50);
    // then constrain within box
    let p = boxConstraint({ x: x, y: n.x }, { x: x, y: n.y });
    return { x: p.x, y: p.y };
};
let text = interactive.text(150, 150, "myText");
text.style.textAnchor = 'middle';
text.style.alignmentBaseline = 'middle';
text.addDependency(point);
text.update = function () {
    this.x = point.x;
    this.y = point.y - 32;
    this.contents = `${point.x / 50}`;
};
text.update();
let marker = interactive.marker(10, 5, 10, 10);
marker.path('M 0 0 L 10 5 L 0 10 z').style.fill = '#404040';
marker.setAttribute('orient', 'auto-start-reverse');
xAxis.setAttribute('marker-end', `url(#${marker.id})`);
xAxis.setAttribute('marker-start', `url(#${marker.id})`);
let xAxisLabel = interactive.text(xAxis.x2 + 16, xAxis.y2, 'x');
xAxisLabel.setAttribute('alignment-baseline', 'middle');
let xPosition = interactive.line(0, 0, 0, 0);
xPosition.style.stroke = 'cornflowerblue';
xPosition.addDependency(point);
xPosition.update = function () {
    this.x1 = point.x;
    this.x2 = point.x;
    this.y2 = point.y;
};
let yPosition = interactive.line(0, 0, 0, 0);
yPosition.style.stroke = 'cornflowerblue';
yPosition.addDependency(point);
yPosition.update = function () {
    this.y1 = point.y;
    this.x2 = point.x;
    this.y2 = point.y;
};
let w = 50;
let h = 50;
// for( let i = -6; i <= 6; i++) {
//   let x = i*w;
//   let circle = interactive.circle(x,0, 8);
//   circle.style.opacity = '.1';
//   circle.style.fill = 'rgb(58	167	87)';
// }
for (let i = -5; i <= 5; i++) {
    let x = i * w;
    interactive.line(x, -6, x, 6);
    let number = interactive.text(x, 32, i.toString());
    number.style.textAnchor = 'middle';
    number.style.alignmentBaseline = 'middle';
}
point.translate(150, -100);
interactive.circle(0, 0, 3).style.fill = '#404040';
//# sourceMappingURL=number-line.js.map