I knew I wanted to try to create the illusion of an object moving down a staircase using a loop. However, it was very difficult to time the movements of each object. After a few trials and errors, I was able to understand the key elements of creating an animated loop.  I think I was able to successfully achieve the motion and rotation of the square falling. However, if I had more time, I would’ve played around with the animation of the cube (from the bottom of the staircase to the top) more. I would’ve also tried to make the floating staircase more dynamic—flying up to catch the cube at the right time.

(initial sketches)


Link to OpenProcessing Project

It was actually quite difficult to create an animated gif through code because I was used to having a user’s input (like mouse, keys, etc)  be the parameters for interaction and movement. However, with an animated gif, the main driver of movement is time, which got some getting used to. I wish that I made the animation more dynamic, but I realize that this animation is not supposed to take up a lot of time. I had a lot of other things on my plate, so I kept it simple. Since there is a 3 color limit, I think I should have chosen a different subject that is a bit more abstract rather than something that requires many different colors to understand what it is.

Here is my sketch before I made the animation:


I succeeded in learning to draw isometric cubes (using scale-shear-rotate) in p5 and to use p5.func and createLoop to make a seamless loop. I didn’t totally understand the t01 calculation in Golan’s code – it seems like it’s figuring out what frame we are on and normalizing it, but I would have thought the 3000 is loop duration*1000, but changing that value completely bugged out the animation so I assume it’s related to framerate in some way. it’s the same as doing animLoop.progress (where are we in the animation from 0 to 1), but they don’t play well together for GIF export because they may be phase-offset.

I took a long time to decide what to do for my loop, as I wanted to try to do something more conceptual, but in the end went with this simple visual. Could have better heeded the “This is a mini-project, so KEEP IT SIMPLE” note.

It’s not a very complex animation, but it’s elegant and works well. An easy strategy to make it more visually impressive could just be to make a grid of the module I’ve built (taking a cue from our references), perhaps shifting the timing of each row so it’s a cascade / canon of sorts. Edit: Added this.


Dr. Mario – Loop

For my Rhythm Loop I re-made a classic optical illusion that makes it seem like the balls on the inside are moving in a circle when they are actually all moving in straight lines. I tried to find a zen-like colour scheme to go with it as I thought it was quite peaceful.

I feel like I succeed quite well in making an infinite loop but I feel like I could have made it more complex like some of my other ideas.  I feel like this could go quite well as a background with some lofi music to back it, but I’m not sure how I would get music to work in p5js or how to make it loop unless I make it myself.

The gif is way faster than the original so click on it to see how fast it actually goes.