1
00:00:05,040 --> 00:00:07,760
Hi, welcome to this new video.

2
00:00:07,760 --> 00:00:11,240
Now that we understand the
concept of Boolean logic,

3
00:00:11,240 --> 00:00:14,640
we will be able to dive into
conditional statements.

4
00:00:14,640 --> 00:00:16,620
Conditional statements,
it's one of

5
00:00:16,620 --> 00:00:18,820
the most powerful tools
that you will learn

6
00:00:18,820 --> 00:00:20,700
within programming because
it's going to be so

7
00:00:20,700 --> 00:00:23,225
useful in so many
different circumstances.

8
00:00:23,225 --> 00:00:25,520
Let's try to see the syntax.

9
00:00:25,520 --> 00:00:28,065
A conditional
basically stands by

10
00:00:28,065 --> 00:00:30,960
some code block, let's call it,

11
00:00:30,960 --> 00:00:32,980
a piece of code
that would only be

12
00:00:32,980 --> 00:00:36,900
executed if a Boolean
statement is true.

13
00:00:36,900 --> 00:00:39,750
Then we would consider
that the condition.

14
00:00:39,750 --> 00:00:41,895
Let's look at the
syntax on the right.

15
00:00:41,895 --> 00:00:45,280
We have an if, which
is a keyword using

16
00:00:45,280 --> 00:00:50,945
an if statement to evaluate
a first condition,

17
00:00:50,945 --> 00:00:53,070
and then we have
a code block that

18
00:00:53,070 --> 00:00:55,165
only gets executed
if that is true.

19
00:00:55,165 --> 00:00:57,350
In addition to
that if statement,

20
00:00:57,350 --> 00:01:01,230
we have two extra keywords

21
00:01:01,230 --> 00:01:04,390
that we can use in
conjunction with the if.

22
00:01:04,390 --> 00:01:07,275
Let's look at the bottom
one first, which is else,

23
00:01:07,275 --> 00:01:08,870
so basically you have an if

24
00:01:08,870 --> 00:01:10,750
statement and then
you say, well,

25
00:01:10,750 --> 00:01:15,520
if this is true, I
execute this else.

26
00:01:15,520 --> 00:01:17,250
Meaning if it's not true,

27
00:01:17,250 --> 00:01:21,150
I can execute a
different block of code.

28
00:01:21,150 --> 00:01:23,320
It might happen that sometimes

29
00:01:23,320 --> 00:01:24,660
you have more than
one condition,

30
00:01:24,660 --> 00:01:26,220
maybe you're evaluating a range

31
00:01:26,220 --> 00:01:27,460
of numbers and you're evaluating

32
00:01:27,460 --> 00:01:29,920
between 0 and 10 and

33
00:01:29,920 --> 00:01:32,880
then you want to evaluate
also between 10 and 20,

34
00:01:32,880 --> 00:01:36,140
and then everything else
perhaps falls into the else.

35
00:01:36,140 --> 00:01:38,740
Well, then in that case
you have what would

36
00:01:38,740 --> 00:01:41,590
be an else if or an
l if here in Python.

37
00:01:41,590 --> 00:01:43,620
We can actually have

38
00:01:43,620 --> 00:01:46,340
a second condition where
we specify is this number

39
00:01:46,340 --> 00:01:48,585
within perhaps the second range

40
00:01:48,585 --> 00:01:51,965
and then we have
our second block.

41
00:01:51,965 --> 00:01:54,850
Let's just try to
understand this a little

42
00:01:54,850 --> 00:01:58,410
bit more conceptually
with this diagram.

43
00:01:58,410 --> 00:02:03,765
If statements could be diagram
in all interesting ways,

44
00:02:03,765 --> 00:02:06,550
but we are actually
kind of starting

45
00:02:06,550 --> 00:02:09,030
to branch what our
code would do.

46
00:02:09,030 --> 00:02:10,710
There are certain parts
of the code that might

47
00:02:10,710 --> 00:02:13,210
never trigger just because

48
00:02:13,210 --> 00:02:14,710
maybe we're evaluating a value

49
00:02:14,710 --> 00:02:17,785
that it never
matches a condition.

50
00:02:17,785 --> 00:02:21,380
We could start thinking that
certain blocks of code get

51
00:02:21,380 --> 00:02:23,180
executed more than others and

52
00:02:23,180 --> 00:02:25,180
as we go through the
running of the code,

53
00:02:25,180 --> 00:02:27,300
we're taking these
different paths

54
00:02:27,300 --> 00:02:29,605
to conclude our algorithm.

55
00:02:29,605 --> 00:02:31,480
But that gives a lot of

56
00:02:31,480 --> 00:02:34,260
flexibility to the way
we're writing code.

57
00:02:34,260 --> 00:02:37,020
We're actually considering
a series of scenarios.

58
00:02:37,020 --> 00:02:39,300
We're considering a
variable response

59
00:02:39,300 --> 00:02:42,630
to the data that we're having.

60
00:02:42,630 --> 00:02:44,960
Let's see how we can actually

61
00:02:44,960 --> 00:02:49,495
implement this into our
programming environment.

62
00:02:49,495 --> 00:02:52,455
Here we are yet again
with our template.

63
00:02:52,455 --> 00:02:55,300
Let's bring this back
to a bigger screen.

64
00:02:55,300 --> 00:02:56,420
This time we're
going to try to do

65
00:02:56,420 --> 00:02:57,760
something a little
bit more graphic

66
00:02:57,760 --> 00:03:00,920
because we haven't been using

67
00:03:00,920 --> 00:03:05,360
too much of the dynamic
capabilities of processing.

68
00:03:05,360 --> 00:03:14,100
I wanted to start bringing
more animation into videos.

69
00:03:14,100 --> 00:03:16,200
Let's start by creating

70
00:03:16,200 --> 00:03:20,030
a simple sphere that
would move in our screen.

71
00:03:20,030 --> 00:03:24,620
Let's create a variable called
x that will start at zero.

72
00:03:24,980 --> 00:03:27,920
We haven't talked
about this too much,

73
00:03:27,920 --> 00:03:30,300
and we're going to dive
this a little bit more.

74
00:03:30,300 --> 00:03:32,540
But whenever we have a
variable like this one that

75
00:03:32,540 --> 00:03:35,160
it's actually declared
outside a function,

76
00:03:35,160 --> 00:03:38,180
if we want to use it within
this function like draw,

77
00:03:38,180 --> 00:03:41,040
we have to use the
keyword global.

78
00:03:41,040 --> 00:03:46,160
Just to say that within
this function we can use x.

79
00:03:46,160 --> 00:03:48,180
But x is not a new variable

80
00:03:48,180 --> 00:03:49,880
that only exists
within this function.

81
00:03:49,880 --> 00:03:51,440
But it's actually
this variable up

82
00:03:51,440 --> 00:03:54,450
here that we declared globally.

83
00:03:54,450 --> 00:04:02,410
Let's do an ellipse that
starts in the position x,

84
00:04:06,230 --> 00:04:12,270
and we are going to
do it at 300, 50, 50.

85
00:04:12,270 --> 00:04:14,025
It's a simple ellipse

86
00:04:14,025 --> 00:04:18,500
and because we're actually
working in the draw loop,

87
00:04:18,500 --> 00:04:21,855
meaning that this is x.
Updating every frame,

88
00:04:21,855 --> 00:04:24,835
we could say x+ =1,

89
00:04:24,835 --> 00:04:28,250
meaning that to your
value, add one.

90
00:04:28,250 --> 00:04:33,855
This is the same to say x = x+1.

91
00:04:33,855 --> 00:04:37,470
That's the longer
way of writing it.

92
00:04:37,470 --> 00:04:41,390
I like the +=1 because we could

93
00:04:41,390 --> 00:04:45,940
actually change it for a higher
value like two or three.

94
00:04:45,940 --> 00:04:48,860
Basically, we're incrementing
whatever the value of

95
00:04:48,860 --> 00:04:52,740
x is 1 every frame.

96
00:04:52,740 --> 00:04:56,180
Let's make sure also
that the feel of

97
00:04:56,180 --> 00:04:59,640
the sphere is wide and
we have no stroke.

98
00:04:59,640 --> 00:05:05,570
Some graphic here.

99
00:05:05,570 --> 00:05:09,690
We're having an
issue, let's see.

100
00:05:10,540 --> 00:05:14,490
I think we just
missing a background.

101
00:05:16,630 --> 00:05:20,300
Is that what's
happening? There we go.

102
00:05:20,460 --> 00:05:25,125
As you can see, we actually
have a sphere or a circle,

103
00:05:25,125 --> 00:05:27,920
in this case, in
our central screen.

104
00:05:27,920 --> 00:05:29,780
It's just moving
towards the right.

105
00:05:29,780 --> 00:05:31,910
This is, as we have seen before,

106
00:05:31,910 --> 00:05:33,020
an illusion because we're

107
00:05:33,020 --> 00:05:34,340
actually redrawing
the background,

108
00:05:34,340 --> 00:05:36,545
we're just drawing the circle

109
00:05:36,545 --> 00:05:38,000
in different locations
in the frame,

110
00:05:38,000 --> 00:05:41,970
but we create that
illusion of movement.

111
00:05:43,000 --> 00:05:45,200
What I want to do is start to

112
00:05:45,200 --> 00:05:47,075
use the conditional statement.

113
00:05:47,075 --> 00:05:54,215
Let's evaluate here just
up to the noStroke.

114
00:05:54,215 --> 00:05:58,020
Let's create a little bit
of room to work here.

115
00:05:59,620 --> 00:06:03,710
Let's say if the value
of x is bigger than

116
00:06:03,710 --> 00:06:07,790
200, something would happen.

117
00:06:07,790 --> 00:06:10,445
This piece of code
would only execute

118
00:06:10,445 --> 00:06:13,850
if the value of x
is bigger than 200.

119
00:06:13,850 --> 00:06:15,740
Let's just change
the color for now.

120
00:06:15,740 --> 00:06:18,150
Let's say 255,0,0.

121
00:06:18,610 --> 00:06:23,570
This would be a red ellipse.

122
00:06:23,570 --> 00:06:26,915
Then I can go back to

123
00:06:26,915 --> 00:06:29,315
my first indentation
and we're going to say

124
00:06:29,315 --> 00:06:33,485
else just to re-declare that.

125
00:06:33,485 --> 00:06:36,035
Otherwise, if it's not over 200,

126
00:06:36,035 --> 00:06:38,660
let's say if it's
smaller than 200,

127
00:06:38,660 --> 00:06:40,940
the fill it's going to be white.

128
00:06:40,940 --> 00:06:45,560
You're going to insist on
making this ellipse a white

129
00:06:45,560 --> 00:06:52,110
color until we cross
the line of 200.

130
00:06:52,390 --> 00:06:56,435
Let's see if this works.
We have the sphere,

131
00:06:56,435 --> 00:06:59,750
it's x condition as you
can see at some point,

132
00:06:59,750 --> 00:07:02,645
this is the 200-pixel mark.

133
00:07:02,645 --> 00:07:06,425
We actually switch the
sphere to a different color.

134
00:07:06,425 --> 00:07:09,725
We transition not
gradually, but instantly.

135
00:07:09,725 --> 00:07:13,040
Basically, before we
cross those 200 pixels,

136
00:07:13,040 --> 00:07:14,750
we're executing this part of

137
00:07:14,750 --> 00:07:17,495
the code and once we
cross those pixels,

138
00:07:17,495 --> 00:07:20,555
if you want to just

139
00:07:20,555 --> 00:07:22,670
visualize this a little
bit more clearly,

140
00:07:22,670 --> 00:07:24,875
you can always do
something like a line

141
00:07:24,875 --> 00:07:31,250
that is 200,0,200,600,

142
00:07:32,170 --> 00:07:40,190
and then this would
have a stroke of 255.

143
00:07:40,190 --> 00:07:44,210
This would be basically a
simple representation of

144
00:07:44,210 --> 00:07:46,130
where are those 200 pixels

145
00:07:46,130 --> 00:07:48,350
so that you can
see that, in fact,

146
00:07:48,350 --> 00:07:50,820
that's the point in which

147
00:07:51,100 --> 00:07:57,605
the ellipse crosses
through that threshold.

148
00:07:57,605 --> 00:08:02,300
But let's imagine that
we want these ellipse

149
00:08:02,300 --> 00:08:07,325
to be only red between 200
pixels and 400 pixels.

150
00:08:07,325 --> 00:08:09,935
In our normal English language,

151
00:08:09,935 --> 00:08:11,645
we would be able to say, well,

152
00:08:11,645 --> 00:08:13,625
x needs to be bigger than

153
00:08:13,625 --> 00:08:17,810
200 and smaller
than, let's say 400.

154
00:08:17,810 --> 00:08:22,055
We do have something like that
which is an AND statement.

155
00:08:22,055 --> 00:08:26,165
AND allows us to do a
second Boolean condition,

156
00:08:26,165 --> 00:08:27,860
and both of those
conditions need to

157
00:08:27,860 --> 00:08:30,050
be met in order for
that to be true.

158
00:08:30,050 --> 00:08:34,760
Let's say x smaller than 400.

159
00:08:34,760 --> 00:08:39,720
Here, we're creating a
range between 200 and 400.

160
00:08:39,940 --> 00:08:42,200
Both of those
conditions need to be

161
00:08:42,200 --> 00:08:44,090
true because we're
using the AND.

162
00:08:44,090 --> 00:08:45,890
There's also an OR operator in

163
00:08:45,890 --> 00:08:48,440
case you wanted to
use an OR statement,

164
00:08:48,440 --> 00:08:50,855
but we'll see those later.

165
00:08:50,855 --> 00:08:55,295
But in this case, bigger than
200 and smaller than 400,

166
00:08:55,295 --> 00:08:56,900
it gives us a very clear range.

167
00:08:56,900 --> 00:08:58,070
Let's just also draw

168
00:08:58,070 --> 00:09:00,740
another line so that
we can visualize those

169
00:09:00,740 --> 00:09:05,270
400 pixels and see

170
00:09:05,270 --> 00:09:09,000
if in fact this statement is
doing what we wanted to do.

171
00:09:09,940 --> 00:09:13,700
Let's press "Play". We have

172
00:09:13,700 --> 00:09:16,355
200 pixels here,
400 pixels here.

173
00:09:16,355 --> 00:09:18,035
We switch to red,

174
00:09:18,035 --> 00:09:20,885
and then we go back to white.

175
00:09:20,885 --> 00:09:25,280
Everything outside this
area here falls into

176
00:09:25,280 --> 00:09:27,680
the L statement because the Ls

177
00:09:27,680 --> 00:09:30,575
captures everything
that is false.

178
00:09:30,575 --> 00:09:32,785
The condition that is true,

179
00:09:32,785 --> 00:09:35,725
it's only this condition
between 200 and 400.

180
00:09:35,725 --> 00:09:40,390
Again, Boolean logic can
get very interesting and

181
00:09:40,390 --> 00:09:42,520
more advanced certainly
as you start building

182
00:09:42,520 --> 00:09:46,015
more complex If statements.

183
00:09:46,015 --> 00:09:49,270
It's a really good way
to altering the way

184
00:09:49,270 --> 00:09:51,070
your code executes based

185
00:09:51,070 --> 00:09:53,035
on the conditions
that you're facing.

186
00:09:53,035 --> 00:09:55,150
We'll continue using this If

187
00:09:55,150 --> 00:09:58,670
statement in future videos.
I'll see you in the next one.