RGB Project in Codea using SVG Color Map

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:



Translating from JavaScript to Java (Simon wrote this post)

– 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
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 versaIMG_4268


Simon writing this post in html


Simon wrote this table in html