In this week’s lab you will:
make new friends (well, at least one new friend) as you work in pairs
spin the p5 roulette wheel—where will it land?
draw some shapes and make your first p5 sketch
pledge to be a person of integrity in this course
Welcome to the COMP1720 labs. These labs are the heart of the course, and they’re your opportunity to practice the core concepts you’ll need for the assignments. They are also your chance to explore and ask questions. If you don’t understand all of what’s going on in this lab, that’s ok—for two reasons:
- this is just the first lab
- there are no dumb questions in this course, so the lab sessions are the time to speak up
The labs for this course have a few different recurring parts, presented using different coloured boxes:
General notes & information will be highlighted in a blue box. This lab has a heap of text in it, but don’t be daunted, you’re not expected to remember everything right now. What you should remember is that all this information is here for you when you get stuck.
Sometimes you need to think about stuff before you go ahead. If you see something in a pink box, that’s your clue to pause and think—how do you expect the next part will work? Take a moment to think before you blaze away and start coding, because then you can check whether you really understand what’s going on or whether you’re just copy-pasting stuff without really understanding it. If you don’t understand it perfectly, that’s ok—ask a question in your labs Team channel and your tutor (or maybe one of fellow students) will help you out.
One of the great things about uni is that you don’t learn in isolation. The lab sessions will have plenty of chances to discuss things with others in your lab group. If you see a green box, read it and find someone to discuss it with on Teams. In this course, as in most (all?) others, your fellow students are your best resource. If you have a problem with your work, or if there’s something you don’t understand, the first thing you should do (after thinking about it for at least ten seconds) should be to ask another student. They might not know the answer straight away, but even if they don’t, you might find that between the two of you you can work it out. If you can’t, then of course you can ask your tutor—but your tutor might not be able to help you immediately. This also means that if you’re helping one of your fellow students understand something, put yourself in their shoes. It takes courage to ask a question, especially if you feel like everyone else in the lab knows what’s going on (although that certainly isn’t true). Be gentle and helpful in your answers, and remember that you can be honest about stuff that you don’t know—you’re all on this journey together.
When it’s time to actually do something, e.g. push the current version of your sketch up to GitLab, it’ll be clearly marked in an orange-coloured box. Don’t just read past to the next section (where the answer might be discussed), make sure you attempt to complete the exercise yourself.
Art & Interaction in New Media (hey, that’s the name of this course!) is a huge topic, and mastering it takes a lifetime. So the material in these lab sessions will only cover the fundamentals. However, sometimes there are interesting extension exercises you might try if you want to go deeper, and these will be in a purple box. If you don’t know how to approach the problems in the purple boxes, that’s ok too—you’ll do just fine in the course if you can do all the rest of the stuff in the labs. Still, it’s a chance to ask your lab mates and tutors and stretch yourself if you have time.
These coloured boxes will be used consistently through the lab material, so take a moment to familiarise yourself with what the different colours mean, or at least remember that you can come back here and check at any time.
Part 1: p5 roulette rules
This semester Harrison is running a small study alongside COMP1720 to learn more about how people learn to program: and he’s inviting you to participate. Participation is as simple as making a note whenever you come across an error — and don’t worry there’s an extension set up to help you track them. To learn more, check out the page on Ducky.
Go to the Teams channel for your lab, and look for someone to partner up with — if you can’t find anyone, send a message so someone can find you. This person is now your lab partner (just for today)! There will be several group activities in these labs during the semester, but you won’t have a specific lab partner for the whole course.
Ask your partner a bit about themselves (where did they grow up? what are they studying at uni? what are they hoping to learn in this course?), and send a message to the chat introducing them to the rest of the lab.
You’ll be using the same tools you setup in lab 1. So open VSCode and dive in.
Open the gitlab repository for lab 2 and make a fork. If you can’t remember how to fork, you can re-read last week’s lab notes. Now copy the git url from your fork and clone it to your computer with VSCode. In the repo, open
sketch.js; this is where you’ll write your code today. Finally, start the p5 live server.
The aim of this lesson is to jump in straight away and make some generative art with code. We’ll be playing a game of chance, we call “p5 roulette”.
You might find it helpful to screenshare with your partner so you can see what each other is doing: you should one person to spin the wheel, and the other to write out the code (swap after a few rounds!).
The rules of p5 roulette are:
- click to spin the wheel
- when it stops, follow the instructions
- if it’s a function call (e.g.
ellipse(x,y,w,h)) you get to add that line of code anywhere in your sketch, and you get to choose the parameters (
- if it says “replace any number with …” then you get to replace any
number in the code (e.g. a
100) with whatever the roulette wheel says (e.g.
- if it says something else (e.g. to delete some lines of code) then just follow the instructions
- if it’s a function call (e.g.
- don’t ever delete/change the starting code (i.e. the
- if the p5 roulette wheel ever tells you to do something which makes no sense (e.g. delete a line of code when you haven’t added any lines yet) then just ignore that and spin it again
- make sure you talk through the options (e.g. parameter choices) with your partner
Part 2: let’s play
Part 3: Break it down!
The roulette wheel is a great way to get started and try new ideas. But another great way to get inspiration is to read and experiment with other artists’ code.
In this section, we’ve provided a working sketch using the functions you’ve just been using. Your job is to experiment with the code and see if you can make it do something interesting! See if you can break it and understand how it works.
If you need ideas you can always go back and get another function from processing roulette. Other ideas include adding colours, changing rotation values or the for loop. Don’t worry about making something beautiful, the aim is to experiment.
Reading and editing other artists’ code is an important skill and a great way to get inspiration. But don’t worry if you don’t feel like you understand this code yet, we’ll cover all this in the lectures.
Try and make this sketch your own — modify it and experiment with it for a bit. Before you move on, send a screenshot to the Teams channel to show others what you’ve done!
Exercise 4: sign & submit your pledge of integrity
Today’s lab “submission” isn’t an p5 sketch program, it’s a pledge of integrity. This is a short YAML document (what’s YAML?) stating that you understand and are committed to conducting yourself with integrity in this course.
pledge-of-integrity.yml file in the top-level of your lab 2 folder.
Read it, understand it, “sign” it by adding your uni ID, name & preferred name
in the appropriate places. If you need some help with the YAML syntax, have a
look in the FAQ, especially at the common “gotchas”
So what’s with the
preferred_name key in the file? I’m not enforcing a
strict real name
want you to use a name that people actually call you. If you’ve got multiple
names (e.g. a Chinese name and an English name) you can pick whichever one you
like. If you go by a different name from your birth certificate (for whatever
reason) that’s ok as well. You’re a grown-up studying at university, and the
name you pick should be the name you use to introduce yourself in any other
similar grown-up situation. And remember the code of
Why is this necessary? Well, marking assignments & labs & providing good feedback is really time consuming. We (the course convenor & the tutors) are absolutely committed to doing it in this course, because we’re here to help you learn. However, it wastes your time & ours (and much worse) if we have to deal with academic misconduct issues. By “signing” & committing this pledge, you’re promising that you won’t engage in that conduct. So you won’t receive any marks or feedback in this course until you’ve done it.
The submission process is also the same as the one you’ll use to submit your assignments in this course, so by submitting your pledge you’ll also get a taste of that process.
Commit your (filled-out)
pledge-of-integrity.yml file to your repo and push it
to your fork on the GitLab server. Give it a helpful commit message like “signed
pledge of integrity” or something so that when you’re looking through the git
log view later you know where you were up to.
In GitLab, there is a feature called Continuous Integration (CI). It’s basically a set of jobs (builds & tests) which run (on the server, not on your laptop) every time you push something to your repo. In COMP1720 we use CI to do some basic testing to help you make sure that you haven’t forgotten to add your files, have filled out your statements of originality correctly, etc.
For the lab 2 template repo, there’s a job which checks that you’ve filled out
pledge-of-integrity.yml file correctly. If you haven’t, when you look at
your fork of the template repo on GitLab, it’ll look something like this (note
the red ❌):
If you want to know why the CI tests failed, then you should click on the ❌ itself, then keep clicking the ❌s until you see a screen like this (you can also find the CI pipelines and build jobs through the “CI / CD” sidebar on the left).
If you’re editing the
pledge-of-integrity.yml file in VSCode, you might even
see some MS Word-style red squiggly underlines—see the
You can ignore most of the details (they’ll be different for you anyway) but the
key message here is near the bottom of that screen, where it says “schema error
in ‘name’: missing value, should be of type ‘string’”. That’s good info—it’s
saying that I haven’t added my name to the
pledge-of-integrity.yml file yet
(which is true). If I fix this, it will either give me a different error (if
there’s still something wrong) or I’ll get a nice green tick mark (✅).
Don’t be worried by this stuff—espesically by the angry redness of the ❌ and the scary-looking “build failed” emails. This is actually all good news, because it lets you know if things aren’t working as they should be while you’ve still got a chance to do something about it. For heaps more information on how we use CI in this course, see the GitLab CI section in the FAQ.
Finally, if you did find this stuff challenging that’s ok. You can take heart that all of the stuff you just learned will be useful for every piece of work you submit in this course, and you just had a low pressure, zero-stakes introduction to it. So well done you, you’ve saved yourself a bunch of stress at assignment submission time (when stuff is actually on the line).
Congratulations! In this lab you
made a new friend
spun the roulette wheel (and perhaps even had some ideas about how to make it better)
drew some shapes and make your first p5 sketch
Thank your lab partner for the fun times, and we’ll see you in next week’s lab.
Make sure you log out of the lab computer.