This course builds on >60,000 of culture on this country.

We acknowledge and celebrate the first nations people on whose country we meet, and pay our respect to elders past and present.

your comp1720/6720 team

Course convenor and lecturer: Dr Michael McCullough

Tutor: Yichen Wang

Tutor: Joe Castor

Tutor: Ethan Teber-Rossi

Tutor: Simone Thai

this is a course about making interactive art with computers

making: in this course, we learn through making, every week you will make new computer artworks. The only rule is make.

interactive: interaction between humans and computer system, this is exciting and powerful, but it is hard! this could be start of your journey studying interaction.

art: we will learn some theory about artistic and musical computing so that you can have lots of ideas and develop them well

computers: we need to learn about programming to do the making! We will cover the basics of coding in a language called JavaScript.

admin

lectures

on campus lectures are 8-10am Tuesday and 10-11am Thursday at [Dunbar Lecture Theatre] (see MyTimetable).

if you’re reading this while I’m live talking then congrats you made it! everyone else we’d love to see you in person if you’re able to make it

slides & recordings will be on the echo360 (in Wattle) (also see the FAQ)

labs

labs are in-person in this course!

Sign up on MyTimetable.

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

Labs* start from week 1! Hope we are going to see you soon (or have seen you already)!

*drop-ins

Labs in week 1 and week 12 will run as drop-in sessions (same times and venues as regular labs).

The week 1 lab content is about setting up your tools (Visual Studio Code and Git) and putting a circle on the internet. This is a self-paced exercise. If you need help, attend a drop-in session this week to ask a tutor.

Very important to get on top of GitLab and lab-submission now. This is how you submit all work in COMP1720/6720!

assessments

Look at the assessments page

Assignments: each assignment is about creating a small interactive work of art—a p5.js code sketch – Assignment 1 is out in week 1!

Major Project: Produce a bigger piece of interactive art (in p5.js) for our online exhibition

Note: No late submissions accepted without an extension.

lab tasks

lab tasks are small technical exercises designed to:

• connect thinking (from lectures) with expression (in labs)
• practice creativity and coding

you are welcomed to discuss and work together with your lab peers (students from past years did find this to be extremely helpful for their learning!)

Getting Information and Help

COMP1720 Forum: https://edstem.org/au/join/dswwXs

this is the best (and quickest) place to get help, anonymous as well as private posting

Course website: https://comp.anu.edu.au/courses/comp1720/

lectures, labs, assessments, and policies

Extensions: use the Extension App (see extensions)

referencing and academic integrity

All ideas, code and content that is not created by you must be referenced in your references file.

• This course is a collaborative place.
• You are expected to work together in labs and to take inspiration from online/other sources.
• But, you need to be aware of how to reference appropriately and acknowledge sources.

In every assignment you must acknowledge at least two references in your references.md.

Read the course policy on academic integrity and the ANU’s academic integrity best practices for learners.

Expectations:

Us: help and support ahead of time (communication policy)

You: engage early, participate in your labs, and MAKE!

Warning: Lectures and labs are where we communicate our expectations for your assessments. If you don’t show up, you’re unlikely to know what to do.

You are expected to participate in the learning activities!

course reps

official liaison between your peers and convener!

gathers feedback from classmate creatively and proactively!

attend meeting with other course reps and influence your education!

want to be a course rep? Read this post and follow the instructions within.

code theory

Ok, how are we going to make some art with computers?

(we’ll leave the “interactive” bit for a while…)

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. Chrome)
• 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

painting

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

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

it’s like a big sheet of paper with individual squares

the units are called pixels (px for short)

colours

colours

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.)

N.B.: p5 uses US English spelling colour here is color

vocabulary

p5.js only understands certain instructions

how do you know what you can say?

…the reference

functions

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

let’s see how this looks with a quick demo

syntax

In language this means: the structure of words and phrases in sentences.

In computing this means: the structure of statements in a programming 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)

debugging

• Things go wrong all the time in programming.
• We need feedback from the computer to figure out what is happening.

In your web-browser, you can use the “javascript console” to get error messages from your p5 program.

In Chrome: *developer tools are available through

• View > Developer > Developer Tools
• Ctrl+Alt+I (on windows and linux)
• CMD+Opt+I (on a mac)
• right click on the page to open context menu -> Inspect -> Click Console

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

the lab 1 content is your training in our workflow! Get on it.

what is art?

…and how can we make it in p5?

What is art?

Plato (375BC)

art is imitation

• about copying something out of the real world
• the goodness of the imitation influences the goodness of the art

Kant (1790)

a kind of representation that is purposive in itself

• representation as in something in the world
• not just descriptive, has it’s own role in and of itself

What is art?

Michel Duchamp (1910s)

art is anything (??)

• anything you call art
• not just about representation, being a pretty picture, etc.

(see more at the Stanford Encyclopedia of Philosophy)

What is art?

Dr Tony Curran (2020) (friend of comp1720)

when something is done so well that it exceeds the function of the thing that it is for

it has a surplus or excess je ne sais quoi

• something that exceeds its function, kind of like what Kant said, has its own purpose
• je ne sais quoi meaning I don’t know what

which of these is “art”?

art and material

Sometimes it is good to consider the materials we have and make art that suits them!

What materials do we have for making art in p5 right now?

We know how to make a circle.

art and constraint

art and constraint

but first, another shape…

praxis

Make a Mondrian-style “composition”.

Use basic shapes: e.g., rect

Use basic colours: e.g., fill(255,0,0)

dangers

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

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

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

further reading/watching

Dan Shiffman’s videos (start here)

do lab 1

p5.js reference & examples

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

assignment 1 is due 12 August 2024, 9:00 pm (Monday Week 4)