Skip to content

Latest commit

 

History

History

Week09_Animation

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Code
Code
 
 
Images
Images
 
 
Readings
Readings
 
 
Resources
Resources
 
 
README.md
README.md
 
 

README.md

John Whitney at his computer

ANIMATION

TLDR

  • Make a sketch that includes three animated "scenes" that play automatically and includes sound
  • Should run the full size of the browser window
  • For Nov 15: work-in-progress sketch with rough versions of at least two scenes; upload a screenshot of each scene to Canvas
  • For Nov 22: all three scenes in progress with sound; turn in one screenshot for each scene on Canvas
  • For Nov 29: project due, upload two screenshots of each scene and a link to your animation

ASSIGNMENT

Building on the ideas of interactivity we explored in the last assignment, as our last regular project your task is to create an animation in p5.js with three scenes and should include sound. While doing Pixar-level animation (or even cell animation like Looney Toons) is not really possible with the tools we have, we can explore motion, time, and change by making shapes and images move. Even with these simple tools you can make complex, rich, surprising, and visually-exciting animations!

For some prompts to consider, see the Resources folder for this week. This includes artist Richard Serra's Verb List as well as a list of verbs in the English language and some musical terms that describe change and flow.

Overall, please keep your animations to under 3 minutes! Shorter is fine too, but think about giving scenes enough time to unfold and for us to get into them.

SCENES
Your three "scenes" should be distinct parts that come one after another and should be triggered automatically. This might be based on a millis() or frameCount timer, or a condition being met (like an object reaching a certain point or an audio file ending). You should think about your sketch as a generative film: parts (secenes) that feel like parts of a cohesive whole. This might mean they build towards some kind of climax, are visually related or contrast with each other, etc. Think about the examples shown for ideas on what that might look like.

SOUND
Your animation should also include at least one sound. This can be background music/environmental sounds, sound effects triggered by different events, ambient sound, etc. Think about how sound creates a sense of space, context and flow (or contrasts or contradicts what we see visually). You can pull sounds from some of the websites listed in the Resources section below or record them yourself!

Above: a still from John Whitney's "Catalog." Made in 1961 using a decommissioned WW2-era M-5 Antiaircraft Gun Director, "Catalog" is what its name implies: a catalog of visual effects at the birth of computer graphics. (More info here, including a picture of Whitney's computer.)

CODE EXAMPLES/VIDEOS

DELIVERABLES

  • Animation with at least three scenes
    • Includes at least one sound (music or sound effects)
    • Starts via a user interaction like a click or key press
    • Automatically switches to the next scene
    • Runs fullscreen using createCanvas(windowWidth, windowHeight) (so you'll want to use width and height as much as possible)
  • Turn in link to animation and two screenshots of each scene, documenting the piece

INSPIRATION

RESOURCES