Animating Sketch 101

Processing Coding Questions
1

Hi All,

Below is my first sketch, I am aiming to animated it (besides bouncing around the window). I am in some serious need of pointers of how I should set up my code to have a shape appear and disappear with the mouse is pressed.

For example, programming it to have it’s closed beak disappear - replaced with an open beak when the mouse is pressed, and vice versa. Or having it’s eyes close when it is flying. Something that gives it personality.

Please don’t ‘give’ me the answer, but rather help point how I can trouble shoot this.

(I have been watching tutorial after tutorial, so please forgive me if this question is a repeat and kindly point to one that will actually show me how to do what I am looking for)

Thanks for you insights!

Original Code

float x = 50;
float y = 50;

float xspeed = 2;
float yspeed = 1;

boolean flying = false;

void setup() {
  size(760, 560); // set size of window
}

void draw() {
   background(255); // set background to white
   if (flying) {

   x = x + xspeed;
   y = y + yspeed;
   
   if (( x > width/4) || (x < 0 )) {
     xspeed = xspeed * -1;
   }
     if (( y > height/4) || (y < 0 )) {
     yspeed = yspeed * -1;
   }
   }
     
//left foot
line(x + 190, y + 450, x + 210, y + 430);
line(x + 190, y + 450, x + 210, y + 470);
line(x + 210, y + 470, x + 250, y + 450);
line(x + 250, y + 450, x + 230, y + 430);

//right foot
line(x + 390, y + 430, x + 370, y + 450);
line(x + 370, y + 450, x + 410, y + 470);
line(x + 410, y + 470, x + 430, y + 450);
line(x + 430, y + 450, x + 410, y + 430);

//left leg
  fill(127);
  rect(x + 210, y + 370, 20, 60, 127);

//right leg
  fill(127);
  rect(x + 390, y + 370, 20, 60, 127);

//body
line(x + 90, y + 370, x + 530, y + 370); //base
line(x + 90, y + 370, x + 130, y + 310); //left corner
line(x + 530, y + 370, x + 490, y + 310); //right corner

//left wing
bezier(x + 130, y + 310, x + 90, y + 270, x + 50, y + 210, x + 30, y + 170); //bottom wing cuve
bezier(x + 190, y + 210, x + 250, y + 210, x + 70, y + 190, x + 30, y + 170); //top wing curve

//right wing
bezier(x + 490, y + 310, x + 530, y + 270, x + 590, y + 210, x + 610, y + 170); //bottom wing curve
bezier(x + 450, y + 210, x + 510, y + 210, x + 550, y + 190, x + 610, y + 170); //top wing curve

//head
line(x + 250, y + 130, x + 310, y + 50); //left side
line(x + 390, y + 130, x + 330, y + 50); //right side
//line(x + 310, y + 50, y + 330, y + 50); //top

//feathers
bezier(x + 310, y + 50, x + 270, y + 10, x + 260, -10 + y, x + 250, -30 + y); //left feather left curve
bezier(x + 250, -30 + y, x + 260, -10 + y, x + 310, y + 10, x + 310, y + 50); //left feather right curve
bezier(x + 320, y + 50, x + 300, y + 10, x + 330, -30 + y, x + 350, -50 + y); //center feather left curve
bezier(x + 350, -50 + y, x + 330, -10 + y, x + 300, y + 30, x + 320, y + 50); //center feather right curve
bezier(x + 330, y + 50, x + 350, -10 + y, x + 370, -10 + y, x + 410, -10 + y); //right feather left curve

//eyebrows
noFill(); // left eyebrow
beginShape();
vertex(x+250, y+90);
bezierVertex(x + 210, y + 70, x + 190, y + 90, x + 160, y + 130);
endShape();

noFill(); // right eyebrow
beginShape();
vertex(x + 400, y + 80);
bezierVertex(x + 410, y + 70, x + 490, y + 90, x + 470, y + 130); 
endShape();

//eyes
ellipseMode(CORNER);  //set ellipseMode is top left CORNER
fill(255);  // set fill to white
ellipse(x + 175, y + 122, 95, 100); //left white ellipse
 
ellipseMode(CORNER);  //set ellipseMode to CORNER
fill(100);  // set fill to gray
ellipse(x + 205, y + 180, 40, 40);  // left gray ellipse

ellipseMode(CORNER);  //set ellipseMode is top left CORNER
fill(255);  // set fill to white
ellipse(x + 370, y + 122, 95, 100); //right white ellipse
 
ellipseMode(CORNER);  //set ellipseMode to CORNER
fill(100);  //set fill to gray
ellipse(x + 400, y + 180, 40, 40);  //right gray ellipse

//beak nostrils
fill(255); // set fill to white
ellipse(x + 310, y + 210, 5, 20); //left
ellipse(x + 330, y + 210, 5, 25); //right

//beak
line(x + 250, y + 250, x + 270, y + 250); //left short line
line(x + 270, y + 250, x + 330, y + 310); //left long line
line(x + 390, y + 250, x + 370, y + 250); //right short line
line(x + 370, y + 250, x + 330, y + 310); //right long line



noFill();
beginShape();
vertex(x + 210, y + 370);
bezierVertex(x + 190, y+360, x+180, y+340, x+170, y+310); // left belly line
endShape();

noFill();
beginShape();
vertex(x + 410, y + 370);
bezierVertex(x + 430, y + 360, x + 440, y + 340, x + 450, y + 310); // right belly line
endShape();
}

void mousePressed (){
  if (flying) {
  flying = false;
  } else {
  flying = true;
  }
}
1 Like
2

It’s easier to have a new separate variable indicating what you want to achieve

Eg boolean eyesClosed = false;

Now when you draw the eyes evaluate eyesClosed

You can also have more advanced things like opening closing eyes slowly

Then you can (again separately codewise) alter eyesClosed by a timer or upon collision or on mousePressed

For other features use a new variable

2 Likes
3

For changes in shape use arc() - see reference - with different angle instead ellipse/circle

1 Like