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
introduce yourself on Teams!
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
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.
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?
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
coming up with good ideas is hard
connect thinking (from lectures) with expression (in labs)
your first pre-lab task is due in week 2
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
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!
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)
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
late submission/extension/academic misconduct policies?
let’s talk about expectations
responsive communication (as per the communication policy)
help ahead of time
support in realising your artistic vision (especially in the major project)
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
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
learning the tools (it’s worth the effort!)
conceptualizing an artwork
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
a library is just bunch of code (perhaps written by someone else)
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
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)
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?
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
from the Oxford English Dictionary
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
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
View > Developer > Developer Tools or
Or if you’re on Firefox, it’s
sketch.js) in your editor (VSCode)
sketch.jsfile 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 computer is like a 5yo (sortof)
loves to paint!
… but needs clear instructions (has a small vocabulary)
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
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?
Dan Shiffman’s videos (start here)
MDN js docs (more advanced, general js not specific to p5.js)
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
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!