​

let vectorA;

let vectorB;

let vectorC;

​

function setup() {

  createCanvas(400, 200);

  vectorA = createVector(100, 130);

  vectorB = createVector(200, 40);

  vectorC = p5.Vector.add(vectorA, vectorB);

}

​

function draw() {

  background(2, 6, 23);

​

  drawVector(vectorA, 'A', color(255));

  drawVector(vectorB, 'B', color(255));

  drawVector(vectorC, 'C = A + B', color(255, 0, 0));

​

  visualizeVectorAddition(vectorA, vectorB);

}

​

function drawVector(vector, label, col) {

  stroke(col);

  strokeWeight(4);

  line(0, 0, vector.x, vector.y);

  strokeWeight(1);

  fill(col);

  text(label, vector.x + 10, vector.y - 5);

  strokeWeight(8);

  point(vector.x, vector.y);

}

​

function visualizeVectorAddition(vecA, vecB) {

  stroke(255);

  strokeWeight(4);

  drawingContext.setLineDash([10, 10]);

  line(vecA.x, vecA.y, vecA.x + vecB.x, vecA.y + vecB.y);

  drawingContext.setLineDash([]);

}

​