Design the Future
January 19–20, 2016: Training
January 20–22, 2016: Conference
San Francisco, CA

(De)coding motion: Creative coding with Processing

Scott Murray (University of San Francisco)
9:00am - 5:00pm, Tuesday, January 19 and Wednesday, January 20, 2016
Location: Generals Residence Ballroom
Average rating: ****.
(4.50, 4 ratings)

This training course takes place 9:00am - 5:00pm, Tuesday, January 19 through Wednesday, January 20 and is limited to 35 attendees to maintain a high level of hands-on learning and instructor interaction. Participants should plan to attend both days of this 2-day training course. Training passes do not include access to workshops on Wednesday.

Prerequisite knowledge

This 2-day program is for experienced visual and interface (interaction, UI/UX) designers with little or no programming experience. No prior knowledge of code concepts is assumed, so this workshop is for beginners. If you are fascinated by creative coding but haven't yet blocked off time in your calendar to dive into Processing, this is the workshop for you.


Note: This training is limited to 35 seats. Also, please note that Platinum and training pass holders do not have access to workshops. If you have access to workshops, you do not have access to training courses.

Computer requirements

Participants must bring a laptop (Mac, Windows, or Linux) with the latest version of Processing ( 3.0.1) installed.


Motion communicates. It tells us when something is quick or slow, important or irrelevant, sticky or slippery. In interface design, motion teaches people how to use your interface by validating (or not) their expectations of physical properties in a two-dimensional, screen-based, nonphysical world.

You are a skilled designer, creating pixel-perfect mockups with ease. But mockups are static; they don’t move. You have visions of smooth, animated transitions but no way of prototyping them. You want to be able to create a live, moving “mockup” that not only looks right, but feels right.

It’s time to expand your toolbox to include creative coding. Code enables you to create and examine relationships of scale, speed, and quality with precision. Instead of merely observing motion, we can define it. Then we can test, refine, and test again, until it feels just right.

This introduction to creative coding will have you practicing the close observation of motion and learning how to express rules for movement with code. We will spend some time outdoors observing, sketching, and discussing motion and movement in the physical world. Then we’ll come back inside and learn how to define those movements in code. We’ll cover the syntax of functions and parameterization, and we’ll explore the computer’s conceptualization of time through hands-on individual and pair projects.

The technical portion of this workshop will introduce you to the fundamentals of programming using Processing, a free and open source language for the visual arts. We’ll cover drawing lines and shapes, logic, iteration (repetition), grids, color, and interactivity—creating systems that respond to user input. (We’ll also learn about programming concepts like variables, functions, and objects.)

You’ll leave with several original code “sketches,” as well as the ability to create conceptual, interactive, moving prototypes with code.

Photo of Scott Murray

Scott Murray

University of San Francisco

Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena. His work incorporates elements of interaction design, systems design, and generative art. Scott is an assistant professor of design at the University of San Francisco, where he teaches data visualization and interaction design. He is a contributor to Processing and is the author of the forthcoming O’Reilly title Interactive Data Visualization for the Web.