Color is probably the trickiest thing to master, especially using code. I wrote a thread breaking down color models and how to manipulate color in @p5xjs 🧵 1/n
There are several color models out there, you're probably already familiar with RGB - Red, Green, Blue. Each color is represented by three values ranging between 0 - 255 (256 Possibilities).
The problem with RGB is that it is meant to be machine-readable, your brain doesn't intuitively know why 212,24,118 is the color it is. It's meant to control the pixels on the screen and doesn't translate well to other uses, especially in making art.
To illustrate this further, here's the RGB value for bright orange, can you figure out how the values have to change to get a lighter shade of the same color? Your intuition says you need to add white, but how do you do that? Your mental model of color doesn't translate to RGB.
(It's 255, 137, 33 for those who're trying to figure it out)
To rescue us from this, there's HSB - Hue, Saturation, Brightness. Hue ranges between 0 - 360, and the other two are 0 - 100. It helps to think of the hue on a color wheel.
HSB unlocks so many possibilities because it allows you to control color programmatically, you can use loops to step through any of the parameters and get smooth transitions between colors. Here's an example where I step through the saturation.
Easily bump up the number of strips in the above example and get infinite shades. Doing this through RGB, if at all possible, would be an absolute nightmare.
HSB also allows you to implement color schemes, as they're all just some constant relationship between colors on the color wheel. This way you can easily generate more palettes that follow the same color scheme, a gold mine for generative art.
Here's an example that implements a complementary color scheme, where the colors are exactly opposite to each other on the color wheel. It's as simple as adding 180 to the hue of the first color. ( (h1+180)%360 is to map it back to 0-360 in case it exceeds)
That's all for this time, if you have any questions, feel free to drop them down below. Hope this thread gave you some confidence while working with color.
If you enjoyed this thread consider following me and retweeting! ☀️
#creativecoding #designtwitter #p5js #generativeart
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.