Bezier intervals (is lerp() linear?)

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

Tagged:

Answers

  • Answer ✓

    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.

  • ...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....

  • 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.

Sign In or Register to comment.