Radius & Organic Randomness

[00:00:00]
>> Mathew DesLauriers: So if I go back, I'll leave this code up in a second. I just want to go back to this image. So we're already pretty close to this we can get to this exact image just by changing the background, changing the size of the circles using, fill instead of stroke, changing the fill style and so on.

[00:00:17]
So the next thing we want to do is maybe create something with a bit more color a bit more life. As well as a bit more randomness in the way that the circles are sized. So if we go back to our code, one thing that I like to do is to set up my data structure and then render the data structure later.

[00:00:41]
And so every time I render it, it's always the same. And so that's kind of what we're doing with this UV coordinates. But now what we want to do is we wanna give each of these circles an individual radius. Rather than all of them using the same radius of five, we want them to have different radius, radii or, whatever, different radius values for each circle.

[00:01:02]
And so to do that, instead of passing a coordinate here, just like an array, we're going to store this array as position, and we're going to store it within an object. And this object is going to hold the data for each individual cell on our grid. And so, I'm going to say position is equal, or is.

[00:01:22]
Assigned to the UV coordinate and then let's say radius is assigned to some value and here is where we can say. We give a random.value to each radius and all of a sudden if we save we're going to get an error and that's because if we scroll down.

[00:01:44]
So just so you can see, it's an object with radius and position. But if we scroll down, we're still using this same code, where we're de-structuring it, expecting it just to be a coordinate, but it's no longer a coordinate. So we can instead call this data, and then I'm gonna de-structure the data to a position and radius so that's how that looks.

[00:02:11]
And then I'm still going to get an error if I save and that's cuz UNV isn't defined here. So I have to then get the UV coordinate from position so I can de-structure like this.
>> Mathew DesLauriers: And so that's how that looks. And hopefully you should get back to this point where things are running again and the code is working and you're not getting an error.

[00:02:34]
If you're getting a white screen, just open the console, check the console, there is maybe just an error in the console. And everything is still the same radius and that's because we're still using a radius value of five, so let's use the radius that we specified here, and what we're gonna do is we're gonna make this radius relative to the width of the page let's say.

[00:02:59]
So we're gonna do radius times width. And it's gonna be very huge because we're using five times width and that's gonna be a big radius. Or one times radius. So here instead of using random.value we're gonna use random.value times, let's say 0.01 or something like that. Or 0.02, some value that's small 0.005 even something like that.

[00:03:27]
So that's what I'm doing here is I'm just using very small radius value and it's random. So each cell is gonna have a different size to it. And then down here we're just saying the radius times with. And the reason we're using radius times with is just so that different screen sizes, it'll be relative to the different screen size.

[00:03:46]
So if we ever end up changing the resolution of this canvas, it'll still look relatively the same. And then the other thing I'm gonna do is I'm gonna use fill instead of using stroke, cuz I just like fill in this kind of situation. And so remember when you fill, before you fill you have to set a fill style.

[00:04:03]
So that's what we're doing here. So we're getting closer to this image that we want, but we're still not there. So I'm just tweaking some parameters here. But already, we're getting like something kind of cool by just tweaking these numbers. We're getting some sort of randomness in some sort of grid.

[00:04:22]
It's kind of looking a little bit closer to generative art. That's one of the fun things about creative coding is that you can get really lost in just really tweaking numbers and changing things and saving things and then changing things again and then saving things, and that's something you should definitely be open to.

[00:04:36]
That's a really nice way of working. So like I was saying, we wanna get a bit more of the organic randomness cuz right now everything still feels very grid like, and one of the reasons why potentially is that when we use random.value, we end up with this uniform distribution of numbers.

[00:04:57]
We end up with the equal number of. Of 0.2s and 0.6s if we were to call this function millions of times. And so we're gonna use something else called random.gaussian. And that's gonna produce a much more interesting, and a much more maybe organic distribution of numbers. And the distribution of numbers is gonna be between some where like negative 3.5 and positive 3.5.

[00:05:24]
And so actually that's gonna cause an error in our code, and that's because we can't have a negative radius. So we have to just either make this an absolute value, so just by wrapping it in Math.abs, or you can make it Math.max 0. And that's a different way of approaching that as well.

[00:05:46]
Or you can also try and use a different sort of starting point for your circle size, so you could say something like, my circle size is 0.5 or lets say 0.1 and then plus random.gaussian. So that means it's gonna be, all these circles are 0.1, but then offset them by some value positive or some value negative.

[00:06:14]
And again we're multiplying this gaussian value by 0.01 just because without that we're gonna end up with huge circles and the screen will be red.