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
Help with complex homework(Solved) Coding Questions homework	26	920	October 16, 2021
Color changing flower screen saver Beginners homework	4	348	October 14, 2021
Help with drawing a "rose" that draws each "petal" with a different random color Coding Questions homework	3	1117	October 17, 2020
Arrays to draw lines Coding Questions	0	1212	October 5, 2018
Very simple question - I think Coding Questions	9	517	July 3, 2020

How to draw a flower, rotate petals

Related Topics