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.


I agree with the essay that a lot of art actually lie between first word art and last word art and the boundary between the two should not be clearly defined. Art are always built upon the ideas of each other, directly or indirectly, while originality still exists, so I tend to not define myself in the spectrum. Similarly, the development of technology should not be classified into first word art or last word art. Therefore,to respond to the idea that technologically novel works don't always age well, I believe that even though the work itself might fall out of trend very soon due to its experimental nature, it still provides valuable experience to the successors to learn from, which actually extends its lifespan into the culture/trend rather than shortens it. Culture is not created by one single pioneer work but anyone who are influenced by the precedents in the field and passes down the influence to others through their own works.

sovid – Reading 03

While I disagree with those mentioned in the article who say that first word art is not art, I would place myself and my interests closer to the last word art side of the spectrum. While I aim to create new and interesting stories for my animations, I do want to create something new and meaningful in a largely accessible and heavily used medium, 3D software. New advancements in 3D software, however, fall into a deeper subdivision of the spectrum - if a new version of Maya comes out with new and unheard of simulation systems built in, for example, then the well-known tool becomes something that people can begin to experiment with once again. The idea of novel ideas not aging well is interesting because there are cases where that is true and cases where that is false. Molnár's generative plotter drawings were certainly revolutionary for the time and she still continues to make work using similar ideas and techniques that she had early on in her career.

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.


I think technology and culture are tightly interwoven. Culture shapes which problems we think are important to address, research, and develop new technology to solve. Technology often gives rise to the metaphors we use to talk about culture (I keep seeing articles about how everything used to be compared to steam engines, but now it's all compared to computers with metaphors like putting together a vitamin stack or the human mind being software while the brain is hardware or whatever.) I can't help using these metaphors because they're the predominant framework of the age I was educated in. I do wonder, though, whether I'll still be stuck on the same topics in 30 years.

Maybe this makes me a boring person, but I like having a framework to understand what I'm looking at, so I appreciate last-word art for that. First word art is interesting by definition, because novelty creates interest. But without hindsight, it's difficult to tell what's merely interesting from what's interesting and meaningful. I think this is why many artists fall into the trap of making art with cutting-edge tech purely to show off their mastery of the tech. I suppose a lot of the art which I am drawn to, including some work with neural networks, is a hybrid of first- and last-word art. The works use very new technology to approach ancient, memorable questions in a novel way.


It's hard to pinpoint where I lie on the spectrum of first word art to last word art because I grew up in a very traditional view of art that encompassed representation and the gestural qualities of the hand, but since coming to CMU I have more or less abandoned that practice, not necessarily by choice. The domain of CMU's School of Art lies on the first word art side of the spectrum, but even as I have shifted to fit into that range, I still believe I lean more towards last word art than many of my peers. In Naimark's theory, all the art that is in between--including mine--have no particular lasting significance beyond the label "art". I am pretty okay with that, however. My goal as an artist is not to make lasting art, whether through novelty or through mastery. My goal is to make art that is interesting now, which ultimately lie best in the middle of the spectrum anyways.

Technology is the optimal medium to achieve things that are interesting now. I don't have anything to say about how technology and culture shape each other besides the obvious: that they are a positive feedback loop. Since technology is inherently ephemeral, our work won't persist if it is solely based on the novelty of technology. That doesn't mean technological art can't last, however. Technology is just another medium to express core ideas. If the idea persists, then the work will persist, as well. That is the one failing of Naimark's theory of first word and last word art; it fails to remember all the art in between that have persisted.



I think my interests vacillate between first word and last word art (plus this status is fundamentally unstable because of the passage of time). New technologies change everything from how we understand our physical bodies, to how we perceive time and space. Here is an example of how technology shapes culture and culture shapes technology:

In 1983 John Updike composed, on his Wang word-processor (an early word processor) a peculiar poem titled, INVALID.KEYSTROKE, which demonstrates his particular encounter with this new writing technology:








At the time, Updike was using an early word-processor, which, like many others at the time, denoted and displayed spaces between words or characters with a floating period. While this formatting convention can be traced back to an older one known as interpunct, which was used for inter-word separation in Latin script, it was unfamiliar enough for Updike to compel him to deploy it both as a formal and symbolic feature of his poem. Regarding the poem's formal qualities, Kirschenbaum observes, "what we Updike substituting an approximation of a special formatting code with an ordinary punctuation mark, a gesture that speaks at once to his sensitivity toward the unique characteristics of the medium he is working in as well as the limits of his personal know-how" (Track Changes, 85).

Quite frankly, I am not sure if I really care about conflating a thing's importance with how well it stands the test of time. New technology, as it was may go obsolete in 30 year's time but the ideas that it embodied most likely will be held within the technology that comes after--experimentation and elaboration are in a feedback loop!