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 v = v2.copy().normalize();
    const sp = v1.dot(v);
    return v.setMag(sp);
}