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

A2: interactive picture window

man standing near picture window

Outline

  • Due: 9pm Monday September 6 (first Monday of the teaching break)
  • Mark weighting: 15 marks
  • Submission: submit your assignment through Gitlab (full instructions below)
  • Policies: no late submissions accepted; for other policies (e.g. academic integrity) see the policies page

Spec

For as long as people have built walls, we’ve put windows in them. There are lots of different types of windows; some are for looking out, some are for looking in, some are for ventilation, some are for light, some are for heating (passive solar gain), some are for security (peepholes), etc. Windows have seen interesting and important historical events, from Eutychus to the assassination of JFK.

Your job in this assignment is to make an interactive “view through a window” as a p5 sketch.

If you’ve got questions, then make sure you read all the way through to the FAQ at the end of this page—they might be answered for you already 😊

Getting started

Here’s the process for working on the assignment:

  1. fork & clone the assignment 2 repo

  2. make an interactive picture window sketch in sketch.js

  3. as you go, commit and push your progress to the GitLab server

The assignment 2 template repo sketch.js has some basic starter code—in this case to draw the window frame (see the FAQ for more details). There’s a submission checklist below to help you make sure you’ve completed everything you need to in your submission.

This process is exactly the same as for assignment 1 (and the labs as well) so it’s expected that you’re starting to get the hang of it by now. Still, make sure you push something to your fork asap, and then you can reach out for help if you can’t get it to work. Remember to take advantage of the Git help in the FAQ.

Requirements

Your submission must include:

  1. all the code (sketch.js) and assets (in the assets/ folder) required to create an interactive p5.js experience representing your “view through a window”

  2. an artist-statement.md (max 200 words) describing your artwork

  3. a statement-of-originality.yml describing any inspiration/code/assets you got from other places

  4. a thumbnail.png image file in the top-level folder of your submission repo

The artist statement

Your submission must include a short (max 200 words) artist statement. This is a short document, written in the first person, which answers the question:

What are you trying to communicate with your interactive view through a window?

You won’t receive a separate mark for the artist statement, but it will be used to help evaluate your sketch. So make sure you use it to (briefly) talk about things like:

  • what is the inspiration(s) for your work?
  • what can the viewer see through the window? what’s hidden?
  • how have you incorporated interactivity? what are the dangers/opportunities with this approach?
  • what are you trying to make the viewer feel?
  • how is your sketch a “view through a window”—how is it different from just any old sketch which shows an interactive scene?

Submission process

Here’s the process (again, remember the Git help screencast videos)

  1. fork the assignment 2 template repository from the CECS GitLab server

  2. clone1 & work on your fork of the assignment 2 repo, regularly committing & pushing your changes to the GitLab server

  3. at the submission deadline, the latest commit2 pushed to the GitLab server (not on your local machine!) will count as your submission

Again, there are some “checks” which the GitLab server runs to help you out. So if you get a pipeline failed email, then have a look at the FAQ.

Submission checklist

  1. my project satisfies the requirements

  2. my completed assignment has been pushed to the GitLab server, and all the required files (your versions of artist-statement.md, statement-of-originality.yml and sketch.js) have made it to the server

  3. my statement-of-originality.yml file includes all the required references/acknowledgements, and everything not mentioned in there is my own work

  4. my sketch works when viewed in Firefox at the test URL

  5. I have pressed spacebar to save a thumbnail.png` file and added this to my assignment 2 folder (and pushed it!)

FAQ

You can ask a question on the COMP1720 forum using the ass2 tag and if it’s popular enough I’ll put it up here.

Also, remember that there’s lots of helpful info on the FAQ page which applies to all assignments.

What’s the deal with the stuff in the template?

The template repo contains:

  1. a drawWindow() function which draws a (basic) wooden windowframe on top of your sketch (you can modify this if you like, but it’s also ok if you leave it as-is; what’s through the window is the main part of this assignment, not the window itself)

  2. a background image (both the image itself in the assets/ folder, and the code to draw the image to the screen in sketch.js) which you should replace with your own stuff (anyone who just submits the template repo with minor changes will fail the assignment, obviously)

Do I have to have an image in my sketch?

Nope, you should draw the view through the window with p5 functions like rect(), ellipse(), etc. Don’t just use a background image, that’s boring and un-interactive, and you won’t do well.

Do I have to keep the same window frame from the template?

No, you can modify (or replace) it to make your own window frame, as long as there’s a window frame of some sort that you’re looking through.

What counts as a “picture window”?

Same as for the name tag—there’s no legal definition here. You should think about how to push the boundaries, but if you’re in doubt about whether it actually satisfies the requirements make sure you check with your tutor ahead of time (don’t send a panicked email a few days before the deadline).

If there is any doubt about whether your submission is actually a picture window, the course convenor’s decision is final.

What’s the difference between a picture window and a “regular” window?

A picture window is one where the main purpose is for looking through the window—it’s like the view through the window is a “picture” on the wall.

Look, I know that your sketch isn’t like an actual pitcure window—for one thing, it’s interactive. But the main point is that the primary purpose of the window is to see stuff.

What counts as interactive?

The interactive part of the spec means that the sketch must do something in response to the viewer’s actions (e.g. moving the mouse, hitting the keyboard). The temptation here is to make a video game, but remember that that’s not what you’re asked to do in the spec! This is good practice for your major project. But it’s not your MP—so pick an idea with the right scope.

More concretely, here are a few p5 features which you might consider for interactivity (all grouped under the Events section of the reference):

There are other ways to get input from the viewer as well, but that’s a good list to get you started. The method you use to achieve interactivity in your sketch doesn’t have to be fancy—it’s sufficient to just do simple mouse-position-based stuff. It’s what you do with the interactivity (in terms of creating an engaging “view through the window” experience) that matters.

In addition, remember that you can do time-based stuff with the frameCount/ variable (e.g. see the week 2 praxis). However, if your sketch is only time-based, that doesn’t count as interactive, because it’d still run exactly the same if there was no viewer there at all.

How much interaction do I need?

This is just assignment 2 (not a major project), so you don’t have to have a 3-minute long, multi-scene sketch for this assignment. Single scene is fine, with maybe only one or two interactive elements.

I don’t know where to start?

Here are some ideas to help you get started:

  • look around you—what can you see through your window? what about other windows that you look through during a regular week?
  • what do people expect to see through a window? what don’t they expect? what’s the weirdest experience you’ve ever had with a window?
  • in terms of the interaction, think things from the viewer’s perspective: they look at your window sketch… what happens next?
  • think about the interaction timeline—perhaps certain things can only happen at certain times or in certain situations
  • remember the art theory: how to think about colour section in the week 3 lecture

Here’s some window-based work by other artists (in various media) to spark your imagination:

Finally, remember that you can always do a Google Image search just to get your creative juices flowing.

Can I just re-implement an existing “window” from some other medium (e.g. painting, film, etc)?

Taking inspiration from the way existing artists (and others) have looked at windows is ok as long as you reference the inspiration in your statement of originality (if you don’t do this, the course academic integrity rules apply as usual).

However, this is a creative code course, so you need to be creative! If you just copy (perhaps with some small tweaks) something which has been done before you won’t get a very good mark (if you’ve flat-out copied something you might even fail the assignment). So, look around for inspiration, but make sure you mix these ideas with your own ideas in your submission (and explain what you’re trying to achieve in the artist statement).

If you’re unsure, remember that you can get help from your tutor or on the forum—but only if you ask early enough.

Can I make a “window” computer game?

While it’s true that the line between games and art is blurry these days, you have not been asked to design a game. You can certainly look to games for inspiration, but your picture window will be marked as an interactive piece of art.

Here’s one way of thinking about it: in general, in a computer game the goal is provided by the system (e.g. kill the bad guy, collect all the coins, win the race). In this assignment, the goal still comes from the user/artist—you don’t get to tell them what their goal is, you just have to give them a window to look through.

Again, if you’re worried that you’re just making a game, you need to discuss your ideas with your tutor early.

What size should the sketch be?

The template uses windowWidth and windowHeight to set the canvas size based on the size of the web browser window. Make sure your sketch adapts to this size—so use width and height instead of hardcoded numbers (e.g. 200) wherever you can.

Is the CI job which checks my statement of originality still working for ass2?

It is, but due to some changes in the GitLab server there’s one small change to the way it worked for ass1.

For ass2, even if your SoO check fails, you’ll still see a green tick on the main GitLab landing page for your ass2 project. To see if the SoO is all g, you need to click on the green tick: if you see a yellow indicator for the statement-of-originality indicator then you’ve got a problem, and you should look at what the output says to see exactly what’s going wrong. Here’s a gif:

In this gif, the SoO job has failed

If you click through and see only green indicators, then you’re golden:

In this gif, the SoO job has succeeded

  1. make sure you clone your own fork (i.e. the one with your uni ID in the url) to your local machine, not the template (because obviously you aren’t able to change the template for everyone—GitLab won’t let you) 

  2. it’s the master branch which counts as your submission—which is the default anyway (if you’ve just followed all the instructions then you’ve been working on the master branch all along) 

bars times search arrow-left