Outline

• Due: 9pm Monday September 3 (first Monday of the teaching break)
• Mark weighting: 10 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

Description

I’m sure you’ve used a colour picker tool before, whether it’s the sidebar in Microsoft Paint, or Photoshop’s colour picker tools, or an online one like on MDN. They all work slightly differently, but their goal is the same: to allow you (the artist) to pick a colour to use in your artwork.

However, they’re all a bit too easy to use 🙂 Your task for this assignment is to design a challenging colour picker interface. This means that there should be some amount of challenge (or skill) in picking the right colour. There are heaps of ways to make an interface challenging—be creative! Here are a couple of things to think about:

1. what is the challenging aspect of your interface is
2. how do I provide the appropriate level of challenge

If you have questions you should discuss them with your tutor or on the COMP1720 forum. Feel free to look around the internet for inspiration, but the code you submit must be your own (except where you acknowledge it in your statement-of-originality.yml). We’ll also be discussing challenging interfaces in the week 5 code & design lecture.

Getting started

Here’s the process for working on the assignment:

1. fork & clone the assignment 2 repo
2. make an interactive colour picker sketch in sketch.js
3. as you go, commit and push your progress to the GitLab server

As in assignment 1 the assignment 2 template repo sketch.js has some (minimal) starter code. 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. a challenging colour picker interface (as a p5 sketch) which allows the user to interactively set the pickedColor variable using the mouse/keyboard or other p5 input device (see the template)
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

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 achieve with your colour picker as a work of challenging interface design?

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

• what is the inspiration for your design?
• how have you tried to make it challenging?
• what are the dangers/opportunities with this approach?
• how have you calibrated the level of challenge?
• what are you trying to make the viewer feel?

Submission process

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

1. fork the assignment 1 template repository from the CECS GitLab server
2. clone¹ & work on your fork of the assignment 1 repo, regularly committing & pushing your changes to the GitLab server
3. at the submission deadline, the latest commit² pushed to the GitLab server(not on your local machine!) will count as your submission

One thing to note is that 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 Chrome on the lab machines at the test URL (http://comp1720.cecs.anu.edu.au/uXXXXXXX/assignment-2/, withuXXXXXXX replaced with your UID)

FAQ

You can ask a question on the COMP1720 forum in the COMP1720 > Assignmentssubcategory 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. You really should check it (and the rest of that page) out—I think it’ll really help.

What counts as a colour picker?

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.

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

I don’t know where to start?

Here are some ideas to help you get started:

• look around your computer—which programs present some sort of colour picker interface?
• look around the web—what are the different variations on this design problem?
• think about the task from the beginning: an artist looks at your interface and thinks “I want to pick a colour”… what happens next?
• the challenging behaviour might only happen at certain times or in certain situations
• there are lots of ways you could incorporate a challenging (or even frustrating) element, remember to be subtle—the most frustrating interfaces are the ones which almost work!
• look at the challenging volume slider examples from the week 5 code & design lecture

Can I just re-implement an existing colour picker interface with a few small tweaks?

Taking inspiration from existing colour pickers (or other similar interfaces) 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) an existing interface 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—but only if you ask early enough.

So I’m supposed to make a “colour picker” computer game?

Not quite. While it’s true that games are really good at providing challenge (and increasing the level of challenge/difficulty as the user gets more skilled) you have not been asked to design a game. You can certainly look to games for inspiration on the “challenge” aspect, but you will be marked on how your sketch works as a challenging colour picker interface element (i.e. that it’s actually going to be used by a working artist to pick colours).

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 colour they should pick, you just have to give them an interface for choosing the colour(s) they want. The goal still comes from them, and it comes out of whatever artistic goal they’re pursuing at that time.

Do I have to display the picked colour in the bottom-right (as in the template)?

Nope, as long as it’s clear to the user what the current picked colour is, it doesn’t matter exactly where/how/what shape it is.

Can I make it impossible to pick the right colour? That’s a challenge, right?

If you make it impossible it’s not a good challenge. You could just make a black square (so that the artist can only pick black). But there’s no fun in that challenge, it’s obviously impossible right from the start. To get a good mark, you need to provide a good level of challenge (perhaps a variable level?) so that the artist can see that mastering the interface isn’t impossible, even if it doesn’t always work the way they want it to.

How do I know if I’ve done a good job?

One way to figure out how you’re going is to show your sketch to a friend and have them pick a few colours. If they can’t do it at all, then your interface is probably too challenging/confusing/frustrating. If they can do it really easily, then perhaps you need to put a bit more thought into the “challenge” part of your interface.

If you get any ideas/inspiration/code from anyone else (whether they’re in this course or not) then make sure you acknowledge them in your statement of originality.

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.