Week 1: intro

Dr Charles Martin

Semester 2, 2020

We acknowledge and celebrate the First Australians on whose traditional lands we meet, and pay our respect to the elders past, present and emerging

hi, I'm Charles


introduce yourself on Teams!

  • why are you taking this course?
  • what are you most excited about?
  • what are you most nervous about?

this is a course about making interactive art with computers






  • admin overview of the course
  • story painting like a 5yo
  • code p5.js basics



online lectures are 11am Monday and 12pm Thursday.

streamed on live on Teams!

COMP1720: inside the artist’s studio videos available online—a series of interviews with computational artists

slides & recordings will be on the website (also see the FAQ)


labs are on- or off-line in this course!

you are strongly encouraged to attend your weekly lab session! Sign-up is open later today!

each week you’ll get a new set of art + code challenges to work through, these labs will give you the skills you need to do the assignments and major project

your weekly pre-lab tasks are due at the start of your lab.

build it up...

...break it down


do the week 1 lab content (i.e. with putting a circle on the internet) asap

if you get stuck that’s ok, you can attend the drop-in lab sessions (see lab website)


it’s crucial to get on top of this stuff now; it’s the way you’ll submit your assignments & major project

so do it asap

so what are the assessments?

lab tasks (5%)

there’s two kinds lab tasks in this course

each week you will do some pre-lab tasks (posted on the forum) and in-lab tasks (marked in your lab)

worth 0.5 marks per week (5 marks total) submitted through the forum, assessed during your lab session from weeks 2 to 11 inclusive

why do lab tasks?

coming up with good ideas is hard

connect thinking (from lectures) with expression (in labs)

to the forum!


your first pre-lab task is due in week 2

assignments (45%)

there are 3 assignments in total, each worth 15 marks

assignments must be submitted through GitLab, due dates on the policies page

each assignment will involve creating an interactive work of art—a p5.js code sketch


assignment 1 is is already available

it’s due 9pm Monday August 16 (week 4)

your job: make a name tag

major project (50%)

during the exam period there will be an online exhibition

your major project is to produce a piece of interactive art (in p5.js) for this exhibition

theme: to be announced next week!

COMP1720 forum


this is the best (and quickest) place to get help

the code of conduct: be excellent to each other

there’s not much on our Wattle site (just links to the “real” webpage)

referencing and academic integrity

you must read the course policy

there’s lots of great stuff (including p5.js example code) out there on the web

if you find some code/words/assets you want to use, you must clearly indicate which bits of code aren’t yours, where you got them, and what licence you’re using them under

Source: Academic Skills and Learning

quiz: where do I find...

assessment timeline?

lecture slides?

lab content?

late submission/extension/academic misconduct policies?


let’s talk about expectations

what you can expect from us

responsive communication (as per the communication policy)

help ahead of time

support in realising your artistic vision (especially in the major project)

what we expect from you

engage early

build things because you want to, not because you have to

attend labs (there’s too many of you for me to always answer your questions straight away, but the tutors are there for you)



If you look around at the world and where technological surprises are happening, one place is in the art world—to create new experiences.

Peter Lee, Head of Microsoft Research

the big picture

it’s not either/or, but both/and

to get top marks you must engage with both aspects of this course

don’t pigeonhole yourself

what we will cover in this course




learning the tools (it’s worth the effort!)

conceptualizing an artwork

what we won’t cover

the rest of web/js technology (CSS, the DOM, events/callbacks, WebGL, video, “back-end” development, HTTP, …)

…but you’re welcome to read around on your own


painting like a 5yo

code theory

quick glossary

  • p5.js - a javascript library for making interactive code art
  • javascript (or js) - a programming language (runs in the browser)
  • sketch - a p5.js drawing/widget which you can view/interact with
  • browser - your web browser (e.g. Firefox)
  • editor - a program for writing code (we’ll use VSCode in this course)
  • p5.js online editor - an online editor for writing code (often used in lectures)

p5.js vs js

a library is just bunch of code (perhaps written by someone else)

p5.js is a javascript library

sometimes I’ll say p5, p5js, p5-dot-js—they’re all the same thing

the p5.js reference

the p5 reference: https://p5js.org/reference/ is your most important resource!

whenever I refer to “the reference”, that’s what I’m talking about

seriously, go to the reference

a few key concepts


a p5 sketch is a digital canvas

you draw lines, shapes & other things

fill/stroke colours (the “paint” on the paintbrush)

the order matters!

the grid

the grid

the grid

we represent 2D positions as numbers (this is a theme)

it’s just like the Manhattan grid

the units are called pixels (px for short)



in p5.js we specify the different RGB (red green blue) components with numbers (0-255)

red + green = yellow, red + blue = purple, etc.

there’s also alpha (transparency), different colour modes (RGB, HSL, etc.)


p5.js only understands certain instructions

how do you know what you can say?

…the reference


p5 uses US spelling:, so there’s no u in color



ellipse(0, 0, 100, 100);
fill(255, 0, 0);

“ellipse” and “fill” are functions

functions tell p5.js what to do (what function to perform)

in p5.js, many of the functions are about drawing things on the canvas

syntax (noun)

from the Oxford English Dictionary

  1. the arrangement of words and phrases to create well-formed sentences in a language: the syntax of English
  2. the structure of statements in a computer language

parameters example

fill(250, 0, 0);

we say “the fill function takes 3 parameters” (in this case 250 for red, and 0 for green & blue)

parameters make functions re-usable (to draw two different sized circles, you use the same ellipse function, but with different width/height parameters)

functions: what to do

parameters: how to do it


sometimes things go wrong… the console is where the program talks back to you

the Chrome developer tools (you’ve had them all along!) are available through View > Developer > Developer Tools or Ctrl+Alt+I

Or if you’re on Firefox, it’s Ctrl+Shift+I

the COMP1720 workflow

  1. edit your code file (sketch.js) in your editor (VSCode)
  2. run the “live webserver” (Go Live)
  3. you point Chrome at the webserver (and point Chrome at http://localhost:5500/) to view the page
  4. every time you save your sketch.js file the webserver tells Chrome to refresh

do the lab 1 content to get the hang of this


let’s do a Google image search for “mondrian”


the moral of the story...

the computer is like a 5yo (sortof)

loves to paint!

… but needs clear instructions (has a small vocabulary)

where the metaphor breaks down

the computer is more obedient…

can’t deal with vagueness—it can’t figure out what you mean if you don’t say it clearly

learning to program

there’s a lot to learn at first

“for a course that’s about making art, we spend a lot of time reading & writing text/code”

it’s only week 1 (don’t panic!)

programming takes practice


“the code stuff is too easy—see you in week 10”

“the code stuff is too hard—I’m out!”

“the arty stuff doesn’t matter, I’ll just submit some working code and bam—HD!”


where do you fit in? what are the opportunities and dangers for you in this course?

further reading/watching

Dan Shiffman’s videos (start here)

lab 1 content

p5.js reference & examples

MDN js docs (more advanced, general js not specific to p5.js)

further reading/watching

Get Started with Debugging JavaScript in Chrome DevTools

VSCode docs

your TODO list

set up the tools

learn the vocabulary

start your name tag assignment

practice—make something (use the in-browser editor if that’s easier)

be empowered: shape this course & your education

course reps

official liaison between your peers and convener!

gathers feedback from classmate creatively and proactively!

attends meetings with lecturer and the Associate Director (Education)!

want to be a course rep? fill in this form!