More Mouse Interaction (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

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!