Ploting a shape along a path

Processing Coding Questions
1

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.

2

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

3

Thank you AuXie2k9, I will.

4

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 :slight_smile:
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);
  plot.addPoints(t);
}

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


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

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