# Line the hard way

**URL:** <https://discourse.processing.org/t/line-the-hard-way/13978>\
**Category:** Coding Questions\
**Created:** [September 14, 2019, 3:04am UTC](https://discourse.processing.org/t/line-the-hard-way/13978 "2019-09-14T03:04:08Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [September 14, 2019, 3:04am UTC](https://discourse.processing.org/t/line-the-hard-way/13978/1 "2019-09-14T03:04:09Z")

</div>

Hello!

I apologize in advance for my appalling math knowledge. How can I calculate coords of locations of regular distance in a straight line between two points? IE I have a source vector and a target vector, and I want an array of vectors of arbitrary spacing that represent a straight line between the two which will in turn be used as source points for new curves.

I hope that makes sense! Thanks in advance for anyone who is willing to help.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 14, 2019, 4:58am UTC](https://discourse.processing.org/t/line-the-hard-way/13978/2 "2019-09-14T04:58:10Z")

</div>

you could combine  
[https://processing.org/reference/PVector.html](https://processing.org/reference/PVector.html)  
[https://processing.org/reference/lerp\_.html](https://processing.org/reference/lerp_.html)

```auto
PVector p1 = new PVector(15, 10);
PVector p2 = new PVector(80, 90);
PVector off = new PVector(0, 0);
PVector pos = new PVector(0, 0);
int many = 5;

void setup() {
  size(200, 200);
}

void draw() {
  background(200, 200, 0);
  line(p1.x, p1.y, p2.x, p2.y);
  off.x = mouseX;
  off.y = mouseY;
  for (int i = 0; i <= many; i++) {
    pos.x = lerp( p1.x, p2.x, i/float(many) ) + off.x;
    pos.y = lerp( p1.y, p2.y, i/float(many) ) + off.y;
    circle(pos.x, pos.y, 5);
  }
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 14, 2019, 5:10am UTC](https://discourse.processing.org/t/line-the-hard-way/13978/3 "2019-09-14T05:10:39Z")

</div>

… or use PVector’s own lerp 🙂 [https://processing.org/reference/PVector\_lerp\_.html](https://processing.org/reference/PVector_lerp_.html)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 14, 2019, 5:17am UTC](https://discourse.processing.org/t/line-the-hard-way/13978/4 "2019-09-14T05:17:30Z")

</div>

thanks, that would be

```auto
// pos.x = lerp( p1.x, p2.x, i/float(many) ) + off.x;
// pos.y = lerp( p1.y, p2.y, i/float(many) ) + off.y;
    pos = PVector.lerp(p1, p2,i/float(many) );
    pos = pos.add(off);

```

here even more

> **vectorisation**
>
> ```auto
> PVector p1 = new PVector(15, 10);
> PVector p2 = new PVector(80, 90);
> PVector off = new PVector(0, 0);
> PVector pos = new PVector(0, 0);
> int diam = 3, many = 5;
> 
> void setup() {
> size(200, 200);
> }
> 
> // let's make our own Vector primitives
> void line(PVector p1, PVector p2){
> line(p1.x, p1.y, p2.x, p2.y);  
> }
> 
> void circle(PVector p, float w) {
> circle(p.x, p.y, w); 
> }
> 
> void draw() {
> background(200, 200, 0);
> line(p1,p2);
> off.set(mouseX,mouseY);
> for (int i = 0; i <= many; i++) {
> pos = ( PVector.lerp( p1, p2, i/float(many) ) ).add(off);
> circle(pos, diam);
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [September 14, 2019, 12:09pm UTC](https://discourse.processing.org/t/line-the-hard-way/13978/5 "2019-09-14T12:09:19Z")

</div>

That’s perfect thank you!

---

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [September 14, 2019, 12:58pm UTC](https://discourse.processing.org/t/line-the-hard-way/13978/6 "2019-09-14T12:58:39Z")

</div>

Here’s a question - I don’t understand why in the following code the first and last vertices of the lines do not reach the points denoting the start and end points.

I print the coordinates and you I see that when the amt value in the lerp function is 0 or 1, it will return the location of the two input points to the lerp respectively.

I also tried an if statement to detect when j is 0 and hard code it to create a vertex at “200.0 90.0” and that did work.

So why isn’t it creating the first vertex at 200.0 90.0, when the lerp amt is 0?

Hope that makes sense. Incidentally, the reason to not just use lines is that I plan to distort the shapes with noise and whatnot.

Thanks!

```auto
PVector a1 = new PVector(200, 90);
PVector a2 = new PVector(580, 20);
PVector b1 = new PVector(20, 600);
PVector b2 = new PVector(700, 700);
PVector posA = new PVector(0, 0);
PVector posB = new PVector(0, 0);
PVector linePoint = new PVector(0, 0);

float points = 5;
float subPoints = 50;
float c = 0;

void setup() {
  size(800, 800);
  stroke(0);
  strokeWeight(2);
  noFill();
  noLoop();
}

void draw() {
  background(255);

  for (float i = 0; i <= points; i++) {

    posA = PVector.lerp(a1, a2, i/points);
    point(posA.x, posA.y);

    posB = PVector.lerp(b1, b2, i/points);
    point(posB.x, posB.y);

    beginShape();

    for (float j = 0; j <= subPoints; j++) {

      linePoint = PVector.lerp(posA, posB, j/(subPoints));
      println(linePoint.x, linePoint.y);
      curveVertex(linePoint.x, linePoint.y);
    }
    endShape();
  }
}

//void draw() {
// background(255);

// point(a1.x,a1.y);
// point(b2.x, b2.y);
// float s = map(sin(c),-1,1,0,1);
// if(s==0 || s ==1){
// background(255,0,0);
// }
// linePoint = PVector.lerp(a1, b2, s);

// point(linePoint.x, linePoint.y);
// c += 0.01;
//}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 14, 2019, 1:35pm UTC](https://discourse.processing.org/t/line-the-hard-way/13978/7 "2019-09-14T13:35:13Z")

</div>

> **[curveVertex() / Reference](https://processing.org/reference/curveVertex_.html)**
>
> Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). The…

> The first and last points in a series of **curveVertex()** lines will be used to guide the beginning and end of a the curve.

meaning they are not drawn

so, you need two points more  
try ( untested )

```auto

    beginShape();
     curveVertex(posA.x, posA.y);
    for (float j = 0; j <= subPoints; j++) {

      linePoint = PVector.lerp(posA, posB, j/(subPoints));
      println(linePoint.x, linePoint.y);
      curveVertex(linePoint.x, linePoint.y);
    }
     curveVertex(posB.x, posB.y);
    endShape();

```

---

<div class="post-metadata">

**Author:** ![arcadeperfect](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@arcadeperfect](https://discourse.processing.org/u/arcadeperfect)\
**Post date:** [September 14, 2019, 1:59pm UTC](https://discourse.processing.org/t/line-the-hard-way/13978/8 "2019-09-14T13:59:53Z")

</div>

Makes sense thanks for the help.