We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Skip main navigation

Coding Challenge: Colour Wheel

Try to improve this colour selector sketch
Image of the colour wheel sketch, w4_01
© Monash University 2017. CRICOS No. 00008C
In this exercise, your challenge is to improve the functionality of a sketch that is used to choose colours from a colour wheel.
Open and run the w4_01 sketch. The sketch shows an interactive colour picker that uses the HSB model.
You can grab the ‘handle’ with the mouse and rotate it around the hue wheel to change the hue. Moving the handle radially (inwards and outwards from the centre of the ring) changes the colour’s brightness. The colour at the opposite end of the handle represents the complementary colour that is shifted 180 degrees from the main colour.
For a colour selection perspective, there are some improvements we could make to this sketch.

Displaying and storing colours

It would be nice to see the current colour and its complement together and over a larger area than just the handle’s circles. One approach might be to display an row of colour squares along the bottom of the window.
An array of colour chips
When you click on the handle the current square could display the current colour with the complementary colour inside it. As you change the colour, both colours on the current square also change. When you release the mouse the combination is ‘saved’ and the next square is used. When you reach the end of the row you cycle back to the leftmost square, replacing what was previously there.
To implement this you’ll need to create two arrays that store the main and complementary colours for the squares. You’ll also need an int that tells your sketch the number of the current square in which to store the colours. This value should be incremented each time the mouse is released when isLocked is true, to move to the next square.

Changing the angle of the complementary hue

You can add more functionality by allowing the handle to use different angles for the complementary colour. One approach might be to use the keyboard to increment or decrement the angle by 30 degrees using the arrow keys.

Varying the saturation

The current implementation does not change the saturation, keeping it fixed at 100. Can you modify the interface so that you can vary the saturation as well?
This is a more tricky problem, because there are only two dimensions to manipulate with the mouse and individual changes to H, S, and B require three. The mouse only changes in x (horizontally) and y (vertically). In this case we’re converting those movements to an angle (around the wheel) and a radial distance (away from the wheel).
One option is to use a ‘modifier key’ such as the ‘shift’ key. If you pull the handle away from the wheel while holding down the shift key, the saturation is varied from 0 to 100 rather than the brightness (which should be held constant). You’ll need to make use of Processing’s keyPressed to implement this.

How to proceed

Please try to implement one or more of these improvements in the sketch. Remember to save your sketch using a different name each time you make any significant changes, so you can always go back to previous versions. We recommend appending ‘_XX’ to the name, where XX is a two digit number starting from 01 and incrementing each time you create a new version.

What do you think about complementary colours?

You may also have other ideas about how to improve the colour selector sketch. Feel free to use your creativity an imagination with the goal of creating an improvements for someone trying to select two colours that harmonise well together.
Whatever changes you make, you need to critically reflect on any new functionality you create. Ask yourself how your changes improve the sketch towards the goal stated above. Ask friends or family to use the selector and see if they find it intuitive and easy to use.
You can also post ideas in the Comments section of this step. Please also take some time to constructively critique any suggestions listed by others. Keep in mind that constructive criticism should look critically at the idea and offer suggestions for how to overcome the criticism. If you think an idea is a good one please say so, and why you think its good. Don’t say anything in a comment you wouldn’t say to a friend face-to-face.
Critiquing and reflecting on your ideas and those of others before implementing them helps in developing better and more creative responses to the challenge.
© Monash University 2017. CRICOS No. 00008C
This article is from the free online

Creative Coding

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education