1
00:00:01,434 --> 00:00:03,503
Now that you've learned 
the basics of loops,

2
00:00:03,503 --> 00:00:06,183
let's go ahead and walk through 
making an awesome loop drawing

3
00:00:06,183 --> 00:00:07,263
like this one,

4
00:00:07,263 --> 00:00:09,849
Balloon Hopper floating 
through a beautiful sky.

5
00:00:09,849 --> 00:00:16,401
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.

6
00:00:16,401 --> 00:00:20,207
So first, it always helps to break down your program into steps.

7
00:00:20,207 --> 00:00:27,485
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.

8
00:00:27,485 --> 00:00:33,774
Then, we'll take on these lines, and then finally we'll add Balloon Hopper herself.

9
00:00:33,774 --> 00:00:37,963
All right, so here's a blank slate. Which can be pretty intimidating.

10
00:00:37,963 --> 00:00:43,869
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.

11
00:00:43,869 --> 00:00:49,933
Now, since we wanna draw a loop, your first thought should be those loop questions that we covered last time.

12
00:00:49,933 --> 00:00:56,933
And we'll do them pretty quickly this time, so if you need a review, just revisit "Intro to While Loops".

13
00:00:56,933 --> 00:01:01,393
Now, the first question: "What do we want to repeat?"

14
00:01:01,393 --> 00:01:06,441
So let's try drawing that first balloon. Because we wanna be repeating those balloons.

15
00:01:06,441 --> 00:01:15,066
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,

16
00:01:15,066 --> 00:01:17,169
so let's just try moving it a little bit.

17
00:01:17,169 --> 00:01:25,183
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.

18
00:01:25,183 --> 00:01:33,870
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.

19
00:01:33,870 --> 00:01:40,898
All right? And next, we need to think about how exactly we want to be changing this balloon during our loop.

20
00:01:40,898 --> 00:01:47,733
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,

21
00:01:47,733 --> 00:01:51,013
so we want the computer to do it, because my drawing's really bad.

22
00:01:51,013 --> 00:01:58,391
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.

23
00:01:58,391 --> 00:02:02,767
But, I mean like, that's pretty lame, right? Like that's not really like that cool picture we had before.

24
00:02:02,767 --> 00:02:11,108
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.

25
00:02:11,108 --> 00:02:15,912
And now, we're gonna be changing that variable inside of our loop, so we'll use a while loop,

26
00:02:15,912 --> 00:02:22,136
and then inside that loop we'll say that x is going to change each time, maybe by, say, 20.

27
00:02:22,136 --> 00:02:27,398
If we just move that ellipse inside, being very careful, of course, not to move that variable declaration inside,

28
00:02:27,398 --> 00:02:30,209
because then we'll just think about what would go wrong.

29
00:02:30,209 --> 00:02:34,375
And it's actually worth trying on your own, if you're curious.

30
00:02:34,375 --> 00:02:39,392
Okay, well, so, now our third loop question is "How long do we wanna repeat?"

31
00:02:39,392 --> 00:02:43,818
So we can think that maybe we wanna just keep going until we're basically run off the side of the screen

32
00:02:43,818 --> 00:02:46,647
So maybe all the way until x is less than like 400.

33
00:02:46,647 --> 00:02:51,163
So now this is cool cause somethings happening, right? But it's not really quite what we envisioned.

34
00:02:51,163 --> 00:02:55,839
So just like before, you know, we just have to go through it and slowly improve it to get it to where we imagined.

35
00:02:55,839 --> 00:02:59,400
So first, the ellipses are really squished together, so let's fix that.

36
00:02:59,400 --> 00:03:02,409
Okay, so that's good to give them a little bit of breathing room.

37
00:03:02,409 --> 00:03:09,317
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

38
00:03:09,317 --> 00:03:16,507
the ellipses that appear, you know, here, because we're saying you know as soon as x gets to like here maybe, stop drawing.

39
00:03:16,507 --> 00:03:19,385
And that's what this part of the while loop says.

40
00:03:19,385 --> 00:03:24,945
Okay? And we can also say "Well maybe we wanna change the ellipses a little bit," do we wanna move them all down,

41
00:03:24,945 --> 00:03:34,018
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.

42
00:03:34,018 --> 00:03:36,896
All right. So perfect.

43
00:03:36,896 --> 00:03:42,024
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,

44
00:03:42,024 --> 00:03:43,892
otherwise they're gonna float away.

45
00:03:43,892 --> 00:03:50,573
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,

46
00:03:50,573 --> 00:03:55,912
just to make it easy, and they're all coming down at kind of about the same point, maybe like that.

47
00:03:55,912 --> 00:03:59,430
So how can we make the program do that, instead of having to draw it?

48
00:03:59,430 --> 00:04:05,000
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

49
00:04:05,000 --> 00:04:10,702
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.

50
00:04:10,702 --> 00:04:16,618
And you can say well let's just have it end, you know, kind of wherever. At that was actually pretty close!

51
00:04:16,618 --> 00:04:23,655
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.

52
00:04:23,655 --> 00:04:29,813
Which is that, the string that we drew is actually overlapping with our balloon, which isn't right at all.

53
00:04:29,813 --> 00:04:35,249
We really want that ellipse to be covering the line, which we can do just by changing that ordering.

54
00:04:35,249 --> 00:04:38,764
You kinda see a lot of things you've learned are probably coming together here.

55
00:04:38,764 --> 00:04:45,315
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?

56
00:04:45,315 --> 00:04:47,224
Well we'd go and look at the documentation.

57
00:04:47,224 --> 00:04:50,474
Or we'd watch the documentation video if we didn't know how to do that.

58
00:04:50,474 --> 00:04:54,924
So, we can go ahead and use stroke() to set the color of those lines,

59
00:04:54,924 --> 00:05:00,253
and maybe make them like, I dunno, maybe like, that color?

60
00:05:00,253 --> 00:05:10,152
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,

61
00:05:10,152 --> 00:05:16,536
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

62
00:05:16,536 --> 00:05:18,229
and floating through the sky.

63
00:05:18,229 --> 00:05:26,534
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,

64
00:05:26,534 --> 00:05:30,534
and you can even use a loop in your next drawing.