# Lerp unintentional offset: help me understand

**URL:** <https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090>\
**Category:** Coding Questions\
**Created:** [December 9, 2022, 11:27am UTC](https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090 "2022-12-09T11:27:51Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [December 9, 2022, 11:27am UTC](https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090/1 "2022-12-09T11:27:51Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/5/051481ecba8715f77a6adac0126a815e92e7acb7.jpeg)

```auto
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);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![noahbuddy](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@noahbuddy](https://discourse.processing.org/u/noahbuddy)\
**Post date:** [December 9, 2022, 5:11pm UTC](https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090/2 "2022-12-09T17:11:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 9, 2022, 8:51pm UTC](https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090/4 "2022-12-09T20:51:41Z")

</div>

```auto

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
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 10, 2022, 12:31am UTC](https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090/5 "2022-12-10T00:31:53Z")

</div>

Hello @i-draw-monkeys,

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

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

There is an example of _lerping_ here:  
[https://processing.org/reference/lerp\_.html](https://processing.org/reference/lerp_.html)

Once you understand that you can advance to:  
[https://processing.org/reference/PVector\_lerp\_.html](https://processing.org/reference/PVector_lerp_.html)

This helps to understand _linear interpolation_:

> **[Linear interpolation](https://en.wikipedia.org/wiki/Linear_interpolation)**
>
> In mathematics, linear interpolation is a method of curve fitting using linear polynomials to construct new data points within the range of a discrete set of known data points.
> If the two known points are given by the coordinates 
>   
>     
>       
> (
>         
> x
>           
> 0
>           
>         
> ,
>         
> y
>           
> 0
>           
>         
> )
>       
>     
> {\\displaystyle (x\_{0},y\_{0})}
>   
> and 
>   
>     
>       
> (
>         
> ...

`:)`

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [December 12, 2022, 10:46am UTC](https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090/6 "2022-12-12T10:46:55Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [December 12, 2022, 10:49am UTC](https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090/7 "2022-12-12T10:49:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [December 12, 2022, 10:50am UTC](https://discourse.processing.org/t/lerp-unintentional-offset-help-me-understand/40090/8 "2022-12-12T10:50:44Z")

</div>

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!