LCC6310                                                                                                 Computation as Expressive Medium
Fall 2009



[home ][schedule ][lab ][resources][exhibit]


Every Friday from 9:05-10:55, Joshua will run a lab in the DM Lab (Skiles 346). Sometimes this will be an open lab where Joshua will be available to answer questions as you work on your projects, and sometimes he will give presentations on specific features of Processing, Java, or the class libraries.

Programming Environments

We will use Processing, an environment built on top of Java. All code you write in Processing is Java, but Processing provides a number of built in classes that make graphical operations easy and a programming environment that supports script-like Java programming (that is, easily being able to write snippets of code and immediately execute them). Processing has been installed on the Macs and PCs in the DM Lab. Additionally, it will probably be useful to have Processing on your own machine. Please download it here (Processing 1.0.6). Tutorials and examples can be found here. The Processing online reference can be found here.

Later in the class we will look at "raw" Java, that is, what you need to do to make stand-alone Java programs that don't use Processing. This will also help us to understand how Processing works and how you might build something like Processing yourself.

Lateness Policy

All projects and assignments must be submitted by 5pm on the Friday due date. Projects and assignments submitted after 5pm will be considered late. For every 24 hours late, assignments will be docked 10%. No exceptions. Assignments turned in later than 72 hours after the due date will receive a 0.

Grading Policy

All graded assignments will be graded according to their functionality. If a particular task says do "foo" and you do "foo", then you will receive full credit for that task. All projects will be graded according to three criteria: the concept (is the idea interesting, does it respond to the posed problem/question, did they put some thought into the piece, etc.), the technical realization (does it function as expected, is the interaction clear and consistent, does it provide the right feedback etc.), and the visual design (does the piece have visual coherence, good use of color, movement, etc.).

Assignment Submission Format

Please name each Processing file and sketchbook folder according to the following conventions:


For instance, for Assignment 1, Problem 1, a student with the last name Smith submit a folder called


with a file called


For Projects, ignore the PROBLEM part of the naming convention:


If you share the same last name with someone else in the class, also use your first initial, like so:


If your Processing project has multiple .pde files, only the main file needs to follow this convention. Please be sure to turn in all content in your sketchbook folders, including the folder itself. Zip up all files in a .zip file with the same convention:


Assignment 1

due 5PM Friday,
August 28th

A1-01: Draw three lines.
A1-02: Draw five lines.
A1-03: Draw three ellipses.
A1-04: Control the position of two lines with one variable.
A1-05: Control the position and size of two lines with two variables.
A1-06: Control the properties of two shapes with two variables.
A1-07: Create a simple, regular pattern with six lines.
A1-08: Program your pattern from Assignment 1-07 using while().
A1-09: Draw a layered form with two new loops.
A1-10: Redo Assignment 1-05 using mouseX and mouseY as the variables.
A1-11: Draw two visual elements that each move in relation to the mouse in a different way.
A1-12: Draw three visual elements that each move in relation to the mouse in a different way.
A1-13: Move a visual element across the screen. When it disappears off the edge, move it back into the frame.
A1-14: Draw a visual element that moves in relation to the mouse but with a different relation when the mouse is pressed.
A1-15: Using if and else, make the mouse perform different actions when in different parts of the window.
A1-16: Develop a kinetic image which responds to the mouse.

Assignment 2

due 5PM Friday,
September 11th

A2-01: Using beginShape() and endShape(), create a composition with five or more vertices.
A2-02: Using beginShape() and endShape(), create a composition with ten or more vertices.
A2-03: Create an image different from A2-02 but using the same vertex data.
A2-04: Write a function with one parameter and demonstrate it visually.
A2-05: Write a function for drawing triangles and visually demonstrate its flexibility.
A2-06: Write a function with three or more parameters and visually demonstrate its flexibility.
A2-07: Create a dynamic animation using the cos() function as a generator for motion.
A2-08: Create a dynamic animation using the cos() and sin() function as a generator for motion.
A2-09: Move two visual elements across the screen using the random() function as a generator of movement. Give each element a unique nonlinear motion.
A2-10: Create an event that begins when the mouse is pressed and ends when the mouse is released.
A2-11: Create a responsive image that behaves differently when the mouse is moving and the mouse is dragging.
A2-12: Create a button that changes the color of the background when it is clicked.
A2-13: Program your moving elements from A2-09 but use classes to represent the two visual elements.
A2-14: Create a subclass of one of the asteroids classes (the code is provided in t-square in the Sample Code resources section) that adds a new capability. Some examples of what you could do: create a subclass of Rocket (or ArmedRocket) that shoots flame when the thrusters are fired and/or plays a sound when thrusters are fired, create a subclass of Asteroid that know when it's been hit (instead of doing this test in draw()), create a subclass of Asteroid that splits into two smaller Asteroids when it's hit.

Assignment 3

due 5PM Friday,
October 2nd

A3-01: Create a subclass of PImage that implements a mosaic(int blockSize) method. The blockSize parameter specifies how big the mosaic block is (e.g. blockSize = 4 would mean the mosaic block size is 4 pixels by 4 pixels). The mosaic method should replace each block of pixels in the image (e.g. if blockSize = 4, each block of 4 by 4 pixels) with the average color value of the pixels in that block. Look at the Pixelate->Mosaic filter in Photoshop for an example of what this image operation does. Demonstrate your new class by drawing an image with several different block sizes. Include your example images with your submission.

Note: Processing does not allow a subclass of PImage to have access to the data from an image imported using loadImage(). One way around this problem is to have the program bring in an image with loadImage(), store the image in a PImage variable and then pass that variable to the subclass constructor. The constructor will then have to either store this variable in a PImage field in the subclass or copy it into the subclass pixel[] array.

A3-02: Write a small app that demonstrates kinetic text. Your app should allow the user to type something and the text moves around in some way while they type. For example, the user might type text on a line, but slowly the words or letters start drifting apart, or perhaps the line starts bending, or the words and letters flutter to the bottom of the screen, etc. Of course you shouldn't exactly copy any of the typographic examples in Processing or that you find on the web (though using such examples for inspiration, as a place to start modifying code, etc. is fine).

Assignment 4

Not graded

A4-01: Use HTMLParser or Swing to follow links on a webpage recursively and visually represent this process. The recursion should run at a depth of at least four. Ideas: use IMDB to create a link between actors via their movies (Six Degrees of Kevin Bacon!) and display their headshots. Do a Google search of a term, then a Google search of the first word in the description of its top result, then a Google search of the first word in the description of its top result...(or do it with Google Images and their image names or alt tags). Go to a random Wikipedia article and follow the first link to another Wikipedia page in its article content, go to that page and follow the first link to another Wikipedia page in that article content, etc. Or you can play with the CNN example. Your recursion can be as narrow or broad as you see fit (follow one link on a page and its children vs. following all the links on a page and all their children), but make sure to balance breadth of recursion with processing speed for a meaningful experience.

Assignment 5

Not graded

A5-01: Modify image collage to grab headlines from several news sources (instead of grabbing images) and display them. This gives you practice in looking at the html source for multiple sites (e.g. New York Times, CNN), determining how a piece of information is represented and writing the parse code to grab that piece of information.
A5-02: Write an html parser that looks for keywords (you pick the keywords) in the text (not within a tag) of a page and counts how many times different keywords appear. You can imagine that this might be the beginning of an information visualizer that visualizes pages as a function of different keywords that appear.

Assignment 6

Not graded

A6-01: Modify the Braitenberg vehicle so that it has a different visual appearance.
A6-02: Create a vehicle that responds to multiple sense modalities. The best way to do this is to overlay multiple sensory fields, each with its own source types (e.g. sound, light, heat, etc.).
A6-03: Make vehicles also be sources, so that vehicles respond to each other. One way to do this is to place a moving light source on each vehicle. You can choose to make the light source visible, or sum the moving sources into an invisible sensory field (if you don’t want glowing circles or some such appearing around vehicles).
A6-04: Have your vehicles interact with the environment in some way. For example, when a vehicle runs into a source, perhaps it destroys the source. Other vehicles could create sources. Vehicles could lay trails that other vehicles respond to. A vehicle could have multiple ways of moving (flying under certain conditions, moving on the ground under other conditions, etc).


Project 1

due 5PM Friday,
September 4th

Project 1

From the central heartbeat of the central processor, to the obsessive timestamping of files and blog entries, to ever present clock displays, time is a fundamental feature of computation. Display the progress of time in a non-traditional way. It is OK to consider large temporal scales (e.g. seasons), but smaller temporal scales should also be displayed (or be available to be displayed, perhaps as a function of user input). You may make use of mouse input if you wish.

Clock Examples:

* Industrious Clock. The conceptual strategy is to re-present the standard, numeric presentation of time in a non-traditional medium (video representations of paper and pencil).

* Maeda's Clocks. A quicktime video of several screen-based clocks developed by designer John Maeda. The conceptual strategy employed in this series of clocks is to visually redesign standard hands or numeric representations of time.

* Last Clock. The conceptual strategy is to take slices of a live video feed and arrange them in concentric circles representing seconds (outer ring), minutes (middle ring) and hours (inner ring). This way a trace of what has been happening in front of the camera is left behind.

* Pingpong Clock. The conceptual strategy used here is to tie the passage of time with events in an auto-played game that unfolds on screen. In this case, the players score the time in a game of pong. The left player scores the hours, and the right player scores the minutes.

Project 2

due 5PM Friday,
September 18th

The contemporary computer scene is dominated by the graphical user interface (GUI). For almost every task, from manipulating text, imagery, sound or video to configuring a computer's operating system (e.g. control panels), from searching for and organizing information (e.g. the web) to the process of programming (e.g. integrated development environments), there are special purpose GUI tools supporting the task through analogies to embodied interaction with physical objects. But no tool is neutral; every tool bears the marks of the historical process of its creation, literally encoding the biases, dreams, and political realities of its creators, offering affordances for some interactions while making other interactions difficult or impossible to perform or even conceive.While the ability to program does not bring absolute freedom (you can never step outside of culture, and of course programming languages are themselves tools embedded in culture), it does open up a region of free play, allowing the artist to climb up and down the dizzying tower of abstraction and encode her own biases, dreams and political realities. What graphical tools would you create? Create your own drawing tool, emphasizing algorithmic generation/modification/manipulation. Explore the balance of control between the tool and the person using the tool. The tool should do something different when moving vs. dragging (moving with the mouse button down). The code for your tool should use at least one class.

Drawing Tool Examples:

* Hairy Brush. Golan Levin reimplemented Steve Strassman's 'hairy brush' MS thesis from 1986. The idea here was to simulate the traditional Japanese art of sumi-e by modeling the motion and bristles of the brush and the absorption of ink into the paper.
* Yellowtail. Yellowtail by Golan Levin is a drawing tool for creating and performing abstract audio-visual animations in real time. The parameters of a user's strokes simultaneously define the look and movement of the resulting line.
* Moovl. A drawing tool that allows your doodles to come alive with animations and physics. Playful and fun!
* Manifest. Michael Chang's drawing toy for creating vertebral creatures that come to life on the screen. Driven by procedural animation and physics simulations. Also look at some of his other drawing tools like Draw Steer and Auto Roads.

Project 3

due 5PM Friday,
October 9th

Literary machines are potential literature, procedurally producing textual traces in response to interaction. Examples of literary machines include interactive fiction, nodal hypertexts, interactive poetry (often with animated typography) and chatterbots. Create a literary machine. The literary machine must include algorithmic elements, such as animated typography, generated text, conditional responses as a function of the previous interaction trace. It must respond to external inputs (e.g. user interaction). Your piece may include conjunctions of text and imagery.


* Self Portrait(s) [as Other(s)] by Talan Memmott
* Sky Scratchez by Mez and Talan Memmott (on a PC)
* Arteroids by Jim Andrews
* Intruder by Natalie Bookchin
* Jabbery by Neil Hennessey
* Young Hae-Chang Heavy Industries

Project 4

due 5PM Friday,
October 30th

Hypertext was conceived as a computer-aided form of reading and writing whose structure matches that of the human mind (a tangled web of association), thus enabling humans to make sense of the exponential growth of knowledge experienced in the 20th century. The World-Wide Web, while a rather anemic implementation of hypertext, makes up for these deficiencies by providing us a with a sneak preview of what it might be like to have a truly global repository of knowledge. But making sense of the world is not just a matter of structure but of process, of the dynamic construction of meaning. And as we've been discovering together, computation is fundamentally a process medium. What would you do to the web? Create an applet that dynamically does something to one or more web pages (e.g. collage, systematic distortion, re-layout, ironic superposition, etc.).


* Mark Napier's work (e.g. look at Shred and Black and White)
* Text Arc
* Carnivore

Project 5

due 5PM Friday,
November 13th

The field of artificial intelligence (AI) builds computational systems that model the intelligent behavior of people and animals. AI architectures can be extremely generative, able to produce complex responses to environmental changes, including user interaction. In computational art, AI approaches have been used to build work ranging from robotic sculpture, to drawing and painting generators, from generative interactive stories to music composition. In the popular art form of computer games, AI approaches are used extensively to build tactical and strategic opponents, non-player characters and player modeling systems. In this project, build a collection of simple AI agents that interact with the user, each other and their ecosystem to give the illusion of life. You can build upon the provided framework of Braitenberg vehicles, which can produce complex agent behaviors, or code your own simulation.

Provided: Braitenberg starter code


* Emergence
* Autopoiesis
* Blockies
* A-Volve

Project 6

due 5PM Friday,
December 4th

(Note: late
projects will
not be accepted)

While computer-based interactive games (a.k.a. video games) have been a pop-cultural force since the arcade scene of the late 1970s and early 1980s, in recent years video games have been recognized as a major emerging art form, poised to have as much cultural impact on the 21st century as cinema did on the 20th. The game industry is making Hollywood-sized amounts of money, with designers of the most popular games achieving a geeky sort of celebrity. Museums and galleries are offering exhibitions of "art games," computer-scientists are beginning to treat games as technical objects worthy of serious attention and, in humanities departments around the world, games studies is a hot new topic. What kind of game would you create? Create a simple game. Your game should be a regular Processing applet (but you may create a pure Java applet if you like).