40 lines
903 B
JavaScript
40 lines
903 B
JavaScript
let v0, v1, v2, v3;
|
|
|
|
function setup() {
|
|
createCanvas(600, 400);
|
|
cursor(CROSS);
|
|
v0 = createVector(200, 200);
|
|
v1 = createVector(300, 100);
|
|
}
|
|
|
|
function draw() {
|
|
v2 = createVector(mouseX, mouseY).sub(v0).div(2);
|
|
v3 = vectorProjection(v2, v1);
|
|
|
|
background(0);
|
|
stroke("#777777");
|
|
translate(v0.x, v0.y);
|
|
line(v2.x, v2.y, v3.x, v3.y);
|
|
drawVector(v1, "#FF0000");
|
|
drawVector(v2, "#00FF00");
|
|
drawVector(v3, "#FFFF00");
|
|
}
|
|
|
|
function drawVector(vector, color = "#FFFFFF") {
|
|
push();
|
|
fill(color);
|
|
stroke(color);
|
|
line(0, 0, vector.x, vector.y);
|
|
circle(0, 0, 4);
|
|
translate(vector.x, vector.y);
|
|
rotate(vector.heading());
|
|
triangle(0, 0, -4, -2, -4, +2);
|
|
pop();
|
|
}
|
|
|
|
function vectorProjection(v1, v2) {
|
|
const v2n = v2.copy().normalize();
|
|
const sp = v1.dot(v2n);
|
|
return v2n.setMag(sp);
|
|
}
|