SPO Final Project - BONUS 2

​

var amt = 0;

​

​

function setup() {

  createCanvas(500, 500);

  background(0);

​

}

​

function draw() {

  //background(0);

  fill(0,10);

  rect(0,0,width,height);

​

  link(100,100,400,400);

  link(100,100,300,200);

}

​

​

​

function link(posX1, posY1, posX2, posY2)

{

  var amtInc = 0.005; // Works best between 0.0001 (very slow) to 0.01 (fast)

  stroke(255);

  //line(posX1, posY1, posX2, posY2); // Uncomment this if you want to see the line

  // Math part, if you're interested :)

  // I'm creating two vectors ("v1" and "v2") corresponding to the positions of my two points

  // Then I'm using what's called an "interpolation" with the function "lerp" 

  // to calculate several steps between those two points, and creating the vector "v3" to store them

  // The variable "amt" let us control the interpolation :

  // at amt = 0, v3 = v1 (origin position)

  // at amt = 1, v3 = v2 (final position)

  let v1 = createVector(posX1, posY1);

  let v2 = createVector(posX2, posY2);

​

  let v3 = p5.Vector.lerp(v1, v2, amt);

​

  fill(255);

  ellipse(v3.x, v3.y, 10,10);

  amt+= amtInc; // I'm incrementing amt with a tiny step each frame

  amt = amt%1; // When amt = 1 (and my ellipse is at the final position), amt will be pulled back to 0.

}