Coding and Media Arts
City Centre Community Centre, Fall 2020-Present
The goal for this class has been to introduce coding as a tool for art creation. We learn programming fundamentals through creating drawings, animations, and interactive programs. Sometimes we touch upon additional topics such as image processing and pattern-making. Our go-to tool is JavaScript library p5.js.
Lesson One: Drawing
What is code and can we do with it? In this lesson, we explore coding as a way for us to instruct machines to perform various (often difficult) tasks like drawing this pupil or finding the shortest tour through a set of points.
To draw, we discuss colour representation (rgba
values),
the computer coordinate system, functions, and forming and styling basic shapes.
We sometimes cover transformations and curves depending on the projects we create.
Lesson Two: Animations
To make animations,
we naturally discuss variables, conditional statements, basic computation,
loops—specifically how the draw()
function works,
and frames and frame rates.
Lesson Three: Interactions
In this lesson, we design interactions. What inputs can we obtain from the user and how can our program respond to such inputs?
In the game above, if your mouse click lands on the circle, it grows. Otherwise, it shrinks. If the circle becomes large enough, it pops and you get confetti—woohoo! If it becomes too small, the game resets. The core ideas involved its implementation include responding to mouse presses, looping to produce confetti, and fiddling with timing and frame rates.

Lesson Four: Wild Card
Simple design repeated with some variation in the pattern to the left.
Depending on student interest, we sometimes explore explore pattern-making or image processing for the final class. Both topics allow us to become more familiar with functions and loops.
Pattern-Making




Image Processing
We discuss loading images and pixels and modifying them using both built-in functions and programs that we write ourselves.