Duplicate bezier figure

Processing Coding Questions
1

Hi all,

I’ve created this simple figure by rotating a bezier curve:

void setup() {
  size(800, 800);
}

void draw() {
  background(255);
  translate(width/2, height/2);
    //produce figure by rotating bezier curve
    for (int i = 1; i < 100; i++) {
      for (int j = 10; j < 35; j++) {
        rotate(radians(20));
        pushStyle();
        beginShape();
        noStroke();
        fill(color(0,0,227), 30);
        vertex(0, 0);
        bezierVertex(i, i, 20, 60, j, j);
        endShape();
        popStyle();
      }
    }
}

however, when I try to re-create the same object using a PShape -as an intermediate state to create multiple objects- I don’t get the right results. Could someone help please?

Flower flower;

void setup() {
  size(800, 800);
  flower = new Flower(0,0);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  flower.display();
}

class Flower {
  PShape f;
  float x,y;
  Flower(float tempX, float tempY) {
    x = tempX;
    y = tempY;
    f = createShape();
    f.beginShape();
    //produce figure by rotating bezier curve
    for (int i = 1; i < 100; i++) {
      for (int j = 10; j < 35; j++) {
        f.rotate(radians(20));
        pushStyle();
        f.noStroke();
        f.fill(color(0,0,227),30);
        f.vertex(0, 0);
        f.bezierVertex(i, i, 20, 60, j, j);
        popStyle();
      }
    }
    f.endShape();
  }  
  void display() {
    shape(f);
  }
}
2

Would this work:

void flower(int x, int y) {
  translate(x, y);
  for (int i = 1; i < 100; i++) {
    for (int j = 10; j < 35; j++) {
      rotate(radians(20));
      beginShape();
      noStroke();
      fill(color(0, 0, 227), 30);
      vertex(0, 0);
      bezierVertex(i, i, 20, 60, j, j);
      endShape();
    }
  }
}

void setup() {
  size(600, 600, P3D); 
}

void draw() {
  background(209);
  pushMatrix();
  flower(200,200);
  popMatrix();
  pushMatrix();
  flower(300,300);
  popMatrix();
  pushMatrix();
  flower(400,400);
  popMatrix();
}

With this technique you have to use pushMatrix() accompanied by popMatrix() to restore the origin when drawing each flower in order to place them where the coordinates indicate they should be placed. There likely is an easier way to do this.

3

Hey @Erif,

First you wanna use the P2D renderer. The default renderer is not displaying bezierVertex properly.

size(800, 800, P2D);

Then for your flower I went the easy way.

  1. Draw 1 petal
  2. Create a shape with the petal correctly rotated
  3. Join all the petals into 1 shape
Flower f;

void setup() {
  size(800, 800, P2D);
  f= new Flower(20);
}

void draw() {
  background(20);
  
  translate(width / 2, height / 2); // move the flower to the center
  f.show();
}


class Flower {
  PShape f;
  
  Flower(int nbOfPetals) {    
    f = createShape();
    f.setFamily(0); // Needed to say that the shape is a group of shapes 
    
    float da = TWO_PI / nbOfPetals;   

    for (int i = 0; i < nbOfPetals; i++) {
      PShape petal = createShape(); // Create a petal shape
      petal.beginShape();
      
      petal.fill(240, 240, 240, 60);
      petal.noStroke();
      
      petal.rotate(i * da); // Rotate the petal the proper amount (based of number of desired petals)
      
      petal.vertex(0, 0);
      petal.bezierVertex(-10, -10, -20, -100, 0, -100);
      petal.bezierVertex(20, -100, 10, -10, 0, 0);
      petal.endShape();
      
      f.addChild(petal); // Add the newly created petals to the flower shape
    }
  }
  
  void show() {
    shape(f);
  }
}

And to add on why your solution was not working, rotating the PShape does not work the way rotating the canvas works.
When rotating the PShape you rotate the way it will be displayed but if after you add new vertices, it will not take into account the rotation.

1 Like
4

For whatever it’s worth, I found this reference in one of the old forums:
https://forum.processing.org/two/discussion/23781/beziervertex-does-not-behave-as-expected-if-stored-as-pshape.html

I don’t know if it was ever fixed or whether it could explain some of your difficulty getting this to work.

3 Likes
5

Hi both, thanks for the quick reply!
I’ve been exploring since yesterday both solutions. Will come back to you soon.
Cheers

1 Like
6

Hi @svan, thanks for the code tip. It worked really well!!.. and sorry for the delay, had a business trip in between.
Cheers!

7

Hi @jb4x, that was a pretty elegant solution to create a flower. Thanks a lot!! However I put the code of that flower object for simplicity. My figure is a bit more complicated and can’t be divided in a shape that gets n-times replicated. Still, I’ll keep the code handy as it’ll help in the future :blush:

…and sorry for the delay in replying, had a business trip in between.
Cheers!

1 Like