zapra – AnimatedLoop

View code

Circular easing function for tongue
Golan's frame exporter


After exploring some ideas for walking cycles, bubbling stew, bees and other critters, I think I subconsciously drew inspiration for this frog from these cinnamon toast crunch characters, who have the dumbest expressions and horrifically long tongues:

I knew I wanted him to flick his tongue and give the appearance of being alive, but the nuances of his breathing and eye movement developed as I started on p5 and played with the variables. When choosing the easing function, I flipped through the examples in p5.func until I found one with the elastic motion I was looking for ("circular in"). The rest of his body movement is based on sinusoidal curves, as I found it best to give the impression of heavy frog breath.

Debugging the flies (haha get it?). I created a function using butterfly curves to draw their paths (equation source in code).

I certainly learned a lot about nonlinear motion and designing programs that actually loop frames. Also, who would have thought that making the gif would be just as hard as the actual animation? I'm also learning more about mining the web for solutions rather than trying to come up with everything from scratch. I'm definitely getting more comfortable reading and understanding code that I want from existing programs, like extracting the easing function for the tongue movement. If I had more time, I wish I could've done more.  I had intended for a more complex background, and feel pity for the frog that he'll never actually catch any flies. For now, he'll just have to look on hungrily, dinner always just out of reach.



This piece took a lot longer than I though it would. In the end, I think I'm happy with it, but I would probably try to add more interesting parts to the fire if I could. It was very difficult to get a shape where I wanted it and moving how I wanted it to, so my initial idea of having a lot of individually-moving parts wasn't super feasible. My vision was of the fire being more chaotic. Because fire is so organic, it feels wrong to have this uniformly-moving, symmetrical set of shapes representing it, so if I could change that I probably would.

I used the adjustable-center exponential sigmoid function, with a different center and different phases for different parts of the piece. At first, I wanted to use a bunch of different easing functions, but I realized that this easing in and out function was what I wanted, and that the different parts of the fire are all reacting to the same thing, so it makes sense for them to behave similarly.

p5.js code:


I first spent a long time making this the wrong way, with a dx and dy for each object that incremented cx and cy with each call of the draw function. Mistake! That was not the purpose of the assignment, but it gave me good practice.

I also got a decent amount of trig and geometry practice by borrowing Golan's triangle-circle arc transformation code, to implement the bouncing guys as circles who would transform into triangles and back as they bounced (see sketches.) However, this didn't provide the naturalistic bouncing I wanted so I deviated from my original plan. Ultimately, I never got the squishy effect I wanted, this probably required a more complex simulation of the bouncing entity that took 3D volume, gravity, and density into account.

The easing algorithms I chose were quadratic for squishing width / height(the simplest option that was more interesting than linear,) and smoothStep for bouncing / movement. In real life, the effect of gravity is closer to a parabola, but I liked how smoothStep looked.

I don't think this piece is conceptually strong or memorable, but I did learn a lot. Now that I have a better handle on p5 and animation, I can hopefully start making more interesting work.

p5 sketch

Paper sketches:


Link to p5js:

I was inspired by the those trippy illusion patterns initially and decided to make some interesting variation based on those images. I used sine wave and SinIn ease-in function to control the individual radius for each arc and use and offset to make sure it the each radius varies. Then I used an array to store the traces to create a lagging with colors gradient. The motion blur is done by giving the background some transparency (big shoutout to Izzy's smart idea). Overall, I enjoyed the visual complexity of the loop i created but I hope that the motion can be more dynamic instead of just one shape rotating at the same place.

sovid – Animated Loop


She struts in all of her muscular glory! Sketch can be found here.

I immediately decided that I wanted to do a walk cycle for the loop, since it is something I've become very familiar with and makes sense as an infinite loop. In honor of Sophie Koko Gate's new animated short, "Slug Life", I decided to draw a character inspired by one of her characters.

I ended up using two different ease functions from the imported p5 library - sineInOut() for the arm and leg swing motion, and circularArcThroughAPoint() for the bouncing walk motion. I wrote the program without using object oriented programming, which was a big mistake on my part, but I was too far in to go back and change it. Drawing with arcs was definitely the most time consuming part of this assignment, as I had a clear idea of what I wanted my character to look like.

If I had more time I would add features like swinging hands and fingers, bending feet, and a moving background. I also would like to figure out a cleaner way to offset the swinging of her arms; although I ended up liking how she cartoonishly swings her hands when she walks, it was not what I originally intended.