Lerp unintentional offset: help me understand

Processing Coding Questions
1

I honestly feel someone else will look at this and understand the issue right away, like I feel like it is glaringly obvious but somehow I don’t get it. I am simply trying to get a set of evenly set points that fall along a line between two points (b.x, b.y) and (c.x, c.y)

What am I missing here? The points are always offset from the line and they should fall on top. Why aren’t they aligned?

Screen Shot 2022-12-09 at 11.17.58 AM
Screen Shot 2022-12-09 at 11.17.58 AM2414×894 153 KB 

PVector b, c;

void setup() {
  size(480, 710);
 noLoop();
}

void draw() {
  background(255);
  b = new PVector(random(10, 300), random(200,500));
  c = new PVector(width, random(0,(b.y-10)));
  

  for (float i=b.x; i <c.x; i=i+3) {
    float amt = i/(c.x-b.x);
   float bc = lerp(b.y, c.y, amt);

  line(c.x,c.y, b.x, b.y);

    point(i, bc);
    }
  }
2

The value of amt is thrown off by starting i at b.x.
Printing out amt will show some values above 1.

Adding b.x to point() will put the dots on the line but not at the start.

To account for the offset, set i from zero to range and float range = c.x - b.x.
That will bring amt between 0 and 1.
Then add the starting x: point(i+b.x, bc);.

Also, since the solid line is drawn across the entire range, you could bring that outside of the loop.

1 Like
4 

PVector b, c;

void setup() {
  size(480, 710);
  noLoop();
}

void draw() {
  background(255);
  b = new PVector(random(10, 300), random(200, 460));
  c = new PVector(width-33, random(0, (b.y-10)));

  line(c.x, c.y, b.x, b.y);

  for (float i=0; i <= 10; i+=1) {

    float amt = i/10;

    float bcX = lerp(b.x, c.x, amt);
    float bcY = lerp(b.y, c.y, amt);

    stroke(255, 0, 0); 
    ellipse(bcX, bcY, 4, 4); // or point
  }
}
1 Like
5

Hello @i-draw-monkeys,

I encourage you as a beginner to use the resources here:

There is an example of lerping here:
https://processing.org/reference/lerp_.html

Once you understand that you can advance to:
https://processing.org/reference/PVector_lerp_.html

This helps to understand linear interpolation:

:)

1 Like
6

This is the answer. It is the “i” starting at b.x as the problem because the “i” is reused in the numerator of amt! Totally makes sense, was the thing I was overlooking. Changing this line from:

float amt = i/(c.x-b.x);

to

float amt = (i-b.x)/(c.x-b.x);

makes it so the points overlay the line as they should.

Thanks!

7

I am big into the reference section! I definitely read those multiple times before asking the question. Unfortunately, I still wasn’t able to find my error.

1 Like
8

This is basically what I ended up doing to build my file a couple days ago when I had the problem. But now I also see the problem with the original code. Many ways to solve an issue! Thanks!

1 Like