Design Programming (DECO1012)
March 2009


Dr Rob Saunders


Kaz Grace


Throughout this unit of study everyone in the class has the opportunity to develop an online portfolio of sketches using Processing.



The aim of this unit of study is to introduce students to computer programming, both as a tool for design computing and as a medium of expression in digital media. This unit of study will focus on the practical application of computer programming as a way to expand the students' abilities to use computers in creative design and research tasks.

Learning Objectives

On completion of this unit of study, students should be able to:


The unit of study runs for 13 weeks. One hour each week will be in a lecture and two hours will be spent in labs. This is designed to be a practical unit and students will be expected to experiment in the labs with the techniques that are taught in the lectures.


Week Date Lecture Lab
1 Tues 3 Mar Introduction NO LAB THIS WEEK
2 Tues 10 Mar Drawing with Code 2D Drawing
3 Tues 17 Mar Decisions and Repetitions Drawing on Differences
4 Tues 24 Mar Trigonometry and Randomness Random Drawings
5 Tues 31 Mar Text & Transformations Drawing with Text
6 Tues 7 Apr Animations & Functions Drawing with Functions
7 Tues 21 Apr Images & Recursion Drawing with Recursion
8 Tues 28 Apr Motion Mechanical & Organic Animation
9 Tues 5 May Arrays & Pixels Drawing with Arrays
10 Tues 12 May Interaction Mouse & Keyboard
11 Tues 19 May Classes & Objects Defining Objects
12 Tues 26 May Interfaces & Inheritance GUI Objects
13 Tues 2 June Simulation & Libraries Project Lab


The method of assessment for this unit will be a combination of a number of assignments, a major project and a number of small quizzes held in class. The unit will be assessed primarily through coursework that students produce during the semester.


There will be two assignments during the first half of the semester. In total the assignments are worth 50% of the final mark for the unit.

Assignment 1 (Deadline: Monday 6 April)
Static Variations — Develop a sketch that draws a static image. (brief / results)


The goal of the assignment is to create a sketch that can generate variations upon a design each time it is run. You should use the random() function to generate random numbers and use these random numbers to alter the output of your sketch each time you run it.

The static image should be created using only the drawing commands available through the Processing environment. No images should be loaded from external files. The assignment should include a design document, a final sketch and a series of experimental sketches that show a process of exploration.


For those of you with some background in programming. You are limited to using only those language features that we have covered in class up, i.e., statements, variables, arrays, conditionals, and loops. It is part of the challenge to develop your generative sketch within these constraints.

Assignment 2 (Extended Deadline: Thursday 7 May)
Animated Explorations — Develop a animated sketch. (brief)


The animation should be created using only the drawing commands available through the Processing environment. Images can be loaded from external files, but movies cannot. The assignment should include a design document, a final sketch and a series of experimental sketches that show a process of exploration.


The following are some example sketches that you can take apart to find out how they create different types of animations.

Image Transformation

This is the sketch I wrote in the tutorial last week. It demonstrates how to transform an image using rotate() and scale(). It also shows how to simply produce a trail by replacing the normal call to background() with the drawing of a semi-transparent rectangle using fill(0, 4) and rect(0, 0, width, height). Try changing the opacity of the fill to see how it affects the length of the trail. This technique can be useful, even if you don't want it in your final sketch, because you can use it to debug your animation.

Linear Image

The LinearImage example sketch that comes with Processing is more complicated than it needs to be. So I've created a simpler version that uses copy() instead of playing with pixels: SimpleLinearImage. This version also removes the code for handling mouse and key presses, just to make things as simple as possible.

Bouncing Ball

The following sketches build on the animations that you've been creating in the labs. The first creates a simple ball that bounces around the display window. The second adds some physical forces to make things a little more complex.

Timed Animation

The following sketch illustrates how you can create timed animations using functions. The sketch using a function called drawCircles() to draw an animated sequence only when the current frame falls into the range when it is told to draw itself, i.e., between startFrame and startFrame + numFrames. Also notice how randomSeed() can be used to give the same sequence of numbers for every frame, allowing randomly placed elements to be produced that stay in the same location between frames, try taking out this line to see what you would get without it!

Final Project

In the second half of the semester students will work on a single project. The project is worth 40% of the final mark for the unit.

Final Project (Deadline: Friday 12 June)
Toys & Games Develop a simple toy, game or puzzle in Processing. (brief)


The aim of the assignment is to develop an interactive sketch that is fun to play (or play with). The sketch can make use of whatever external files are wanted, e.g., images, sounds, etc. The assignment submission should include a design document, a final sketch and a series of experimental sketches that show a process of exploration.


The ContinuousLines example sketch that comes with Processing shows how simple a drawing tool can be. This might be considered a basic example of a toy and might form the basis of your own sketch—although I'm sure you can all make something much more fun now!

Submission (via the Dropbox)

You should submit your assignment via the DECO1012 dropbox that has been set up on the faculty's servers for this unit of study. To submit your work, use one of the Windows machines in the labs. First, create a folder that is named the same as your login username. Put all the files you want to submit in this folder (this should include your documentation and your experimental and final Processing sketches). In Windows Explorer open \\DROPBOX\Dropboxes\, enter your username and password if required. Open the DECO1012 folder. Drag your submission folder onto the folder called "Project".

If you make a mistake, you should resubmit. You will not be able to delete or overwrite your original submission, so you should add a number to the end to indicate that it is a later submission, e.g., if you submit a second version of your sketch add "_2" to the end of your submission folder's name. For example, if your username were "abcd1234", your first submission would be in a folder called "abcd1234". If you wanted to resubmit your assignment, you would call the folder for the second submission "abcd1234_2".


Here is some example code that you may find useful as techniques for implementing your final project. In these examples I've used classes and subclasses to organise the code as much as possible.

A simple example of a superclass and two subclasses that implement shapes. This is the code that I wrote in the lecture on May 26.
A more complex (and more useful) superclass and two example subclasses that implement something called a scenegraph. A scenegraph is a way of organising objects in parent-child relationships so that when an object is rotated, translated or scaled, all of it's children are also transformed.
An example of implementing an object that can be picked up and dragged around with the mouse.
An example of implementing an object that uses a simple bounding circle to test whether it has collided with other objects and the edges of the screen.
An example of how to implement different "screens" in a single sketch using the idea of a "state machine". The sketch maintains a current state, which can be one of a limited number, and the different parts of the code will do different things depending on the current state, including switching to another state when something happens, e.g., when a key is pressed.

Attendance and Engagement

Students are expected to attend all lectures and labs. Proof of completing the lab exercises is worth 10% of the marks for the unit.


The following resources are a combination of technical references and inspirational works. You should use both when developing ideas and implementations in lab sessions and for your assignments.

Off-Line Resources

Casey Reas & Ben Fry (2008), MIT Press
Creative Code
John Maeda (2004), Thames and Hudson
John Maeda (2000), Thames and Hudson / Rizzoli / Bangert Verlag
Design By Numbers
John Maeda (1999), MIT Press

On-Line Resources

Processing Home Page
Ben Fry's Web Site
Casey Reas' Web Site
Daniel Shiffman's Web Site
Jared Tarbell's Web Sites
Marius Watz's Web Site