Adding Randomness

[00:00:00]
>> Mathew DesLauriers: Okay, so one thing I mentioned already for you guys is if you're lost at any point and you're feeling like you're falling behind in the code, then open up the repo, the workshop generative art repo, and you go into the source folder and it's split up into the different sections of today.

[00:00:19]
We're gonna be doing 2D, and I've tried to piecewise split it up into some of the different chunks of code that we're gonna be working with. Right now we're still on grid margin, and we're eventually gonna be working our way through those. But that's just in case you're lost, hopefully don't look too far ahead because it should be a bit more of a surprise, but we'll see.

[00:00:40]
So yeah, here we are. We have a grid of circles, pretty basic so far. But already with this code we can start to do some tweaks to it to start to get some more interesting results. So for example, instead of doing 5 by 5, we can do 20 by 20 and all of a sudden it's a big black mass.

[00:00:58]
But if we reduce the size of each of these circles after we set the count to a higher number, we set the radius of the circle, and that's this here. Let's say we set it to 20 or something like that, or even lower, 10. You can even do lower like five pixels.

[00:01:15]
And then we can set the line width to a smaller value as well, maybe 10 or 20.
>> Mathew DesLauriers: So if I'm using a radius of 5, line width of 20, I can start to see a lot more of these cells here in the grid, maybe use a higher grid count, maybe as far as 40.

[00:01:33]
And then we can also start to introduce a bit of randomness. So one way of doing that is once we have our grid cells, we can just randomly take some of them out, and we can do that with the filter function. So after we create our grid, we create a filter function that looks like this.

[00:01:53]
And the function is gonna say, if Math.random is greater than five return true, if it's less than five return false. And that's just gonna end up taking away some of the grid cells at random. So we're gonna be getting a little bit closer to this idea of generative art and this idea of randomness and emergent systems and rule based systems.

[00:02:15]
And every time we run reload the page, or every time we save our file, we're gonna end up with a different set of randomness. And so Math.random is pretty basic, it gives us back a value between zero and one, where one is actually exclusive, I don't think one ever appears.

[00:02:38]
But one sort of limitation of this if you wanted to have a random number between 10 and 30 or something like that, you have to create your own function. And another limitation, especially when you're working with, whether it's generative art or any creative project that's using code, sometimes your randomness is just a bit out of control.

[00:02:58]
And sometimes you'll have a really good output and then you'll show the client and the client will use a different, they'll reload the page or something like that. And the random numbers will be different, and it might not look like the client wanted it to look. So what you can actually do with random numbers is you can have a deterministic random so that every time we reload the page it's that same set of randomness.

[00:03:22]
And to do that we´re gonna install, or not install we've already installed, we´re gonna bring in another utility here. We're gonna bring in the random utility from the same Canvas sketch detail. So here we're gonna bring in the random utility and it looks like this, canvas-sketch-util/random. And this module you can look at the docs.

[00:03:48]
Again, it's a link here, canvas-sketch-util, and you'll see this module has a lot of different utilities around pseudo-random number generation. So if you're familiar with Math.random, this is a super powered version of that times 100. And it includes, this function is basically the equivalent of Math.random, random.value, that gives you number between zero and one.

[00:04:18]
But there's a lot of other things that we're gonna be getting into here, like range is a function where it gives you back a value between this function here, between minimum and maximum. Range floor is really useful for index values, like an integer value between zero and six, or something like that.

[00:04:36]
And so we're just gonna use, instead of using Math.random we're gonna use random.value. And that's the same thing, it's just using the random module instead. And now because we're using the random module, we can set a deterministic seed before we start using the module. And that looks like this, random.setSeed and then you pass in any number you want here.

[00:05:01]
It can be one or ten, it can be a string as well. It's just some unique identifier for this random number generator. And so let's say I used 512 and I just keep it at 512. You end up with this deterministic randomness so that every time I reload the page it will give me the same exact result.

[00:05:20]
So that's really useful for generative art, but it's also really useful for creative coding in general. Like let's say you have a web socket server, or something where you're connecting physical installation with a digital screen, and they're both using randomness. You want those random numbers to align. And so you might wanna use a deterministic seed where both the physical installation and the screen, or maybe the multiple screens, they all use the same seed so that they're all producing the same string of random numbers one after another.

[00:05:52]
And so that's randomness in a nutshell. And we're gonna be getting into some of these other functions. Cuz a lot of the work that I do is just really playing on random values and Gaussian distributions and stuff like that. So you'll start to see the pattern that I like to use this module a lot.