Help wanted using complicated math drawing (spline)

I tried writing some code that allows the user to add points to an array, then draws a dotted line which is curved.
Meaning this is happens:

I tried figuring this out myself, but it didnt end well. The only thing i have is a dotted line function:

ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
  size(540, 540);

  points.add(new PVector(50, 150));
  points.add(new PVector(150, 50));
  points.add(new PVector(250, 250));
  points.add(new PVector(350, 150));
  points.add(new PVector(200, 350));

void draw() {
  pointLine(points, 5);

void pointLine(ArrayList<PVector> points, int spacing) {
  for (int i = 0; i < points.size() - 1; i++) {
    float distance = points.get(i).dist(points.get(i+1));
    float step = spacing / distance;
    for (float t = 0; t < 1; t += step) {
      PVector interpolated = PVector.lerp(points.get(i), points.get(i+1), t);
      fill(#FF0000, 25);
      circle(interpolated.x, interpolated.y, 25);

I can’t seem to get the smoothing to work, i mean that basically it draws a dotted bezier curve for all points in the array. You might ask why? to draw easily tails with images (its something like someone might use in a drawing programm)!

I will be thankfull for any help! :smiley:

Hi @nuhuhwy,

The Catmull-Rom spline algorithm is your friend.
Google for it… :wink:

— mnse

1 Like

Try curveVertex (continuous spline curve). Reference is here: [Curves /] (Curves / if you haven’t already seen it. Be sure to use first and last points as anchors.

1 Like