# Ploting a shape along a path

**URL:** <https://discourse.processing.org/t/ploting-a-shape-along-a-path/23641>\
**Category:** Coding Questions\
**Created:** [September 2, 2020, 11:26pm UTC](https://discourse.processing.org/t/ploting-a-shape-along-a-path/23641 "2020-09-02T23:26:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pandl](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pandl](https://discourse.processing.org/u/pandl)\
**Post date:** [September 2, 2020, 11:26pm UTC](https://discourse.processing.org/t/ploting-a-shape-along-a-path/23641/1 "2020-09-02T23:26:37Z")

</div>

I’ve able to have a shape follow a circular path and now I’d like to do the same thing with other paths starting with a straight line. I once had some BASIC code that plotted a line but that was 40 odd years ago and I cannot find the formula on the Internet. Of course plotting a line where the beginning x or Y is the same as the end x or y is straight forward but what about a line that slopes?

Perhaps there’s a library that would allow me to divide a line into points between the beginning and end points?

Since posting this I’ve found some information but it’s now working. This is what I’ve tried:

```auto
float vx = x2 - x1;
float vy = y2 - y1;
px = (int) ((float) x2 + vx * d; //distance from starting point
py = (int) ((float) y2 + vy *d; 

```

Plus other similar variations. The best that I can achieve is px and py at the end of the line rather at some point along the line. More thought required.

---

<div class="post-metadata">

**Author:** ![AuXie2k9](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/auxie2k9/32/9907_2.png) [@AuXie2k9](https://discourse.processing.org/u/AuXie2k9)\
**Post date:** [September 3, 2020, 7:02am UTC](https://discourse.processing.org/t/ploting-a-shape-along-a-path/23641/2 "2020-09-03T07:02:11Z")

</div>

Have a look at the lerp() function.  
It has an example that does exactly what you want.  
[https://processing.org/reference/lerp\_.html](https://processing.org/reference/lerp_.html)

---

<div class="post-metadata">

**Author:** ![pandl](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pandl](https://discourse.processing.org/u/pandl)\
**Post date:** [September 3, 2020, 7:14am UTC](https://discourse.processing.org/t/ploting-a-shape-along-a-path/23641/3 "2020-09-03T07:14:00Z")

</div>

Thank you AuXie2k9, I will.

---

<div class="post-metadata">

**Author:** ![MiguelSanches](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miguelsanches/32/11172_2.png) [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)\
**Post date:** [September 3, 2020, 8:28am UTC](https://discourse.processing.org/t/ploting-a-shape-along-a-path/23641/4 "2020-09-03T08:28:12Z")

</div>

Hi @pandl

I am not sure if the following code is what you need, but I recently created my own plotter class  
Maybe there are parts that are useful to you 🙂  
The points are generated randomly and added to the plot.

Main window:

```auto
Plotter plot;

void setup() {
  size(400, 400);
  plot = new Plotter(width / 2 - 100, height / 2, 100, 200, 100.0f);
}

void draw() {
  background(0);
  plot.chartAxis();
  generateRandom();
  plot.plotData();
}

void generateRandom() {
  float t = random(-50.0, 50.0);
  plot.addPoints(t);
}

```

Plotter class:

```auto
class Plotter {
  ArrayList MagnitudePoints;
  int xpos, ypos;
  int axisHeight, axisWidth;
  float range;

  Plotter(int xpos, int ypos, int axisHeight, int axisWidth, float range) {
    MagnitudePoints = new ArrayList<Points>();
    this.xpos = xpos;
    this.ypos = ypos;
    this.axisHeight = axisHeight;
    this.axisWidth = axisWidth;
    this.range = range;
  }

  void chartAxis() {
    stroke(255);
    fill(255);
    line(xpos, ypos - axisHeight, xpos, ypos + axisHeight);
    line(xpos, ypos, xpos + axisWidth, ypos);
    //textFont
    textAlign(RIGHT, CENTER);
    text("0", xpos, ypos);
    text(String.format("%.1f", range), xpos, ypos + axisHeight);
    text(String.format("%.1f", range), xpos, ypos - axisHeight);
    noStroke();
  }

  void plotData() {
    pushMatrix();
    beginShape();
    noFill();
    for (int i = 0; i < MagnitudePoints.size(); i++) {

      Points P = (Points)MagnitudePoints.get(i);
      stroke(187, 0, 0);
      if (P!=null) {
        curveVertex(P.x, P.y);
        if (P.x>xpos + axisWidth)MagnitudePoints.remove(i);
        P.x++;
      }
    }
    endShape();
    popMatrix();
  }

  class Points {
    float x, y;
    Points(float x, float y) {
      this.x = x;
      this.y = ypos + (axisHeight/range) * y;
      //println("X = " + this.x + " Y = " + this.y);
    }
  }

  void addPoints(float point) {
    MagnitudePoints.add(new Points(xpos, point));
  }
}

```

---

<div class="post-metadata">

**Author:** ![pandl](https://avatars.discourse-cdn.com/v4/letter/p/35a633/32.png) [@pandl](https://discourse.processing.org/u/pandl)\
**Post date:** [September 3, 2020, 11:01pm UTC](https://discourse.processing.org/t/ploting-a-shape-along-a-path/23641/5 "2020-09-03T23:01:04Z")

</div>

Thank you MiguelSanches, that’s very generous of you.