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

Processing Coding Questions
1

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:

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.

1 Like
2

pls repair above code posting,

  • by using in processing IDE [ctrl][t]
  • and here at the forum editor use for code the
</> code tag

so it might look like

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

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

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
for the head?

1 Like
3

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


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
SNAG-0087.jpg506×528 22.3 KB

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 …) {

1 Like