The commands we've been working with so far are for drawing.
They either draw items to the canvas or change something about the program state,
which relates to drawing.
For example, the Fill command changes the fill color.
Now, in this video,
we're going to look at a different set of functions that deal with numbers.
We'll call them mathematical functions.
Now, I've got my p5.js reference page open here,
and we can find these functions under the heading Math.
So, if I click on that,
it scrolls down to that part of the page.
The first of these functions that we're going to deal with is called random.
So, I've got an empty example here,
which I'm going to work with and you can download that too from the Coursera page.
So, the first thing I'm going to do is just try out
this command by typing in the setup function Random.
if I run this and look at the output,
you'll see I don't see anything and that's because this is
a different type of function from those drawing functions.
It doesn't draw anything to the canvas.
Instead what it does is it returns a number.
So, to look at that number,
we're going to have to use console.log.
So, now I'm going to put console.log,
and I'll put the random in-between.
If we look now at the console,
what we'll see is a random number,
and it will be a decimal number,
and it will be between zero and one because this is what random does.
It returns decimal values between zero and one.
So, if I refresh the page again,
we'll see it's a different number.
if I refresh it again,
it will be different again and it will keep being different.
You'll notice that your values are not the same as my values.
So, let's use Random to do something a little bit
more interesting than just producing these random numbers.
Let's use it to draw an ellipse.
So, I'm going to draw an ellipse here in the setup function.
I'm going to put it in the middle of the page,
but I'm going to make its size,
its width, and its height random using the Random function.
Now, if I use this function just like this,
we'd find that the ellipse is very tiny because remember,
it only produces values between zero and one,
and that's really too small for the size of an ellipse.
So, we're going to need to multiply the output
of these functions by a much larger number.
So, in this case, I think I'm going to use 250 for each one.
When I look at the output now,
I see an ellipse and it has a random width and a random height,
and it changes every time I refresh the page.
So, we can have a bit of fun here now.
I'm seeing as it produces a random value every single time.
What I could do is I could use this instead of using it in the Setup function,
I could use it in the Draw function.
Remember, the Draw function happens over and over again.
So, I'm going to clear the background
and I'm going to copy this code into my Draw function.
Now, I get this kind of cool strobing ellipse in this way.
So, one thing we might want is we might not
want different widths and heights for our ellipse,
but rather to have one random width and height so that we actually see circles.
Now, in order to do this,
we're going to need to assign the outputs of random to a variable.
So, I'm going to create a variable called R,
and I'm going to assign it in the draw loop.
Instead of using Random,
now I'm going to use that variable R to draw my ellipse.
So, both of these will have exactly the same value.
When we look at the output if I refresh this,
we'll see now that we only get circles.
There's another way you can use random as well and it's really quite useful.
So, instead of providing no parameters,
we're actually going to provide two parameters.
We're going to provide two numbers.
One will be the minimum of the range of output and the other one will be the maximum.
So, I'm going to say that the minimum for my circle should be something like 50 pixels,
and the maximum for my circle should be something like 250 pixels.
Now, if I look at the console outputs,
I'll see that I always get a number somewhere between 50 and 250.
So, I'm going to use that code to set my
variable R. Because now I have proper pixel values,
I don't need to do this multiplication anymore.
Oops. Now when I look at my output,
I can see I'm getting perfect circles.
Somewhere between 50 and 250.
Okay. I want to show you another function,
and this is the function called Min and there's
an accompanying function that is called Max,
and you'll see that they're quite similar in assessing way.
Okay. So, I'm going to show you first of all the outputs of Min,
so I'll just comment out this code.
Like we did with Random,
we're going to console.log the outputs of Min.
Min, we can't just use Min with no values,
we have to provide two values.
We have to provide two numbers.
So first of all, I'm going to put in the numbers zero and one,
and Min will output zero in that case.
If I do it, refresh the page,
it will keep outputting zero.
If I put in 10 and one,
Min will output one.
So, you can see here, it's outputted one.
Okay. I'll put in two numbers and can you guess what Min is going to output.
So, I put in 24, and I've put in, what's that, 11,000.
Min will output 24 because what Min does,
if you haven't guessed it already,
is it always just takes the lowest value and returns it.
So you might be thinking, "Well,
what's the point of this function?
It seems a bit strange to me."
But it becomes really useful when we're working with
values that change in the runtime of our program.
So, one good example is working with mouseX and mouseY.
So, what I'm going to do now is I'm going to draw
an ellipse that follows the mouse using mouseX and mouseY.
So, I'll go ellipse.
I will go mouseX and mouseY,
and we'll just make it 50 by 50.
So, when we look at the output,
this should be no surprise to you by now.
The ellipse is following the mouse perfectly around the screen.
Now, what I'm going to do is I'm going to use Min and it's going to stop
the ellipse from going any further across the screen than roughly the middle.
So, what I'm going to do is I'm going to make a variable called
X and I'm going to set it some mouseX,
and we're going to use it here.
So, so far, this won't really change anything apart from we're using this variable,
so we can see everything is still the same.
But now, what I'm going to do is instead of saying X just equals mouseX,
I'll say it equals Min, the minimum,
either mouseX or 250.
What that means is that the X position of
this ellipse is not going to be allowed to go over 250.
So, if mouseX will say 400,
it would, in this line of code,
be set back to 250.
So let's look at what happens.
Now, we can see that ellipse just refuses to go across that line,
so that's one way of using it.
The other way we could use it is in an animation.
So, instead of setting X like this.
I might initialize X at zero,
and then I might increment it here.
So, I could say X equals X plus one.
Our ellipse is going to travel gradually across the canvas.
Now, if we wanted to stop in the middle,
I could go X equals the minimum,
either X plus one or 250.
So, everything will be perfectly normal until X reaches 250.
At that point, it goes, well, what's the smaller,
250 or 250 plus one?
it will keep coming up with the answer 250,
so X will never be allowed to go past that point.
if we watch our sketch,
we'll see that the ellipse stops at the point when we get to 250.
Okay. So I'm going to show you the other command now,
I'm going to show you the Max command,
which does almost the same thing.
For this one, what I'm going to do is instead of
making X go across the screen from left to right,
I'm going to make it go from right to left.
So, I'm going to go, X equals X minus one.
I'm going to stop make the initial value of X much higher.
I think, I'm going to set it at 500.
So, let's refresh that,
and we can see our ellipse traveling backwards across the page.
So now, what I want it to do is I want it to stop at the middle.
I can't use the Min command for that because we would get a strange effect.
The ellipse would jump.
So, what I'm going to do is I'm going to use the Max command.
The Max command just does the opposite of Min.
It returns the higher number.
So, I'm going to go X equals Max.
We can either be X minus one or 250.
Now, we'll see the ellipse travels across the screen,
but it stops when it reaches 250.
So, have a play with that yourself.
There are some other really great mathematical functions
that you're going to find useful.
One to have a look at,
which will become relevant this week in your sleeve puzzles is constrain.
Another one to have a look at is map.
In the following weeks, you're also going to find
that round and floor starts to become useful as well.
From here I would go to
the hacker exercise and have a go at using these functions as part of that.