Transition from one vector array to another

[glv]

Hello,

Some examples to explore:

// Linear Interpolation Examples
// v1.0.0
// GLV 2021-01-03

float x1, y1;
float x2, y2;

PVector v1, v2, v3;

float xInc, yInc;

PVector start;
PVector end;
PVector middle;

void setup() 
	{
  size(600, 200);
  x1 = -50;
  y1 = -50;
  x2 =  50;
  y2 =  50;
  
  v1 = new PVector(x1, y1);
  v2 = new PVector(x2, y2);
  
  start = new PVector(-50, -50);
  end = new PVector(50, 50);
  middle = new PVector(0, 0);
  
  strokeWeight(3);
	}

void draw() 
	{
  background(255);
  
// Counter for below
  
  float steps = 100;
  float step = frameCount%steps; 
  
//******************************************
// x, y coordinates

  translate(width/5, height/2);
  //line(x1, y1, x2, y2);
  
  xInc = (x2-x1)/steps;
  yInc = (y2-y1)/steps;

  stroke(255, 0, 0);
	line(x1, y1, x1+step*xInc, y1+step*yInc);

  //Just for fun!
  line(-50, 50, x1+step*xInc, y1+step*yInc);


//******************************************
// Vectors  
  
  translate(width/5, 0);
  
  v3 = v2.copy();
  v3.sub(v1);
  float mag = v3.mag();
  v3.normalize().mult(step*mag/100).add(v1);
  stroke(0, 255, 0);
  line(v1.x, v1.y, v3.x, v3.y);
  line(-50, 50, v3.x, v3.y);
  
//******************************************
// Vectors + co-ordinates 
  
  translate(width/5, 0);
  
  stroke(0, 0, 255);
  line(v1.x, v1.y, v1.x + step*xInc, v1.y + step*yInc);
  line(-50, 50, v3.x, v3.y);  
 
//******************************************
// PVector LERP

  translate(width/5, 0);
  
  stroke(255, 0, 255);
  middle = PVector.lerp(start, end, step/100);
  line(start.x, start.y, middle.x, middle.y);
  line(-50, 50, middle.x, middle.y);
  }

And I am sure there are more…

They are for Processing JAVA version.

References:

• https://processing.org/tutorials/pvector/
• https://processing.org/reference/PVector.html
• https://natureofcode.com/book/chapter-1-vectors/
• https://www.processing.org/reference/Array.html < array of PVectors is in here

Enjoy the journey!

:)