Rainbows! Color Theory for Computers

Video thumbnail (Frame 0) Video thumbnail (Frame 388) Video thumbnail (Frame 1588) Video thumbnail (Frame 3307) Video thumbnail (Frame 3900) Video thumbnail (Frame 4486) Video thumbnail (Frame 4849) Video thumbnail (Frame 6390) Video thumbnail (Frame 7071) Video thumbnail (Frame 11035) Video thumbnail (Frame 11692) Video thumbnail (Frame 12100) Video thumbnail (Frame 12650) Video thumbnail (Frame 13249) Video thumbnail (Frame 14136) Video thumbnail (Frame 14569) Video thumbnail (Frame 15741) Video thumbnail (Frame 16216) Video thumbnail (Frame 16531) Video thumbnail (Frame 19582) Video thumbnail (Frame 20107) Video thumbnail (Frame 20993) Video thumbnail (Frame 21380) Video thumbnail (Frame 22294) Video thumbnail (Frame 23342)
Video in TIB AV-Portal: Rainbows! Color Theory for Computers

Formal Metadata

Rainbows! Color Theory for Computers
Title of Series
Number of Parts
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 license.
Release Date
Confreaks, LLC
Production Place

Content Metadata

Subject Area
We often use color as a way to add information, whether in design, in UX, or for visualizations. When we visualize information, what's the best possible color scheme to use? How can we display the most possible information? The only way to know is to explore the nature of color! We'll build up to the color-handling code that exists in 'graphics.rb', a Ruby-language visualizations library. For free, we'll end up with intuitive models of computer color spaces and tricks for how to think about common color concepts like gradients and paint mixing.
Theory Computer
Beta function Visualization (computer graphics) Code QR code Bit Twitter
Smoothed Particle Hydrodynamics Mapping Information Computer simulation Number Particle system Radical (chemistry) Fluid Term (mathematics) Turbulence Object (grammar) Whiteboard Pressure
Area Execution unit Code Direction (geometry) Computer simulation Water vapor Pressure
Point (geometry) Laptop Pixel Touchscreen Video projector Information Cone penetration test Matter wave Cellular automaton Bit Computer Graph coloring Computer Spektrum <Mathematik> Number Type theory Different (Kate Ryan album) Green's function Right angle Spectrum (functional analysis)
Interpolation Touchscreen Cone penetration test Inheritance (object-oriented programming) Matter wave Digitizing Range (statistics) Analog computer Bit Computer Graph coloring Machine vision Number Process (computing) Hexagon Different (Kate Ryan album) Green's function Right angle Spectrum (functional analysis)
Group action Mapping Cube Graph coloring Spectrum (functional analysis) Number
Degree (graph theory) Execution unit Code Gradient Cube Gradient Hill differential equation Graph coloring
Word Sound effect Quicksort Theory 2 (number)
Process (computing) Line (geometry) Graph coloring Machine vision Theory
Logical constant Spectrum (functional analysis) Standard deviation Rule of inference Graph (mathematics) Matter wave Plotter Cube Calculus Line (geometry) Graph coloring Plot (narrative)
Logical constant Complex (psychology) Group action Drag (physics) Information Demo (music) Code Direction (geometry) Planning Numbering scheme Computer simulation Bit Graph coloring Theory Medical imaging Goodness of fit Process (computing) Different (Kate Ryan album) Well-formed formula Feldrechner Cube Color space Circle
Helix Cube Spiral Numbering scheme Circle Line (geometry) Graph coloring
Information Surface Computer simulation Graph coloring
Area Category of being Personal digital assistant Green's function Circle Inverse element Graph coloring
Row (database) Computer
thank you all so much for coming this is
rainbows my name is Leto i work at carosone my twitter handle is lead Oh Nico 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 you know gave it out to everyone and Seattle and Seattle Ruby community and said show us what you can do with it 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 peace by fee that didn't work too well so so from here on out we're going with the drawings this is a
simulation of fluid it's based on the particles themselves each having pressure I actually learn about the simulation from the work of an amazing rubios by the name of us cayendo who wrote a crazy simulation all in see all in the terminal that one the obfuscated 'add see contest and i'm using the same model it's called smooth particle hydrodynamics it's a simple model meant for astronomers to like stimulate 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 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 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 you know maybe 100 kilopascal whatever an atmosphere ish a pressure and map that to like let's make that a gray we can do this all across the board like 90 kilo Pascal's will say that's the lowest the pressure is ever going to get there enough particle sloshing that's lowest that'll be black all the way up number by number 2 120 ish and that'll be the brightest so we can implement that this is now in the Ruby
graphics gem code this is you know 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 so now we can
see the pressure of the simulation it's you know the brightest spots where you can see where the water comes crashing down it's a lot brighter because the area is more pressurized and the opposite for low pressure areas that's
great and all but i want cool colors like this the entire point of what i'm doing is I just want pretty pictures 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 like this laptop right here has the little bars of blue red green LED or LCD lights the projector that's projecting us has a spinning wheel of red green and blue that it's flashes light through it the correct interval in it is reflected by mirrors to make each pixel but only three colors 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 get into
the real squishy bits the cells in our eyes 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 and those are those little school shaped guys they're basically will
squeeze 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 colorblindness and some XX chromosome people have more for scientists have predicted either between two percent and fifty percent of 2x people have which seems like kind of a big range right like who knows maybe like you know twenty-five percent of this audience has super color vision you can distinguish colors better than the rest of us super cool and so we have these little squid in our eyes basically and each kind sense is 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 maybe you're more familiar with 02 FF in hexadecimal when we display a full color will 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 I do it how does our brain process how these colors mix like when I see a color what does it what does our i expect the analog on the visible spectrum of light to be like when we see yellow our eyes will say alright i'm seeing a little bit of red wavelengths and a little bit of green wave length it must be in between those two it must be yellow so or i just kind of makes up you know it when i'm looking at this computer screen i'm not seeing yellow i'm seeing red and green light but on the other hand when you look at like a lemon you're seeing real yellow wavelength light likewise for blue and green combining to make cyan your I just kind of interpolates between I see some green I see some blue must be in the middle 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 is just not real right like I mean how could magenta be real if our brains aren't real 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 alright that's full spectrum light let's all the colors I know about so we're going to call it full spectrum it's not white there's just three colors but it's our brain tells us it's full spectrum
light 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 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 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 0 to 360 degrees around we can say all right we're going to start with red is the strongest color and green is the second strongest we're going to push more and more and more green in 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 want to get from a reddish to a light salmon we can just move along the outside of the color cube or through it if we want to go from two colors that are on opposite sides 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 glad that's worse
right but why is that words it doesn't give us more information 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 that there's a name for the thing itself it's called the Helmholtz whole Roush effect 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 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 its theory about maybe we just don't combine signals when maybe we combine them in a more complicated way so like when we see red and green line maybe those just we perceive red and green great but maybe we combine those two signals only to get an idea of what lightness is and you know deal 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 okay we are very bright we have no blue that must be yellow or we have very dark but all blue okay 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 like wavelengths to how bright it is 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 blah like it's 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 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 better 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 30 green as much brighter blue as much darker 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 all right great so this is the color cube hollowed out with a lightness vector if we're not if we're pretending the 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 now this doesn't take into the 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 you know maybe the muddy yellows are a little bit darker than the sands but it's a pretty good job in fact it's much better than just going on the outside of the color cube and dave green thought like all right I got this I have this plane gonna 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 code describing it is
only a few lines afterward if any of you wants to come up 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 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 is a spiral around the middle of the color cube and it works we have this color palette
but we're also displaying meaningful information it 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 okay this color information seems completely wrong like my printer prints with cyan magenta and
yellow and like 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 added
or printer ink in this case 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 left over 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 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 that are like 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 chemical properties of the paints that you are using rather than the color properties themselves so that's why maybe you are taught to paint 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