Ok, so we're getting to an exciting moment!
this is an exciting moment in time,
you know, what are we really doing here? I have no idea but we are
getting to the point where
we are almost ready for this circle, when it reaches this edge of the window
to turn around and come back!
come on, you can do it! ok, almost!
we are getting there, we are ready to do that!
so how are we going to do that?
we're going to use a conditional statement
that's what the last two videos, that you may or may not have watched,
(unintelligible) complete disasters ... (unintelligible)
we're demonstrating how conditional statements work.
well, let's take a look at our scenario here:
we have a Processing window, we've got a circle in that Processing window.
the circle is draw at an x-location of circleX, that is the circle's x-location
the circle moves every frame a certain amount
in our program here we can see it says: circleX = circleX + 2;
so it moves 2 pixels every frame, and we can think of that as
the xSpeed, for example, that's the speed it's moving along the x-axis
you know, this should really ring a bell for you!
what's the thing that we wanna add to our program if we're talking about
the fact that there is this value that goes here that we could name xSpeed?
well, we should have a variable for that!
and I kinda jumped the gun with this
because that's something we're going to discover
if I had not mentioned that right now, we would
discover this in a moment, we need that to be a variable to execute our task
but I'm just gonna add another variable at the top
I'm going to call it xSpeed = 2;
and we're going to say: circleX = circleX + xSpeed;
the nice thing about this is if I decide I want the circle to be really slow
because I want it to be really dramatic
I could change that to .2 and you see we're moving very, very, very , very slowly
across the screen. so we let that go for a little bit
we can talk and see if we can get back here before it reaches the end
that's a good challenge! still only two minutes so far!
we're doing well!
ok, so first we have to decide for ourselves
what's our condition for when the circle reaches the edge?
well, you can say: if the circle's x-location
is at the width of the window,
but what does it mean to say: at the width of the window?
maybe you want to say: if it EQUALS the width of the window
if circleX equals width
turn around, that's what we want to say
turn around.
so this is reasonable but it's a bit
of a problem - it's not there yet!
the little ball is still going! let's go over there and stop it!
ok, let's add that bit of code
and I'm gonna say: if circleX equals the width of the window
do something. now, I'm gonna just print a statement
turn around
so, and I will also not have it go .2 pixels, let's have it go at 2 pixels
and let's run and see what happens
oh, I lost my line of code ...
so [unintelligible] circleX = circleX + xSpeed;
run this again
it's going, it's going, it's going
in a moment we should see a little message
pop up ... ah, you saw that?
so it reached the edge and printed 'turn around'
I'm sure you can't read it says 'turn around'
but it says 'turn around'
hm, is that out the screen? no, it's not out of the screen
it's just out of my preview
just ignore me, this is all magic how this all works
ok, see this is the problem: I'm just like losing my train of thought
and a minute goes by
ok, we see, but what's the problem with this statement?
this is a big problem, this is kind of good but it's not great
what if I'd say: xSpeed = 2.8whatever this is really important, this is exactly
what I always imagined xSpeed to be!
I mean, come on, 2.8whatever, that's such a good speed! right?
ok, here it goes, it's gonna get to the edge ...
nothing printed out! why?
because if you add this up a bunch of times
it's not going to be exactly 360 pixels
so a much better way of doing this would be to say:
if circleX is greater than, or equal to, width
this way if it just so happens that it's here and the next frame it would be here
we're still gonna register that!
as long as it's gotten past the window now we wanna execute some task
so it's a little bit of a digression, just with how you deal with something along the edge
but an important one nonetheless.
'greater than' is much better than 'equals to'
ok, we're at 5 minutes, that's ok
ok, so now we're good and we're going to say: if it's greater than width
now just to be simple for a second,
I'm gonna say, how would you say? ok, what would you write there
to have it turn around?
well, how do you get it to go forward?
to get it to go forward you say: circleX = circleX + xSpeed; right?
so to go backwards you'd say: circleX = circleX - xSpeed;
so if it gets greater than width then why we don't just tell it to go backwards?
ok, that sounds good! I don't know, I like your line of reasoning there!
that was pretty reasonable!
that was what you were thinking, right?
that's not what I was thinking but that's because I already did it before
so, circleX = circleX - xSpeed;
let's run that! that seems pretty good.
it's getting to the edge,
very dramatic, what's going to happen?
boo, that's kind of a good effect
we got it to stop at the edge
this is a big moment for us!
it stopped at the edge. but is it really stopping at the edge?
this is where you really, first of all we could debug this problem
by putting a print statement in there and see what the value of circleX is
but this is not right, we need to figure out how to get it to turn around
it's not turning around. so what's happening here?
ok, so let's just say for a moment that the value of circleX starts at 0
and let's give it a speed of 10
so it's like superfast
this is like the fastest circle moving across the screen I've ever seen
boom, it's stuck there
it's 10, is that greater than width?
no, so it's 20, is that greater than width? no.
so it's 30, it's that greater than width? no.
it's doing that over and over again, eventually it gets to be 350,
is that greater than width? no, 360? no. 370? yes!
so we know say circleX is 370 which equals 370-10=360, is that greater than width?
no. so it's stuck at the edge, we don't wanna ...
what this code is saying, is that when it gets to the edge, have it go
back one time, and then keep going forward
and then go back one time, and keep going forward. we don't want to do that!
we want to say: have it permanently start to go backwards!
so how do we have it permanently start to go backwards?
well, why is it permanently going forward in the first place?
it's permanently going forwards because its xSpeed is 10.
so what if I actually here manipulate its xSpeed value and said:
xSpeed = -10; ?
it's zooming across and BOOM, it's zooming back again, and oh, it's gone again!
we can accomplish that though! we can deal with that!
we can handle it!
if circleX is less than 0 set it to go forward
boom ... boom ... boom ...
we have a bouncing ball!!
ladies and gentlemen, this is very exciting!
this is a big moment!
what we have now is two conditional statements
one ... one ... I'm so confused I wish to be drawing this but
now I just got this thing here
one is telling it to whenever it reaches the right hand-side of the screen
to set its speed to be negative
and whenever it reaches the left-hand side of the screen to set its speed to positive
here is the thing:
if you're thinking about this, if you've learned about,
if you've watched our overly long video about logical operators
that had AND and OR in it
could we say more generically:
if it gets to one side of the screen
or if it reaches the other side of the screen
turn around!
how could we say: turn around?
well, let's think for a moment:
10 means going this way, -10 means going this way,
so if the value is 10 , we want it to switch to -10
if the value is -10 then we want to switch it to be 10
how do we reverse the polarity of a number?
if it's positive to make it negative, if it's negative to make it positive?
multiply it by -1 !
then we get -10
10 times -1 is - 10
-10 times - 1 is 10
genius!
so here we go and we say: xSpeed equals xSpeed times -1
and we now have exactly the same effect
but we've reduced it into one statement
if it's greater than width OR if it's less than 0
reverse the speed of that
now there's a couple of things you might try to do as an exercise now that
you've watched this video: 1. add y
try to bounce it along the y-axis
2. is having it speed up or slow down
each time it hits the wall
this is kind of an interesting problem
and I'm actually gonna show you in a second
so if you don't want the answer to how you can slow it down, pause the video for a second
[unrelated stuff]
so, the other things that you should try is
to think about gravity, so how do you make gravity work. and maybe I'll
do a little video about that but that's sort of part 3, that's a litte advanced
we have this system where we [unintelligible] three exercises
like right below you, like on this browser page, but whatever ...
so, anyway, just as an interesting little token
we could do something like have it always slow down.
this is gonna cause us a problem though
watch, aaah, [unrelated]
so I'm actually gonna leave this here
I'm gonna leave this as this open question
why did this not work?
why did it suddenly get stuck?
I mean if I increase the speed, it's not gonna get stuck
and let's start it a little slower cause it's gonna happen to quickly
so let's say each time it hits a boundary speed up a little bit
multiply yourself by 1.1
so you're speeding up by 10%
you can see each time it hits the wall
it starts to go a little bit faster
faster ... and faster ... and faster...
you can watch it on your own time
cause I only got ...although we're still recording ...
I still got 10 seconds left
but as an exercise and I get back to this:
why does this break it? figure that out!