Outline

In this week’s lab you will:

  1. make new friends (well, at least one new friend) as you work in pairs

  2. spin the p5 roulette wheel—where will it land?

  3. draw some shapes and make your first p5 sketch

  4. pledge to be a person of integrity in this course

Introduction

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:

  1. this is just the first lab
  2. 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 (x, y, w and h as well)
    • 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. frameCount)
    • if it says something else (e.g. to delete some lines of code) then just follow the instructions
  • don’t ever delete/change the starting code (i.e. the draw() or setup() functions)
  • 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.

Find the 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 policy, I 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 conduct.

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.

CI

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 your 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 ❌):

GitLab repo view with failed commit

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

what the interface looks like when the CI job has failed

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 FAQ for more details.

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

Summary

Congratulations! In this lab you

  1. made a new friend

  2. spun the roulette wheel (and perhaps even had some ideas about how to make it better)

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

Updated:    11 Jan 2021 / Responsible Officer:    Head of School / Page Contact:    Charles Martin