# Ploting a shape along a path

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:

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

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

Thank you AuXie2k9, I will.

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:

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

Plotter class:

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