How to draw a flower, rotate petals

tengtengloves · March 29, 2020, 3:30pm

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

Chrisir · March 29, 2020, 4:17pm

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

tengtengloves · March 29, 2020, 4:49pm

Thanks for your guide, I appreciate it!

Chrisir · March 29, 2020, 4:54pm

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

see https://www.processing.org/tutorials/transform2d/

tengtengloves · March 29, 2020, 5:18pm

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

Chrisir · March 29, 2020, 6:32pm




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.

tengtengloves · March 30, 2020, 5:43am

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

tengtengloves · March 30, 2020, 5:45am

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

Chrisir · March 30, 2020, 7:16am

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

tengtengloves · March 30, 2020, 9:42am

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

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

}

Chrisir · March 30, 2020, 12:49pm

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

please read this when you have time


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

tengtengloves · March 30, 2020, 12:54pm

What does translate mean?

Chrisir · March 30, 2020, 12:59pm

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)

Chrisir · March 30, 2020, 1:16pm

you want this in setup

not in draw

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

tengtengloves · March 30, 2020, 1:19pm

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

Chrisir · March 30, 2020, 1:21pm

do you notice the small delay before the text appears?

That’s why

you want this in setup, AFTER size

not in draw

tengtengloves · March 30, 2020, 1:23pm

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

Chrisir · March 30, 2020, 1:24pm

does it work?

if not, show your entire code

tengtengloves · March 30, 2020, 1:24pm

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

Chrisir · March 30, 2020, 1:25pm

these lines remain in draw() please

only loadFont in setup after size

Topic		Replies	Views
How to draw a perfect flower Coding Questions	8	257	July 10, 2024
Help with complex homework(Solved) Coding Questions homework	26	972	October 16, 2021
Color changing flower screen saver Beginners homework	4	383	October 14, 2021
Help with drawing a "rose" that draws each "petal" with a different random color Coding Questions homework	3	1146	October 17, 2020
Rotate problem with PGraphics Coding Questions	4	416	June 29, 2022

How to draw a flower, rotate petals

Related topics