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.