Skip to main content Open main menu ANU crest Search this site
Close search

Week 1: putting a circle on the internet

We are going to run drop-in sessions so that you can pop in and ask any questions you have/encountered while doing our self-paced lab 1.

We have two options:

  • Wednesday July 28th 3 - 5pm at N115/116 CSIT and online via Team Drop-in Sessions channel
  • Thursday July 29th 2 - 4pm online via Team Drop-in Sessions channel

Please feel free to pop in and see you guys there!

Pre-Lab Task

None this week!

Lab Tasks

Lab 1 is a self-paced lab to introduce the tools for COMP1720/6720 before the normal lab material starts in week 2. You can work through it at any time, anywhere.

If you can accomplish this week’s lab tasks then you’re ready to start the course. If you get stuck that’s ok: you can either ask questions on the COMP1720 forum or come to one of our week 1 drop-in lab sessions (see timetable).

If this is all very new and scary for you—that’s ok! There’s lots of support in this course to help you get your system organised and get started with coding. The main thing is to put in the effort to get started and then ask for help if you need it.

This first lab is optional (although from week 2 onwards you’ll need to attend your lab if you want to have your lab tasks assessed).

In this week’s lab you will:

  1. meet the tools you’ll need in this course, including VSCode, the GitLab code server and Microsoft Teams.

  2. go through the steps you’ll need to submit assignments in this course

  3. put a circle on the internet

Task 1: software setup

In this course you’ll write code using the VSCode text editor, run the code in the Firefox web browser, and download/view/submit your lab & assignment code with git You’ll also use Microsoft Teams to access lectures and labs, and to hang out with other students synchronously.

There’s a separate page dedicated to software setup, so if you’re on your own laptop you should head to the software setup page and follow the instructions.

You’ll also want to have a look at the instructions for attending online labs and lectures.

You can install the software on your own machine and we also advise you to try using a virtual lab machine: ANU Virtual Information Commons.

The virtual lab machines have the software you’ll need pre-installed with one exception: you’ll need1 to install the COMP1720 VSCode extension (step 3 in the VSCode setup instructions).

Task 2: forking the lab 1 template

From here, we’ll use a few git-specific terms, and in general we’ll explain everything along the way. If you’re confused, though, there’s a section on git help in the course FAQ or some extra installation help available in the software setup FAQ

Once you’ve got the software you need, you have to log in to the GitLab server at using your normal ANU credentials (uni ID and password) and bring up the lab 1 repository. A repository (often abbreviated to “repo”) is basically just a box which stores a bunch of files and their history (the changes they’ve been through over time). Whenever you hear the word repo/repository, think “a directory of files which Git is keeping track of”.

This template is a starting point for everyone who wants to complete this lab, so before you can start working on it you need to create your own “copy”. This is called forking, and creates a new repo (your “fork”).

To fork the lab 1 template, click the fork button on the GitLab page in your web browser (I’ve circled it in red).

Once you’ve done that, you should see a page like the one below—you now have your own fork (copy) of these files on the server, as indicated that it shows your name in the top-left-hand corner (circled in green). The files are exactly the same, but the repo is now attached to your GitLab account, rather than the comp1720/2021 GitLab account, so you can change the files and push things up to the GitLab server without messing up anyone else’s starting point.

This part of the process is covered in the forking screencast video.

Task 3: cloning the lab 1 template

Your fork of the template repo is still on the GitLab server, though. To actually work on these files, you need to clone (download) this repo to the computer you’re working on.

  1. In VSCode, open the command palette (View > Command Palette, or Ctrl+Shift+P/Cmd+Shift+P on macOS) and a prompt will appear in the top.

  2. Type git clone and hit enter. A box will appear asking for the repo url.

  3. Back on gitlab, open your fork of the lab code. Directly under the page title there’s a box that looks like this (if it doesn’t say HTTPS on the left hand side, click that box and select it. Now click on the right hand side box to copy the URL to your clipboard.)

    Url Box

  4. Back in VSCode, paste the url into the prompt box and hit enter — making sure that the “Clone from URL” option is highlighted.

    Don't click "Clone in GitHub"

  5. A window will open asking you where to save the files. If this is your own computer it might be a good idea to create a comp1720 folder and clone all your repositories there. If this is a lab computer, make sure you save this to your university homedrive (it’ll be called u1234567). When you’ve found a good spot for you files hit Enter or click “Select Repository Location”.

  6. Now you’ll be asked to enter your username and password. This will be the same uid and password you used to log into GitLab.

  7. If you entered your uid and password correctly, a popup will appear in the bottom right of VSCode asking you to Open Repository or Add to Workspace. Today we’re going to choose Open Repository, but they have a similar effect.

Great job! Now lets make that circle.

This part of the process is covered in the cloning screencast video.

Task 4: making a circle

Now you’ve got the template files in VSCode you can get to work.

In the sidebar on the left you can see all the files in the template folder. Throughout the course we’ll explain what each of these files is for but for now the one we care about is sketch.js. Click on that one and VSCode will open it up and look something like this

You’re getting close to creating the circle you’ve been thinking about all along. In the draw function (immediately below // your "draw loop" code goes here) add the following lines:


Now save the file.

The final piece of the puzzle is to run/view the sketch. To do this, you need to start the live server:

  1. Open the command palette (View > Command Palette)
  2. Type “Open with live server”
  3. Hit Enter

Your default browser will open up and should show a white circle on a charcoal background.

As stated on the software setup page you should use Firefox as your web browser for the course, and (for convenience) you could set it to be your default browser (since that’s what the live server extension will open the sketch in).

It might not look like much, but you’ve made your first p5 sketch, and you should take a moment to enjoy your success.


Task 5: committing & pushing the changes

Now that you’ve successfully completed today’s task of putting a circle on the internet it’s important that you save your work and push it up to GitLab. This process is important to learn because it’s the way you’ll submit all your assignments for this course!

The first thing to do is save your sketch.js the usual way (i.e. File > Save or Ctrl-S/Cmd-S depending on your OS).

Now you want to upload your changes to the sketch.js file back to gitlab so it’s safe and sound. This involves some more VSCode commands so open up the command palette using View > Command Palette.

Type in git commit all and press enter. You’ll get a popup which says “There are no staged changes to commit. Would you like to automatically stage all your changes and commit them directly?”. Click yes.

Now you’ll see a popup asking for a “Commit Message”. Write a note about the changes you made (e.g. “I added a circle to the sketch”). This message is just so you can remember what this change was so write whatever makes sense to you.

In Git’s terminology, a commit is a snapshot of your code at a particular time that you can always return to. This means that if you break your code somehow you can always feel safe knowing you can just return to your last commit where everything was working. When working on assignments you’ll want to commit your code regularly just to be safe.

Now all you have to do is push (upload) these committed changes to GitLab with the push command. Open up the command palette using View > Command Palette, type git push and hit Enter. You might need to put your UID & password in again at the push step. If you get an unauthorised message, try once more and if it still doesn’t work seek help from a tutor or friend.

If everything worked successfully, then when you refresh the GitLab project page for your fork (i.e. you should see the first line of that commit message as shown:

GitLab server after new commit is pushed

And if you click on the sketch.js filename further down you should see the new version with your ellipse line in there. Hooray!

GitLab server file view

This part of the process is covered in the committing and pushing screencast videos.

Task 6: putting your circle on the internet

It might have felt like your sketch was already on the internet when you were building it before because it was in your browser, but really it was only visible to you. By pushing your code to gitlab, your page was automatically published online within the ANU network.

You can check this worked by copying and pasting this link into your browser and replace uXXXXXXX with your university ID.

If you can see your circle, great job, you’re done!

It’s good to get in the habit of checking the published version of your sketches because this is what your tutor will see when they mark your assignments.

Extra Tasks

In every lab you will have some extra tasks available if you have finished your main lab tasks.

If you feel like you’re completely exhausted after completing the tasks above—that’s ok! We only expect you to complete the main tasks each week. Remember that this is just week 1, and we will explain everything in great detail over the next 12 weeks, it’s most important just to make a start early.

Setting up Git to work without a password

If you like, there are some extra steps you can take so that you don’t have to type in your uni ID and password every time, but it’s not essential and you can also add that stuff later.

(If you’re new to all this git stuff, probably just stick with the ID & password for now.)

  1. If you’re on your own machine or on a lab machine, you’ll only have to do this once—after that they’ll be saved to your home directory and will be automatically detected when you log back in. Some on campus lab machines, need you to install the COMP1720 extension each time you log in (a pain, but it only takes a second). 

bars times search arrow-left