Hi, welcome to this new video. We're going to continue
talking about random and how we actually start using it in
our compositions, in our design, especially how we start using it to
kind of alter some of the properties of our geometry and
our primitives within our canvas, right? So let's start jumping right in. Let's imagine that we have our canvas and
we want to draw a rectangle, but perhaps we want to not know
exactly what is the size of this rectangle or
even the coordinates, right? So you can see that in this case we
can specify a random integer for the x variable, the y variable,
and basically this will make this rectangle be in
a random location in the screen. But similarly we can actually
affect its width and height, right? So we could actually do random integers
specifically with different domains here between one and three. And just to kind of control the size of
the rectangle, we can do that as well. So you can see that even the four
variables that defines a primitive in the rectangle could be randomized,
right? We could actually think of a circle
through its random integers, like the position, but
also its radius, right? So it really gives us a way of drawing
that does not necessarily need to be hard coded, meaning explicitly established
the variables that we care about, but rather more of a field, right? More of a feeling of a field, something
that could be multiplied multiple times. And that's where we're going to
start kind of opening up to creating compositions that start using randomness,
integrating randomness in a distribution, especially when we start
using loops with it as well. You'll see we could start getting
something interesting very quickly. So let's jump into processing and
see how we could actually do that in code. So here we are in processing. We're not going to do anything dynamic. So again, we're not going to necessarily
need to include the draw loop. So let's just draw. First of all,
we're going to do this as a loop, right? So I want to do a for
loop from I in range from 0 to 20, which is the same range
that we did before for the sequence of primitives
that we've done. And we know that we actually do
want to do maybe an ellipse, right? Let's do an ellipse this time. Let's do an ellipse that it's 100, 100 and the size will be maybe 50, 50. So we have 20 ellipses
currently in the same location. Let's just create one random variable
first before we actually draw all these ellipses on top of each other. Notice that just based
on the previous mistake, we want to make sure that we're
importing the random module, right? If you're not using the random module, you're not going to be able to
access the random functionality. So let's do x. And here we do random.randomint, right? And we are going to specify the domain. We're going to say 0. And we know that our canvas is 1200. So we could type 1200 here and
say we want to create a random value that goes from 0 to 1200,
which is the size of our screen. But perhaps we could actually
just use that variable, right? So we're getting more and
more used to practicing a form of associative programming where we're
actually using a variable in different places in the code and not having to
type the same value over and over again. That's the whole point of
having variables, right? So hopefully you start getting
used to this idea, right? The variable is established up here. We're going to be using it
within the setup, right? So now that we have this x coordinate,
let's use it for the ellipse. Let's see what we get at this point. So we actually start getting
these ellipses distributed. All of them are in the y
coordinate of 100. So 100 units down, but
the position could be zero or it could be all the way to
the size of the screen. And every time that we run this program, we are going to be getting
a different result, right? So this distribution doesn't
look like the previous one. I mean, if you want to save
the screenshot and check, but trust me, that's actually what's happening, right? So let's also add a few
kind of styling here. Let's say no stroke, right? And maybe the feel just to kind of also
see a little bit the overlap, right? So we can say that the feel of this,
while we want to do it white, we might want to do it
slightly transparent, right? We can do a little bit more transparency. So maybe we haven't covered this,
but there's another. The feel function can use one color for
black and white, two colors for black and white and transparency,
three colors for RGB, four colors for RGB, plus transparency. So I'm going to be using the grayscale,
in this case white. And this 80 will represent transparency. And you can see that we're starting
to get this effect where we have a series of sphere or circles, right? All of them with some overlap that
every time we kind of run this kind of random function,
they get into a different location, right? So, pretty straightforward. We're not doing much with random, but let's copy that into our second variable,
right? So let's do x and y. In this case,
we can use the same random variable, but we do want to change the instead
of using the canvas width, we want to use the canvas height, right? Meaning that we want the values
to go between 0 and 600, right? So we don't want values
to go outside the canvas. So now that we have this variable, let's just replace this variable here
in the construction of the ellipse. And as you can see here, we could
have a composition that is, again, absolutely random based on
the position of those circles. And we can run it multiple times. And you'll see that we actually
distributed them using those random functions. But obviously we haven't done
too many iterations of that. You might think, well, why don't we
just crank that number up a little bit? So, as we understand, for loops, right? We're using all the kind of the different
elements that we've been learning through this week. We're using for loops to repeat
this operation multiple times. And you can have increase
the number of circles. Let's keep increasing that up further. As you can see here, we have a random
distribution of circles, right? So I'll let you kind of play with that. And you can play with more circles or
less of them. Maybe some of them are in some areas. Maybe you want your random just
to operate in half of the screen. It's up to you. Finally, let's just also randomize
the size of the circles, right? Because currently we have
all the circles being using the same hard coded value or
explicit value of 50, right? So we want to randomize the size. And here I'm going to use a slightly
different random function. So random.uniform, which is going to be between 1.0 and let's say 50.0. And what I'm trying to obtain here with
the uniform is floating point value. I don't want the values to be one,
two, three, like integer values, but rather a whole range of values
that might operate within the decimal space in order to use this result
as the size of the ellipse, right? And I'm going to duplicate it. I could do two variables, one for the x and y, so that these ellipses
kind of sometimes are more stretched. And I invite you to play
with that idea if you want. But for me, I just really wanted to
play with the size of these circles and the overlap of them, right? And sometimes maybe having areas that
are kind of a bit more empty and areas that are more overlapped. And we're playing with transparency to
kind of allow some of those moments to kind of really start kind of
looking slightly different, right? And again, it's not a very
complex composition in any way, but certainly we're starting to get
to a sensibility of using a code, repetition and randomness to
manipulate some of the primitives and variables that we're constructing. And as opposed to be
thinking that we would actually explicitly write the coordinate
of each one of those circles, we do a kind of a relatively succinct
piece of code that can actually create these altering
compositions every time, right? So we're going to leave this video here,
and I'll see you in the next one.