Transition from one vector array to another

p5.js Coding Questions
4

Hello @fbrie002 ,

It helps to visualize the data:

Example 
let y = 50;

function setup() 
  {
  createCanvas(400, 400);  
  translate(width/2, 0);
    let array1 = [0.07622419629758599,0.05842459339422927,0.024668672017524977,-0.09559310702036261,-0.0024750374544100775,-0.13594952209716252,-0.018044980746120338,-0.0084552654890587,-0.06651388597692996,0.07836719933304802];
    let array2 = [-0.012255011871074164,0.030888419399735884,-0.06349531322375797,0.06757607476700675,0.06706755973946725,0.16300976540477416,-0.04452763179099016,0.022317034418650683,0.00980828811903469,0.05458174891305839];

  let arraySub = [];

  
  strokeWeight(5);
      
  for(var i = 0; i < array1.length; i++)
    {
    arraySub[i] = array2[i] - array1[i];
    stroke(255, 0, 0);
    point(1000*array1[i], y); 
    point (1000*array2[i], y);
    stroke(0, 255, 0);
    let pTemp = arraySub[i];  // You need to modify this
    point(1000*(pTemp), y); 
    print(1000*arraySub[i]); 
    y+= 20;  
    }
  noLoop();  
  }

function draw() 
  {
  //background(220);
  }

This is what your code (modified) is doing:
image

Modified to plot midpoint:
image

Hint:
let pTemp = arraySub[i]/2 + array1[i];

I modified your code and you can improve on the hint; see the midpoint reference or do the math. :)

I can use the hint to plot anywhere between the two points; this is what the lerp() function does under the hood.

References:

Consider doing it without the lerp() function first.

:)

1 Like