More While Loops (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/

Now that you've learned
the basics of loops,

let's go ahead and walk through
making an awesome loop drawing

like this one,

Balloon Hopper floating
through a beautiful sky.

As I go through writing the program from scratch, I want you to think to yourself about how you might do it on your own, because pretty soon, you will be.

So first, it always helps to break down your program into steps.

We'll start by drawing these balloons, which are just the same ellipse repeated over and over and over, and that sounds like a job for a loop.

Then, we'll take on these lines, and then finally we'll add Balloon Hopper herself.

All right, so here's a blank slate. Which can be pretty intimidating.

Sometimes, it helps to make things just a little bit more friendly by adding a background right away, just to get into the swing of things.

Now, since we wanna draw a loop, your first thought should be those loop questions that we covered last time.

And we'll do them pretty quickly this time, so if you need a review, just revisit "Intro to While Loops".

Now, the first question: "What do we want to repeat?"

So let's try drawing that first balloon. Because we wanna be repeating those balloons.

You can go ahead and do that, maybe like that, and well, you know, that's kind of small, it's not quite in the right place,

so let's just try moving it a little bit.

And this is just part of programming, where you try something, you realize it's not what you wanted, and then you try again and eventually you get closer and closer.

Okay, now, we need to add color probably, right? So we didn't think of that when we were thinking about the steps, so we can just say that's part of drawing the balloon.

All right? And next, we need to think about how exactly we want to be changing this balloon during our loop.

Well, we want the balloon to be drawn across the screen, right? We want it to be drawn like here, and then here, and then here,

so we want the computer to do it, because my drawing's really bad.

So we can fake that a little bit just by changing this first number, which as you remember controls the x-position: the position sideways.

But, I mean like, that's pretty lame, right? Like that's not really like that cool picture we had before.

So instead, let's say that we're going to call this x, for the x position, and we're going to make a variable that's about what it was before.

And now, we're gonna be changing that variable inside of our loop, so we'll use a while loop,

and then inside that loop we'll say that x is going to change each time, maybe by, say, 20.

If we just move that ellipse inside, being very careful, of course, not to move that variable declaration inside,

because then we'll just think about what would go wrong.

And it's actually worth trying on your own, if you're curious.

Okay, well, so, now our third loop question is "How long do we wanna repeat?"

So we can think that maybe we wanna just keep going until we're basically run off the side of the screen

So maybe all the way until x is less than like 400.

So now this is cool cause somethings happening, right? But it's not really quite what we envisioned.

So just like before, you know, we just have to go through it and slowly improve it to get it to where we imagined.

So first, the ellipses are really squished together, so let's fix that.

Okay, so that's good to give them a little bit of breathing room.

But you know, maybe they're still going a little bit too far off the side of the screen, so if we change the ending point, we can start disappearing

the ellipses that appear, you know, here, because we're saying you know as soon as x gets to like here maybe, stop drawing.

And that's what this part of the while loop says.

Okay? And we can also say "Well maybe we wanna change the ellipses a little bit," do we wanna move them all down,

do we want to, you know, change their size a little bit again, and the nice thing about the while loop is that we can do all of them all at the same time.

All right. So perfect.

Well, now looking at these balloons, it would be nice to put strings on them. If we like them, then we need to put strings on them,

otherwise they're gonna float away.

So we need a line for each one. We think that we wanna put that line starting at about the center of each of those balloons,

just to make it easy, and they're all coming down at kind of about the same point, maybe like that.

So how can we make the program do that, instead of having to draw it?

So we can think of, if we wanna be repeating something, we definitely wanna put it inside this while loop, so let's go ahead and make that line

And if we want it to be at that center of the ellipse, well then we need to have it start at these two coordinates, so we can do that.

And you can say well let's just have it end, you know, kind of wherever. At that was actually pretty close!

But, again, it's not perfect - you might sense a theme - so we need to fix it. So first let's fix this ugly thing.

Which is that, the string that we drew is actually overlapping with our balloon, which isn't right at all.

We really want that ellipse to be covering the line, which we can do just by changing that ordering.

You kinda see a lot of things you've learned are probably coming together here.

All right, so this is good, but maybe we wanna change the color of those lines, and how do we do that if we were really making this program on our own?

Well we'd go and look at the documentation.

Or we'd watch the documentation video if we didn't know how to do that.

So, we can go ahead and use stroke() to set the color of those lines,

and maybe make them like, I dunno, maybe like, that color?

And it's beautiful! Now, last, all we need to do is draw Hopper. And that just requires putting her in as an image, like this,

and you can see the documentation for how I figured that out, and just moving her around so that, you know, she's kind of holding those ballons like that

and floating through the sky.

And there you have it! We're done! You can try decorating the balloons, you know, you can think about maybe adding things to this loop to make those balloons a little bit cooler,

and you can even use a loop in your next drawing.