nataliefreed / rainbowArray.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| var rainbow ; //global variable |
| function setup ( ) |
| createCanvas ( 600 , 600 ) ; |
| //make the list (array) of rainbow colors |
| rainbow = [ color ( ‘#c0392b’ ) , color ( ‘#e67e22’ ) , color ( ‘#f1c40f’ ) , color ( ‘#2ecc71’ ) , color ( ‘#3498db’ ) , color ( ‘#8e44ad’ ) ] ; |
| //shift to the center and down a bit |
| translate ( width / 2 , height / 3 ) ; |
| //draw the rainbow! |
| drawTheRainbow ( ) ; |
| //woops we forgot to include indigo! Let’s splice it in |
| //let’s retrieve red |
| var blue = rainbow [ 4 ] ; |
| //and violet |
| var violet = rainbow [ 5 ] ; |
| //halfway between blue and violet |
| var indigo = lerpColor ( blue , violet , 0.5 ) ; |
| //splice arguments are where to splice, how many to delete, item to splice in |
| rainbow . splice ( 5 , 0 , indigo ) ; |
| //draw the rainbow again! |
| translate ( 0 , height / 3 ) ; |
| drawTheRainbow ( ) ; |
| > |
| function drawTheRainbow ( ) |
| strokeWeight ( 10 ) ; |
| for ( var i = 0 ; i < rainbow . length ; i ++ ) |
| stroke ( rainbow [ i ] ) ; |
| arc ( 0 , 0 , 300 – i * 30 , 250 – i * 30 , PI , TWO_PI ) ; |
| > |
| > |
| function draw ( ) |
| > |
How To Define An Array Of Colors With CSS
Join Temani Afif on experiment with modern CSS features to create an array of colors. The goal is to define a comma-separated list of colors and iterate through them using an index.
CSS is mainly known as a language based on a set of property-value pairs. You select an element, define the properties, and write styles for it. There’s nothing wrong with this approach, but CSS has evolved a lot recently, and we now have more robust features, like variables, math formulas, conditional logic, and a bunch of new pseudo selectors, just to name a few.
What if I tell you we can also use CSS to create an array? More precisely, we can create an array of colors. Don’t try to search MDN or the specification because this is not a new CSS feature but a combination of what we already have. It’s like we’re remixing CSS features into something that feels new and different.
For example, how cool would it be to define a variable with a comma-separated array of color values:
Even cooler is being able to change an index variable to select only the color we need from the array. I know this idea may sound impossible, but it is possible — with some limitations, of course, and we’ll get to those.
Enough suspense. Let’s jump straight into the code!
An Array Of Two Colors
We will first start with a basic use case with two colors defined in a variable:
For this one, I will rely on the new color-mix() function. MDN has a nice way of explaining how the function works:
The trick is not to use color-mix() for its designed purpose — mixing colors — but to use it instead to return one of the two colors in its argument list.
body
So far, all we’ve done is assign the array of colors to a –colors variable, then update the index, –i , to select the colors. The index starts from 0 , so it’s either 0 or 1 , kind of like a Boolean check. The code may look a bit complex, but it becomes clear if we replace the variables with their values. For example, when i=0 :
This results in black because the amount of white is 0% . We mixed 100% black with 0% white to get solid black. When i=1 :
I bet you already know what happens. The result is solid white because the amount of white is 100% while black is 0% .
Think about it: We just created a color switch between two colors using a simple CSS trick. This sort of technique can be helpful if, say, you want to add a dark mode to your site’s design. You define both colors inside the same variable.
The trick is manipulating the gradient to extract the colors based on the index. By definition, a gradient transitions between colors, but we have at least a few pixels of the actual colors defined in the array while we have a mixture or blend of colors in between them. At the very top, we can find red . At the very bottom, we can find purple . And so on.
What if we increase the size of the gradient to something really big?
Here’s the complete code:
Note: I used no-repeat in the background property. That keyword should be unnecessary, but for some reason, it’s not working without it. It might be that browsers cannot repeat gradients that have an infinite size.
The following demo illustrates the trick:
After that, we can make our gradient very big by, once again, multiplying it by infinity . This time, infinity calculates the gradient’s width and height.
We place the gradient at the top to zoom in on the top color:
Then we rotate the gradient to select the color we want:
It’s like having a color wheel where we only display a few pixels from the top.
Since what we have is essentially a color wheel, we can turn it as many times as we want in any direction and always get a color. This trick allows us to use any value we want for the index! After a full rotation, we get back to the same color.
