[back to index]

Digital Art: Interactive | ADA385 | Spring 2008 | Monday 8:00-11:50 am

The course serves as an introduction into computer programming for visual artists. Using the open source programming environment Processing artist students will utilize code as a visual medium.

We will begin by thinking and making observations about the real space around us and move towards creatively weaving original observation and information into rich visual allegories that portend toward new forms of narrative.

This syllabus was originally written by Ricardo Miranda and has been modified after it's initial offering.

Contact info:
Robert Carlsen //
I'm only normally on campus for our class. Please get in touch if you'd like to arrange a meeting.

Course Text: [required]

Processing: A Programming Handbook for Visual Designers and Artists, Casey Reas and Ben Fry (Foreword by John Maeda). Published 24 August 2007, MIT Press. 736 pages. Hardcover.


Class Policy

Students are expected to spend a minimum of 6 hours per week in the lab outside of class. Class attendance is necessary; more than 2 unexcused absences can result in a grade penalty. Arrival to class more than 30 minutes late will be considered tardy. Two tardies will count as an unexcused absence.

All assignments must be presented on due date; assignments not handed in receive an "F"; assignments handed in late, without a proper excuse, will receive a grade penalty.

Course Work

    The class reading and assignments will be divided into the following topics:
  1. Theoretical perspectives on human-computer interaction: Read assigned essays
  2. Introduction to programming skills for computer-based interaction: Maintain an active sketchbook
  3. Computer interaction in contemporary art and design: Artist presentation and exhibition trip

Course Readings are online

Weekly Schedule

Week 1

Demo: Access your TCNJ web space, create a basic page with a table or css class divs to organize sketch book samples and written course work.

What is programming and how have artists used it?

Introduction to the Processing Environment: Open, Save; Run; Sketchbook; Exporting

Opening and compiling examples included with Processing

Commenting; Coordinates; Color; Line, Primitives; Drawing Attributes

In-class Examples:
Iterations and for()
Week 1 demo

Sign up for artist presentations

Statement and Comments
Points and Lines
Shape Primitives

Processing: Foreward, Preface, pp 1-36. [pdf] online temporarily...get your own book!
A Brief History of Programming Languages
Reas on programming and art
(map of statement)
Suggestion: download processing to your local computer.

Week 2

Intro to Object Orientated Programming. We're not going to push this style of programming, but it's helpful to know that it exists when you begin to make more complicated sketches.

Introducing variables and datatypes. Bais logic; using conditional statements (if-then-else).

Exploring Processing

In-Class Examples
Software Structures
Image Downsampling

Project 1 Mark Making. Due next week. [pdf]

Rework the following sketches to create your own sketch:
Integers and Floats
Datatype Conversions
Conditionals 1
Conditionals 2

Processing: Structure, Drawing, Variables, pp 44-68. [pdf] online temporarily...get your own book!
Wikipedia intro to objec-oriented programming
Processing defined by Josh Nimoy

Week 3

Extending our concept of variables and using constants. Using the computer in it strongest capacity, quickly automating repetitive tasks with iteration: for() loops.

for() loops
while() loops
In-Class examples
for() iteration - pattern
for() iteration - follow mouse
nested for() iteration
basic drawing tool

Rework the following sketches to create your own sketch:
Increment and Decrement
Continuous Lines
Embedded Iteration
Logical Operators

J.C.R. Licklider, Man-Computer Symbiosis (1960)

Week 4

Methods, Functions, and Classes. What does it all mean? Discover Processing's built-in methods, and explore how to create custom ones.

In-Class Examples
Objects redux, with arrays
Image Rollovers
Rework the following sketches to create your own sketch:
Recursion 2

Douglas Engelbart, Augmenting Human Intellect (1962) (PDF)

Week 5

Arrays. The power and confusion of array objects. Constructors (more of the custom Class junk). Programming unpredictability with random() and noise().

In-Class Examples
Basic Arrays
Two Dimensional Arrays
Storing data with an Array
Storing more data with two Arrays

Rework the following sketches to create your own sketch:
Array 2D
Array Objects
Characters and Strings

Myron W Krueger, Responsive Environments (1977) (PDF)

Week 6

Input. Half of the Input/Output cycle. Necessary for interaction. How to get singals from the user using the mouse and keyboard. Using input to control varible values and, in turn, animation.

In-Class examples
Image mosaic, using the mouse position to determine the tile size.
Image tile, using the mouse position to determine the tile source.
Basic slideshow
Rework the following sketches to create your own sketch:
Mouse 1D
Mouse 2D
Mouse Signals
Storing Input


Processing, Drawing I, pp.217-222

Processing, Drawing II, pp.413-419

Bill Nichols, The Work of Culture in the Age of Cybernetic Systems (1988) (PDF)

Week 7

3D Processing. Processing's environment suppurts full 3D with either it's built in rendering (P3D) or OpenGL hardware acceleration (OPENGL). You can easily draw primitive shapes (boxes, spheres, etc), or with help from external libraries, you can import 3d models from a modeling program.

You can attach images as textures to these 3d surfaces. Also, iteration with for() loops allow for rapid creation of visually deep and complex 3d structures.

In-Class examples
Vertices 3D
Rework the following sketches to create your own sketch:
Primitives 3D
Vertices 3D
RGB Cube

Sonambiente, Sound Art Festival Review 1
Sonambiente, Sound Art Festival Review 2
Sonambiente, Sound Art Festival Review 3
Sonambiente, Sound Art Festival Review 4

Week 8

Audio with Processing. With the Sonia or ESS sound libraries, Processing can playback, record and analyze sound samples or a live input. This data can be visualized or used to drive other animation within your sketch.

In-Class Examples
you'll need to have a mic input for these
Sound Spectrum
Cube Spectrum
Golan Levin, Computer Vision in Interactive Art (1988) (PDF)

Week 9

Connecting Processing to external devices. Video cameras, game controller, diy switches with hacked up keyboards.

Get the user away from the keyboard and mouse! Create sketches that derive input from alternate devices. Analyze a webcam, track color and motion. Build switches that users can interact with.

In-Class examples
you'll need a video camera for most of these examples, and they might not work in a browser - download them
JMyron (WebCamXtra) Reference
Basic Capture
Difference Image
Rotoscope (globs)
Hijack - for using JMyron with non-camera sources.
Interview of Ken Rinaldo

Week 10

Data import. You can import data from external sources. Have statistics? Export them as a test file from a spreadsheet program.

Data Import

Constructing Final Project

Interview with Tom Igoe

Week 11

Constructing Final Project

Interview with Marie Sester

Week 12

Constructing Final Project