2.5: The random() Function – p5.js Tutorial


So, here we are. This is the last video in this
little section about variables in p5 JS and before I go– I’m not going anywhere, because
all I do is stay in this room make videos. Before I go on to the
next topic– which is conditional logic–
which will really unlock a lot of creative
possibilities for you, I want to give you one last
tool that will hopefully make things a little bit
more exciting in your life. And that is the random function. So, the random function. So we, you and me, together
have been doing a lot of stuff like this. Var x equals 50. This is well and good,
because x is a variable and 50 is a perfectly
fine number. And I’m happy with my
rectangle at pixel 50. But the whole point of
doing this programming thing is to have systems of logic. Rules to generate behaviors,
and graphics, and designs. It’s not really
about, like, let me pick my five favorite numbers
and set those variables to those numbers. So, there’s a lot more
to it, but a first step in that direction we could
least say, here’s the rule. Whenever my program
runs, the circle will appear at a
random x location. So instead of saying
Var x equals 50, I could say something
like var x equals random. And random is a function,
just like any other function. Line, ellipse, fill, stroke,
it requires some arguments to define how that
function will behave. And random, if you watch
the previous video, is just like the map function. And if you recall– or if you didn’t watch it– the difference is,
when you say line, a line is drawn on the screen. The line function
performs the task. When you say, random,
a task is performed, picking a random number. But that function
resolves to it, it evaluates to that number. And you can take that
number when it resolves to, and assign it back to something. A variable value in this case. So if I say 0 comma 50– I’m kind of at the edge
of the semicolon, there– The parameters, the
arguments that random takes, are a minimum and a maximum. And random will give you a
number in between 0 and 50. One thing that’s
important here to realize, which is a small
little distinction, is that here are some
numbers you might get. 2, 21, 73– you won’t get
73, but that’s above 50– 42. But I will mention, you
probably won’t ever get these. I mean, you could
get these numbers. You’re more likely to
get numbers like this. It’s giving you, actually
what is sometimes referred to as floating point
numbers, or decimal numbers. So, in this case, it
doesn’t really matter, p5 can handle that if you
get the number 50.34567. It know to just draw
something at pixel 50. But there’s other
cases where we might need to do a little
something more with that. I probably shouldn’t
have even mentioned this, because it’s, like, a little
unnecessary point of confusion. But I’ve already restarted this
video, like, five times so I’m going for it. OK, so let’s actually start
messing around with this and see what happens. OK, so I have a sketch here. Actually, I’m going
to start a new one. No, no, no, I’m going to
say, File, New Project, and I’m going to call this dots. And what I would like to
do is have some variables. And I’m going to use
objects, since I covered those in a previous video. So, I have a point and I’m
also going to have a color. Let’s see how I’m doing
here with my having just learned JavaScript syntax. So, you can see I’m setting
up a couple variables. I want to have a point
that has an x and a– oh, my finger disappeared–
a point that has an x and y. I want to have a color
with an an r, a g, and a b. Because, my plan for all
this is first in Setup, obviously, to create a canvas. Let’s make it a nice small size. And then what I’m
going to do, is I’m going to set a background. I’m going to set it in Setup
because it’s just background, just going to happen once. And then an ellipse. I’m going to draw the ellipse
at point x comma point y. It’s going to be
a small ellipse, and I’m going to fill it
at color dot r, color dot g, color dot b. So, I can zoom back out
here, and we can see. We should be able to
run this sketch, now. Hit Run, OK, problem with scope. What happened? Look at this, interesting. Ellipse is receiving an empty
variable in spot number 1, 2– if this is not intentional. Color dot r, color dot b. I could put some
semicolons here. What did I miss? R,G,B. Help, help! Look at this. What am I doing here? Oh, ellipse. Oh, look, some crazy
stuff has happened here, some horrible stuff. This video is a disaster,
I’m going to fix it. I’m going to cut this
out if I remember to. Point comma x [INAUDIBLE]
y is 50, point x, point y. Let’s do some things. First, when we have
these kind of problems. This is a useful point. Let’s just comment out the
offending lines of code. Hit Save and hit Run. OK, no errors anymore. Let’s comment back in fill. We can figure out
what’s going on. Still no errors. Let’s draw on ellipse
the old fashioned way, and let’s see if this works. OK, that seems good. Now, what’s wrong with
my point x and point y? Let’s try this,
just point comma x. Let’s run it again. Empty variable in spot one. You know, I wonder if point– let’s call it spot– I wonder if there’s something
wrong with using point. Yeah, that was interesting. I’m going to have
to look into that. So I don’t know if point
must be some key word that’s doing– oh, oh, I’ve
done something horrible. Boy, wow, this is
great, this is great. OK, I know what’s happened,
I know what’s happened. This, is great. OK, so here’s the thing,
what did I just do? Let’s think of some
functions in p5. I know I’m off on
this horrible tangent, now for another five minutes,
but some functions in p dot five are like line. Rectangle, for
drawing a rectangle. Ellipse, for drawing an ellipse. What if you want to draw a
point on the screen, huh? Well, what’s the name
of that function, again? Point. So, point is, like, kind
of an important thing in p5 that’s meant for
something highly specific, drawing a point. So, if I try to make up
a variable called point, I have completely overridden
the existing point function. And you know what? I didn’t actually override
it, because p5 then, overrode my variable. Because things are happening in
weird orders, in strange ways. So that didn’t
work, it was trying to, like, use the point function
as the place to draw the point. And everything exploded, and
I got a weird error message. So that might be something
that p5 could handle with a friendly error message. And maybe after
this video’s over, someone will file
a GitHub issue. Maybe that person will be me. But let’s go back. And we solved it, but hopefully
you saw the steps of debugging. Of, like, everything was, like,
exploding and going wrong. And if you calm,
take a deep breath. Calm down, comment
some stuff out, start putting it back in slowly,
see where things go wrong. We’ve gotten a bit further. But now, we’re back, I’m back. This video is still
only at 8 minutes, which is totally reasonable. And I’m going to go back
and change this spot. I’m going to say,
spot x, spot comma y, and I’m going to Run it. And we can see, there we
go, I have the circle. And I’m going to move this
over here, being drawn. Excuse me, I want this to
give me a little more space. I have the circle being drawn at
100 comma 50, where the spot is with this particular color. So what happens if we start
to add some randomness, here? So, first, remember, draw
looping over, and over, and over again. So what if I just
say, spot x equals random between 0 and 600? This is another thing
that’s worth mentioning. I have a random spot
anywhere between 0 and the width of that canvas. The width of that canvas
is 600, so I could write the number of 600 there. There does happen to be a
built in variable in p5 that knows, just dynamically, what
the width of the window is. And this is useful
to use, because if I use that variable width here– instead of typing 600– if I later change the
size in create canvas, I don’t have to change
it elsewhere in my code. So I’m going to do
that, and I’m also going to say spot dot y
is random zero to height. So, now, let’s run this program. And look, I just get spots all
over the place, spots, spots, spots. All with a nice red color. But perhaps, what
I want is to say, color dot r equals random
between like, 100 and 255. Color dot g is
always zero, color dot b is random
between 100 and 190. I’m just picking, like,
random arbitrary ranges, here. And now, look, I’ve got a nice
variation of random purplish, pinkish dots. And I could even say, add a
little bit of alpha, here. And Run this again. And you can see, I have a nice
little, like, point to list. And actually, one
thing you’re noticing here, if you look really
close, is there’s little black outlines. Because I didn’t
turn off the stroke. So, what I’m going to do
now is say, no stroke, and Stop and Start. And look at all these nice,
little dots, layering, this nice little
pointless thing. So you can take
this much farther. You could make random sizes,
you could map the random ranges based on, like, where. Like, if the dots appear on the
left, they’re more greenish. If they’re on the right,
they’re more bluish. So, there’s so
much you could do. Maybe try to create a
random painting, here. You could use other shapes
besides just circles, that sort of thing. That’s sort of saves an
exercise you could try. I also might return to
this particular program. If you remember this, we
worked on just a little bit of a painting program, where
you move the mouse around and as you move the mouse
around, you paint something. And so, right now, every
time you click the mouse, it erases the background. What if every time
you click the mouse, you get a random
background color? Or as you move the mouse,
the color changes randomly. So, there’s lots of things
interesting possibilities, there. You can make this
painting program a bit more sophisticated. OK, so that is the
end of this video. And I think this wraps up my
section of videos on variables. And I’m going to keep that
weird, little thing that happened, that I think was
a good moment for today. OK, see you later.

100 Comments

Add a Comment

Your email address will not be published. Required fields are marked *