Welcome back to another video about variables,
but not really.
So in this video, I to help you use your variables
in a different way.
So most of the examples that you've seen,
there's not a lot to them in terms
of their design and their variability.
This circle will always be white.
It will always be the same size.
Maybe, hopefully, you've been playing around
with adding more variables and incrementing and decrementing.
But it can be really hard, at least at first,
to figure out how to pick values for your variables
and create a scene that's different every time
you run the sketch or that fills up
the canvas with lots of different shapes
of different sizes and colors and stroke thicknesses.
And so here I am to introduce to you
the function random from p5JS, which
I think will unlock a lot of possibilities for you
to make a creative project in p5JS.
So what is the random function?
So the random function is like any other function in p5.
It has a name random, and it takes arguments.
These arguments are optional, and maybe I'll
get to how you can remove them later.
But, really, the important thing for you to note here
is that the two arguments that you almost always want to offer
are two numbers, a minimum and a maximum.
I should note there is something kind
of unique about this function random.
It's not unique, but it is different than all
the other functions that I've been showing you so far--
line, background, fill, stroke.
All of those do something.
They set a color.
They draw a shape.
This function is going to answer a question.
It's more like it's going to fulfill
a request with something back.
It returns a value is the technical term for that,
and we're going to see this come up again
later in future videos where you learn
to define your own functions.
But for right now, we're just using the p5 functions.
And the random function returns a random number
between a minimum and a maximum.
So if I were to put 10 in here and 50 in here,
the number that I get back is something random.
Roll the dice-- maybe I get 22.3491627.
So a couple of things I should note
is, one, I always do get a floating point number,
a number with decimal places.
Right now, that's not going to matter to us so much,
but that could be really important later,
depending on what we want to do with that random value.
So let's take a look at it in an actual example.
This is a variation off of one of the first drawing
examples I showed you.
It's just putting a square in the center of the canvas.
The square has a stroke rate, a stroke color, and a fill color.
But I did add two variables here.
I made a variable called square size
to define how the width and height of the square and line
width as a variable to describe the stroke weight.
It's very important that I don't call this variable stroke
weight if the function name is stroke weight.
You could see that's going to cause lots of problems.
So I made up line width as a term
that's similar and indicates what
I want that variable to be.
So the first step that I might want to try here
is to initialize those variables with random values.
When I first looked at initializing variables,
I noted how you sometimes want to initialize
the variable in setup but sometimes can do it just
as one line of code.
Let square size equal 150.
Both the declaration and the initialization
happens right there in one line of code.
If I'm going to use the random function,
you would think that I could put that right here.
And now, I want the square size to be
some random value between 10 and 50, but I got an error.
We can see that error right here.
Uncaught reference error-- random is not defined.
Wait, that's not possible I just showed you
the reference page where random is defined right here.
I should be able to use it.
So this is a very strange aspect of working with p5.
While it is OK to work with code outside of setup and draw,
the p5 functions themselves are not available there.
So if I'm going to assign square size a literal value like 150,
that is OK to do outside of setup.
But as soon as I want to call the p5 random function,
I need to no longer initialize it here, but rather
initialize it in Setup itself.
Look at that.
Look at the size of that square.
That is just a wonderful size square.
It's random.
Let's do it again.
Every time I hut Run and run the sketch, I get a different size.
This, by the way, is the seeds of parametric design.
Maybe you as one of your first exercises, you made a house.
You drew a picture of a house.
And you made a rectangle and a triangle
and then another rectangle for the door and then some windows.
Could you take a sketch like that and every time you run it,
you get a house that has the same overall design,
the same parts, but they're different each time?
You get a randomly generated house each time.
This is something you might want to explore
with the random function.
I can also make the line width random.
Now every time I run the sketch, both the size
of that square and the thickness of the stroke around the square
will be random.
So this is a good starting point for you.
Find a sketch that you made.
Look at all the properties of that sketch, the variables
that you're using, and initialize them randomly
in Setup.
But I am curious to explore this a bit further.
What if instead of picking the random value in setup,
I were to pick the random value in draw?
Let's just move square size.
Now let's look at this.
I mean, it's certainly flickering.
I don't know how pleasant this is in terms of an animation.
But you're seeing here that 60 frames per second as draw
is looping over and over again every time it
picks a new square size.
Something that I might even be able to try with this
now is go back to where I don't draw the background every time,
add in some alpha, and you could start
to see that drawing the square randomly so many times over
and over again is sort of blending together.
I think I want to have a bigger range of size
and maybe have the thickness be a bigger range as well.
Maybe have that be random as well.
So this is already I'm able to get quite a dynamic pattern
just from varying the size and stroke weight of this one
rectangle randomly over and over again in draw.
Let's look at another example.
Here's a simple p5 sketch very similar to everything else
I've shown you.
It's just drawing a single circle in the canvas.
I have five variables-- an x, y, a red, green, and blue value--
r, g, b, x, y.
One thing I should really note is look at the top.
I can actually declare multiple variables
on the same line of code with a comma, yet again another one
of these shorthand things.
And in fact, I could make this shorthand even more
by putting them all in one line.
This is a perfect place for me to add in random.
What if both its position and its color
is random every time that circle is drawn?
Now, I have almost this pointillist-like effect where
I'm getting a variety of red bluish,
pinkish purpleish circles over and over again anywhere
in the canvas, all layering on top
of each other one per frame.
This is also a spot for me to note something
about the random function while I described it
as a function that takes two arguments, a minimum
and a maximum, I do have the option of giving it
just one argument instead.
If I give it just one argument like random 50,
it's going to assume the minimum is 0.
It will always give me a range of values between 0 and 50.
So in this case, I could simplify this example
by getting rid of all the zeros.
And it's exactly the same code.
This is also an opportunity for me
to show you another little quick tidbit about p5.
There are more system variables that
are quite useful beyond just mouse x and mouse y.
For example, the width and height
of a canvas, whatever values I put into create canvas,
600 or 400, those are values that are available to me
in a system variable, width and height.
This way, now, if I ever change the dimensions--
for example, now, the height is 800--
I don't have to change it again down here.
I don't have to put 800 in multiple places.
This height value will always pull up whatever
the canvas was created.
And by the way, there's another built in variable.
Window width and window height will dynamically
pull the size of whatever how much space
there is for the canvas.
So I'm going to run this again.
You can see it's always filling up that whole area,
no matter how much space I have.
This is particularly useful, by the way,
if you're in the web editor.
And I go to File, share, and I click on full screen.
Now, I have my sketch covering the full canvas
that I'm seeing here on this view of the sketch in p5.
I have an exercise prompt for you.
Remember the painting program where the mouse moves around,
and the circle follows the mouse painting its trail.
This is a wonderful opportunity to use random.
I'll include some solutions to this
in the video's description, but I'm going to see--
I'm going to leave it for something for you to try
after watching this video.
Could you make it that every time you click the mouse,
you get a new color, a random color for the painter, so
to speak?
Maybe you get a random size.
Maybe as you move the mouse, the actual size that
you're-- of the circle changes randomly.
There's so many possibilities.
How could you use random to augment this painting program
to change the way that the thickness, the alpha, the size,
the color, all of those parameters of the system change
according to how you're interacting with it
and the random function itself?
If you make your own random painter,
please share it with me.
I would love to see what kinds of creative possibilities
you discover.
And if you are following this playlist,
take a break, relax for a little bit.
But this is the end of this section.
The next section will explore something called a conditional,
which will actually allow you to do a lot more of that painting
program.
Not to mention if you remember that circle that
was running away from us--
there's that circle.
It's going to leave, and I'm going to be very sad.
But in the next section, I will be happy
because I'm going to look at conditional logic.
How can I test to see something-- whether something
is true or false?
Has the circle left the canvas or not
and then execute an action based on whether that condition is
met?
That's what conditional logic is.
It will allow us to have that circle, bring it back to us,
have the bouncing ball bouncing all over our p5JS sketch.
And I look forward to seeing what
happens when you make that sketch
and see what you make with it.
All right, see you soon.
Goodbye.
[MUSIC PLAYING]