0:00:00.000,0:00:04.853
In this section, we're gonna add what are[br]called expressions to the code we have

0:00:04.853,0:00:09.590
available. And that's kinda the last piece[br]we needed to start writing, you know,

0:00:09.590,0:00:14.093
kinda realistic image manipulation code.[br]And in particular by the end of this

0:00:14.093,0:00:19.006
section we'll play with puzzles that are[br]based on images so, that'll be kinda fun.

0:00:19.006,0:00:23.860
So we've written code like this a lot of[br]times. So, here it says print(42). We just

0:00:23.860,0:00:28.246
have a number 40 or 100 or 250, or[br]whatever and it's just in the code. It

0:00:28.246,0:00:32.866
turns out you can instead write that this[br]way. So it says print(11+31). And the

0:00:32.866,0:00:37.408
11+31 here, that's called an[br]expression. And basically, instead of a, a

0:00:37.408,0:00:42.872
fixed number that's known ahead of time,[br]we can put a little, a little arithmetic

0:00:45.440,0:00:48.007
expression. So in this case, 11+31,[br]it's a little problem. The way this works

0:00:48.007,0:00:52.919
is that, when the computer runs, when it[br]gets to this line. The first thing it's

0:00:52.919,0:00:57.058
gonna do, is, it is said to evaluate the[br]expression. So it just picks out the

0:00:57.058,0:01:01.364
expression, and says, alright. Well, I[br]need to work out what number this is. In

0:01:01.364,0:01:05.172
this case, it just does the addition, so,[br]11+31, it's 42. So once the

0:01:05.172,0:01:09.478
expression's been evaluated down to a[br]number of 42, then the code can continue,

0:01:09.478,0:01:13.837
and just use that number. So, in effect,[br]this'll just print 42. And so anywhere in

0:01:13.837,0:01:18.191
the code where we would have had a number[br]like 0 or 255 or 100 or something

0:01:18.356,0:01:23.041
instead we're gonna be able to put little[br]arithmetic expressions to sort of embed a

0:01:23.041,0:01:27.609
little computation to compute what number[br]we want to use in that. That's gonna

0:01:27.609,0:01:33.157
enable us to, to solve better problems. So[br]we haven't talked about it up to now but

0:01:33.157,0:01:38.894
the pixel has these three extra functions.[br]There's pixel.getRed() and what getRed

0:01:38.894,0:01:43.811
does is it, it's kind of the reverse of[br]setRed. It retrieves the number out of

0:01:43.811,0:01:49.043
the pixel. So there is some red value; 0[br]or 100 or something. This retrieves it

0:01:49.043,0:01:54.150
out. And there's also getGreen and getBlue. And so these are going to be very

0:01:54.150,0:01:59.217
natural to use in expressions to mess[br]with the RGB values in a pixel. So

0:01:59.217,0:02:04.357
suppose what I want to do is double the[br]red value of a pixel so if it's 50 I wanna

0:02:04.357,0:02:08.846
make it a 100 if it's a 100 I wanna make[br]it a 200 or whatever. So here's some code

0:02:08.846,0:02:13.390
that does that so I'm gonna walk through[br]this and this idea of making a relative

0:02:13.390,0:02:18.103
change to a pixel whatever it was change[br]it to you know triple it or something like

0:02:18.103,0:02:22.479
that, that gonna be a much more realistic[br]way to deal with the RGB values

0:02:22.479,0:02:27.085
of pixels. So let's walks with what this code[br]does. So this quote is correct. It does

0:02:27.085,0:02:31.672
double the red value of a pixel. So what[br]the first line does, is, it calls pixel.getRed().

0:02:31.672,0:02:36.246
So that's gonna retrieve the[br]number out. And let's just say, in this

0:02:36.246,0:02:40.646
case, that the red value is 50. So,[br]pixel.getRed(), is gonna retrieve the 50.

0:02:40.646,0:02:45.046
And then, here, we're using the equal[br]sign, and the way we have before, to just

0:02:45.046,0:02:49.446
store that number in a variable. I'm, I'm[br]just gonna call old, for the, the old

0:02:49.446,0:02:54.194
value. So basically, this just stores 50[br]in old. So then, the next line says,

0:02:54.194,0:02:58.481
pixel.setRed(old "times" 2). So here, I'm[br]using the expression. And remember, the

0:02:58.481,0:03:02.635
way it works is, when it gets to this[br]line, the first thing it's gonna wanna do

0:03:02.635,0:03:06.841
is evaluate the expression. So it's gonna[br]look at old times 2. Old, remember it's

0:03:06.841,0:03:10.790
just storing 50. So basically, this says[br]50 times 2, it's gonna evaluate that,

0:03:10.790,0:03:14.944
come up with 100. So it evaluates the[br]expression to get 100. And now that it has

0:03:14.944,0:03:18.944
that value, then it can go ahead and run[br]the code. And so it says pixel.setRed,

0:03:18.944,0:03:23.995
essentially 100. So if you, you think[br]through the whole sequence, basically this

0:03:23.995,0:03:28.825
pulls the 50 out, multiplies by 2 to get[br]100, and then stores that back. So in

0:03:28.825,0:03:35.152
effect, it multiplies by two. Now. In[br]reality this is the way we're gonna write

0:03:35.152,0:03:39.212
it. The whole thing can be condensed down[br]to just one line because, really, that,

0:03:39.212,0:03:42.907
that variable old there was, it wasn't[br]adding a lot. It was just kinda a

0:03:42.907,0:03:47.123
temporary holding spot. And so let's[br]imagine that same case of pixel where the

0:03:47.123,0:03:51.235
red value is 50, and I'm just gonna run[br]this. I've just condensed it down to one

0:03:51.235,0:03:55.503
line. So, let's imagine this code running.[br]So, I have a pixel with actually here I

0:03:55.503,0:03:59.459
have it. Pixel with red of 50 and I'm[br]gonna run this line. So the first thing

0:03:59.459,0:04:03.831
it's gonna do is it's gonna notice that[br]there's an expression here, pixel.getRed()

0:04:03.831,0:04:08.194
times 2. So, it's gonna evaluate[br]that expression. So pixe.getRed() is

0:04:08.194,0:04:12.652
gonna go get what the red value is[br]currently. So let say 50. So it'll say,

0:04:12.652,0:04:17.406
it's the same math we had before so 50[br]times two. That's 100. And so then with

0:04:17.406,0:04:22.161
that value 100, essentially it's gonna[br]call pixel.setRed of 100 to put that

0:04:22.161,0:04:27.153
back. So it works out as the same dynamic[br]we just went through. So it gets out the

0:04:27.153,0:04:31.964
value, multiplies by two and puts it back.[br]Or, in effect, served in English, it

0:04:31.964,0:04:36.891
doubles the red value. So I'll do a bunch[br]of examples that follow, sort of this

0:04:36.891,0:04:44.265
pattern. So what we're gonna see. As I'll[br]start using this inside of loops as were

0:04:44.265,0:04:51.270
as previously we had to you know say zero[br]or 250 I we had some fixed number but now.

0:04:51.270,0:04:56.872
We're gonna write code and this is the[br]example I just did. Code like this where

0:04:56.872,0:05:02.475
we're going to change the red value based[br]on what the red value was before. And so

0:05:02.475,0:05:08.146
the dynamic is, we'll have, you know, very[br]often we'll say pixel.setRed and then

0:05:08.146,0:05:13.680
in the parenthesis we'll call pixel.getRed()[br]and then have some arithmetic. So

0:05:13.680,0:05:18.966
in this case, this line doubles the red[br]value or ultimately, this line. Calls

0:05:18.966,0:05:23.795
pixel.setRed of pixel.getRed()[br]times 0.5. So it's getting the old value

0:05:23.795,0:05:28.318
and multiplying it times 0.5, or[br]essentially dividing by two, so it's gonna

0:05:28.318,0:05:33.391
make it smaller and then put that back.[br]So, that's gonna be the well, we'll follow

0:05:33.391,0:05:38.341
that pattern, a lot of times. So let me[br]get to a real example, here. So suppose I,

0:05:38.341,0:05:42.999
I'm gonna take the flower's image. And[br]let's say I wanna make it look kind of

0:05:42.999,0:05:47.737
more orange. So my strategy is gonna be,[br]well, let's change the green value. Let's

0:05:47.737,0:05:51.756
just turn down the green. And so,[br]mathematically, I'm gonna say, let's

0:05:51.756,0:05:55.654
change the green to be 75 percent of[br]whatever it was. Now, in this example,

0:05:55.834,0:06:00.573
I've actually started the page with a no[br]code in it. So I'm just gonna actually

0:06:00.573,0:06:05.011
type this in. So I'll say pixel, so, if I[br]wanna change the green to be 75 percent of

0:06:05.011,0:06:09.570
what it was. And this is, you know, some[br]of the example I just showed. I'll say

0:06:09.570,0:06:14.189
pixel.setGreen. You can also write[br]this outside in so, I wanna call setGreen

0:06:14.189,0:06:19.123
and I want to put some kind of[br]expression here, right so I want it

0:06:19.123,0:06:23.551
to compute a number that I want to put[br]back for the green value. So the pattern

0:06:23.551,0:06:28.204
I'm gonna use here is I'll say pixel.getGreen(),[br]I'm gonna get the old value and

0:06:28.204,0:06:32.689
then I can kinda, you know multiply times[br]whatever. In this case I multiply times

0:06:32.689,0:06:37.615
0.75. So I'll change it to be sort of,[br]three quarters of whatever it was. So lets

0:06:37.615,0:06:42.818
try that. Oh, okay. So that does[br]make it, if you recall it was

0:06:43.010,0:06:49.062
sorta yellow. Actually if I put. 1.0 here.[br]We can make no change. Right, so that's

0:06:49.062,0:06:53.830
when it was nice and yellow. So that's your 0.75 back here.

0:06:53.830,0:06:57.867
Then we get kinda a little more orange. I[br]should say, for these examples. I'm gonna,

0:06:57.867,0:07:01.954
I'm gonna just take the time to type the[br]code in. And you can do that if you want

0:07:01.954,0:07:06.092
to go back on this yourself. There's a[br]little show solution button down here. So,

0:07:06.243,0:07:09.977
if you come to the review later. The[br]solution code is available. But, I just

0:07:09.977,0:07:14.014
felt like practicing purposes. It's better[br]to start with a blank screen. And then

0:07:14.014,0:07:18.051
really go through the process of typing[br]the code in. So, all these examples will

0:07:18.051,0:07:22.621
follow that pattern. Let's try something a[br]little bit more difficult. So this says

0:07:22.882,0:07:29.753
set red, green and blue each to be, 0.75[br]of their original values, and then we'll

0:07:30.014,0:07:37.171
try 0.5 and 0.25. So what I'm gonna do. A[br]great computer science tradition, instead

0:07:37.171,0:07:43.340
of typing the code in absolutely from[br]scratch, I'm gonna copy it, the one I made

0:07:43.340,0:07:49.665
before and I'll just paste it. I'll make[br]three copies of it, and then we'll fix it

0:07:49.665,0:07:56.067
to do what I want here. Okay, so usually I[br]always go in the order, red, green, blue.

0:07:56.067,0:08:02.269
So I'm gonna say setRed. To getRed() and,[br]what did it say to, 0.75. Alright, so

0:08:02.269,0:08:07.980
that's, that one's good. And then we'll[br]say setGreen to getGreen() times 0.75. And

0:08:07.980,0:08:13.548
then we'll do blue last. So setBlue,[br]pixel.getBlue(). So you can sort of see

0:08:13.548,0:08:18.903
the pattern here of the set and get being[br]combined. That's fine. It's a very

0:08:18.903,0:08:24.249
workable pattern. So I'll run it that way.[br]Yeah, It's a little bit subtle but what

0:08:24.249,0:08:28.916
this has done, is taken the original image[br]and made it a little bit darker. Cuz if

0:08:28.916,0:08:33.468
you think about it, by multiplying 0.75[br]we're sort of moving everything towards

0:08:33.468,0:08:37.962
zero, and obviously 0,0,0 is pure[br]black, so we're kind of compressing down

0:08:37.962,0:08:42.599
that way. So let's try make it a little[br]extreme. So, I'll multiply times 0.5 and

0:08:42.599,0:08:48.095
I'll run that. Oh, it's a little darker.[br]And if almost by 0.25 so just a quarter of

0:08:48.095,0:08:53.591
the original values. Oh, then yeah, then[br]it's getting quite dark. So, this shows

0:08:53.591,0:08:59.427
a good realistic sort of interesting use[br]of this kind of scaling idea of using

0:08:59.427,0:09:05.058
setRed combined with getRed() and multiplying[br]times some number to sort of play

0:09:05.058,0:09:10.134
with the values. Either scaling them up or[br]scaling them down. Alright. So there's a,

0:09:10.134,0:09:13.721
a third problem here I, I'm gonna sorta[br]skip over. This one's just for extra

0:09:13.721,0:09:17.548
practice, if you wanna come and try this[br]one and it has a, it has a solution code

0:09:17.548,0:09:21.960
as well. So what I really want to do. Is[br]work one of these five, ten, twenty

0:09:21.960,0:09:27.560
puzzles. So the idea with the five, ten,[br]twenty puzzles is that there were some

0:09:27.560,0:09:33.378
image of a flower, piece of fruit or[br]something and it's been modified and the

0:09:33.378,0:09:39.268
way it's been modified is that the red,[br]green and blue values have all been divided by

0:09:39.268,0:09:44.868
either five, ten or twenty. So the values[br]are way to small the images could be

0:09:44.868,0:09:50.016
really dark and the challenge. Is to[br]multiply the red, green, and blue values

0:09:50.016,0:09:54.894
by either five, ten, or twenty.[br]Essentially to kind of undo the darkening

0:09:54.894,0:10:01.216
to kinda get the image back. And so. Such[br]as this it just comes down to some

0:10:01.216,0:10:05.783
experimenting and playing around a little[br]bit to try and figure out how to get the

0:10:05.783,0:10:10.295
image back. So the number five is used[br]once the number ten is used once the

0:10:10.295,0:10:14.587
number twenty is used once so basically[br]you just have to figure out, which one

0:10:14.587,0:10:19.264
goes with which color. And I should say,[br]you know there's only six possible ways to

0:10:19.264,0:10:23.721
have five, ten and twenty so there's[br]really not that many to go through. The

0:10:23.721,0:10:28.508
way I think about it is you can imagine[br]well maybe the five is first is on red and

0:10:28.508,0:10:33.182
so then there's either, five is first and[br]then it's either five, ten, twenty. Or

0:10:33.182,0:10:37.374
five, twenty, ten. So if five is first[br]there's only two possibilities and then

0:10:37.374,0:10:40.778
likewise if ten is first there's only two[br]possibilities and if twenty is first

0:10:40.778,0:10:44.009
there's is only two possibilities so[br]that's a way you can kind of organize

0:10:44.009,0:10:48.781
while your searching through this, alright[br]so let me let me go back here. As I said

0:10:48.781,0:10:55.588
before and grab, a copy of my code so we[br]don't start with nothing. Alright, so in

0:10:55.588,0:11:00.888
this case what we have is a, a banana.[br]Actually, here, I'll, I'll comment these

0:11:00.888,0:11:06.066
lines out for a second, so we can just see[br]what the image looks like with nothing. So

0:11:06.066,0:11:10.936
there is the puzzle image. And what it[br]show-, I'll tell you. There is a yellow

0:11:10.936,0:11:15.929
banana, and it's on a background of dark[br]red bricks. And in between the red bricks,

0:11:15.929,0:11:20.738
there's little bits of green moss that you[br]can see. So if you fix the image, we

0:11:20.738,0:11:26.287
should be able to see all of those things.[br]So to fix the image. What I wanna do here

0:11:26.287,0:11:31.162
is multiply. Lets, I'm just gonna... I'll[br]just start with five, ten, twenty like

0:11:31.162,0:11:36.294
these. So let's say, well let's guess that[br]the red needs to be multiplied by five,

0:11:36.294,0:11:41.234
the green needs to be multiplied by ten[br]and the blue has to be multiplied by

0:11:41.234,0:11:45.501
twenty. Its just a guess. So, If I do[br]that. Mm-hm, well, well that, that's

0:11:45.501,0:11:50.421
clearly wrong, right? The banana doesn't[br]look quite right. And the bricks have this

0:11:50.421,0:11:55.342
sort of blue cast, so that's not good. So[br]I'll, I'll stick with the assumption that

0:11:55.342,0:11:59.959
the five is first, though. And I'll try[br]the other permutation. Alright, so, well

0:11:59.959,0:12:05.618
maybe it's five, twenty, ten. So I'll[br]try it that way. Oh, and that's worse.

0:12:05.618,0:12:11.343
Alright. So, I don't think the[br]five is first. When I tried the two ways

0:12:11.343,0:12:20.603
with five first. So let's try the ten[br]first, so I'll try ten. 520. Alright, so

0:12:20.603,0:12:26.014
I'm just scaling these up. Ew, hm. Well, I[br]mean I think we're getting there, right? I

0:12:26.014,0:12:31.493
mean the banana looks pretty good but the[br]bricks obviously are, that's not, you

0:12:31.493,0:12:36.430
know, that's purple, they're[br]supposed to be red. So let me try, I'm

0:12:36.430,0:12:41.976
gonna try leaving the five in the middle[br]and just putting the twenty first. Twenty,

0:12:41.976,0:12:47.548
five, ten, let's try that. There we have[br]it. There's the banana, it looks nice and

0:12:47.548,0:12:53.158
yellow. You can see the bricks have this[br]dark red color. And then even little bits

0:12:53.158,0:12:58.492
of, green moss here. That's sort of[br]reassuring. So I'm gonna zoom in on this,

0:12:58.492,0:13:03.750
so I'll show you. [inaudible] some, some[br]of the qualities of it. So partly there's,

0:13:03.750,0:13:08.288
there's the brick. And the moss and the[br]bananas all look good. There's just a

0:13:08.288,0:13:12.540
minor thing but you'll see there's kind of[br]a, see there's sort of this horizontal

0:13:12.540,0:13:17.453
banding. In the banana and that's okay[br]that is that's the way the solution looks

0:13:17.453,0:13:22.695
when you do it quickly. That's happening[br]because when the red, green, and blue when

0:13:22.695,0:13:27.875
they were divided by this numbers by ten[br]or maybe twenty all of those values which

0:13:27.875,0:13:33.117
normally range to zero to fifty five they[br]are compressed down to ranging maybe just

0:13:33.117,0:13:37.737
zero to twelve or zero to twenty four. And[br]as a result... Because they were

0:13:37.737,0:13:41.850
compressed down to that range, there were[br]just a few shades of yellow available,

0:13:41.850,0:13:45.963
when it was compressed down like that. And[br]even when we expand it back up, we're

0:13:45.963,0:13:50.077
still stuck with just those few shades. So[br]that's what we're seeing in these

0:13:50.077,0:13:53.826
horizontal band here, is, there, there[br]were just a few different shades of

0:13:53.826,0:13:58.043
yellow. And so it's unable to capture.[br]I'll zoom in a little bit. It's unable to

0:13:58.043,0:14:02.642
capture. The, the real gradations that you[br]would want. And so that's just sort of a,

0:14:02.642,0:14:07.485
an artifact of the, the way this exercise[br]works. Alright. So the, the exercises to

0:14:07.485,0:14:11.998
follow this section are actually just more[br]of these five, ten, twenty puzzles. So,

0:14:11.998,0:14:13.980
it's something you should check out.