----- Coding Tutorial by Patt Vira ----- 

Name: Linear Interpolation

Video Tutorial: https://youtu.be/IwOZV19CH2Y?si=DyX53_EJvJL7oVZG

​

p5.js Reference: https://p5js.org/reference/#/p5.Vector/lerp

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

​

/*

//Example 1: 

//-----

​

let pt1 = 100; 

let pt2 = 300;

let y = 200; 

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  translate(50, 0); 

  fill(255, 0 ,0);

  ellipse(pt1, y, 50, 50); 

  text(pt1, pt1, y-40);

  fill(255);

  ellipse(pt2, y, 50, 50); 

  text(pt2, pt2, y-40);

  let pt3 = lerp(pt1, pt2, 0.5);

  fill(0, 0, 255);

  ellipse(pt3, y, 50, 50); 

  text(pt3, pt3, y-40);

}

​

*/

​

//Example 2: 

//-----

let pt1; let pt2;

​

function setup() {

  createCanvas(400, 400);

  pt1 = createVector();

  pt2 = createVector(0, 0);

}

​

function draw() {

  background(220);

  fill(255);

  pt1.x = mouseX;

  pt1.y = mouseY;

  ellipse(pt1.x, pt1.y, 50, 50);

  fill(255, 255, 0);

  pt2.x = lerp(pt2.x, pt1.x, 0.1);

  pt2.y = lerp(pt2.y, pt1.y, 0.1);

  ellipse(pt2.x, pt2.y, 50, 50);

​

}

​