Color Palettes

[00:00:00]
>> Speaker 1: So now we're getting there, we're starting to really see this sort of like ink dropping looking like thing. And what we're gonna do for random color palettes is we're gonna bring in another module. This module is gonna be called palettes and it's actually a module called nice-color-palettes.

[00:00:20]
And when you do this, you're gonna get an error like I am here. And so here I am just const palettes = require, nice-color-palettes, and that's color without a u, and palettes like this, P-A-L-E-T-T-E-S. And when you save, you'll get an error, but that's because we haven't installed the module.

[00:00:39]
So go back to our terminal, npm install nice-color-palattes.
>> Speaker 1: And when it's finished installing, the page should reload and it should run properly.
>> Speaker 1: And so if you are to look at this package, let's say nice-color-palettes. Let's say you do look at the documentation in the npm module for this package, you'll see it's just a module that has a lot of different color palettes.

[00:01:16]
And each of them is in an array where each palette has five different colors, and each color is just specified as a hex code. And so the entire thing is between 100 or 1,000 depending on which you wanna require, but it's around 1,000 or 100 different color palettes that looks like this.

[00:01:39]
And so, what we're gonna do is above our create grid function, we're gonna choose a random palette because remember there's like 100 palettes here. So we just want a single palette, we're gonna do random.pick, this is another utility function that I have. And you pass in an array and it gives you a random value in that array.

[00:02:02]
So we have palette which is the singular, random.pick palettes. And then we have now, if we console log that, you'll see that we have a single palette of five different colors. And so now, when we create our circle data structures here, instead of using radius and position like this, we can also add in another data point, which would be color.

[00:02:30]
And you can set that to red and they're all gonna be red, but we also have to hook that up, cuz if we set this to blue, nothing's changing yet. And that's because we're not using that data point from our data structure. So there's two things you have to do.

[00:02:47]
One of them is add it into this object here and then also, you have to destructure it here. So this is in our render function.
>> Speaker 1: And then you have to set the fill style to the color. And so if you've done that, then when you tweak the color up here, it should tweak the color in rendering, you can try different colors.

[00:03:10]
And then if you're there, you're already close enough to just get a random .pic from your single palette. And now you're gonna end up with this random distribution of different colors. And each of them is going to be kind of pleasing because all of these palettes are actually sourced from a site that aggregates different color palettes and ranks them by value.

[00:03:35]
>> Speaker 1: So this is getting into a bit closer, some of the generative arts sort of stuff that I like to do. There's other things that I like to do with colors which will just give us a bit more variety. One of them is, instead of always using five different colors which creates this very almost chaotic palette, we can slice that down to a smaller number.

[00:03:57]
So when we choose a random palette, we can say I want to only take, let's say 3 colors, or we can change that to be 2 colors, or 1 color. And now every time we reload, we're just getting one color or a two different color, a two tone palette.

[00:04:15]
You can also instead of using hard coded values, you can use a random value. So color count, let's say it could be anywhere between one and five. So we could actually use random.rangeFloor, between 1 and 5. And actually, if you do this, one thing is that rangeFloor is between the minimum, which is inclusive and the maximum which is exclusive.

[00:04:46]
So if we want a maximum of five, we have to use a max of six actually just because it doesn't ever get to the maximum value. So now what's happening is every time we run the code, sometimes we have a palette that's a single color, sometimes we have five colors.

[00:05:06]
One more thing we can do is before slicing the colors, because now what's happening is we're taking a random palette, we're chopping off a couple, but we're always chopping off those same couple. So instead of always slicing it like this, we can first take a random palette, shuffle it, and then slice off a couple.

[00:05:24]
And that's just gonna give us a bit more variety, and I'm gonna just do this in one long line here.
>> Speaker 1: So now what's happening is I'm saying, pick a random palette and then shuffle that palette. And then once it's shuffled, chop off a couple of them so that we end up with a palette that's only color count long between one and six or between whatever you want.

[00:05:50]
Between two and six, whatever you prefer. And so we're getting closer to this art work that we want to create, but we're not quite there yet. I can leave this open for a second, but again if you are stuck, you can go back to this repo, the generative artwork workshop repo.

[00:06:14]
Go through the source folder, check out the 2D, and go to grid colors and that's gonna have more or less something similar to what we have already written. It might look a little bit different but more or less, it's the same idea.