Week 6 - Animations

Beyond the Mind’s Eye

Thoughts on Animation

Real-time vs. Prerendered

In real-time rendering, each frame of animation is rendered just before it is displayed on screen. The key advantage of this is that the animation can be influenced by user input. To achieve this each frame must be rendered in the time between frames. In some modern graphics engines, multiple frames are in various phases of rendering at the same time.


In real-time rendering it is common that the time between frames might vary, or that some frames might be dropped. Because of this it is best to use a real-time clock functions to keep track of the animation time. The current frame number is unreliable for timing.


When pre-rendering each frame may take much longer than the animation frame rate to render, and the render times for each frame may vary drastically. However, since the resulting frames will be played back at a stable frame rate, it doesn’t matter how long they take to render. In this case, using the frame number for timings is the best choice.

Parametric + Deterministic


Exporting Frames

The save() function and its friends will save and download your current canvas frame as an image. You will want to empty out your downloads folder first.








Stitching Frames

How I usually do it: Quicktime 7

How I also sometimes do it: FFmpeg

Other options (some out of date): Convert an image sequence to a movie

How We will do it (and I might start doing it this way): Photoshop

Periodic Functions

Using Modulo %

Using Sine sin()



LerpColor() is handy


Create a daily sketch exploring the topics presented in class. Post an image of your results each day to the class sketch blog.