Category Archives: Animation

Miracle Flower – Make it Grow!

This simple game revolves around protecting the miracle tulip that is struggling to grow and flourish in this otherwise barren stretch of land. The player must water the plant from the very obliging and cheerful rain cloud (mouse press over the cloud) while preventing the pesky deer from nibbling on miracle plant.

Let it growwww, let it growww

(Frozen, anyone? - just kidding, we want want warm weather)

In order to play the game properly, all the images and font set must be downloaded as well. They can be downloaded: here

Here is all the code:


PS. (Disclaimer): Sorry I meant to post this a while ago but after actual presentation day when this project was due, but I had no internet that day (which is why I used a USB to present) and I delayed in posting it out of sheer forgetfulness…Awkward: I think after that delay I think I prematurely saved the draft and quit before actually posting (apologies!!)

Omnipotent Creepy Clown

For this little exercise, my idea was to have a circus tent in the background with a clown that appears. However, the result is a massive clown that bounces around the screen. His movement is programmed, but can be manipulated by the placement of the mouse. One of the things I’d like to change is the size of the clown. I’d also like to learn how to make him multiply with a mouseClick.

Here’s my code:

PImage clown;

float size = 10;
float posX = 10;
float posY = 20;
float speedX = 3;
float speedY = 3;
void setup(){
clown = loadImage(“circus-clown.jpeg”);


void draw(){
posX = posX + speedX;
posY = mouseY + speedY;

if(posX > width ||posX < 0){
speedX = speedX * -1;
if(posY > height ||posY < 0){
speedY = speedY * -1;

image(clown, posX-40, posY-20);


Moving Circles

For this project I wanted to do something with many moving parts. I got the circles to work!



Screen Shot 2014-03-03 at 2.31.34 PM


Help Pacman!


Look at how lonely and hungry he is. Won’t you help? My plan was to make Pacman (which I did!) and have it gobble up bouncing balls (which I didn’t do).

Things I have trouble with: multiple classes/variables(?) in Processing

If any of you can help, add some wizardry/magic to it, that’d be very cool. Code below!





Confetti-eating clouds

I was trying to create a game with Kat’s code of falling glitter (something like Catch the Falling Glitter with the Bucket) but I didn’t know how to make the glitter disappear into the bucket.

For now, here’s a very simple screensaver inspired by Kat’s random color variable. I had a lot of fun playing with this.

The code:

Interactive Screen Saver… what?

So I wanted to make something that would allow the bouncing ball to vary speed, direction, and size. However, once I started I tried messing with speed when I would click, but I could not get the effect I wanted and though I knew why I didn’t know how to fix it. But I was able to change direction and location of the ball. So I made a screensaver that is the stereo typical bouncing ball, but if you were to click on the screen the ball would move to where you clicked and would move in the opposite direction of that which it was bouncing in before. I also wanted it to erase after a while after you let it sit for a while or if you click so that it doesn’t get too crazy.

Here is the code:

And I made it color-changing too!


bouncing travolta


Screen Shot 2014-03-03 at 2.11.23 PM

Last night I was watching the Oscars and John Travolta (for some reason) presented the singer of the song for Frozen. Word on the street is that he butchered the singers name. Regardless, his appearance inspired me to create an animation. Here is the John Travolta bouncing ball. Pretty hypnotizing, huh?




Animated Eyes

I wanted to make something interactive, so I made eyes that blink with the mouse movement. I dunno, it got a little weird. You can see it here.



When It All Falls Down

Screen Shot 2014-03-03 at 12.47.32 PM

For this project I wanted to create more than one circle and have them almost fall down the screen. I had to create a circle object to do this for more than one circle to appear.

Here is a link to the video of the output



The Big Cheese

I made a really simple animation with a bouncing ball and the image of a mouse.  The mouse follows your computer mouse. I would have liked to have the ball disappear when the mouse goes over the cheese ball, but I wasn’t sure how to do that.

Screenshot 2014-03-03 12.27.08

mouse and cheese


Bouncing mini seizure

With some help from the very animated video teacher and Anna, I figured out the basics of the direction changes via if statements. After getting the bare bones, I added some elements of randomness to the color, size, and speed of the ball for a slightly-more exciting bouncing mini-seizure.

Here is the .pde file

Just for fun, here is the .pde file of the interactive drawing I made in class




Sorry Leo

Last week’s been crazy and I’ve missed the Oscars because I was on the plane. So I made this to let out my anger and despair.

屏幕快照 2014-03-03 7.24.36 AM

here’s the video for it :3.

bounce oscar

The result turned out a bit too simplistic. I was trying to make the letters stay on the screen for a bit, and when you move the cursor over the letters would start to wiggle, and when you click your mouse, it triggers the movement. But somehow I couldn’t manage for it to work. Anyways, here it is.

It’s alright, next year, Leo.


Multiply the Rainbow

In this animation, a single bubble will bounce around the screen. However, it will spawn itself upon hitting the walls and the colors will eventually cycle through the rainbow.

Something mysterious will happen when the mouse is pressed (and if it’s too much, you can undo the coolness by pressing a key)

Orange is a terrible color


The Remix to Ignition

Screen Shot 2014-03-03 at 2.02.28 PM

For my bounce project, I decided to incorporate R. Kelly’s lovely jam: “Ignition (Remix)”

I tried to make the edges solid by having it bounce off of the diameter, rather than the center, but I encountered some difficulties with making it work on the 0 X and 0 Y axis. Maybe you guys could tell me why.

The ball is programmed to cycle through a random rainbow of colors while bouncing faster and faster (as it gets more and more excited by the smoothness of the tunes) until it is eventually moving too fast for us to see.


Here is a video of my program running, followed by the code. The screencap quality isn’t the best, so I apologize for the jumpiness.

With Caleb’s help, I fixed the aforementioned bugs, making my edges solid. Not as concise, I could combine the X and the Y into || statements, but I may want to insert a random change depending on the wall that the ball hits,  so I will leave it as is. I also added a random speed change when the mouse is pressed and took out the auto acceleration. Here is my new code and a video:

bounce 2



dem bouncy linez


I made a screensaver type animation with bouncing lines with random opacity and a bullseye pattern in the corner to play with the rotate function.

Here is a sketch. 


The Impossible Game!

A simple game where the player tries to stop the moving square inside one of the grid boxes. To stop the square, press ‘g’. Try to get the square to fit inside a box before it turns red green! The game is (almost) impossible because depending on the screen size the square and the box might not align, and the rotation of the square might also throw off the alignment! Muahaha…