Skip to content
# Tag: RGB

# How to calculate brightness and saturation using Euclidean distance

# RGB Project in Codea using SVG Color Map

# Translating from JavaScript to Java (Simon wrote this post)

# Somewhere Oover the Rainbow

# Simon calculates colour probabilities. #RRGGBB

# Several ways to mess with Bartok

# Colours are Math Too

This blog is about Simon, a young gifted programmer, who had to move from Amsterdam to Antwerp to be able to study at the level that fits his talent, i.e. homeschool.

Advertisements

On Monday this week Simon spent hours converting hexadecimals into RGBA values for the 140 colors supported by all modern browsers and creating a color file in Codea. He used the w3schools color map available at https://www.w3schools.com/colors/colors_groups.asp and an html color codes converter http://html-color-codes.info/

Some of the color names were quite exotic (like Chartreuse or Bisque ), and we looked those up together in the dictionary. We also took a very close look at the relation between red, green and blue values and found out that red was added every time to make colors lighter, even in shades where you would not expect any red.

Simon later made a nice design pattern in Codea using the color file:

– Simon, where did you learn translating from JavaScript to Java?

– From Dan, of course! I’ve compared the two formulas for converting from 2D to 1D. (The *width* stands for the width of the canvas).

From 2D to 1D in Processing:

`x + y * width`

and

From 2D to 1D in p5:`x + y * width * 4`

But, why did I say, “from 2D to 1D”? Because these formulas relate to the formula for converting from Processing to p5 and vice versa. How do they relate? Because of the 4 in the p5 formula. Why? Here is the formula (*i* is the index into the pixel array):

p5 to Processing:

`i / 4`

Processing to p5:`i * 4`

For example, in the video I divide 365 (*i*) by 4 and get 91.25. Here I wrote a table of what the decimal place means:

Decimal Value | Color Value |
---|---|

00 | red |

25 | green |

50 | blue |

75 | alpha (transparency) |

In the example with 91.25, the decimal value is equal to 25. This is why I wrote in Processing: `color(51, `

**255**, 51, 255)

So this is how I got the green value to Processing.

This post is really about converting from p5 to Processing and vice versa. That I figured out myself. You could say that I only explained that in this post, but really I explained that and converting from 1D to 2D. That’s why I added this form:

Converting from 1D to 2D

Converting from Processing to p5 and vice versa

Simon writing this post in html

Simon wrote this table in html

Simon programmed this beautiful rainbow all by himself in Processing (Java). He went to http://clrs.cc/ (also a http://mrmrs.io/ project) to look for the hexadecimals and then used http://html-color-codes.info/ to translate the hexadecimals into RGB codes.

Explaining how it works to sis:

In the video below Simon applies his knowledge of combinatorics to calculate the total number of possible colours one can create in CSS. I didn’t ask him to do this. In fact, I had no idea what he was doing when I started filming. I saw him studying the colour combinations on this webpage the http://www.w3schools.com/colors/colors_hexadecimal.asp where colour values are explained:

RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color. For example, #0000FF means the purest shade of blue, because the blue component is set to its highest value (FF) and the others are set to 00.

In each colour, Simon counted 16 possible first digits and 16 possible second digits. He then came up with the idea that that makes the total number of combinations possible for each colour 16 x 16 or 256. Since there are three primary colours (RGB) with 256 combinations possible in each Simon then calculated the total number of possible combinations of digits within a hexadecimal integer: 16 777 216!

I believe he did a good job. Especially considering he has only recently turned 7 years old.

Later the same evening Simon helped his little sister to create new “purest”colours for her drawing:

Simon’s recorded himself playing a little Bartok piece he likes and then modified it using a LittleBits filter and usb i/o.

We have also tried to see what Bartok’s music looks like if we turn it into light. We connected the LittleBits cirtuit playing the Bartok piece to an RGB strip thus transforming soundwaves into electromagnetic waves!

The last couple of days have been dominated by the colours theme, that eventually ended up expressed in fractions (of how to mix the primary colours as in paints or the primary colours as in RGB light waves). In the artwork-like chart above Simon got all the shades by mixing the three primary colours. On the pictures with plastic cups he was trying to design a colour ‘genealogical tree’.

The tall beer glass has liquids of different density in it that don’t mix. He also experimented with different temperatures of water to see if the paints dissolve better in hot water. The straps of paper towel with colourful flames on them are the result of deconstructing felt pen inks. The next hypothesis (expressed here in fractions) that any colour can be created by simply adding up the necessary amount of the primary colours was experimentally tested as well. The last illustration is a scan of a text he wrote this morning (using nothing but his memory as resource) explaining how a human eye works and how the RGB light waves mix.

We have also watched a cartoon about the Indigofera and why there is so little blue in organic substances, experimented with trying to see infrared light (through a mobile phone camera) and read about how tiny the visible spectrum is. Simon’s maths teacher told him about how the same three RGB colours make up the three quarks in a proton!