In our last talk-through,
we showed how you can animate a ball bouncing off the walls
using the draw function and if statements.
Let's review.
First, we set up some initial variables for position and speed of a ball.
Then, in the draw function, which is that special function
that gets called over and over when your program is running,
we repaint the background and draw an ellipse on the canvas
and we position that ellipse based on the position variable
and the speed and how they affect each other.
Now, without if statements,
our ball just kept on going forever and ever,
or until we pressed restart.
So we added two if statements down here to check and see
if the ball was near the right side of the screen
or the left side of the screen,
and if so, we change the speed to be positive or negative
so that the ball basically would bounce back.
So now we just have this ball, bouncing back and forth forever.
So that was pretty cool,
and there's a lot of really cool animations
that we can make with that.
But now, I want to add user interaction to this program.
See, right now, this program's like a TV show.
if you gave it to a friend,
and your friend didn't know how to program,
they couldn't really interact with it.
All they could do is watch it, which is cool,
but it's a lot more cool if they could actually do something.
So, let's give the user some ways to control it.
Remember earlier, we learned
about two special global variables called mouseX and mouseY.
Those variables return numbers
that tell us about the current position of the user's mouse
and they're a great way to make a program more interactive.
So, let's see. How can we use them?
Well, we should use them inside the draw function somewhere.
Because that's the only code
that's called over and over as the program runs.
Everything outside of draw is only called once,
when the program first starts.
So, it doesn't make sense to use mouseX and mouseY there.
The user hasn't had a chance to interact with it.
In draw, we're drawing the ball 200 pixels down the screen right now.
How about we just replace that with mouseY?
Because that is the y position, right?
This way it will just add the y position dependent on where the user's y is.
Right? So check this out.
By just moving my cursor up and down,
I can change the line that the ball moves along.
That's pretty cool.
But I want to use mouseX, too. So, how should I use that?
Well, why don't we just make another ball
and have that ball going in the opposite direction: up and down.
And there we'll just have the user control the x position of that.
So we kind of just do the reverse. We'll say ellipse mouseX position 50 50.
Alright? Check this out!
I've got these two balls that I control, and going in perpendicular directions.
But, I'm still not happy. I want to give the user even more control.
I want to give the user the power to start up the second ball.
To actually bring it into existence, just by pressing their mouse.
Well, then I need to figure out
how to tell that the user is pressing their mouse.
Thankfully, we have a super special Boolean variable for just that.
It's called mouseIsPressed and we can use it inside an if statement.
So, let's see. This is our second ball.
So we can say if mouseIsPressed,
and then we'll move the ellipse colon to there.
So, what this is doing here,
is telling the program that we only want to draw this ellipse
if this is true and mouseIsPressed will only be true
if the user is pressing their mouse.
So, let's try it. Ta da!
So now I can make the ball appear whenever I press.
So it's zooming in from this parallel universe.
In! In! In! It's awesome!
So, the interesting thing about this variable mouseIsPressed
is that it changes based on what the user does
not based on what our program does.
and since the draw function gets called repeatedly over and over,
the output of our program will change over time
just with a little bit of user input.
With the combined power of if statements and mouseIsPressed,
you have everything you need
to make awesome things like buttons, and drawing programs.
Woo hoo!