Michael McCullough
Semester 2, 2024
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.
Course convenor and lecturer: Dr Michael McCullough
Tutor: Yichen Wang
Tutor: Joe Castor
Tutor: Ethan Teber-Rossi
Tutor: Simone Thai
In-class discussion: Introduce yourself to your neighbour!
Tell one boring fact about yourself.
Tell us about a food that everybody likes but you hate.
Tell us your favourite under-rated video game / movie / show / book / … character.
For those watching/reading online post a reply on the forum (Ed) and introduce yourself! make a reply to the “Introduce Yourself” thread.
Note: If you can’t access the forum please let me know and I’ll fix it
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.
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 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)!
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!
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 are small technical exercises designed to:
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!)
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)
All ideas, code and content that is not created by you must be referenced in your references file.
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.
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!
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.
Ok, how are we going to make some art with computers?
(we’ll leave the “interactive” bit for a while…)
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 reference: https://p5js.org/reference/ is your most important resource!
whenever I refer to “the reference”, that’s what I’m talking about
a p5 sketch is a digital canvas
you draw lines, shapes & other things
fill/stroke colours (the “paint” on the paintbrush)
p5.js: Coordinate Systems and shapes
https://p5js.org/learn/coordinate-system-and-shapes.html
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)
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
p5.js only understands certain instructions
how do you know what you can say?
…the reference
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
In language this means: the structure of words and phrases in sentences.
In computing this means: the structure of statements in a programming language
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
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)sketch.js
) in your editor (VSCode)sketch.js
file the webserver tells Chrome to
refreshthe lab 1 content is your training in our workflow! Get on it.
…and how can we make it in p5
?
Plato (375BC)
art is imitation
Kant (1790)
a kind of representation that is purposive in itself
Michel Duchamp (1910s)
art is anything (??)
(see more at the Stanford Encyclopedia of Philosophy)
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
Meret Oppenheim (1913–1985)
Object
1936
Fur-covered cup, saucer, and spoon, Cup 4 3/8” (10.9 cm) in diameter; saucer 9 3/8” (23.7 cm) in diameter; spoon 8” (20.2 cm) long, overall height 2 7/8” (7.3 cm)
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.
Sonia Delaunay
Prismes electriques
1914
Oil on canvas, 250 x 250cm (at Centre Pompidou, Paris)
Jodie Cunningham
Canberra Journeys ‘Design for Gateway Arch Crown for Woolley St Project
2019
In collaboration with PLACE Laboratory
Bridget Riley (b. 1931)
Hesitate
1964
Emulsion on board, 106.7 × 112.4 cm
Tate Gallery, London
Ensemble Metatone (Charles Martin et al.)
custom iPad app
but first, another shape…
Piet Mondrian (1872 - 1944)
Evening: Red Tree
c. 1909
Oil on canvas. 70 x 99cm
Piet Mondrian (1872 - 1944)
Still Life with Gingerpot I
1912
Oil on canvas, 65.5 x 75cm
Piet Mondrian (1872 - 1944)
Still Life with Gingerpot II
1912
Oil on canvas, 91.5 x 120cm
Piet Mondrian (1872 - 1944)
Composition 10 in black and white
1915
Oil on canvas, 85 x 110cm
Piet Mondrian (1872 - 1944)
Composition C (No.III) with Red, Yellow and Blue
1935
Make a Mondrian-style “composition”.
Use basic shapes: e.g., rect
Use basic colours: e.g., fill(255,0,0)
“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!”
Dan Shiffman’s videos (start here)
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)