Color Options for Generative Art in p5.js
Vložit
- čas přidán 5. 08. 2024
- Color options for generative art / creative coding in p5.js. RGB vs HSB, randomizing options, using color palettes, tables, arrays, color picker, saving selections, csv files, json files, lerpColor, converting RGB to HSB, and pixel array. Also showing off my watercolor self-painter, spirograph maker, and mandala maker. "Color table load and draw" code includes a large color palette table.
Playlist of my p5.js project videos:
• p5.js Projects & Progr...
Watercolor Self-Painting:
editor.p5js.org/StevesMakersp...
Spirograph Maker:
editor.p5js.org/StevesMakersp...
Mandala Maker:
editor.p5js.org/StevesMakersp...
Random Color Options and Simple Color Arrays:
editor.p5js.org/StevesMakersp...
Color table load and draw (with big palette table):
editor.p5js.org/StevesMakersp...
Color picking and save as csv table:
editor.p5js.org/StevesMakersp...
Lerp example:
editor.p5js.org/StevesMakersp...
Convert RGB to HSB:
editor.p5js.org/StevesMakersp...
Join my Discord: / discord
Follow me on Twitter: / stevemakerspace
Pixel Array video on The Coding Train:
• 11.3: The Pixel Array ...
Coolers, a Color Palette Site:
coolors.co/palettes/trending
Reference page for p5.js:
p5js.org/reference/
0:00 Intro
0:42 Basic color options
1:34 Random colors + simple arrays
7:47 Color palettes from a table
9:34 Color picker
10:38 Saving colors to a csv table
12:31 Saving colors to a json file
13:05 Converting RGB to HSB
15:02 Lerp to mix colors
15:52 Pixel arrays
Music:
Funk Down (Sting) by MK2 (theme)
Blues Infusion by Quincas Moreira
Busy City by TrackTribe
Rhythm Changes by John Deley and the 41 Players
Smokey's Lounge by TrackTribe
Hold on a Second by John Deley and the 41 Players
Dewey, Cheedham, and Howe by John Deley and the 41 Players
Proud to still be a viewer of this channel, my old name on CZcams was "F&E SUDO 2", it was a horrible name so you can see why I changed it. Not sure if you remember me, but its always fun to pop over to your channel and take a look at what your up to!
Thanks for sticking with me!
Your tutorial videos are so detailed, they could be of great use for some aspiring programmers.
You really should get more attention.
Thank you!
thank you Steve's Maekerspace
i am beginner🥰
You’re welcome!
For the random array value at 7:06 I recommend using floor and just palette1.length without "-1". (Just like you did in 8:50)
This is because the random function always includes the minimum value (in this case 0) and excludes the maximum value.
Using floor, you wont get the value of palette1.length (which doesn't exist) and all values have the same chance of being picked.
With round, the randomness does not provide a perfectly equal probability, because of the include and exclude shift.
Ok thanks for the tips!
When converting RGB to HSB, you put a comment on your colorMode() statement: "not sure if these are the best numbers". I think you'll find better luck with "colorMode(HSB, 360, 128, 100, 255);". It seems that the hue(), saturation(), and alpha() functions ignore the colorMode values, with hue() returning a value between 0 and 360, saturation() returning a value between 0 and 128, and alpha() returning a value between 0 and 255. (Unlike the others, brightness() does use the colorMode value!)
An alternative that I prefer (but won't match everyone's tastes) is to scale the values to between 0 and 1, like this:
colorMode(HSB, 1);
let huey = hue(c) / 360;
let sat = saturation(c) / 128;
let brt = brightness(c);
let alph = alpha(c) / 255;
I like this because I don't need to worry about different ranges; everything is 0 to 1. But that's just me.
Ok, thank for the tips!
Human living is contribute to climate change sir...Top 5 are: AGRICULTURE , TRANSPORTATION, CONSTRUCTION, INDUSTRY and MANUFACTURING, HUSBANDRY. I believe you are every day involved with them :)))
(you can also check tezos NFTs)
Ok will do.