### Drawing the colour wheel with JavaScript

## A brief follow-up to my earlier post on automatically generating colours using JavaScript, I just couldn't stop! It slightly irritated me that I had to search online for a picture of the colour wheel for the previous article (and found it on Kuler web-site, which is cool and all, but…), while I could easily generate it myself!

So, here's what I came up with, adding some niceties:This is an example of using a scripting language for quick prototyping and demos, so the approach is not the most efficient performance-wise, but gave me a quick result. The main thing I would change if it were needed for actual usage — I would not use the DOM for individual “pixels”, this is a luxury. Canvas is a better candidate for such things.

### The Code

Here's the working example of JSFiddle, and the important snippets are below:var dim = 51; // Beware of setting too high var html = ''; for(var i = 0; i < dim; i++) { // Draw row for(var j = 0; j < dim; j++) { // Draw pixel html += '<span class="pixel' + (j == 0 ? ' first' : '') + '" style="background-color: ' + getColour(i,j,dim/2) + '"></span>'; } } $('#wheel').append(html); // Returns colour of pixel based on its offset // and circle's radius (square width / 2) function getColour(i, j, radius) { var angle; var col = '#fff'; var x = j - radius; var y = radius - i; var dist = Math.sqrt(x*x + y*y); // If inside the circle if(dist <= radius) { angle = Math.round(180 * Math.acos(x / dist) / Math.PI * (y < 0 ? 1 : -1)) + 90; col = 'hsl(' + angle + ', ' + (Math.round(dist / radius * 100)) + '%, ' + (80 - Math.round(dist / radius * 20)) + '%)'; } return col; }

And you need this CSS to have the pixels align correctly:

.pixel { display: block; float: left; height: 6px; width: 6px; margin: 0 1px 1px 0; border-radius: 3px; } .first { clear: left; }

### Calculations

The logic is simple — remember those trigonometry classes, the ones you couldn't understand why you will ever need them? Why, for drawing colour wheels, of course!I am drawing a square (wait), and for each pixel from its (x, y) coordinates I detect whether it is within the radius of the circle (see?). If not — draw pixel white (could make it transparent too, if I needed). Distance from the circle origin is the square root of sum of squares of the coordinates. This distance also determines saturation of the resulting colour, and a slight variation of lightness (that makes it look nicer).

The hue is the angle of direction to the pixel compared to the vertical. To determine this I use arccosine — inversion of cosine value (school strikes back). Keep in mind that this gives you result in rads (full circle is two Pi), not degrees, so I still need to convert it.

Put angle and distance together to get a colour — and voila, — you get the nice-looking wheel.

### Playing Around

With some time, inspiration and luck there can be many variations of the resulting picture:
…or even the “proper” wheel:

## Comments

## Post a Comment