# Drawing a flower-like shape

**URL:** <https://discourse.processing.org/t/drawing-a-flower-like-shape/31200>\
**Category:** Coding Questions\
**Created:** [July 12, 2021, 7:51am UTC](https://discourse.processing.org/t/drawing-a-flower-like-shape/31200 "2021-07-12T07:51:12Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![k5221](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@k5221](https://discourse.processing.org/u/k5221)\
**Post date:** [July 12, 2021, 7:51am UTC](https://discourse.processing.org/t/drawing-a-flower-like-shape/31200/1 "2021-07-12T07:51:12Z")

</div>

Hi, I want to draw shapes like this.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cb76cb04f29e8ce48d21a7f63d7e5afbe7896de8.png)

The function called “seed1” is supposed to take care of one of the curvy triangles, but when I call this function within the draw(), the second and third triangles look smashed (maybe it has something to do with the coordinate or angles passed for seed1).

Thanks much in advance for your help! 🙂

```auto
function setup() {
  createCanvas(400, 300);
  background(150);  
  noLoop();

  angleOffsetA = radians(3);
  angleOffsetB = radians(10);
}

function draw() {
  noStroke();
  fill(255, 150);
  translate(width/2, height/2);

  for (var i = 0; i < 3; i++) {
    push();
    rotate(i * TWO_PI/3);
    translate(-20, -20);
    seed1(10, 5, radians(90), 0, 0);

    pop();
  } 
}
const k = 1;
let n = 0;

function seed1(dotNum, dotSize, angle, x, y) {
  //pop();
  if (dotNum >= 1) {
    //push();
    dotNum = Math.round(dotNum);
  
    for (i = 0; i < dotNum; i++) {
        ellipse(x + (dotSize*i), y, dotSize, dotSize);
      }
      var newX = x + cos(angle) * dotSize;
      var newY = y - sin(angle) * dotSize;
      n += 0.03;
      seed1(dotNum - (1 - exp(-k * n)), dotSize, angle - angleOffsetA, newX, newY);
  }
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 12, 2021, 8:12am UTC](https://discourse.processing.org/t/drawing-a-flower-like-shape/31200/2 "2021-07-12T08:12:25Z")

</div>

Hi @k5221,

I copy pasted your code in the [p5 web editor](https://editor.p5js.org/) and two things :

- there’s a missing bracket, make sure to post a code that works 😉

- I have this error :

---

<div class="post-metadata">

**Author:** ![k5221](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@k5221](https://discourse.processing.org/u/k5221)\
**Post date:** [July 12, 2021, 8:29am UTC](https://discourse.processing.org/t/drawing-a-flower-like-shape/31200/3 "2021-07-12T08:29:38Z")

</div>

Hi @josephh,

Thank you for your reply. I’m sorry for the code. I edited my post and now the code is at least working. I would appreciate if you could help me look into it!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 12, 2021, 8:54am UTC](https://discourse.processing.org/t/drawing-a-flower-like-shape/31200/4 "2021-07-12T08:54:53Z")

</div>

Thanks for the fix, I think that your error is that you need to reset `n` before each call to the `seed1` function. That’s why you had strange results :

```auto
const k = 1;
let n = 0;

function setup() {
  createCanvas(400, 300);
  background(150);
  noLoop();

  angleOffsetA = radians(3);
  angleOffsetB = radians(10);
}

function draw() {
  noStroke();
  fill(255, 150);
  translate(width / 2, height / 2);

  for (var i = 0; i < 3; i++) {
    push();
    rotate((i * TWO_PI) / 3);
    translate(-20, -20);
    
    n = 0;
    
    seed1(10, 5, radians(90), 0, 0);

    pop();
  }
}

function seed1(dotNum, dotSize, angle, x, y) {
  if (dotNum >= 1) {
    dotNum = Math.round(dotNum);

    for (i = 0; i < dotNum; i++) {
      ellipse(x + dotSize * i, y, dotSize, dotSize);
    }
    
    var newX = x + cos(angle) * dotSize;
    var newY = y - sin(angle) * dotSize;
    
    n += 0.03;
    
    seed1(
      dotNum - (1 - exp(-k * n)),
      dotSize,
      angle - angleOffsetA,
      newX,
      newY
    );
  }
}

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c4d472f09b973994b0a344ef2653271d71d0a633.png)

_(when you ask a question, make sure to give the details about how you did this and the result you want to have : it had recursion and you want a curvy flower shape like this 😉 )_