ArtCenter - Advanced Interactive Prototyping

Week 1


Shape and color

Pattern and rhythm

In-class code

Movement and constraints

In-class code

Zoom recording


Create a visual composition in Processing that displays a pattern (patterns) of variation across the entire window.

  • Use HSB color mode to demonstrate the variations of color.
  • Use arrays and loops to iterate through variations.
  • Pay attention to the composition, tiling and symmetry.

Submit your Processing sketch or openProcessing link.

Week 2

Rotation and matrices

In-class code

Zoom recording


Create an animation of shapes falling and tumbling. Try to make the movement look natural and integrated into the environment.

Submit your Processing sketch or openProcessing link.

Week 3

Timers and oscillators

Object-oriented programming

Mouse and keyboard controls

In-class example: timer

In-class example: oscillation

In-class example: basic OOP system

Zoom recording


Create an animation with shapes moving in a repeated motion (e.g. a pendulum or a rotating planet). Make a new shape appear after a predetermined interval of time has passed.

Submit your Processing sketch or openProcessing link.

Week 4

Workshop 1: Generative animation

Create an animation that shows a clock for aliens. The clock cannot display time tied to the rotation of the Earth - years, months, days, hours, minutes, etc. Instead create your own system of time - however large or small. If the clock is no longer tied to celestial movement - how else can you express the passing of time? Would the time be continuous or discrete? Cyclical or unidirectional? How would you divide it into sub-elements and what visual tools would you use to represent distinctions: color, shape, size, order?

You will showcase your work at the end of the workshop and Submit your Processing sketch or openProcessing link, and the URL to the documentation the week after. The documentation should be focused on the creative and problem solving process, so take pictures and videos as you work, and include code snippets for illustration.

Week 5

Week 6

Randomness and Perlin noise

Vectors and forces


Create a sketch that simulates a force of nature (wind, gravity, etc...) Use available graphical elements to illustrate its effect on the environment.

Submit your Processing sketch or openProcessing link.

Week 7

Workshop 2: Interactive Simulation

Create a sketch that would simulate an existing natural system - look at physics, biology, and other natural sciences for good examples. Start with the environment - where is the system situated? What are the forces the environment might exert on the system? Examine the agents in the system, their relationships to each other and the environment they are in. The look at how this system would develop over time. What are the rules that you are going to come up with, what are the parameters you are going to feed into them and what effect will the changes have on the development of the system.

You will showcase your work at the end of the workshop and Submit your Processing sketch or openProcessing link, and the URL to the documentation the week after.

Week 8

Basics of electricity: current, voltage, resistance, power

Basics of microcontrollers: pins, inputs/outputs, analog/digital read-write


To start getting familiar with the Arduino IDE and the process of uploading and running code on Arduino boards please experiment with creating different patterns of blinking LED. You can use Morse code, you can try to recreate a musical rhythm, or any other familiar patters. Create 3 of those rhythmic patterns, capture them on video and upload the video as a media recording, and the 3 .ino files as a ZIP archive here.

Week 9

Serial communication


For your homework please create an interactive system consisting of Arduino-based hardware and Processing-based software. Use at least 3 hardware inputs in Arduino. Determine the usable ranges and send the data from your sensors to a Processing sketch via serial communication.

On the Processing side first ensure clean and stable serial communication and usable values. Then re-map the data you'll be getting from you sensors to some visual parameters in your sketch. Positions of objects, colors, sizes, speed of movements, etc - are all good examples of such parameters. Each parameter comes with it's own reasonable range so put some thought into a re-mapping process.

Experiment with the application of the 3 values we're getting from Arduino. See where you can plug them in to achieve interesting graphic results. Get creative by picking a theme or making an animated illustration - look at modern and contemporary art for inspiration.

Capture the results on video, upload zip files with your Arduino and Processing files along with the videos.

Week 10

Building physical interfaces

Working with LCD screens


For next week please create an enclosure with an Arduino and a mounted LCD screen connected to the Arduino. Using various inputs: buttons, sound or light sensors, potentiometers, serial input from Processing - the choice is yours - create a system capable of registering at least 3 states and communicating them to a user through the messages on the display.

Submit the .ino (and if needed .pde) files in a .zip folder. Post the video as a media recording for the peer review.

Week 11

Workshop 3: Game controller

Make a game. You can choose one of the three simple genres: ping-pong, runner or shooter - or create your own. It needs to have a scoring system and a failure state. Win state is not required - it could be just a game for the score, but it's certainly a possibility. Create a world and a story for the game, clearly outline the goals and the scoring system for the players.

Make a custom controller for the game. Think primarily about the layout and the functions of the sensors. How does the physical interaction with the controller translate to the graphical representation of the movement on the screen? What kind of mental model will the user form about the constraints and possibilities in the game? Will you controller support or hinder the movements? Consider the player's position: the body posture, the hands orientation, the reach of the fingers, the comfortable speed or motion, etc. Use cardboard and mounting materials (thread, wire, etc.) to assemble your electronics.

Record the game-play on video and create a documentation page online with the description of the controller, and the responses to the questions in the brief.

Week 12

IoT platforms: Adafruit IO

Week 13

Collecting and accessing data

Week 14

Workshop 4: Data dashboard

Create a sensor board capable of collecting environmental data. Use any sensors you like, for example light, temperature, motion detection, magnetometer, sound, etc. Connection your sensors to the microcontroller and use AdafruitIO service to record data feeds from your sensors. Consider how the data needs to be extracted from the sensors, i.e. is a digital or an analog type of data? Work with the limitation of 30 data points per minute imposed by AdafruitIO. Remember - this is not meant to be used for control, but for observation.

Access those feeds using P5js and display the data in the feeds with visual or sound values in a P5js sketch. Consider how the data will be accessed - does need to be a continuously repeated fetching or is one data request enough? Think about how the data values need to be mapped to allow you the values applicable for your chosen parameters. Think about how the source of data could be communicated sonically or visually. See if you can find and reveal any interesting patterns in the data, maybe even form a story.

Record a video showing your P5js data display or embed your P5js sketch into a documentation page online with the description of the sensors, the data, and the responses to the questions in the brief.

Final Presentations


Semester overveiw handout PDF

Tools and materials for the class