How OLEDs work ... optically speaking

I got the funniest question a couple of days ago from a tech science teacher who is using the TouchShield Slide with her classes to teach about how technology works. Actually, for the actual class she uses a demo kit from the OpenBerry pack, with some custom code I wrote for her that says funny messages about her classroom.

She told me that some of her students asked how different colors worked on the TouchShield, like how does it display 1000's or millions of colors? Funny you should ask :-)

I just so happen to have a microscope at my day job that I can borrow and use from time to time, so I did... and this is what you see underneath it:

That's a start... this is a passage from the bible, actually (I know, I'm not too religious personally, but she teaches at a Cristian middle school so I figure it's appropriate, plus Tim Tebow is religious so that makes everything ok because he's ridiculous... but I digress). For the more agnostically-inclined, here's a picture under the microscope of "Hello World" in blue too:

From here, everything clearly looks bluish in color. Actually, this is a picture of the TouchShield Stealth (since the full Slide wouldn't fit under the microscope).

Now, if I zoom in to the "world" part, all the fun happens:

Here you can see clearly the different segments for Red light, Green light, and Blue light.

Everyone always says "RGB" and I used to wonder why... well, here you can see how and why: because each single pixel is actually 3 little bars of organic substance that glows when electrical current is passed through to it. Those three little bars are made in 3 colors: red, green, and blue.

Why those 3 colors? A couple of reasons, as far as I can tell. First, because those colors are the fundamental colors of the light wheel which basically says you can create any color through a combination of reg, green, and blue lights):

There is a much better writeup on that concept over here so I won't try to recreate the wheel... the "color" wheel if you will... buh dump chhh.... ehhhhh I know...

Back to the point, those 3 segments form red, green, and blue light, and better yet, they're controllable. There's a tiny circuit underlying each little colored bar that controls how much current gets to the light cell. A really good color display has 256 stages of brightness increments that can be controlled programmatically.

Math time... so if there are 3 bars of light, and each bar of light can be controlled to one of 256 stages of brightness (actually, 255 stages of brightness levels plus 1 level for "off"), how many different combinations of brightness can be achieved?

256*256*256 = 16,777,216 different colors

Most people just abbreviate this as "16M" of colors for 16 million colors, even though technically there are more than that. On the old Mac OS's, they used to just call this "millions" of colors, because no one wants to be "that guy" who's like "errr... technically there are 777,216 more that you're forgetting about".

Coincidentally, that what HTML is designed to support, and that also what the Processing language is designed to support, with functions like fill() and stroke() that are set to take an RGB value, like so:

fill(255,0,0)

This makes red, because it says, "set red to full brightness level 255 and set green to 0 brightness (aka off) and set blue to 0 brightness (aka off)"

stroke(0,255,0)

This makes green.

fill(0,0,255)

Blue.

Why 256 colors (255 plus 1 for off)? I don't know. Technically, it's convenient because 255 is 2^8. And 8 is the number of bits in a byte. Technical guys don't like to say 8 bytes, they like to say "24 bits of color" to sound more impressive, but it's the same thing. Which means an RGB color can be stored in just 3 bytes. When web coders write:

#33FF00;

...to represent a color, they're actually saying, "33 in hex is 51 so set red to brightness level 51, FF in hex is 255 so set green to brightness level 255, and 00 in hex is 0 so turn off blue."

And sure enough, there's even an online color wheel that I've always used when writing TouchShield and Arduino gadget apps, perhaps because it updates instantly... it's over here:

And that's a really really simple, abbreviated version of how the TouchShield Stealth and Slide make tons of different colors on their OLED displays, in case anyone besides a student taking this class is wondering... and had about 15 minutes of time to spare :-)