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.

Mouse Input Open in Sandbox

Description

This interactive demonstrates how mouse input can be used to add interactivity.

Script

/**
* @title Mouse Input
* @description This interactive demonstrates how mouse input can be used to add interactivity.
* @input The input to this interactive is the scroll wheel of the mouse, the mouse click, and the mouse position.
* @tags [input]
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 736;
interactive.height = 200;
interactive.border = true;
let control = interactive.control(100, 100);
control.root.style.display = 'none';
interactive.root.onmousemove = function (event) {
    let x = event.clientX - interactive.root.getBoundingClientRect().left;
    let y = event.clientY - interactive.root.getBoundingClientRect().top;
    control.translate(x, y);
};
interactive.root.onmouseleave = interactive.root.onmousemove;
let xline = interactive.line(interactive.minX, control.y, interactive.maxX, control.y);
xline.addDependency(control);
xline.update = function () {
    xline.y1 = control.y;
    xline.y2 = control.y;
};
let yline = interactive.line(control.x, interactive.minY, control.x, interactive.maxY);
yline.addDependency(control);
yline.update = function () {
    yline.x1 = control.x;
    yline.x2 = control.x;
};
let opacity = 1;
let circle = interactive.circle(0, 0, 3);
circle.root.style.display = 'none';
circle.style.fill = 'none';
circle.style.stroke = '#333333';
interactive.root.onclick = function (event) {
    opacity = 1;
    circle.r = 1;
    circle.root.style.opacity = '1';
    circle.cx = event.clientX - interactive.root.getBoundingClientRect().left;
    circle.cy = event.clientY - interactive.root.getBoundingClientRect().top;
    circle.root.style.display = '';
    // Start the animation cycle
    window.requestAnimationFrame(step);
};
// Animate this interactive by changing the angle and then updating elements
function step(timestamp) {
    circle.r += 1;
    circle.root.style.opacity = opacity.toString();
    opacity -= .01;
    if (opacity > 0) {
        // set up the next animation frame
        window.requestAnimationFrame(step);
    }
}
//# sourceMappingURL=mouse-interaction.js.map