Tip:
Highlight text to annotate it
X
>> DAVID MALAN: Let's write a program involving a window and a circle with
the circle bouncing back and forth off the left and right
edges of that window.
To do so, let's use The Stanford Portable Library, and let's first
include gevents.h so that we can listen for mouse movements.
Let's then include gobjects.h so that we can declare things like ovals or
circles, really.
And then let's include gwindow.h so that we have a graphical window for
everything.
>> Let's declare main in the usual way.
And let's now declare and instantiate or create that window, GWindow--
and we'll call the variable window--
gets newGWindow.
And we'll arbitrarily make it 320 pixels by 240 pixels.
>> Let's next instantiate a circle.
But to instantiate this circle, we need to do a bit more work.
In particular, let's fill in this circle so that the entire thing is
black and not just the outline thereof.
GOval--
we'll call it circle--
gets newGOval.
We'll put this oval at 0, 110, and we'll make the oval 20 pixels wide by
20 pixels high-- in other words, a diameter of 20 or a radius of 10.
>> Let's now set the color of that circle to be quote, unquote, "black." Let's
now set it be filled by specifying true.
And now lastly, let's add the circle to the window as follows, whereby the
latter is added to the former.
>> Let's now declare a double.
We'll call it velocity.
And somewhat arbitrarily, let's say the velocity of this circle will be
2.0, in other words, 2 pixels for every unit of time.
And now let's deliberately induce an infinite loop.
>> So how to make this circle bounce back and forth?
Well let's assume within this loop that for every unit of time, we're
going to move the circle just a little bit based on its velocity of 2 pixels
per unit of time.
But continually, we're going to have to check if the circle is touching the
right edge of the screen or the left edge of the screen, because if so, we
need it to bounce, so to speak.
>> How to implement the notion of bouncing?
Well if we're going at 2 pixels to the right per unit of time, to bounce off
the right edge, we can simply reverse that to be negative 2 pixels per unit
of time, thereby negating the velocity.
So in fact, bouncing is relatively straightforward.
>> Let's first move the circle by this many pixels along the x-axis, by this
many pixels along the y-axis.
In other words, we don't want it to move along the y-axis at all.
We only want it to bounce back and forth left and right.
>> And let's now check within this loop if the x-coordinate of the circle plus
the width of the circle is greater than or equal to the
width of the window--
in other words, if the circle's location plus the width of the circle
itself is now past the edge of the window, we'd
better reverse our velocity--
velocity gets negative velocity, thereby flipping a positive to a
negative or a negative to a positive.
But what if the circle is moving from right to left and it therefore hits
the left edge?
In other words, if the x-coordinate of the circle is now less than or equal
to 0, let's go ahead and again invert our velocity.
>> So why have I not added in the width of the circle this
time, as I did before?
Well, keep in mind that the coordinates of an object are defined
by its top left-hand corner, not by its middle.
And so when the circle is moving from left to right, we need to check
whether the right edge of the circle has passed the
right edge of the window.
So to figure out what that is, we have to get the x-coordinate of the circle
plus the width of the circle to move ourselves from the top left-hand
corner, effectively, to the top right-hand corner.
When the circle is moving from right to left, meanwhile, we don't need to
bother with such addition, because the top left corner of the circle is
already the value we'll get from get x.
>> Let's now move the ball.
Let's now save, compile, and run this program, make bounce, ./bounce.
And there we have a program.
>> But the circle is moving so darn fast, it's almost impossible to see what's
actually going on.
So let's quite the program forcibly by clicking the X in the top right-hand
corner here.
Let's now go back into the source code and slow things down a little bit.
>> In other words, within this infinite loop, rather than just and move and
move and again, ad nauseum, let's linger for just a few milliseconds
before proceeding to move again.
In particular, let's go to the bottom of the infinite loop here and simply
pause for, say, 10 milliseconds on each iteration.
Let's now recompile and re-run bounce.
And now we see a much more reasonable implementation, where we can see the
circle truly bouncing on the left and right edge.