# How to draw a perfect flower

**URL:** <https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734>\
**Category:** Coding Questions\
**Created:** [July 8, 2024, 2:35pm UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734 "2024-07-08T14:35:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ruka](https://avatars.discourse-cdn.com/v4/letter/r/aca169/32.png) [@Ruka](https://discourse.processing.org/u/Ruka)\
**Post date:** [July 8, 2024, 2:35pm UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/1 "2024-07-08T14:35:06Z")

</div>

I tried to draw a zinnia, but the first petal is always at the bottom and cannot form a perfect loop with the last petal. How can I modify the code?

```auto
float r=400;
float kuan=200;
float chang=400;

void setup() {
  fullScreen();
  background(#82A584);
  stroke(#D8A2AA);
  strokeWeight(6);
  fill(#FA677D);
}

void draw() {
  translate(width/2, height/2);
  for (int i=4; i>0; i--) {
    scale(0.8);
    for (int j = 0; j<18; j++) {
      ellipse(0, -r, kuan, chang);
      rotate(TWO_PI/18);
    }
  }
}

```

 ![屏幕截图 2024-07-08 215604](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/c/3c59ae0731f6a9a520322d0f3010ba3f4799ec77.png)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [July 8, 2024, 3:38pm UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/2 "2024-07-08T15:38:41Z")

</div>

Welcome to the forum

> [@Ruka](#):
>
> cannot form a perfect loop with the last petal.

Not sure what you mean by this 🤔

I modified your code to get this image. Is this what you want to achieve?

 ![Screenshot 2024-07-08 at 16.35.15](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/d/7de4f3e1d98a8c557db9cb51359b0c035b210ef1.jpeg)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 8, 2024, 5:33pm UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/3 "2024-07-08T17:33:21Z")

</div>

Hello @Ruka,

This may help:

> [@Underlap and overlap](https://discourse.processing.org/t/underlap-and-overlap/43158/3):
>
> Hello @Ernest, Consider using PGraphics to achieve this: [image] I am sharing some of the code for one half as an example. You can complete the rest. PGraphics pg2; void setup() { size(400, 400); pg2 = createGraphics(400, 400); noLoop(); } void draw() { background(220); int numCircles = 6; float radius = 100; float centerX = width/2; float centerY = height/2; pg2.beginDraw(); for (int i = 0; i \< numCircles; i++) { float angle = TWO\_PI / numCircles \* i - TAU/2; …

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/a/8a5eb377788e491273374204ca3c31377ca10864.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Ruka](https://avatars.discourse-cdn.com/v4/letter/r/aca169/32.png) [@Ruka](https://discourse.processing.org/u/Ruka)\
**Post date:** [July 9, 2024, 4:34am UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/4 "2024-07-09T04:34:33Z")

</div>

This is not the image I want to achieve, but thank you for you reply. 😄

---

<div class="post-metadata">

**Author:** ![Ruka](https://avatars.discourse-cdn.com/v4/letter/r/aca169/32.png) [@Ruka](https://discourse.processing.org/u/Ruka)\
**Post date:** [July 9, 2024, 4:36am UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/5 "2024-07-09T04:36:08Z")

</div>

This is the image I want. Thank you for you reply. I will try to complete the code. 😄

---

<div class="post-metadata">

**Author:** ![Ruka](https://avatars.discourse-cdn.com/v4/letter/r/aca169/32.png) [@Ruka](https://discourse.processing.org/u/Ruka)\
**Post date:** [July 9, 2024, 10:12am UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/6 "2024-07-09T10:12:08Z")

</div>

Now, I have two methods to solve the overlapping issue.

The first method is using the **PGraphics**.

```auto
PGraphics pg2;
int numCircles = 18;
float r=400;
float kuan=200;
float chang=400;

void setup() {
  fullScreen();
  noLoop();
  pg2 = createGraphics(width, height);
  background(#82A584);
}

void draw() {
  // draw the picture
  pg2.beginDraw();
  pg2.translate(width/2, height/2);
  pg2.fill(#FA677D);
  pg2.strokeWeight(6);
  pg2.stroke(#D8A2AA);
  for (int i = 0; i < numCircles; i++) {
    pg2.rotate(TWO_PI/numCircles);
    pg2.ellipse(0, r, kuan, chang);
  }
  pg2.endDraw();

  // cut the picture
  PImage img2 = pg2.get(width/2, 0, width, height);

  // paste the picture
  translate(width/2, height/2);
  for (int i = 4; i>0; i-=1) {
    scale(0.8);
    image(img2, 0, -height/2);
    rotate(PI);
    image(img2, 0, -height/2);
  }
  line(-width*2,0,width*2,0);
  line(0,-height*2,0,height*2);
  save("zinnia_PGraphics.png");
}

```

 ![zinnia_PGraphics](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/1/e1192dffb127bd3ac0c31eb0d2b9eff06e5a2fe5.png)  
The result is good, but the code itself is not a loop.

The second one is using the **P3D**.

```auto
int pedalNum = 18;
float r=400;
float kuan=400;
float chang=400;

void setup() {
  fullScreen(P3D);
  noLoop();
  background(#82A584);
  stroke(#D8A2AA);
  strokeWeight(6);
  fill(#FA677D);
}

void draw() {
  translate(width/2, height/2, 0);
  for (int i = 4; i>0; i--) {
    scale(0.7);
    translate(0,0,400);
    for (int j = 0; j<pedalNum; j++) {
      push();   
      rotateZ(TWO_PI/pedalNum*j);
      rotateY(PI/3);
      ellipse(0, -r, kuan, chang);
      pop();
    }
  }
  translate(0,0,200);
  stroke(120);
  line(-width,0,width,0);
  line(0,-height,0,height);
  save("zinnia_P3D.png");
}

```

 ![zinnia_P3D](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/8/e8ab74ab338e1cb534484b965698982e77674d03.png)  
The code is a correct loop, but pedals are **slanted**. I don’t know the reason why the pedal is slanted and how to eliminate the slant. Can someone help to improve the code?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 9, 2024, 12:08pm UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/7 "2024-07-09T12:08:18Z")

</div>

> [@Ruka](#):
>
> but pedals are **slanted**. I don’t know the reason why the pedal is slanted and how to eliminate the slant. Can someone help to improve the code?

See references:  
_[ortho() / Reference / Processing.org](https://processing.org/reference/ortho_.html)_  
_[perspective() / Reference / Processing.org](https://processing.org/reference/perspective_.html)_

They are still slanted just the view has changed.

You may want to look at the tutorials for this and work on translation and rotations in 3D.

Try a slight angle so they overlap.

Hints and tips:

```auto
void draw() {
  translate(width/2, height/2, 0);
  
  rotateX(PI/2); //Side view!
  
  push();
  for (int i = 4; i>0; i--) {
    scale(0.7);
    //translate(0, 0, 40);
    for (int j = 0; j<pedalNum; j++) {
      push();   
      rotateZ(TWO_PI/pedalNum*j);
      rotateY(PI/3); //This seems a bit too much!
      ellipse(0, -r, kuan, chang);
      pop();
    }
  }
  pop(); 
}

```

`:)`

---

<div class="post-metadata">

**Author:** ![Ruka](https://avatars.discourse-cdn.com/v4/letter/r/aca169/32.png) [@Ruka](https://discourse.processing.org/u/Ruka)\
**Post date:** [July 9, 2024, 2:27pm UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/8 "2024-07-09T14:27:09Z")

</div>

Thank you for you patient and inspirational reply. 😄  
I finally figured out that it is the default **perspective projection** leads to the slant. Using the **orthographic projection** `ortho()` will eliminate the slant.  
Parameters of the pedal and rotation angle have also been modified.

```auto
int pedalNum = 18;
int layer = 4;
float radius = 400;
float pedalWidth = 200;
float pedalHeight = 400;

void setup() {
  fullScreen(P3D);
  background(#82A584);
  stroke(#D8A2AA);
  strokeWeight(6);
  fill(#FA677D);
  ortho(); // eliminate the slant
  noLoop();
}

void draw() {
  translate(width/2, height/2, 0);
  for (int i = layer; i>0; i--) {
    scale(0.7);
    translate(0, 0, 400);
    for (int j = 0; j<pedalNum; j++) {
      drawPedal(TWO_PI/pedalNum*j);
    }
  }
}

void drawPedal(float angle) {
  push();
  rotateZ(angle);
  rotateY(radians(3));
  ellipse(0, -radius, pedalWidth, pedalHeight);
  pop();
}

```

 ![zinnia_P3D_ortho](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/8/a82493cce95c8083a912bf04cbb6828168a99209.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 10, 2024, 3:56am UTC](https://discourse.processing.org/t/how-to-draw-a-perfect-flower/44734/9 "2024-07-10T03:56:11Z")

</div>

Consider drawing multiple shapes in a loop for each petal and decreasing the size and transitioning the stroke color:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/f/af548321f1983062d2d5c7d40919f94bdbd07ffe.jpeg)

I did the above with grayscale but you can do some cool transitions!

Example for a circle:

```auto
size(300, 300);
strokeWeight(10);  
  
for(int j=0; j<128; j+=9) // Adjusted steps until appeared smooth
  {
  stroke(255-(128-j)); //Transition from one color to next
  println(j, 255-(128-j));
  circle(150, 150, 255-j);
  }

```

I _did not use these_ but they are there to experiment with in future:

- [lerpColor() / Reference / Processing.org](https://processing.org/reference/lerpColor_.html)
- [map() / Reference / Processing.org](https://processing.org/reference/map_.html)

Examples on website for these.

`:)`