Week 1 — Setup and your first sketch

IAT 806 · Intro to Computing · Fall 2026

Welcome

  • A studio course on programming for interactive and generative work
  • We start from scratch in JavaScript and p5.js
  • No prior programming experience expected
  • Most of the work happens in class — bring a laptop every week

Instructor: Dr. Alireza Karduni · akarduni@sfu.ca

How the term runs

  • Class — Wednesdays, three hours. Live coding plus studio time.
  • Prep — some weeks have a short video or reading beforehand, listed in the schedule.
  • Time — plan on 5–7 hours a week outside class.

Where we end up

  • Now → shapes, colour, and a canvas
  • October → motion, objects, particle systems, transformations
  • Late October → machine learning models in the browser: pose, hand, face, sound
  • November → APIs and language models; forces, flocking, emergence
  • December → you exhibit a project you defined yourself

You start thinking about that project this week.

Today

  1. Setup — VS Code, a browser, Git and GitHub
  2. How HTML, JavaScript, and p5.js fit together
  3. The canvas and its coordinate system
  4. Shape and colour
  5. Studio time

1 · Setup

What you need

  • VS Code — where you write code
  • A current browser — where it runs (Chrome or Firefox; you will live in the developer console)
  • Git — how you keep and move versions of your work
  • A free GitHub account — where your work lives

All of your work this term lives in GitHub repositories you own, starting today.

Git, in the five commands you need today

git clone <url>        # copy a repository down to your machine
git status             # what have I changed?
git add .              # stage the changes I want to keep
git commit -m "..."    # save a snapshot, with a message
git push               # send it to GitHub

That is it for now. We learn about branches later.

Commit often. A commit is a save point you can return to. Do it often.

2 · HTML, JavaScript, p5.js

Three different things

  • HTML — the page. A list of elements the browser draws.
  • JavaScript — the language.
  • p5.js — a JavaScript library. a collection of code you load, which gives you new abilities createCanvas, circle, fill, mouseX

Let’s talk about what is a program and do some exercise.

The smallest possible sketch

Two files in a folder.

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="p5.min.js"></script>
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

sketch.js

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(220);
  circle(200, 150, 80);
}

The HTML loads p5, then loads your code. You will spend the term in the right-hand file.

setup() and draw()

  • setup() runs once, at the start. Make the canvas here.
  • draw() runs over and over, about 60 times a second, forever.

Your first sketch, running

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(220);
  circle(200, 150, 80);
}

Same code as the slide before — running live, on this slide.

3 · The canvas

The coordinate system

  • createCanvas(400, 300) makes a grid 400 wide and 300 tall
  • (0, 0) is the top-left corner
  • x grows to the right, y grows downward

That downward y is the part that will trip you up for about a week.

Move your mouse over it

  • mouseX and mouseY are variables p5 keeps updated for you
  • width and height are the canvas size — use them instead of retyping 420
  • draw() is redrawing this whole grid 60 times a second

4 · Shape and colour

The shapes you start with

circle(x, y, diameter);
ellipse(x, y, w, h);
rect(x, y, w, h);
square(x, y, size);
line(x1, y1, x2, y2);
triangle(x1, y1, x2, y2, x3, y3);
point(x, y);

Every one of these is in the p5.js reference. Keep it open. Nobody memorises the argument order.

Colour

  • fill(r, g, b) — the inside of a shape
  • stroke(r, g, b) — the outline
  • background(r, g, b) — the whole canvas
  • One number instead of three means grey: fill(0) black, fill(255) white
  • A fourth number is alpha — transparency: fill(255, 0, 0, 40)
  • noFill() and noStroke() turn each off

Order matters: fill() applies to every shape drawn after it, until you change it again.

Try it — edit this and press run

  • Change the numbers. Press ▶ run edits.
  • Swap the two circle lines — what happens to the overlap?
  • Drop the alpha from 150 to 40
  • Add stroke(0) at the top of draw()

What background() is really for

  • background() erases the previous frame
  • Without it, every frame stacks on the last one — and you have a paintbrush
  • Neither is more correct. It is a choice you make every time.

5 · Studio

Make something in the next 40 minutes

  1. Make the folder, index.html and sketch.js, get a canvas on screen
  2. Commit it and push it to a GitHub repo you own
  3. Draw a self-portrait — or a face, a creature, a logo — out of shapes only
  4. Use at least one colour with alpha, and at least one shape that follows the mouse

Before next week

  • Assignment 1 is out — due at the start of week 2 (Sept 23)
  • Push it to your repository and submit the link
  • Come with project ideas. Two or three, loosely held. We talk about them next week.
  • Join the course Discord — ask material and assignment questions there

Next week

Motion and interaction — variables, the draw loop, mouse and keyboard input, conditionals, and program state.