Today’s Plan

Today’s Groups

ABateel, Jonathan, Enayet, Sanie
BDanielle, Jane, Kim
CSachi, Dorothy, Gabriel
DJennifer, Amber, Talia

Homework Review

Today’s Learning Objectives


Keep Sketching!

Post 5 sketches that explore using code to create smooth, pre-rendered animations.

You may work on one idea over multiple sketches, but: post work-in-progress as you go and don’t work on at least three different ideas this week.

Challenge: Three Second Comp Form Bumper

Create a three second bumper for Computational Form.

Reference: My MTV MTV Fantastic Four Pub Much Nick

Quick Gallery

Real-time vs Pre-rendered

When talking about rendering animation:

The most important aspect of real-time animation is that the frames displayed are generated as they are being displayed. For animation to appear smooth, frame rates must be relatively high. Typical animation frame rates are 24 or 30 fps. To achieve those rates, each frame of animation must be draw in about 30-40 milliseconds. VR applications target 90 fps, leaving only about 10 milliseconds to draw the scene.

In exchange for limiting how much time can be spent rendering each frame, we gain a huge benefit. Real-time animation can to information—including user input—not known ahead of time. This allows animation to be interactive.

However, limiting the time spent rendering each frame often means compromising on the quality or complexity of the animation. Pre-rendering provides its own huge benefit: pre-rendered animations can take as long as they need to render things. This allows for frames with very high quality and complexity.

Clocks for Real-time vs Pre-rendered

Using millis()

In real-time rendering it is common that the time between frames might vary. Some frames are simple and render faster, some are more complex and render relatively slowly. Some systems will simply wait a bit before showing a simple frame, to ensure that frames are displayed at an even rate. This doesn’t always work out. Sometimes a frame take too long, misses the deadline, and leads to dropping frames.

Because you can not count of the frame rate being steady, it is best to measure time using a real-time clock source. The millis() function returns the number of milliseconds since the sketch started. p5 reference

Try changing the frame rate in the example above to 5 or 10. The animation becomes far less smooth, but the rate at which the ellipse bobs and changes color is unchanged.

Using frameCount

If you are pre-rendering your animation, you don’t care how long each frame takes. You know that the frames will be played back at a steady pace. For pre-rendered animation base time on the current frame. The frameCount variable holds the current frame being drawn. p5 reference

Try changing the frame rate in the example above to 5 or 10. The ellipse bobs and changes colors much more slowly now, but every frame needed for smooth playback is rendered.

Deterministic Variation

If you use random() to create variation and you want that variation to be consistent between frames, you will need to use random() seed or switch to another strategy to create variation like using noise().

Keeping a Beat

When pre-rendering your animation you will often want to be able to convert the current frame number to the playback time. You can use floor() and modulo % for this.

Using Modulo %

var targetFrameRate = 30;
var secondPart = floor(frameCount/targetFrameRate);
var framePart = frameCount % targetFrameRate;

You can also use Modulo to keep track of other rhythms.

// for a 30fps animation, beat will be 0 every 2 seconds.
var beat = frameCount % 60;

Also note that the times above are related to the expected playback speed, even though p5 is rendering the animation faster than that.

Using Sine sin()

The sin() function will give you a nice, periodic function that sweeps from -1 to 1 and back down. It is useful for so many things. For example, it is great at creating smooth changes over time.

// generate a sine wave with a period of one second
var s = sin(frameCount/targetFrameRate*2*PI);

Exporting Frames from p5

The save() function will create and download an image of the current frame of the sketch. This will trigger an avalanche of downloads. It is a good idea to empty out your downloads folder to make things easier to manage.

Stitching Frames

There are many applications that can take a sequence of frames and stitch them into a movie. Quicktime 7 works well. FFmpeg is a powerful command line utility for this and other video tasks. FFmpeg is a good choice for automated/back-end workflows. After Effects is a good choice if you are going to use the animation as part of a larger animated composition.

You can even do it with photoshop:

  1. Open Photoshop.
  2. Choose File > Open.
  3. Click on the first file of your sequence.
  4. Check Image Sequence.
  5. From the Timeline dropdown menu choose Render Video....
  6. Adjust export settings.
  7. Click Render