# How to draw a flower, rotate petals

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.

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

1 Like

try this

``````

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);
}
``````
2 Likes

Thanks for your guide, I appreciate it!

1 Like

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

2 Likes

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?

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

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. 1 Like

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.

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

}
``````

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

here, use arc()

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

``````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);
}
//
``````
1 Like

Dear Chrisir,
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

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

fill(255);
textFont(font,30);
text("OPSSIE DAISY",145,645);

//leafs
fill(0,230,138);
noStroke();
ellipse(432,584,-90,120);
rotate(PI/4);

}
``````

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

``````
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);
}
``````
1 Like

What does translate mean?

See the tutorial I mentioned https://www.processing.org/tutorials/transform2d/

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

``````  rotate(PI/4);
``````

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

``````  translate(432, 584);
``````

It moves the origin of the canvas.

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

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

2 Likes

you want this in setup

not in draw

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

1 Like

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

do you notice the small delay before the text appears?

That’s why

you want this in setup, AFTER size

not in draw

1 Like

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

does it work?

if not, show your entire code

``````PFont font;

void setup () {
size(600, 800);
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);
}
``````

these lines remain in draw() please

only loadFont in setup after size 