You should have a pretty solid grasp of how to effectively manipulate pixels with images. I guess now we should talk a little bit about color. Why, after all, do we pick red, green, and blue as our primary colors from which to build things?
History
- 1666 – Isaac Newton demonstrates white light is a combination of colors.
- 1802 – Thomas Young postulates the existence of three types of photoreceptors in human eyes.
- 1849 – James David Forbes experiments with rapidly spinning tops creating the illusion of a single color out of a mixture.
- 1850 – Herman von Helmholtz classifies human color receptors as short, medium, and long corresponding to the wavelengths they are sensitive to.
- 1861 – James Clerk Maxwell demonstrates a color photographic process using red, green, and blue light.
It turns out that the long, medium, and short photoreceptors (cones) in our eyes roughly correspond to red, green, and blue, respectively. When emitting light, these three colors can be combined in various ways to produce all of the colors most humans are capable of seeing. There are several color spaces we can use to generate human-friendly colors, but today we will focus on RGB.
The Forbes Top
(I made this name up)
Clearly, techniques for capturing and displaying color have been refined over the last few centuries. We now enjoy color televisions, LCD screens, web cams, and so-called ‘retina displays’ to name a few. Today, we are going to take a step back and try to simulate the rapidly spinning tops that James Forbes first experimented with. The results will be somewhat crude, but they should demonstrate the concepts.
The most important component of this application is actually the design of the colorized circle that will represent our top. I tried several different approaches before settling on 36 different slices (12 per color) with the colors alternating. Coupling this with an adjustable rotation, an illusion of color can be established.
Here is the final product with red = 0, blue = 255, and green = 128:
My attempts at a screen capture video failed. You’ll just have to download the code and try it yourself. The only tricky component is actually drawing the wheel so I will walk through that piece. As always, the rest of the code will be downloadable below.
Draw a Pie
private void DrawPie()
{
//drawing board is just a canvas
//let’s start with a clean slate
DrawingBoard.Children.Clear();
//red, green, and blue are member
//variables adjusted with sliders
double colorsum = red + green + blue;
// a circle has 360 degrees or 2*Pi radians
// we need to divide that into the different color
// components.
double redAngle = 2* Math.PI * (red / colorsum);
double greenAngle = 2* Math.PI * (green / colorsum);
double blueAngle = 2* Math.PI * (blue / colorsum);
// this part is tricky
// I am essentially doing a gamma function
// to try to keep the intensities close
// I eyeballed it so it’s not 100% accurate
byte intensity =
(byte)Math.Min(
Math.Pow((red * .33
+ green * .34
+ blue * .33), 1.2), 255);
Point start = new Point(0, 100);
Random random = new Random();
// we are going to divide our top
// into 36 slices — 12 per color
const int numSlices = 36;
for (int i = 0; i < numSlices; i++)
{
SolidColorBrush brush = new SolidColorBrush(Colors.Black);
double angle = 0;
switch(i % 3)
{
case 0: //red
angle = redAngle / (numSlices / 3);
brush = new SolidColorBrush(
Color.FromArgb(255, intensity, 0, 0));
break;
case 1: //green
angle = greenAngle / (numSlices / 3);
brush = new SolidColorBrush(
Color.FromArgb(255, 0, intensity, 0));
break;
case 2: //blue
angle = blueAngle / (numSlices / 3);
brush = new SolidColorBrush(
Color.FromArgb(255, 0, 0, intensity));
break;
}
// this code was essentially lifted from the Silverlight forums
// http://forums.silverlight.net/forums/t/9013.aspx
// Yi-Lun Luo posted it as a method for drawing pie graphs
// I modified it for the color top
// I will warn you that if your angle is > 90 degrees
// you will most likely run into trouble
Path path = new Path();
PathGeometry geometry = new PathGeometry();
PathFigure figure = new PathFigure();
// The center point is 0,0.
figure.StartPoint = new Point(0, 0);
LineSegment line1 = new LineSegment();
// Draw a line from the center of the circle to the start
// point of the sector’s arc.
line1.Point = start;
figure.Segments = new PathSegmentCollection();
figure.Segments.Add(line1);
ArcSegment arc = new ArcSegment();
arc.Size = new Size(100, 100);
arc.SweepDirection = SweepDirection.Clockwise;
Point p = start;
//Perform a rotate on the start point of the arc
// to compute the end point.
p.X = start.X * Math.Cos(angle) – start.Y * Math.Sin(angle);
p.Y = start.X * Math.Sin(angle) + start.Y * Math.Cos(angle);
//The next sector’s arc will begin from this one’s end point.
start = p;
arc.Point = p;
figure.Segments.Add(arc);
LineSegment line2 = new LineSegment();
// Draw another line from the sector’s end point
// to the center of the circle.
line2.Point = new Point(0, 0);
figure.Segments.Add(line2);
geometry.Figures = new PathFigureCollection();
geometry.Figures.Add(figure);
path.Data = geometry;
// Assign a random color to this sector.
path.Fill = brush;
DrawingBoard.Children.Add(path);
// Since our circle ranges from -100,-100 to 100,100,
// we’ll set the Path’s Left and Top to show all the graph.
path.SetValue(Canvas.LeftProperty, 100.0);
path.SetValue(Canvas.TopProperty, 100.0);
}
}
Summary
The most useful piece from this lesson might be the code for drawing a pie graph, but a bit of history is always fun. The bottom line is that RGB comes from biology. Our eyes are sensitive to those colors, so if we use them to mix we should be able to create images that mimic real life.
Download Code
Up Next: RGB Color Intensities
azzlsoft.com 