## 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)
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
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;
}

.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: