Working individually, you will integrate the coding elements from this week’s classes to create an interactive animation in Processing. You may animate your creation from Recitation 5, or draw and animate something completely new. Regardless of what you choose to animate, your Processing sketch should include some level of interaction (i.e. keyboard or mouse). Take a video of your interactive animation, and upload this, along with your code, to the documentation blog.

Although this seemed like a small program that does nothing much, its original idea was fancier. I have thought about making a little game that this little guy here runs from an end of a horizon to the other end, with some ditches on his way and the users’ responsibility is to control him to hop through these ditches. This is how it should look like:

However, due to time limitations, I gave up running and made this hopping program. Since I think this is the central problem of my final idea, I this it turned out good even I didn’t get the chance to get to the entire thing. Here is the code:

int head = 20;
int speedY = -5;
int x = 50;
int y = 120;
int hight = 0;

void setup(){
  size(100, 200);
  background(255);
  status2(x, y);
}

void status1(int u, int v){
  fill(0);
  ellipse(u, v, head, head);
  quad(u-4, v+head/2+3, u-19, v+ head/2+23, u-15, v+head/2+26, u, v+head/2+6);
  quad(u, v+head/2+6,u+4, v+head/2+3, u+19, v+head/2+23, u+15, v+head/2+26);
  rect(u-10, v+head/2+10, 20, 25);
  quad(u, v+head/2+35, u-4, v+head/2+32, u-22, v+head/2+32+24, u-18, v+head/2+32+27);
  quad(u-22, v+head/2+32+24, u-16, v+head/2+32+32, u-12, v+head/2+32+29, u-18, v+head/2+32+21);
  quad(u, v+head/2+35, u+4, v+head/2+32, u+22, v+head/2+32+24, u+18, v+head/2+32+27);
  quad(u+18, v+head/2+32+27, u+15, v+head/2+32+23, u+23, v+head/2+32+17, u+26, v+head/2+32+21);
}

void status2(int u, int v){
  fill(0);
  ellipse(u, v, head, head);
  quad(u-4, v+head/2+3, u-19, v+ head/2+23, u-15, v+head/2+26, u, v+head/2+6);
  quad(u, v+head/2+6,u+4, v+head/2+3, u+19, v+head/2+23, u+15, v+head/2+26);
  rect(u-10, v+head/2+10, 20, 25);
  rect(u-7, v+head/2+35, 5, 30);
  rect(u-7, v+head/2+60, 10, 5);
  rect(u+2, v+head/2+35, 5, 30);
  rect(u+2, v+head/2+60, 10, 5);
}

void jump(){
  if (mousePressed && hight < 22){
    background(255);
    y = y+speedY; 
    status1(x, y);
    hight += 1;
  }else if(!mousePressed && height>0){
    if (y<120){
      background(255);
      y = y-speedY;
      status1(x,y);
    }else if(y>=120){
      background(255);
      hight = 0;
      status2(50,120);
    }
  }else if(mousePressed && height>=22){
    if (y<120){
      background(255);
      y = y-speedY;
      status1(x,y);
    }else if(y>=120){
      background(255);
      hight = 0;
      status2(50,120);
    }
  }
}

Additional Recitation Homework:

Step 1:

Create a Processing sketch with a circle or square at the center of the screen. Your canvas size should be 600 x 600.

Step 2:

Next, modify that Processing sketch so that the circle or square periodically expands and contracts, like the circle in this gif.

Step 3:

Then, modify the Processing sketch so that the the the outline changes color smoothly, as seen in the gif below. HINT: set the colorMode() to HSB.

Step 4:

Finally, modify that Processing sketch so that the circle or square moves around the canvas based on your keyboard’s arrow key input. As an added bonus, you may make your canvas’ edges a border that the circle or square cannot pass.

Some Comments:

Although it is a shame that I didn’t have enough time in class to finish the idea of my animation, I can see how it can be developed into the completed version. I got a peek in this class of how time-consuming it can be for programmers to code even the simplest thing: I spent about an hour drawing the black little guy. I can’t but pay my respect to animation makers and game makers of their perseverance of developing a vivid character.

I got help on Step 3 from Joseph Yang and I’m really grateful. At first, I tried to write the program with a for loop. However, my program just doesn’t work, so I came to him for help. He told me that since the draw() function is already a loop, it won’t work if I nest another loop in it.  That’s when I realized that I’ve been blinded by the endless nature of the draw() function and haven’t been treating it like a loop where variable changes. I’ll learn a lesson from that in my future programs.

Here is a list of useful functions I used:

colorMode(mode, value1, value2, value3)
map(value, a, b, c, d)
if (keyCode==someValue){} //used after key==CODED