Search code examples
processing

How to draw shapes along a bezier path


I would like to plot a series of ellipses along a bezier path but I am struggling to plot anything more than just the line of the path. I don't need it to move at all. So far I have:

void setup() {
  size(150, 150);
  background(255);
  smooth();
  // Don't show where control points are
  noFill();
  stroke(0);
  beginShape();
  vertex(50, 75); // first point
  bezierVertex(25, 25, 125, 25, 100, 75);
  endShape();
}

How do I plot ellipses to follow the bezier path instead of the line?


Solution

  • Why would you expect that code to draw circles? It doesn't contain any calls to the ellipse() function.

    Anyway, it sounds like you're looking for the bezierPoint() function:

    noFill();
    bezier(85, 20, 10, 10, 90, 90, 15, 80);
    fill(255);
    int steps = 10;
    for (int i = 0; i <= steps; i++) {
      float t = i / float(steps);
      float x = bezierPoint(85, 10, 90, 15, t);
      float y = bezierPoint(20, 10, 90, 80, t);
      ellipse(x, y, 5, 5);
    }
    

    bezier points
    (source: processing.org)

    As always, more info can be found in the reference.