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.

Square Root Open in Sandbox

Description

This interactive visualizes the growth rate of x versus the growth rate of the square root of x.

Script

/**
* @title Square Root
* @description This interactive visualizes the growth rate of x versus the growth rate of the square root of x.
* @tags [math]
* @weight 1
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 550;
interactive.height = 550;
interactive.originX = 75;
interactive.originY = 325;
let unit = 50;
let border = interactive.rectangle(-interactive.originX, -interactive.originY, interactive.width, interactive.height);
border.style.strokeWidth = '2';
// create x axis
interactive.line(-interactive.originX, 0, interactive.width - interactive.originX, 0);
interactive.text(interactive.width - interactive.originX - 20, -7, 'x');
let x = -unit, y = 20;
for (let num = -1; num <= 9; num++) {
    interactive.line(x, 0, x, 3);
    interactive.text(num < 0 ? x - 7 : x - 3.5, y, `${num}`).style.fontSize = '12';
    x += unit;
}
// create y axis
interactive.line(0, -interactive.originY, 0, 0);
interactive.text(7, -interactive.originY + 20, 'y');
x = -20;
y = -unit;
for (let num = 1; num <= 6; num++) {
    interactive.line(-3, y, 0, y);
    interactive.text(x, y + 3.5, `${num}`).style.fontSize = '12';
    y -= unit;
}
// create square root circle and control along x axis
let xControl = interactive.control(unit, 0);
xControl.constrainWithinBox(unit, 0, interactive.width - interactive.originX, 0);
let circle = interactive.circle(0, 0, unit);
circle.update = function () {
    this.cx = (-unit + xControl.x) / 2;
    this.r = xControl.x - this.cx;
};
circle.update();
circle.addDependency(xControl);
// create colored line and label that move along x axis as x changes
let xLine = interactive.line(0, 0, 0, 0);
xLine.stroke = 'cornflowerblue';
xLine.style.strokeWidth = '3';
xLine.update = function () {
    this.x2 = xControl.x;
};
xLine.update();
xLine.addDependency(xControl);
let xLabel = interactive.text(/*(interactive.width-interactive.originX)/2*/ unit / 2, unit, 'x');
xLabel.style.fontSize = '24';
xLabel.style.fontStyle = 'italic';
xLabel.style.fontWeight = 'bold';
xLabel.style.fill = '#0366EE';
xLabel.update = function () {
    this.x = xControl.x / 2;
};
xLabel.update();
xLabel.addDependency(xControl);
// create colored line and label that move along y axis as square root of x changes
let yLine = interactive.line(0, 0, 0, 0);
yLine.stroke = '#a771eb';
yLine.style.strokeWidth = '3';
yLine.update = function () {
    this.y2 = -Math.sqrt(xControl.x / unit) * unit;
};
yLine.update();
yLine.addDependency(xControl);
let yLabel = interactive.text(-unit - 10, /*-interactive.originY/2*/ -unit / 2, '√ x');
yLabel.style.fontSize = '24';
yLabel.style.fontStyle = 'italic';
yLabel.style.fontWeight = 'bold';
yLabel.style.fill = '#9D5EEB';
yLabel.update = function () {
    this.y = (-Math.sqrt(xControl.x / unit) * unit) / 2;
};
yLabel.update();
yLabel.addDependency(xControl);
//# sourceMappingURL=square-root.js.map