Bezier intervals (is lerp() linear?)

camelo003

Hello everyone! Greetings from Brazil.

[Code and images below; Dizziness / op art / moire alert!).

I made a bezier curve at the center of the screen and then interpolated all parameters to the top left and bottom right corners with two loops using the lerp () function.

I thought that in this way I would see an uniform intervals between all lines, varying only by the curvature in the center, but then I noticed that there was a difference (img2). At first I thought it might be the ratio, but the contrast became even more apparent in 1:1 (img3).

What am I missing?

Code link;

float x1 = 0;
float y1 = height;
float x2 = width;
float y2 = height*0.666;
float x3 = 0;
float y3 = height*0.333;
float x4 = width;
float y4 = 0;

int steps = 50; //times 2

size(800,600);
noFill();
noSmooth();
background(50);
stroke(200);
bezier(x1,y1,x2,y2,x3,y3,x4,y4);
for(int i=0;i<steps;i=i+1){
  float _x1 = lerp(0,x1,map(i,0,steps,0,1));
  float _y1 = lerp(0,y1,map(i,0,steps,0,1));
  float _x2 = lerp(0,x2,map(i,0,steps,0,1));
  float _y2 = lerp(0,y2,map(i,0,steps,0,1));
  float _x3 = lerp(0,x3,map(i,0,steps,0,1));
  float _y3 = lerp(0,y3,map(i,0,steps,0,1));
  float _x4 = lerp(0,x4,map(i,0,steps,0,1));
  float _y4 = lerp(0,y4,map(i,0,steps,0,1));
  bezier(_x1,_y1,_x2,_y2,_x3,_y3,_x4,_y4);
}
for(int i=1;i<steps;i=i+1){
  float _x1 = lerp(x1,width,map(i,0,steps,0,1));
  float _y1 = lerp(y1,height,map(i,0,steps,0,1));
  float _x2 = lerp(x2,width,map(i,0,steps,0,1));
  float _y2 = lerp(y2,height,map(i,0,steps,0,1));
  float _x3 = lerp(x3,width,map(i,0,steps,0,1));
  float _y3 = lerp(y3,height,map(i,0,steps,0,1));
  float _x4 = lerp(x4,width,map(i,0,steps,0,1));
  float _y4 = lerp(y4,height,map(i,0,steps,0,1));
  bezier(_x1,_y1,_x2,_y2,_x3,_y3,_x4,_y4);
}

Post on google+ (PTBR).

.camelo

koogs

The l in lerp stands for linear.

But you are interpolating the control points over different ranges so they won't be parallel.

If you want them parallel then use translate.

jeremydouglass

...like this:

float x1 = 0;
float y1 = height;
float x2 = width;
float y2 = height*0.666;
float x3 = 0;
float y3 = height*0.333;
float x4 = width;
float y4 = 0;

int steps = 100; //times 2

size(800,600);
noFill();
noSmooth();
background(50);
stroke(200);
translate(-height/2,-height/2);
for(int i=1;i<steps;i=i+1){
  bezier(x1,y1,x2,y2,x3,y3,x4,y4);
  translate(10,10);
}

You could also use a PShape....

camelo003

Thanks for the answers!

I had not noticed, but it's true. For the controllers I am doing two interpolations with the same amount of steps, but at different distances. I think that a spline to control the interpolation of the controllers could work, but I'm satisfied with the results obtained by doing a single interpolation.

And jeremydouglass, I did not use PShape because the idea was to individually control the thickness of specific sections of each line. Take a look:

For those who want to follow the development, I'm updating this Github repository. The commitis are all in Portuguese (bad habits die hard), but I think the code is quite clear.