Category: 02-Loop

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.

https://openprocessing.org/sketch/1462969

(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.

Code

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.