Apr 5: Physical computing and computational art


Using Processing, create a simple program of your own design that demonstrates some of the techniques we learned in class.

Mouse input, loops, random number generation, colour and drawing are all topics to explore.

Points to keep in mind:

  • All code must be your own. Include your name in a //commment at the top of your sketch. Include a credit and source for any code you have used as a reference or model. Use a comment at the beginning of your sketch to do this.
  • Test carefully
  • Use the Processing "Archive Sketch" function (in the "Tools" menu") to create a .zip file of your sketch - submit that zip file.
  • Use the "Reference" function in the "Tools" menu to learn more about additional functions.
  • For any program that accepts user input, you will need to build it in "Interactive" mode.

Submit: upload to class web site. Filename: YOURLASTNAME_Assignment10.zip

Due via class web site by 6 pm , Apr 11.

Simple game mechanism


Animation with AfterEffects

AfterEffects is a bit like Photoshop for video. It's a huge and powerful program, and will take some time to understand. A few basic concepts:


A project is where everything associated with your particular work is located. A project has one or more compositions. You start an AfterEffects project by importing files into it.


A composition is a combination of graphics. A simple project may only have one composition, a complex one may have hundreds.


AfterEffects layers are similar (but not identical) to Photoshop layers. They may contain still images, motion graphics, video footage, type, effects or 3d elements.


The timeline allows you to move through projects and compositions in time. Each layer has its own sequence of frames/


A frame is a single point on the timeline. When frames are played back rapidly, the illusion of motion is created. A typical frame represents 1/30 of a second.

Animation resources

  1. http://www.howdesign.com/web-design-resources-technology/12-basic-principles-animation-motion-design/
  2. Intro to HTML Animation (advanced)
Coming soon...
Coming soon...