# How to draw a flower, rotate petals

**URL:** <https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143>\
**Category:** Coding Questions\
**Created:** [March 29, 2020, 3:30pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143 "2020-03-29T15:30:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 29, 2020, 3:30pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/1 "2020-03-29T15:30:23Z")

</div>

Hi all, I’m have no idea with coding but I really tried hard to fix it.  
I was stuck to draw on the flower petal code, I have tried for couple times but it not works.

The flower petal couldn’t be rotated. Plus, when I rotate it, the face will turn it up as well. I hope to get someone to look on my code and revise it. Thanks for advance

Attach below is my code in processing.

```auto
void setup (){
  size(600,600);
}

void draw(){
background(0,0,153);

//first petal 
fill(255,255,255);
ellipse(300,145,95,200);
ellipse(390,140,95,200);

//face
fill(255,219,77);
ellipse(300,300,300,300);
noStroke();

//eyes
fill(38,38,38);
ellipse(255,265,30,55);
ellipse(345,265,30,55);

//mouth
  arc(300, 340, 65, 90, 0, 90);
}

```

 ![Screen Shot 2020-03-25 at 12.05.42 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0ba0fb3e7c9edfd7301020368747c1586a02d0b6.jpeg)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 29, 2020, 4:17pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/2 "2020-03-29T16:17:02Z")

</div>

try this

```auto

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

void draw() {
  background(0, 0, 153);

  //first petal
  fill(255, 255, 255);
  pushMatrix();
  translate(300-100+30, 340-150-100-20);
  for (int i=0; i <12; i++) {
    translate(133, 0);
    ellipse(0, 0, 95, 200);
    //ellipse(390, 140, 95, 200);
    rotate (TWO_PI/12);
  }
  popMatrix(); 

  //face
  fill(255, 219, 77);
  ellipse(300, 300, 300, 300);
  noStroke();

  //eyes
  fill(38, 38, 38);
  ellipse(255, 265, 30, 55);
  ellipse(345, 265, 30, 55);

  //mouth
  arc(300, 340, 65, 90, 0, 90);
}

```

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 29, 2020, 4:49pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/3 "2020-03-29T16:49:49Z")

</div>

Thanks for your guide, I appreciate it!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 29, 2020, 4:54pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/4 "2020-03-29T16:54:18Z")

</div>

not sure if the leaves / ellipses are rotated correctly. They don’t seem to rotate exactly around their individual center

see [https://www.processing.org/reference/ellipseMode\_.html](https://www.processing.org/reference/ellipseMode_.html)

see [https://www.processing.org/tutorials/transform2d/](https://www.processing.org/tutorials/transform2d/)

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 29, 2020, 5:18pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/5 "2020-03-29T17:18:26Z")

</div>

by the way, how can I draw the green stem?  
When I try to move on drawing, how can I consider the correct place for it?

```auto
void setup () {
  size(600, 800);
}

void draw() {
  background(0, 0, 153);

  //first petal
  fill(255, 255, 255);
  pushMatrix();
  translate(360-90-30, 300-95-95-0);
  for (int i=0; i <9; i++) {
    translate(130, 0);
    ellipse(0, 10, 100, 200);
    rotate (TWO_PI/9);
  }
  popMatrix(); 
  
  //face
  fill(255, 219, 77);
  ellipse(300, 300, 300, 300);
  noStroke();

  //eyes
  fill(38, 38, 38);
  ellipse(255, 265, 30, 55);
  ellipse(345, 265, 30, 55);

  //mouth
  arc(300, 340, 65, 90, 0, 90);
}

//draw green stem
stroke(0, 128, 0);
line(100, 100, 100, 300);

//leafs
ellipse(105, 200, 10, 10);
ellipse(95, 225, 10, 10);

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 29, 2020, 6:32pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/6 "2020-03-29T18:32:35Z")

</div>

```auto

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

void draw() {
  background(0, 0, 153);

  //first petal
  fill(255, 255, 255);
  pushMatrix();
  translate(360-90-30, 300-95-95-0);
  for (int i=0; i <9; i++) {
    translate(130, 0);
    ellipse(0, 10, 100, 200);
    rotate (TWO_PI/9);
  }
  popMatrix();

  //face
  fill(255, 219, 77);
  ellipse(300, 300, 300, 300);
  noStroke();

  //eyes
  fill(38, 38, 38);
  ellipse(255, 265, 30, 55);
  ellipse(345, 265, 30, 55);

  //mouth
  arc(300, 340, 65, 90, 0, 90);

  //draw green stem
  translate(150, 433); 
  strokeWeight(7); 
  stroke(0, 128, 0);
  line(100, 100, 100, 300);

  //leafs
  ellipse(105, 200, 10, 10);
  ellipse(95, 225, 10, 10);
}

```

The stem lines where OUTSIDE the closing bracket } of draw(). Bad.

😉

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 30, 2020, 5:43am UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/7 "2020-03-30T05:43:43Z")

</div>

How to curve the line for the green steam exactly the same with the illustration that I have attached. I have tried to set the code with curve but doesn’t work.

```auto
void setup () {
  size(600, 800);
}

void draw() {
  background(0, 61, 153);

  //first petal
  fill(255, 255, 255);
  pushMatrix();
  translate(360-90-30, 300-95-95-0);
  noStroke();
  for (int i=0; i <9; i++) {
    translate(130, 0);
    ellipse(0, 10, 100, 200);
    rotate (TWO_PI/9);
    noStroke();
  }
  popMatrix(); 
  
    //draw green stem
strokeWeight(8);
stroke(0, 128, 0);
line(900,850,160,300);
  
  //face
  fill(255, 219, 77);
  noStroke();
  ellipse(300, 300, 300, 300);

  //eyes
  fill(38, 38, 38);
  ellipse(255, 265, 30, 55);
  ellipse(345, 265, 30, 55);

  //mouth
  arc(300, 340, 65, 90, 0, 90);
  
}

```

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 30, 2020, 5:45am UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/8 "2020-03-30T05:45:02Z")

</div>

I have followed the tutorials to make curve line but doesn’t work.  
Hope to get your sample revise it, I really appreciate it!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2020, 7:16am UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/9 "2020-03-30T07:16:00Z")

</div>

here, use arc()

when the stem is finished move its code to the top so that it is behind the flower

```auto
void setup () {
  size(600, 800);
}

void draw() {
  background(0, 61, 153);

  //first petal
  fill(255, 255, 255);
  pushMatrix();
  translate(360-90-30, 300-95-95-0);
  noStroke();
  for (int i=0; i <9; i++) {
    translate(130, 0);
    ellipse(0, 10, 100, 200);
    rotate (TWO_PI/9);
    noStroke();
  }
  popMatrix();

  //face
  fill(255, 219, 77);
  noStroke();
  ellipse(300, 300, 300, 300);

  //eyes
  fill(38, 38, 38);
  ellipse(255, 265, 30, 55);
  ellipse(345, 265, 30, 55);

  //mouth
  arc(300, 340, 65, 90, 0, 90);

  //draw green stem

  strokeWeight(8);
  stroke(0, 128, 0);
  // line(900, 850, 160, 300);

  noFill();
  arc(width-311, height-111, 
    265, 590, 
    PI+QUARTER_PI+QUARTER_PI, TWO_PI);
}
//

```

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 30, 2020, 9:42am UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/10 "2020-03-30T09:42:35Z")

</div>

Dear Chrisir,  
I’m glad to have your advice and revise,  
Thanks for your patience and help!  
I have tried everything and fix it on my own 😇

However, I have one last questions,  
how can I rotate the leaf that I want to draw besides the green stem?  
I not sure if the code correctly, hope to get some revise

```auto
PFont font;

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

void draw() {
  background(0, 61, 153);
  
  //draw petals
  fill(255, 255, 255);
  pushMatrix();
  translate(360-90-30, 300-95-95-0);
  noStroke();
  for (int i=0; i <9; i++) {
    translate(130, 0);
    ellipse(0, 10, 100, 200);
    rotate (TWO_PI/9);
    noStroke();
  }
  popMatrix(); 
  
    //draw green stem

  strokeWeight(15);
  stroke(0, 230, 138);
  // line(900, 860, 180, 300);
  
  noFill();
  arc(width-330, height-110, 
    280, 599, 
    PI+QUARTER_PI+QUARTER_PI, TWO_PI);

  //face
  fill(255, 219, 77);
  noStroke();
  ellipse(300, 300, 300, 300);

  //eyes
  fill(38, 38, 38);
  noStroke();
  ellipse(255, 265, 30, 55);
  ellipse(345, 265, 30, 55);
  
  //mouth
  noFill();
   strokeWeight(8.5);
   stroke(5);
   arc(300, 320, 85,85,0,PI);
   
   font=loadFont("Montserrat-ExtraBold-30.vlw");
  fill(255);
  textFont(font,30);
  text("OPSSIE DAISY",145,645);
  
   //leafs
fill(0,230,138);
noStroke();
 ellipse(432,584,-90,120);
 rotate(PI/4);

}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2020, 12:49pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/11 "2020-03-30T12:49:45Z")

</div>

there is a tutorial about 2D Transformation (rotation is one of those)

please read this when you have time

```auto

PFont font;

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

void draw() {
  background(0, 61, 153);

  //draw petals
  fill(255, 255, 255);
  pushMatrix();
  translate(360-90-30, 300-95-95-0);
  noStroke();
  for (int i=0; i <9; i++) {
    translate(130, 0);
    ellipse(0, 10, 100, 200);
    rotate (TWO_PI/9);
    noStroke();
  }
  popMatrix();

  //draw green stem

  strokeWeight(15);
  stroke(0, 230, 138);
  // line(900, 860, 180, 300);

  noFill();
  arc(width-330, height-110, 
    280, 599, 
    PI+QUARTER_PI+QUARTER_PI, TWO_PI);

  //face
  fill(255, 219, 77);
  noStroke();
  ellipse(300, 300, 300, 300);

  //eyes
  fill(38, 38, 38);
  noStroke();
  ellipse(255, 265, 30, 55);
  ellipse(345, 265, 30, 55);

  //mouth
  noFill();
  strokeWeight(8.5);
  stroke(5);
  arc(300, 320, 85, 85, 0, PI);

  font=createFont("Montserrat-ExtraBold-30.vlw", 30);
  fill(255);
  textFont(font, 30);
  text("OPSSIE DAISY", 145, 645);

  //leafs
  fill(0, 230, 138);
  noStroke();
  translate(432, 584);
  rotate(PI/4);
  ellipse(30, 0, 
    45, 120);
}

```

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 30, 2020, 12:54pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/12 "2020-03-30T12:54:11Z")

</div>

What does translate mean?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2020, 12:59pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/13 "2020-03-30T12:59:09Z")

</div>

See the tutorial I mentioned [https://www.processing.org/tutorials/transform2d/](https://www.processing.org/tutorials/transform2d/)

Remember that every rotation is around 0,0, like here:

```auto
  rotate(PI/4);

```

to place he leaf and the rotate it on the spot you need translate.

```auto
  translate(432, 584);

```

It moves the origin of the canvas.

```auto
  rotate(PI/4);
  ellipse(30, 0, 
    45, 120);

```

(then you use ellipse with 0,0 as its position, or close to this)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2020, 1:16pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/14 "2020-03-30T13:16:01Z")

</div>

you want this in setup

not in draw

` font=createFont("Montserrat-ExtraBold-30.vlw", 30);`

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 30, 2020, 1:19pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/15 "2020-03-30T13:19:50Z")

</div>

but if start in the beginining, doesn’t show the words.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2020, 1:21pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/16 "2020-03-30T13:21:25Z")

</div>

do you notice the small delay before the text appears?

That’s why

you want this in setup, AFTER size

not in draw

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 30, 2020, 1:23pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/17 "2020-03-30T13:23:04Z")

</div>

Ya, I have setup after the size but it abit delay.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2020, 1:24pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/18 "2020-03-30T13:24:17Z")

</div>

does it work?

if not, show your entire code

---

<div class="post-metadata">

**Author:** ![tengtengloves](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@tengtengloves](https://discourse.processing.org/u/tengtengloves)\
**Post date:** [March 30, 2020, 1:24pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/19 "2020-03-30T13:24:32Z")

</div>

```auto
PFont font;

void setup () {
  size(600, 800);
   font=loadFont("Montserrat-ExtraBold-30.vlw");
  fill(255);
  textFont(font,30);
  text("OPSSIE DAISY",145,645);
}

void draw() {
  background(0, 61, 153);
  
  //draw petals
  fill(255, 255, 255);
  pushMatrix();
  translate(360-90-30, 300-95-95-0);
  noStroke();
  for (int i=0; i <9; i++) {
    translate(130, 0);
    ellipse(0, 10, 100, 200);
    rotate (TWO_PI/9);
    noStroke();
  }
  popMatrix(); 
  
    //draw green stem

  strokeWeight(15);
  stroke(0, 230, 138);
  // line(900, 860, 180, 300);
  
  noFill();
  arc(width-330, height-110, 
    280, 599, 
    PI+QUARTER_PI+QUARTER_PI, TWO_PI);

  //face
  fill(255, 219, 77);
  noStroke();
  ellipse(300, 300, 300, 300);

  //eyes
  fill(38, 38, 38);
  noStroke();
  ellipse(255, 265, 30, 55);
  ellipse(345, 265, 30, 55);
  
  //mouth
  noFill();
   strokeWeight(8.5);
   stroke(5);
   arc(300, 320, 85,85,0,PI);

   //leafs
   fill(0,230,138);
   noStroke();
   translate(400, 550);
   rotate(PI/5);
   ellipse(40,0,55,95);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2020, 1:25pm UTC](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143/20 "2020-03-30T13:25:36Z")

</div>

> [@tengtengloves](#):
>
> fill(255);  
> textFont(font,30);  
> text(“OPSSIE DAISY”,145,645);

these lines remain in draw() please

only loadFont in setup after size

😉

[Next page](https://discourse.processing.org/t/how-to-draw-a-flower-rotate-petals/19143.md?page=2)