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.

Drawings created with basic shapes.

Lesson Two: Animations

Snapshots of our animated experimentation with randomness in shape, size, position, and colour. Generating random splatter of circles and triangles on canvas.

To make animations, we naturally discuss variables, conditional statements, basic computation, loops—specifically how the draw() function works, and frames and frame rates.

Visualizing random walks. Visualizing random walks. How do we ensure that our paths stays on the canvas? How can we vary our colour scheme and our shapes?
Here we form more complex shapes, use the frame count (and the modulo operation) to control the intensity of the light, and play with the movement—particularly the deceleration—of the boat.

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.

Visualizing random walks. A project resulting from a discussion of key press events and frame rates.

Lesson Four: Wild Card

fundamental design in pattern 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 with concentric circles Pattern with layered squares Pattern formed with quadrilaterals Pattern consisting of perturbed quadrilaterals

Image Processing

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

Rearranging pixels of an image by hue. Generating random splatter of circles and triangles on canvas.