My original goal in making this gif was to familiarize myself with loading animating picture files in p5.js. I started with a simple animation sequence that I processed in photoshop to isolate each element.
The hardest part was getting different cells to animate the frames at a different offset interval. The solution I used wasn’t very elegant but in the future I think I’ll set up some sort of data structure for frames that are being animated.
I used the PennerEaseInOutBack easing function to shift the entire frame of cells down smoothly. I think the smooth sweeping motion of the frame looks nice against the choppier, hand-drawn animation. The way it stretches slightly past the end point also makes the motion look like waves crashing. What I like about the gif is the way that the hand-drawn animations works with the perfect grid layout and smooth sweeping animation. The combination of those two qualities makes it satisfying for me to watch.
If I were to spend more time on it I would get more creative with the way that the animations are triggered. There are probably more interesting patterns and different ways activate the animation sequences of the folding papers. Although, I like how the colors become digital noise if you allow the image to slowly become out of focus. They represent the entire spectrum of invisible light, and when combined together, they form white.
High Resolution (1920×1920):
HUW MESSIE 