# How do I make a shape grow?

**URL:** <https://discourse.processing.org/t/how-do-i-make-a-shape-grow/10095>\
**Category:** Coding Questions\
**Created:** [April 8, 2019, 2:52pm UTC](https://discourse.processing.org/t/how-do-i-make-a-shape-grow/10095 "2019-04-08T14:52:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cesca](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@cesca](https://discourse.processing.org/u/cesca)\
**Post date:** [April 8, 2019, 2:52pm UTC](https://discourse.processing.org/t/how-do-i-make-a-shape-grow/10095/1 "2019-04-08T14:52:20Z")

</div>

I’m super new to processing. How do I make my flower shape grow or make it look like it’s “blooming”? The size it is now is the max size I want, but how do I make it so it starts from a 0 size to grow into that?

```auto
void setup() {
  size(600, 600);  
  frameRate(4);  
  
}

void draw() {
 
   if (mousePressed) {
      drawFlower(mouseX, mouseY);

    }
  }

void keyPressed() {
  background(180);
  drawFlower(100, 80); 
}

void drawFlower(float posx, float posy) {
  pushMatrix();
  translate(posx, posy);
  fill(255,255, 255, 200);
  stroke(255,255, 255, 200);
  
  beginShape();
  int n = 6; 
  for (int i = 0; i < n; i++) {
    float a = map(i, 0, n, 0, TWO_PI);
    float a1 = map(i + 1, 0, n, 0, TWO_PI);    
    float r = 60;
    float x = r * cos(a);
    float y = r * sin(a);
    float x1 = r * cos(a1);
    float y1 = r * sin(a1);  
    vertex(0, 0);
    bezierVertex(x, y, x1, y1, 0, 0);  
  }
  endShape();
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [April 8, 2019, 3:40pm UTC](https://discourse.processing.org/t/how-do-i-make-a-shape-grow/10095/2 "2019-04-08T15:40:15Z")

</div>

you could do something like this

```auto
ArrayList<Flower> flowers;

void setup() {
  size(600, 600);  
  frameRate(30);  
  flowers = new ArrayList<Flower>();
}

void draw() { 
  background(0);
  if (mousePressed) {
    flowers.add(new Flower(mouseX, mouseY, 0, 60));
  }

  for (int i = 0; i < flowers.size(); i++) {
    Flower flower = flowers.get(i);
    flower.update();
    flower.present();
  }
}

class Flower
{
  float x, y, radius, radiusEnd;
  public Flower(float x, float y, float radiusStart, float radiusEnd) {
    this.x = x;
    this.y = y;
    this.radius = radiusStart;
    this.radiusEnd = radiusEnd;
  }

  void update() {
    radius = min(radius + 1, radiusEnd);
  }

  void present() {

    pushMatrix();
    translate(x, y);
    fill(255, 255, 255, 200);
    stroke(255, 255, 255, 200);

    beginShape();
    int n = 6; 
    for (int i = 0; i < n; i++) {
      float a = map(i, 0, n, 0, TWO_PI);
      float a1 = map(i + 1, 0, n, 0, TWO_PI);    
      float x1 = radius * cos(a);
      float y1 = radius * sin(a);
      float x2 = radius * cos(a1);
      float y2 = radius * sin(a1);  
      vertex(0, 0);
      bezierVertex(x1, y1, x2, y2, 0, 0);
    }
    endShape();
    popMatrix();
  }
}

```

edit: looks like this

![flowers](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5aebf3c101a05b45e22a5d9442d2fee8f7e30456.gif)

---

<div class="post-metadata">

**Author:** ![cesca](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@cesca](https://discourse.processing.org/u/cesca)\
**Post date:** [April 8, 2019, 5:00pm UTC](https://discourse.processing.org/t/how-do-i-make-a-shape-grow/10095/3 "2019-04-08T17:00:54Z")

</div>

Thank you so much! How can I make them grow faster?

---

<div class="post-metadata">

**Author:** ![cesca](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@cesca](https://discourse.processing.org/u/cesca)\
**Post date:** [April 8, 2019, 5:04pm UTC](https://discourse.processing.org/t/how-do-i-make-a-shape-grow/10095/4 "2019-04-08T17:04:55Z")

</div>

Nevermind, figured it out! Thank you! 🙏 😊