Color Wheel - HSB
Previous    Next    Home    Source    Package

A Color Wheel
  1. Draws many thin circles (2 pixels thick) each at a different hue, depending on angle, but with the same saturation. The saturation changes, though, from circle to circle. The innermost circle has 0 saturation and the outermost circle has 1 (complete) saturation.
  2. Hue is a number that varies from 0 to 1. Hue is determined from the angle around the circle at which a pixel is drawn. There are 2π radians around a circle. Thus, if there are n points comprising a drawn circle, the hue at the ith point is 2π(i/n).
  3. The calculation of hue above is convenient because angle was used as an iterator. To actually locate a point from the angle we make use of trigonometric functions. Thus, the x coordinate is R*Math.sin(angle)+C) and the y coordinate is R*Math.cos(angle)+C), where C is the number of pixels to the center of the circle and R is the radius of the circle.
  4. This implementation makes use of paint to do all the drawing. This means that every time some change in the image is made, say by resizing, all the graphics have to be redrawn. This is expensive. The solution is double buffering which is shown on the next slide.