|A||Bateel, Jonathan, Enayet, Sanie|
|B||Danielle, Jane, Kim|
|C||Sachi, Dorothy, Gabriel|
|D||Jennifer, Amber, Talia|
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.
Create a three second bumper for Computational Form.
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.
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.
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.
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
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.
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.
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);
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.
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: