# Trying to do an animation, how can I make the mushroom go from closed to open?

**URL:** <https://discourse.processing.org/t/trying-to-do-an-animation-how-can-i-make-the-mushroom-go-from-closed-to-open/10614>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [April 24, 2019, 11:52pm UTC](https://discourse.processing.org/t/trying-to-do-an-animation-how-can-i-make-the-mushroom-go-from-closed-to-open/10614 "2019-04-24T23:52:50Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![karatecake](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@karatecake](https://discourse.processing.org/u/karatecake)\
**Post date:** [April 24, 2019, 11:52pm UTC](https://discourse.processing.org/t/trying-to-do-an-animation-how-can-i-make-the-mushroom-go-from-closed-to-open/10614/1 "2019-04-24T23:52:50Z")

</div>

My animation is a mushroom with a closed cap that when clicked opens like an umbrella exposing the stalk more. I have no idea where to go from here because my professor has not given us enough information. There is much more I need to add to this but before I go further I’d like some understanding of the mushrooms animation.  
Here’s what I have so far:

```auto
color bColor = color(255, 255, 255); (disregard)
 
void setup() {
  size(500,500);
//BACKGROUND GRADIENT START
  int r=0;
  int g=0;
  int b=0;
  
  int myStrokeWeight = 3;
  
  for (int i = 0; i< height; i++)
{  
  stroke(r,i,b);
  line(0,i,width,i);
}
//BACKGROUND GRADIENT END

}

void draw() {
  bColor = color(mouseX, 255, mouseY); (disregard)
//BCOLOR CAN BE USED TO REPLACE FILL
  
//dirt floor
fill(#4d3300);
rect(-1,360,500,500);

//mushroom stalk
fill(#ffffe6);
noStroke();
rect(225,120,50,330);
ellipse(250,450,50,10);

//mushroom head
fill(#c2c2a3);
bezier(180,270,210,-50,290,-50,320,270);
}

```

Is there a way to switch between different beziers without an obvious transition? If it’s possible to have 2 mushroom head versions and move between the two that would be preferable.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 25, 2019, 2:02am UTC](https://discourse.processing.org/t/trying-to-do-an-animation-how-can-i-make-the-mushroom-go-from-closed-to-open/10614/2 "2019-04-25T02:02:01Z")

</div>

pls repair above code posting,

- by using in processing IDE [ctrl][t]
- and here at the forum editor use for code the

```auto
</> code tag

```

* * *

so it might look like

```auto
void setup() {
  size(500, 500);
}

void draw() {
  my_background();
  my_mushroom();
}

void my_background() { //BACKGROUND GRADIENT START
  int r=0, g=0, b=0;
  for (int i = 0; i< height; i++) {
    stroke(r, i, b);
    line(0, i, width, i);
  }
} //BACKGROUND GRADIENT END

void my_mushroom() {
  fill(#4d3300); //dirt floor
  rect(-1, 360, 500, 500);
  fill(#ffffe6); //mushroom stalk
  noStroke();
  rect(225, 120, 50, 330);
  ellipse(250, 450, 50, 10);
  fill(#c2c2a3); //mushroom head
  bezier(180, 270, 210, -50, 290, -50, 320, 270);
}

```

* * *

ok to your question,  
the head of the mushroom is your

```auto
bezier(180,270,210,-50,290,-50,320,270);

```

if you know already that the idea is to make that variable,  
how you can draw that hard coded?  
a very variable version would use

```auto
int mx, my, mw, mh;

```

like for the outer rectangle of the head.  
after you have that running we talk about the animation.

? is it your idea to use  
[https://processing.org/reference/bezier\_.html](https://processing.org/reference/bezier_.html)  
for the head?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 25, 2019, 2:18pm UTC](https://discourse.processing.org/t/trying-to-do-an-animation-how-can-i-make-the-mushroom-go-from-closed-to-open/10614/3 "2019-04-25T14:18:50Z")

</div>

as a example i can show you some calculations for the  
control and points use by bezier  
and a test animation

```auto

void setup() {
  size(500, 500);
  frameRate(10);
}

void draw() {
  my_background();
  my_mushroom();
  animate_open();
}

void my_background() { //BACKGROUND GRADIENT START
  int r=0, g=0, b=0;
  for (int i = 0; i< height; i++) {
    stroke(r, i, b);
    line(0, i, width, i);
  }
} //BACKGROUND GRADIENT END

int mx=250, my=270, mxc=80, myc=0, mw=120, mh;
boolean dbug=true;

void my_mushroom() {
  fill(#4d3300); //dirt floor
  rect(-1, 360, 500, 500);
  fill(#ffffe6); //mushroom stalk
  noStroke();
  rect(225, 120, 50, 330);
  ellipse(250, 450, 50, 10);
  fill(#c2c2a3); //mushroom head
  //bezier(180, 270, 210, -50, 290, -50, 320, 270);
  int p1x = mx-mw/2, p1y = my; // P1
  int c1x = mx-mxc/2, c1y =myc; // control 1
  int c2x = mx+mxc/2, c2y =myc; // control 2
  int p2x = mx+mw/2, p2y = my; // P2
  bezier(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y);
  if (dbug) {
    stroke(200, 0, 0);
    line(c1x, c1y, p1x, p1y);
    text("p1",p1x, p1y+10);
    text("c1",c1x, c1y+10);    
    line(p2x, p2y, c2x, c2y);
    text("c2",c2x, c2y+10);    
    text("p2",p2x, p2y+10);
  }
}

void animate_open() {
  if ( mw < 370 ) mw+=2;
  if ( my > 150 ) my--;
  if (dbug) println(" mw "+mw+" my "+my);
}

```

 ![SNAG-0087](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b3b382be5afed2fa1f9082b75140eae4508d5a11.jpeg)

* * *

now you need to change that in the way that you can call that already function  
with parameters  
void my\_mushroom(int mx, int my …) {