Rainbows! Color Theory for Computers
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 67 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/37697 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Producer | ||
| Production Place | Cincinnati |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
Ruby Conference 201624 / 67
3
5
9
10
14
18
19
20
21
22
23
27
28
29
32
33
34
36
38
40
41
46
51
56
57
58
59
62
66
00:00
TheoryComputerComputer animationEngineering drawing
00:16
TwitterTime zoneVisualization (computer graphics)CodeBitQR codeBeta functionComputer animation
01:04
Smoothed Particle HydrodynamicsParticle systemComputer simulationInformationPressureFluidTerm (mathematics)Object (grammar)Radical (chemistry)Level (video gaming)TurbulenceComputer animation
02:12
WhiteboardPressureLevel (video gaming)Particle systemNumberComputer animation
02:36
Execution unitCodeElectronic visual displayDirection (geometry)Computer animation
02:59
PressureWater vaporAreaComputer simulationComputer animation
03:14
Graph coloringComputerNumberPoint (geometry)TouchscreenSpektrum <Mathematik>PixelRight angleVideo projectorGreen's functionDifferent (Kate Ryan album)LaptopComputerSpectrum (functional analysis)Cellular automatonComputer animation
04:16
Graph coloringInformationType theoryCellular automatonCone penetration testMatter waveDifferent (Kate Ryan album)BitComputer animationDiagram
04:43
Graph coloringInheritance (object-oriented programming)HexagonRight angleBitMatter waveCone penetration testTouchscreenDigitizingDifferent (Kate Ryan album)Spectrum (functional analysis)InterpolationComputerRange (statistics)Analog computerGreen's functionProcess (computing)Machine visionNumberComputer animationDiagram
07:21
Graph coloringNumberCubeGroup actionSpectrum (functional analysis)MappingComputer animationDiagram
07:48
Visualization (computer graphics)Computer animationDiagram
08:04
Execution unitHill differential equationCodeCubeGraph coloringDegree (graph theory)GradientComputer animation
08:26
GradientGradientGraph coloringCubeComputer animationDiagram
08:50
QuicksortWordInformationSound effectTheory2 (number)Computer animation
09:25
Machine visionTheoryGraph coloringXML
09:43
TheoryProcess (computing)Line (geometry)Graph coloringComputer animation
10:30
Spectrum (functional analysis)Standard deviationPlot (narrative)Rule of inferenceMatter waveGraph (mathematics)PlotterCalculusLine (geometry)Logical constantGraph coloringCubeDiagramComputer animation
10:49
CubeColor spaceMedical imagingDifferent (Kate Ryan album)Graph coloringDiagram
11:01
Graph coloringNumbering schemeCodeColor spaceProcess (computing)PlanningComplex (psychology)CubeFeldrechnerLogical constantInformationWell-formed formulaTheoryComputer simulationDirection (geometry)BitCircleDemo (music)Goodness of fitDrag (physics)Group actionLine (geometry)Computer animation
13:03
Line (geometry)Circle
13:24
HelixGraph coloringSpiralCubeNumbering schemeComputer simulationInformationComputer animationDiagram
14:00
SurfaceComputer animation
14:15
AreaCASE <Informatik>Inverse elementCircleGreen's functionComputer animationDiagram
14:52
Graph coloringCategory of beingComputer animation
15:34
Row (database)ComputerJSONXML
Transcript: English(auto-generated)
00:01
Thank you all so much for coming. This is Rainbows. My name is Lido.
00:21
I work at Care Zone. My Twitter handle is lidonico. You can find me on there. This talk uses a lot of visualizations. It uses specifically the Ruby graphics gem. It's a gem written by Ryan Davis. And he kind of gave it out to everyone in Seattle and Seattle Ruby community and said, show us what you can do with it.
00:41
And this talk just came out of everything I did with that. It's available. It's still in beta. So when you gem install, you're going to have to do a dash dash pre. And also this entire talk is hand drawn aside from the computery bits and the code. I actually tried to draw the QR code like piece by piece. That didn't work too well. So from here on out, we're going with the drawings.
01:04
This is a simulation of fluid. It's based on the particles themselves, each having pressure. I actually learned about this simulation from the work of an amazing Rubyist by the name of Yusuke Endo, who wrote a crazy simulation all in C,
01:21
all in the terminal that won the obfuscated C contest. And I'm using the same model. It's called smooth particle hydrodynamics. It's a simple model meant for astronomers to simulate stars crashing into each other. Too many objects to worry about real physical correctness and more just like let's watch some things slosh around.
01:43
And that's what we've got going here. I like this a lot. I think there's so much more information here that we're not seeing. Like if we wanted to see what happens in terms of turbulence, we might want to show how fast each of these particles is moving. My favorite aspect for this is the pressure of each particle that tells us
02:03
exactly what the model is doing. It calculates pressure around each particle and pushes them away based on high or low pressure areas. So we can kind of map that. We have maybe 100 kilopascals or whatever, an atmosphere-ish of pressure, and map that to like let's make that a gray.
02:21
We can do this all across the board. Like 90 kilopascals will say that's the lowest the pressure's ever going to get. There are enough particles sloshing around that that's lowest. That'll be black all the way up, number by number, to 120-ish. And that'll be the brightest. So we can implement that. This is now in the Ruby graphics gem code.
02:40
This is the code I'm going to be showing you is exactly what makes this thing work, and it's built into the gem. So we're just going to take the brightness, and that'll be what's displayed. We'll give that a triple of how much brightness and send that over to the drawing layer, the SDL simple direct layer to send to the GPU. When we do this, it works.
03:00
So now we can see the pressure of the simulation. It's the brighter spots where you can see where the water comes crashing down. It's a lot brighter because the area's more pressurized and the opposite for low pressure areas. That's great and all, but I want cool colors. Like the entire point of what I'm doing is I just want pretty pictures.
03:21
So let's make that happen. How do we even go from a number, like a simple brightness number, all the way up to a full color in the spectrum? And computers only really know red, green, and blue anyway. Like that is a pixel on a CRT computer screen. Different computers have different pixels.
03:42
Like this laptop right here has the little bars of blue, red, green, LED, or LCD lights. The projector that's projecting this has a spinning wheel of red, green, and blue that it flashes light through at the correct interval, and it is reflected by mirrors to make each pixel. But only three colors.
04:00
So how do we map a full spectrum of light to only three colors? And also, how is it even possible to make all of the colors from only three? Answer is biology, of course, the messiest science of all. And let's get into the real squishy bits, the cells in our eyes.
04:21
Now when we receive light into our eyes, there are two different types of cells that receive it. One just receives brightness information, the intensity of light, and that's the rods in our eyes. But the cones can give us information about the wavelength, which we perceive as color.
04:40
And those are those little squid shaped guys there. Basically, little squids, I don't know. We have three different kinds. We have a red sensing cone, a green sensing cone, and a blue sensing cone. Though some XY people have only two. We call that different kinds of color blindness. And some XX chromosome people have more, four.
05:04
Scientists have predicted either between 2% and 50% of 2X people have, which seems like kind of a big range, right? Who knows, maybe like 25% of this audience has super color vision. You can distinguish colors better than the rest of us.
05:21
It's super cool. And so we have these little squid in our eyes basically. And each kind senses a different kind of light. It's a signal like all red, green, or blue. We can display these on different axes. And we usually, in the computer world, not the biology world, talk about these from 0 to 255.
05:42
Maybe you're more familiar with 0 to FF in hexadecimal. When we display a full color, we'll talk about red, green, and blue. And you'll see that in CSS, it'll be a six digit hex number. So how does our eye do it? How does our brain process how these colors mix?
06:01
Like when I see a color, what does it, what does our eye expect the analog on the visible spectrum of light to be? Like when we see yellow, our eyes will say, all right, I'm seeing a little bit of red wavelength and a little bit of green wavelength. It must be in between those two. It must be yellow. So our eye just kind of makes up, when I'm looking at this computer screen,
06:24
I'm not seeing yellow, I'm seeing red and green light. But on the other hand, when you look at a lemon, you're seeing real yellow wavelength light. Likewise, for blue and green, combining to make cyan, your eye just kind of interpolates between. I see some green, I see some blue, must be in the middle.
06:42
But how about magenta, like blue and red? We're seeing something in between, but there's no green, which is where we expect them to collide. So our brain invents a color to present to us. And magenta's just not real, right? Like, I mean, how could magenta be real if our brains aren't real?
07:04
So our brain has invented this color and if we see all the three different wavelengths of light that we can perceive, our brain imagines, all right, that's full spectrum light. That's all the colors I know about. So we're gonna call it full spectrum. It's not white, it's just three colors. But it's, our brain tells us it's full spectrum light.
07:22
And if we do that all the way around, we get the color cube. Every single color our eyes can perceive out of red, green, and blue light. And we can walk around the edge from most intense color to most intense color to get this smooth transition between the fully saturated colors.
07:40
Like that is what maps a single number on the spectrum to a triple of red, green, and blue, and vice versa. Here's a Wikipedia based visualization of like, okay, we start out with all red and blend in more and more green and more green and more green until it's all the way yellow. And then blend out red until we get green and then blend in blue, and so
08:01
on and so on. So we can code this up really quickly imagining that we're walking around the edges of this color cube from like all the way zero to 360 degrees around. We can say, all right, we're gonna start with red is the strongest color and green is the second strongest. We're gonna push more and more and more green in.
08:20
And again, this is the code that exists in Ruby graphics today. And in fact, it's not just around the outsides. You can make any gradient by blending between two colors. You can blend linearly along the outside. If we wanna get from reddish to light salmon, we can just move along the outside of the color cube or through it. If we wanna go from two colors that are on opposite sides,
08:42
we can go straight through and just linearly interpolate right through the middle of that color cube, and we get a smooth gradient. So we can implement that in Ruby graphics. Cool. All sorts of cool, that's worse, right? But why is that worse? It doesn't give us more information.
09:02
Because different colors, even though they're fully saturated, even though I'm showing you the same amount of light for each, they appear to have different brightness. This is, first of all, super weird. Second of all, not entirely explained. There's a name for the thing itself. It's called the Helmholtz-Korraus effect.
09:21
And there are various theories for why this happens, but the best we know is that these colors are all the same intensity, all the same luminance and theory, and they look really different. In fact, they're even supposed to be the same intensity as that gray background, which just doesn't look like that to me at all. I don't know about you all.
09:41
Maybe a better color vision, who knows? So one idea that scientists have come up to explain this is called the Opponent Process Theory of Color. And it's a theory about maybe we just don't combine signals. Maybe we combine them in a more complicated way. So like when we see red and green light, maybe those just, we perceive red and green, great.
10:03
But maybe we combine those two signals only to get an idea of what lightness is. And you know, you should be thinking like, all right, maybe that explains why yellow appears so bright to us. And when we mix in blue, we might get, OK, we are very bright, but we have no blue, that must be yellow.
10:21
Or we have very dark, but all blue, OK, we're seeing blue light. And we can use this to create a better idea of how to desaturate colors. We can graph a lightness plot of wavelength to how bright it is.
10:41
So we could do this, we can desaturate the color cube, and we can find lines of constant brightness through, but that's going to take some calculus. Like it's neat, but hard. And actually this paper I'm using the image from has transformed into a different color space because doing it in the color cube was too difficult. Let's not do that, absolutely not.
11:02
An astronomer named Dave Green came up with a much better way to get a nice smooth transition he wanted for his astronomy, a color scheme that ran from dark to light, but went through colors so he could have his scientific papers printed out really pretty. I mean basically all of the motivation of this is I wish it looked better.
11:23
He came up with this idea that, well, television knows a very simple formula for how bright each color is. The NTSC guidelines say that like here is about how bright each color is. Like red, green is much brighter, blue is much darker.
11:42
We're just going to use that. Like we're not going to build any more complex models of color. We're just going to use that information, and I'll show you a demo in color space. Got it? Great. So this is the color cube hollowed out with a lightness vector
12:01
if we're not, if we're pretending that red, green, and blue all have the same brightness to us as humans. Now what this formula I just showed you is saying that maybe it's not like that. Maybe brightness goes along a different direction, this kind of greenish vector.
12:20
Now this doesn't take into the opponent process theory of color, but it gives us a better idea of we can say, how about if we have a plane of constant brightness just perpendicular to that lightness vector. That's all we need. And you can tell that maybe the muddy yellows are a little bit darker than the cyans, but it's a pretty good job.
12:41
In fact, it's much better than just going around the outside of the color cube. And Dave Green thought like, all right, I got this. I have this plane. I'm going to make this circle. I'm going to chop one end off and kind of drag it towards black and drag the other end towards white. And in fact, that's exactly what he did. And the code describing it is only a few lines.
13:06
Afterward, if any of you wants to come up and talk to me about how I got all of here, we can, but suffice to say that this is creating a circle and then stretching it out between dark and light. And forget the WebGL stuff I was showing you earlier.
13:22
This is a Ruby conference. I'm going to do this in Ruby graphics. And it works. It works beautifully. We get this nice spiral. In fact, the name of this color scheme is called the cube helix. It's a spiral around the middle of the color cube. And it works. We have this color palette, but we're also displaying
13:40
meaningful information, which is great. We've done it. This is what I wanted to see out of my simulations. Cool color, meaningful information. That's fantastic, but some of you might be thinking, OK, this color information seems completely wrong. My printer prints with cyan, magenta, and yellow.
14:02
And when I was taught to paint as a little kid, definitely didn't use those colors. I used red, blue, and yellow, I think, are the paint primaries. So this is because we're painting on a bright surface and shining light at it, or printer ink in this case.
14:20
On a reflective background, we put down cyan, and that's absorbing the red primary if we layer magenta over that. We're absorbing green light, so the leftover is just blue bouncing back at us, kind of the inverse of shining light directly at us. Likewise, if we paint a yellow circle of printer ink over,
14:43
the red area will be the intersection of yellow and magenta and reflect back to us red light. So that's how those work. And in painting, we kind of just make do because we need colors that mix very well. We make do with phthalocyanine, with cadmium, with alizarin, with these chemicals
15:01
that are pretty red, pretty blue. There is no magenta in oil paint that mixes well with another color. It just kind of gets muddier and muddier the more you mix it. And that has to do with the chemical properties of the paints that you're using rather than the color properties themselves. So that's why maybe you were taught to paint
15:20
with red, blue, and yellow, and you just can't make magenta. It'll never happen. So thank you so much. That's all I got.