Category Archives: Animation

Bouncing Squares- Phasing

This is a simple animation of two squares Bouncing off the vertical walls of the screen. Phasing started to happen after a bounce, until they speed up and disappear. It’s created by using the difference between the lengths of the sides of two squares, and make them bounce by using different square for each side of the bounce.

Alien Game

This week for animation I tried to make a little game. Its based on the classic alien/sheep scenario combo (which I realized too late is actually an alien/cow scenario combo) but basically there’s an alien UFO with lasers and a sheep running around back and forth and if you catch the sheep between the lasers it disappears. In theory it’s been vaporized onto the UFO.  Sometimes it doesn’t disappear it just flickers though which is a weird glitch I’m trying to work out. At some point I’d like to manage to levitate the sheep instead of just vanishing it.


For this week’s assignment, we were supposed to create something that bounces off of walls. I decided to make a ball/circle that would change direction when the mouse was pressed or when it passed the width of the page on both sides. As the circle progressed towards the center of the screen, the background would become darker, while it would get lighter as it neared both edges of the screen. In order to accomplish this, I mapped the range of light blue to dark blue for the left half of the screen to the circle’s x value, so that the background would get darker as it approached the center of the screen. I did the opposite for the right half of the screen, going from dark to light. This creates a smooth transition from one color to the next.

I had wanted to change from purple or orange to the dark blue, but wasn’t sure how to accomplish that. I think I had to use lerpColor(), but I wasn’t sure how to accomplish that. Additionally, the number of times the mouse was pressed is counted in the right hand corner because I wanted to use type in some way. Because what I made kind of replicates watching the moon at night and controlling what time it is by reversing the direction, I may have been able to have the time proportional to where the moon was in the sky, but I just thought of this.

Below is a picture of my brainstorming process and an example of what it looks like.

Code on GitHub

You can also use the program here

Bouncing Ball

Since I missed class last week I was a bit confused on some of the possibilities regarding angle, direction, and color changes. What I could figure out was how to increase the speed exponentially, which is always fun. I increased the speed by 1.1x each time, so it’s a slow burn, but eventually very satisfying.

Here’s a link

Color Bounce

I made the ball change color every time it hits the window. I only drew the background once, so the ball leaves colored trails behind. Since the colors are randomly generated, the result is different each time the script is run.

Here’s the code.

Try it yourself | Github