Week 2: processing roulette | Art and Interaction Computing Skip to main content ANU School of Computing Open main menu Search this site Navigation menu ANU School of Computing Assessments Lectures Labs Resources Policies Outline People Getting Help Close main menu Search this site Search this site (powered by Google) Powered by Google Close search COMP1720/COMP6720 / Labs / Week 2: processing roulette Week 2: processing roulette Pre-Lab Task This is your first pre-lab task so make sure you are familiar with the procedure for submitting your post and comments on the course forum, see the lab tasks page. This weeks pre-lab task is: Choose one artwork discussed in the week 1 lectures and then an artwork or other media/experience/artefact (include a picture or reference) that you have experienced or found online. Explain why these two works could be considered “art”. Give at least one reason that they are artistic in different ways. Remember to follow the lab tasks procedure (link). You only need to write (100-200) words and please include a reference or picture of any works you discuss. Don’t forget to read and comment on at least two other entries. Lab Tasks 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. If you are feeling a bit lost—that’s ok! It’s just week one and there are no dumb questions in this course. 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 Task 1: Find a partner 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. Task 2: let’s play p5 roulette. In this lab we’re going to play “p5 roulette”. The ideas is to use random p5 commands to start making an artwork collaboratively! If you’re online: 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 Here’s the wheel! Task 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! Task 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” 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 ❌): 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 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). Extra Tasks These are extra tasks which you should only attempt after you have completed the lab tasks above. You’re not marked on these tasks and they are designed to give you directions for further exploration! Painting with Smooth Lines If you watched the lectures, you will have seen how to create a p5 sketch for “painting” using the mouseX and mouseY. E.g.: function draw() {
fill(255,0,0,100);
ellipse(mouseX,mouseY,150,150);
}
You might have noticed that the when you move the mouse quickly, a trail of circles are left along the screen instead of a smooth line. Your task is to make a painting sketch that solves this problem and can draw smoothly across the screen however you move the mouse. (Hint: you might need to use variables in addition to some new drawing commands from the p5 reference). Colour with HSB So far we have been using RGB values to specify colours, but p5 supports other colour modes (or ways of interpreting numbers as different colours. Have a look at the colour mode page and read about the HSB (hue, saturation, brightness) colour mode. Make a sketch where you draw some objects in HSB mode. One of the great things about HSB is that you can change colours smoothly forever by cycling through different hue values while keeping the other parameters static. We usually represent hue as a number between 0 and 360. Use the modulo (%) operator and frameCount to smoothly change some of your colours as your sketch runs. You might like to change the speed and alter the saturation and value of some colours as well. Draw with Arcs p5’s ellipse and rect shapes each take four parameters (x, y, width, height), but there are other interesting shapes that take more parameters. Have a look at the arc command which takes six parameters (x, y, width, height, start stop) and draws part of a circle. The “start” and “stop” parameters are measured in radians—the angle measurement you might have used in maths. Make a new sketch entirely with arcs - what interesting things can you do with arcs that other shapes can’t do? One idea might be to make a tessellating fan or scale pattern. Make something cool! Back to top Acknowledgement of Country The Australian National University acknowledges, celebrates and pays our respects to the Ngunnawal and Ngambri people of the Canberra region and to all First Nations Australians on whose traditional lands we meet and work, and whose cultures are among the oldest continuing cultures in human history. Twitter Facebook Instagram Youtube LinkedIn WeChat Contact ANU Copyright Disclaimer Privacy Freedom of Information The Australian National University, Canberra CRICOS Provider : 00120C ABN : 52 234 063 906 Updated: 17 Mar 2022 | Responsible Officer: School Director | Page Contact: Charles Martin bars search times arrow-up
