Search form

Coding Slowly [intro to basic programming with Processing]

[Project Narrative] [Instructional Narrative]

Project Narrative

This project sequence introduces code as a material for art and design practices. The approaches presented here have been developed based on observations in a range of foundation level art and design courses and workshops. 

starting points

Code underlies most forms of contemporary art and design: architecture, data visualization, electronics, fabrication, graphics, imaging, kinetic sculpture/objects, media, modeling, output, sound, visual communication design/publication, video games/interactive spaces, web-based art/design. Any process involving software, electronics, digital fabrication, or the internet involves code. Code sensibilities, skills, and instincts are immensely useful and transferable. Code literacy leads to agency. Agency becomes options. Options translate to flexibility for artists and designers. Creative outliers, like artists and designers, ask questions and push boundaries.     


Code isn't easy. "Coding Slowly" provides a flow of commented and constrained samples."Slowly" is used in the project title to communicate, with intention, that being careful is a-ok [and encouraged]. Learning isn't a race. While code concepts should be considered/mapped starting way back in preschool, this integration is not currently a norm except for a privileged few [in the U.S.]. For later-learners new concepts take getting used to. Some learners need to experiment, some need regular practice, some need a project to get started. Some people need alone-time, some people need group dynamics. Progress is relative. Programming is not easy for most artists/designers. Ask most programmers how long it took for them to really understand and internalize the concepts [frequent response: years]. 

Artists and designers don't usually gravitate towards the study of computer science. Material - even code - needs qualities, contexts, and meanings that artists and designers can study and manipulate. "Coding Slowly" can be focused on the traditional concerns of visual art and design foundations (drawing, form, color, time, interaction), or it could be attached to themes. Examples include: data and data visualization; games and play; security and tracking.

potential comfort zones: associating code-based practices with everyday life

There are many ways to conversationally weave in, parallel or reference familiar activity when introducing programming concepts. This may help put some people at ease.

  1. connecting with rules and constraints / All human languages use rules to constrain behaviors/outcomes/meanings. How many letters do we have? How do you end a sentence? When do we start a new paragraph? All programming languages use rules too.  

  2. connecting with procedure and instruction / Even the most mundane human activities/routines involve order or sequence (e.g. getting dressed, making food, brushing teeth). How would you describe the steps involved in making a sandwich? All programming languages use order too.

  3. connecting with variables and conditions / Cultural activities like cooking and playing games involve variations (dynamic information) and situations. Recipes have ingredients and process, games have inventory and mechanics. All programming languages use variables, and conditionals too.

  4. connecting with iteration or looping / Cultural activities like knitting and weaving, and rhythms and beats use repeating patterns (again and again and again) that begin and end when a condition is met. All programming languages use iteration too.

potential anxiety zones: experience, conditioning, words, alienation, expectations

  1. Consider experience / Students have been drawing, assembling physical objects, dressing themselves, and watching movies since they were toddlers. They have developed instincts and literacy. Show them a painting, a sculptural installation, performance, or video art, and they have some understanding of the process. They have lived experience and insights to draw from. Is code part of a lifetime of experience? Not currently. Challenge: culture shock. 

  2. Consider conditioning / There are many cultural factors (in the U.S) that might contribute to the anxiety of learning. Pervasive testing culture, schedule-oriented lifestyles, and closed apps/consumer devices are a few norms that remove abstract thinking, procedural/problem solving skills, critical thinking and inquiry from daily life. Challenge: learned helplessness. 

  3. Consider words / The words code, program, and hack can have aggressive associations. Code can mean secret. Program can mean control. Hack can mean cut. Semantics matter. Challenge: negative connotations.

  4. Consider feelings / Programming involves the abject or uncanny use of common English symbols (consider what happens when symbols change meaning). What happens when you see familiar letters and words doing strange things, or little pieces of punctuation behaving very differently than expected? Is it agitating, alienating, disorienting? Humans might be more wired to reject than rationalize fear or unknowns.

  5. Consider expectations / Sharing inspiring high profile works when introducing new themes or topics in college level art and design classes is a tradition and convention. Most code-based art and design (online, in exhibitions, museums, and galleries) involved a collaboration of people with a range of skills and years of experience. It is not uncommon for "technology" artists and designers to outsource the code work [hire programmers] without transparent attribution. Is it fair to present these examples as something that can be accomplished? Or does it set students up for disappointment?

vocabulary [in alphabetical order]

boolean, class, code, conditional, coordinate, debugging, error, float, for, function, hsb, IDE, integer, iteration, logic, loop, object, program, programming language, pixel, procedural thinking, rgb, software, String, syntax, terminator, variable, vector, void, while, xyz coordinates

structure and timing

Review the Instructional Narrative below. Then download Processing and gather the downloadable content files. Coding Slowly can be spread out over weeks/integrated in courses or modified for a 1-2 day workshop. Experiment with timing. Pay attention to the group needs and dynamics. Humans need to move. Interrupt screen-time. Repeat material as needed. 

Instructional Narrative

Getting Started / software installation: Download, extract, and install Processing.

classroom/workshop: This may be something students can do on their own time, or it may be something you want to do as a group. If downloading en masse is problematic (internet issues), an option is to distribute the software via a portable usb drive.  Once the software is obtained, students should move the extracted Processing Application icon to: HD > Applications (note: this is Mac oriented, operating systems vary). Remind/inform students that they should never run software from the download directory or from the desktop because of the likelihood of problems. Processing sketches use a nested directory structure (for files, and assets like images and fonts) so it is a good idea to keep Processing organized/situated properly from the getgo. 

Getting Started / software orientation: Preferences, Menus

Menu  - Processing > Preferences / It is always a good idea to look at the preferences when you are getting your bearings with new software. With Processing you want to decide where your files and assets will save (this is file management). By default Processing saves all of your sketches (files) to something like this sketchbook location -- /User/Documents/Processing. (note: this is Mac oriented, operating systems vary).

Menu - File > Examples / These are very useful for intermediate and advanced learners. We generally discourage beginners from borrowing/appropriating because they will rely on the skills, experience and intentions of another author. Students new to this material will not have the skills to fix their own problems should they attempt to modify existing works above their skill set. This could lead to frustration, learned helplessness, and disengagement. 

Menu - Sketch > Import Library / These are very useful for intermediate and advanced learners, but won't pertain to beginners right away.  (note for a more experienced future: libraries extend/expand the functionality of Processing so that Processing can do more complex things with media, hardware, etc.)

For future reference, there are 3 levels of libraries: 

1. From the menu, select a library that is already installed (dxf down through video): These are vetted and standard libraries already installed and bundled in the current version of Processing. When one of these libraries is selected, Processing will place a piece of code (text) in your sketch telling your sketch to import the library package 

2. Add Library: These are contributed libraries that have to be downloaded before they are bundled with your current version of Processing. Because this is Open Source software, contributed libraries are in constant development. Note: this is a great time to have a conversation contrasting the development of commercial software and open source software, a brand new concept to most beginners currently. Select “Add Library” and the Contribution Manager Window launches. You can install, update, and remove libraries here. 

3. Find more contributed Libraries, install them manually: and how-to install them instructions

Getting Started / software anatomy (or Processing Development Environment): file name, toolbar, mode, tabs, text editor, error messages, console, line number

sketch file name | software version / The default name is actually the sketch creation date; use ‘save as’ to name sketches more specifically. note: .pde file extension means "processing development environment"

sketch mode / Mode selection is based on the final output or platform; Java is the default and where this project flow starts. Java mode is useful for standalone applications that will launch on an individuals computer (run launches locally). If you are interested in programming for web, go to to see how you can translate Processing. You'll need to download the p5.js IDE and have some familiarity with html/css. There are additional modes for more advanced learners.

toolbar / The current visible/actionable bottons are: run sketch, stop sketch

tab organization (advanced) / As sketches grow in complexity they can can be organized into multiple tabs as a means to separate functionality and make editing easier; this is an advanced feature but something to be aware of, especially if students are looking at published samples and examples. With beginners, multiple tabs is often a red flag that they are modifying appropriated/borrowed material. 

code text editor / All this white space gets filled with lines of code which form a program; when the ‘run’ button is activated, the code entered in the text editor is “compiled” (or translated to something your computer can use and understand).  Processing then generates visual feedback, a display window showing the code in its visual form. 

code error messages / These are very very useful! Introduce students to the error as a friendly helper and nothing to be alarmed by. Even the most advanced Programmers spend a significant portion of their time evaluating errors. This never ending process is called debugging code. 

console (or output information) / This area is useful for receiving error details, and useful for getting data feedback from programs using variables. 

Getting Started / the display window (launched via the run or play button):

The xy coordinate plane is brand new to many students and it takes time and practice to internalize it. Never assume the coordinate plane is a familiar concept or that it will come naturally. Sometimes gestures or physical activity helps students internalized information or form pneumonic devices. If it's a good time to stretch and feel weird, have students form an x with their body and move across the space/horizon line; then have them form a y with their body and jump up and down on an imagined vertical. You could even craft event scores in small groups. Alternative activities might include: plotting/drawing shapes on wide-ruled graph paper, or preparing physical manipulatives and doing a bingo-type game calling out coordinates.