1
00:00:05,965 --> 00:00:08,743
Hi, welcome to this new video.

2
00:00:08,743 --> 00:00:11,612
So, now that we understand Boolean logic,

3
00:00:11,612 --> 00:00:16,344
we also understand conditional statements,
we can start thinking that

4
00:00:16,344 --> 00:00:20,781
conditionals could be a way of
iterating through the data, right?

5
00:00:20,781 --> 00:00:25,780
There's a particular kind of loop,
or a form of iteration that uses

6
00:00:25,780 --> 00:00:30,264
conditionals as a mode of
continuing executing something.

7
00:00:30,264 --> 00:00:32,105
And that is the while loop, right?

8
00:00:32,105 --> 00:00:35,723
So let's look at the structure and
the syntax of the while loop.

9
00:00:35,723 --> 00:00:39,936
The while loop says,
while a certain condition,

10
00:00:39,936 --> 00:00:44,361
in this case a Boolean statement,
is true, right?

11
00:00:44,361 --> 00:00:48,141
Then we have a block of code
that would be executed, and

12
00:00:48,141 --> 00:00:52,422
it will be executed infinitely
while that condition is true.

13
00:00:52,422 --> 00:00:57,583
So in many ways, while loops
are considered dangerous because they

14
00:00:57,583 --> 00:01:03,390
have the possibility of locking
the program into an infinite loop, right?

15
00:01:03,390 --> 00:01:04,884
And that's something
that you want to avoid.

16
00:01:04,884 --> 00:01:06,874
That's something that
would crash your computer.

17
00:01:06,874 --> 00:01:09,488
So if you can avoid a while statement,

18
00:01:09,488 --> 00:01:13,668
especially when you're starting,
it makes sense to do so.

19
00:01:13,668 --> 00:01:17,396
But you'll realize that there's
some circumstances in which a while

20
00:01:17,396 --> 00:01:21,439
statement or a while loop is actually
very useful because you don't know how

21
00:01:21,439 --> 00:01:24,299
many times you need to
iterate over the data, right?

22
00:01:24,299 --> 00:01:28,078
You might need to iterate until
certain task is finished.

23
00:01:28,078 --> 00:01:32,851
And in those cases, a while loop
is a really good way to go, right?

24
00:01:32,851 --> 00:01:35,590
So let's look at the syntax a bit further.

25
00:01:35,590 --> 00:01:38,674
Let's imagine that we have
a variable called count,

26
00:01:38,674 --> 00:01:40,806
and that count starts at 1, right?

27
00:01:40,806 --> 00:01:46,931
So we could say while that count
is smaller or equal than 5, right?

28
00:01:46,931 --> 00:01:48,957
Let's say print that count, right?

29
00:01:48,957 --> 00:01:53,217
And if we would end up there,
that statement would run forever.

30
00:01:53,217 --> 00:01:58,532
But in that same code block, we would
add a condition, or basically a part

31
00:01:58,532 --> 00:02:04,306
of the code that would change the value of
our count variable to a plus equal one.

32
00:02:04,306 --> 00:02:06,944
Meaning add one to
whatever value you have.

33
00:02:06,944 --> 00:02:11,726
So we would go from one to two to two
to three, and eventually we would reach

34
00:02:11,726 --> 00:02:16,821
a condition that when we evaluate
the while, basically the Boolean statement

35
00:02:16,821 --> 00:02:21,788
is count smaller or equal than five,
that would result to be false, right?

36
00:02:21,788 --> 00:02:25,500
We would go out of the loop,
and the loop will finish.

37
00:02:25,500 --> 00:02:27,516
So it's, in this case,

38
00:02:27,516 --> 00:02:33,095
a clean way to determine when are you
in the loop and when you're out.

39
00:02:33,095 --> 00:02:37,894
Perhaps you use it when you're really
kind of finished evaluating the data that

40
00:02:37,894 --> 00:02:41,917
you have, or you've completed a task and
you can move on, right?

41
00:02:41,917 --> 00:02:45,874
So let's write an example using
some design principles and

42
00:02:45,874 --> 00:02:49,362
some ideas of design that
would use this while loop.

43
00:02:49,362 --> 00:02:52,864
So here we are back in processing.

44
00:02:52,864 --> 00:03:00,300
So what I would like to do, I've created
a black background as we have been doing.

45
00:03:00,300 --> 00:03:07,399
Let's just create an x variable of = 600.

46
00:03:07,399 --> 00:03:13,257
What we're going to try to do here
is a series of concentric circles,

47
00:03:13,257 --> 00:03:17,559
all of them with these
different random colors.

48
00:03:17,559 --> 00:03:22,681
And we will gradually see how we could
actually loop in a way that it's

49
00:03:22,681 --> 00:03:27,718
not nondeterministic,
meaning that we could even include certain

50
00:03:27,718 --> 00:03:32,337
randomness to the amount of
iterations that we take, right?

51
00:03:32,337 --> 00:03:37,155
So let's start by saying while x

52
00:03:37,155 --> 00:03:41,266
is bigger than 5, right?

53
00:03:41,266 --> 00:03:44,540
So we're starting with an x that is 600.

54
00:03:44,540 --> 00:03:46,010
Is x bigger than five?

55
00:03:46,010 --> 00:03:47,631
That's true.

56
00:03:47,631 --> 00:03:52,387
We will do an ellipse that uses

57
00:03:52,387 --> 00:03:59,060
the coordinate 600, 300, x, x.

58
00:03:59,060 --> 00:04:03,173
So x is going to be our radius,
the radius of the ellipse.

59
00:04:03,173 --> 00:04:06,671
And if we would run this code,
don't run this code right now,

60
00:04:06,671 --> 00:04:08,640
because it would actually crash.

61
00:04:08,640 --> 00:04:10,280
We would run infinitely, right?

62
00:04:10,280 --> 00:04:11,231
As we discussed.

63
00:04:11,231 --> 00:04:15,991
So let's just add
a statement that says x- =,

64
00:04:15,991 --> 00:04:20,751
which is a way of saying
subtract to your value.

65
00:04:20,751 --> 00:04:27,928
Let's start with something like maybe 50,
right?

66
00:04:27,928 --> 00:04:33,387
So we start with 600,
we subtract 50, we're in 550,

67
00:04:33,387 --> 00:04:39,464
and we keep going down at a rate of
50 every time until we get below 5 or

68
00:04:39,464 --> 00:04:44,408
below 0, if you want to put a 0,
that's totally fine.

69
00:04:44,408 --> 00:04:48,418
But until we reach this condition, right?

70
00:04:48,418 --> 00:04:55,812
So let's make sure that our ellipse has,
maybe it's going to be white for now.

71
00:04:55,812 --> 00:04:59,887
So let's do fill 255,

72
00:04:59,887 --> 00:05:03,968
and also stroke of black.

73
00:05:03,968 --> 00:05:07,864
Otherwise we wouldn't see
anything that is going on, right?

74
00:05:07,864 --> 00:05:08,736
Let's see what we get.

75
00:05:08,736 --> 00:05:14,982
So we have this ellipse
that is drawn here.

76
00:05:14,982 --> 00:05:17,192
We actually start drawing the biggest one.

77
00:05:17,192 --> 00:05:22,293
We know that 600 is the size,
the height of our canvas.

78
00:05:22,293 --> 00:05:23,836
So that is the first ellipse.

79
00:05:23,836 --> 00:05:28,209
And then on top of that,
we draw a slightly smaller one,

80
00:05:28,209 --> 00:05:34,368
which is 50 pixels smaller as we're
using that x within the radius, right?

81
00:05:34,368 --> 00:05:39,065
So that's all fine, but let's just play
a little bit and do some variations.

82
00:05:39,065 --> 00:05:42,565
So, of course,
if we do this value smaller,

83
00:05:42,565 --> 00:05:46,630
that means that we're going to
do more loops, right?

84
00:05:46,630 --> 00:05:52,657
You could get kind of a closer iteration.

85
00:05:52,657 --> 00:05:57,952
You can do even tighter, right?

86
00:05:57,952 --> 00:06:03,571
As you can see, you can get the number
of iterations is changing, right?

87
00:06:03,571 --> 00:06:06,079
But what if we would use
something like random, right?

88
00:06:06,079 --> 00:06:09,821
Let's import the random module
here all the way to the top.

89
00:06:09,821 --> 00:06:13,353
Import random, right?

90
00:06:13,353 --> 00:06:18,383
And here we could say x- =

91
00:06:18,383 --> 00:06:26,404
random.randrange between 1 and 20.

92
00:06:26,404 --> 00:06:31,050
So sometimes we want to
decrease the amount of x by 1,

93
00:06:31,050 --> 00:06:36,215
I'm going to always keep at least
a 1 here because I would like

94
00:06:36,215 --> 00:06:41,411
to get closer and
closer to getting out of the loop, right?

95
00:06:41,411 --> 00:06:46,011
So sometimes 1, sometimes 20 or
maybe even 30, right?

96
00:06:46,011 --> 00:06:49,762
If we want to just do less
versions of that loop.

97
00:06:49,762 --> 00:06:55,467
And what you could see here, because
we're doing this in the draw loop, right?

98
00:06:55,467 --> 00:06:59,038
We're drawing a slightly
different sequence every time.

99
00:06:59,038 --> 00:07:01,656
That might be a little
bit difficult on the eye.

100
00:07:01,656 --> 00:07:06,429
So we're going to just maybe remove
this draw loop right now and

101
00:07:06,429 --> 00:07:12,060
let's just do one sequence of that,
only one version of this drawing.

102
00:07:12,060 --> 00:07:17,669
As you can see here,
this is not looping at the same rate.

103
00:07:17,669 --> 00:07:20,270
We don't know exactly how many
times we're going to loop, but

104
00:07:20,270 --> 00:07:22,617
we're going to eventually
get out of that loop, right?

105
00:07:22,617 --> 00:07:27,531
So we're actually achieving a very
specific kind of effect here that maybe

106
00:07:27,531 --> 00:07:29,566
is more interesting, right?

107
00:07:29,566 --> 00:07:35,016
Let's play with this idea
a little bit further and

108
00:07:35,016 --> 00:07:39,556
use, when I create a few variables here,

109
00:07:39,556 --> 00:07:44,097
I'm going to use an r representing red,
and

110
00:07:44,097 --> 00:07:49,965
I'm going to do a random.range
between 0 and 255.

111
00:07:49,965 --> 00:07:56,581
I really like seeing how some designs
look with some color variation.

112
00:07:56,581 --> 00:07:58,812
So I'm going to repeat this three times.

113
00:07:58,812 --> 00:08:03,746
You're going to see me do
this throughout the series,

114
00:08:03,746 --> 00:08:07,570
which is using certain randoms for RGB.

115
00:08:07,570 --> 00:08:11,404
And now here we can do r, g, b.

116
00:08:11,404 --> 00:08:16,486
So the field will be a random color,
right?

117
00:08:16,486 --> 00:08:20,899
And you can see that this
composition is using random colors.

118
00:08:20,899 --> 00:08:24,675
Every time that we run,
it will be different.

119
00:08:24,675 --> 00:08:29,242
It would be different in
the gaps of the circle.

120
00:08:29,242 --> 00:08:33,882
Maybe you want to include even
something bigger, like 60, right?

121
00:08:33,882 --> 00:08:36,624
So sometimes the gaps
are going to be thicker,

122
00:08:36,624 --> 00:08:39,079
sometimes they're going to be smaller.

123
00:08:39,079 --> 00:08:41,169
And we're using random colors, right?

124
00:08:41,169 --> 00:08:44,317
If you would like to
increase the circle size.

125
00:08:44,317 --> 00:08:47,190
So, like your first ellipse being larger,
right?

126
00:08:47,190 --> 00:08:51,810
So maybe it includes, oops, not so big,

127
00:08:51,810 --> 00:08:59,335
maybe extends outside the realm of
the screen or gets clipped here.

128
00:08:59,335 --> 00:09:00,803
You can certainly increase that.

129
00:09:00,803 --> 00:09:05,882
Our loop will always move downwards
until it kind of gets below five.

130
00:09:05,882 --> 00:09:10,656
So again, you can try something kind
of much larger that it would actually

131
00:09:10,656 --> 00:09:13,428
cover the entirety of the screen, right?

132
00:09:13,428 --> 00:09:15,418
So here we go.

133
00:09:15,418 --> 00:09:18,007
And again, this is all randomly colored.

134
00:09:18,007 --> 00:09:21,585
Every time that we run this, we're
going to get a different composition.

135
00:09:21,585 --> 00:09:25,916
So as you can see, there's a lot of
creative ways in which you can use this

136
00:09:25,916 --> 00:09:30,673
kind of while loop, especially when you
don't know exactly the number of times

137
00:09:30,673 --> 00:09:33,384
that you might need to
perform an iteration.

138
00:09:33,384 --> 00:09:35,218
So very useful.

139
00:09:35,218 --> 00:09:39,183
And I'll see you in the next video where
we'll continue looking at different

140
00:09:39,183 --> 00:09:40,470
statements for design.