In this section, we're gonna add what are called expressions to the code we have
available. And that's kinda the last piece we needed to start writing, you know,
kinda realistic image manipulation code. And in particular by the end of this
section we'll play with puzzles that are based on images so, that'll be kinda fun.
So we've written code like this a lot of times. So, here it says print(42). We just
have a number 40 or 100 or 250, or whatever and it's just in the code. It
turns out you can instead write that this way. So it says print(11+31). And the
11+31 here, that's called an expression. And basically, instead of a, a
fixed number that's known ahead of time, we can put a little, a little arithmetic
expression. So in this case, 11+31, it's a little problem. The way this works
is that, when the computer runs, when it gets to this line. The first thing it's
gonna do, is, it is said to evaluate the expression. So it just picks out the
expression, and says, alright. Well, I need to work out what number this is. In
this case, it just does the addition, so, 11+31, it's 42. So once the
expression's been evaluated down to a number of 42, then the code can continue,
and just use that number. So, in effect, this'll just print 42. And so anywhere in
the code where we would have had a number like 0 or 255 or 100 or something
instead we're gonna be able to put little arithmetic expressions to sort of embed a
little computation to compute what number we want to use in that. That's gonna
enable us to, to solve better problems. So we haven't talked about it up to now but
the pixel has these three extra functions. There's pixel.getRed() and what getRed
does is it, it's kind of the reverse of setRed. It retrieves the number out of
the pixel. So there is some red value; 0 or 100 or something. This retrieves it
out. And there's also getGreen and getBlue. And so these are going to be very
natural to use in expressions to mess with the RGB values in a pixel. So
suppose what I want to do is double the red value of a pixel so if it's 50 I wanna
make it a 100 if it's a 100 I wanna make it a 200 or whatever. So here's some code
that does that so I'm gonna walk through this and this idea of making a relative
change to a pixel whatever it was change it to you know triple it or something like
that, that gonna be a much more realistic way to deal with the RGB values
of pixels. So let's walks with what this code does. So this quote is correct. It does
double the red value of a pixel. So what the first line does, is, it calls pixel.getRed().
So that's gonna retrieve the number out. And let's just say, in this
case, that the red value is 50. So, pixel.getRed(), is gonna retrieve the 50.
And then, here, we're using the equal sign, and the way we have before, to just
store that number in a variable. I'm, I'm just gonna call old, for the, the old
value. So basically, this just stores 50 in old. So then, the next line says,
pixel.setRed(old "times" 2). So here, I'm using the expression. And remember, the
way it works is, when it gets to this line, the first thing it's gonna wanna do
is evaluate the expression. So it's gonna look at old times 2. Old, remember it's
just storing 50. So basically, this says 50 times 2, it's gonna evaluate that,
come up with 100. So it evaluates the expression to get 100. And now that it has
that value, then it can go ahead and run the code. And so it says pixel.setRed,
essentially 100. So if you, you think through the whole sequence, basically this
pulls the 50 out, multiplies by 2 to get 100, and then stores that back. So in
effect, it multiplies by two. Now. In reality this is the way we're gonna write
it. The whole thing can be condensed down to just one line because, really, that,
that variable old there was, it wasn't adding a lot. It was just kinda a
temporary holding spot. And so let's imagine that same case of pixel where the
red value is 50, and I'm just gonna run this. I've just condensed it down to one
line. So, let's imagine this code running. So, I have a pixel with actually here I
have it. Pixel with red of 50 and I'm gonna run this line. So the first thing
it's gonna do is it's gonna notice that there's an expression here, pixel.getRed()
times 2. So, it's gonna evaluate that expression. So pixe.getRed() is
gonna go get what the red value is currently. So let say 50. So it'll say,
it's the same math we had before so 50 times two. That's 100. And so then with
that value 100, essentially it's gonna call pixel.setRed of 100 to put that
back. So it works out as the same dynamic we just went through. So it gets out the
value, multiplies by two and puts it back. Or, in effect, served in English, it
doubles the red value. So I'll do a bunch of examples that follow, sort of this
pattern. So what we're gonna see. As I'll start using this inside of loops as were
as previously we had to you know say zero or 250 I we had some fixed number but now.
We're gonna write code and this is the example I just did. Code like this where
we're going to change the red value based on what the red value was before. And so
the dynamic is, we'll have, you know, very often we'll say pixel.setRed and then
in the parenthesis we'll call pixel.getRed() and then have some arithmetic. So
in this case, this line doubles the red value or ultimately, this line. Calls
pixel.setRed of pixel.getRed() times 0.5. So it's getting the old value
and multiplying it times 0.5, or essentially dividing by two, so it's gonna
make it smaller and then put that back. So, that's gonna be the well, we'll follow
that pattern, a lot of times. So let me get to a real example, here. So suppose I,
I'm gonna take the flower's image. And let's say I wanna make it look kind of
more orange. So my strategy is gonna be, well, let's change the green value. Let's
just turn down the green. And so, mathematically, I'm gonna say, let's
change the green to be 75 percent of whatever it was. Now, in this example,
I've actually started the page with a no code in it. So I'm just gonna actually
type this in. So I'll say pixel, so, if I wanna change the green to be 75 percent of
what it was. And this is, you know, some of the example I just showed. I'll say
pixel.setGreen. You can also write this outside in so, I wanna call setGreen
and I want to put some kind of expression here, right so I want it
to compute a number that I want to put back for the green value. So the pattern
I'm gonna use here is I'll say pixel.getGreen(), I'm gonna get the old value and
then I can kinda, you know multiply times whatever. In this case I multiply times
0.75. So I'll change it to be sort of, three quarters of whatever it was. So lets
try that. Oh, okay. So that does make it, if you recall it was
sorta yellow. Actually if I put. 1.0 here. We can make no change. Right, so that's
when it was nice and yellow. So that's your 0.75 back here.
Then we get kinda a little more orange. I should say, for these examples. I'm gonna,
I'm gonna just take the time to type the code in. And you can do that if you want
to go back on this yourself. There's a little show solution button down here. So,
if you come to the review later. The solution code is available. But, I just
felt like practicing purposes. It's better to start with a blank screen. And then
really go through the process of typing the code in. So, all these examples will
follow that pattern. Let's try something a little bit more difficult. So this says
set red, green and blue each to be, 0.75 of their original values, and then we'll
try 0.5 and 0.25. So what I'm gonna do. A great computer science tradition, instead
of typing the code in absolutely from scratch, I'm gonna copy it, the one I made
before and I'll just paste it. I'll make three copies of it, and then we'll fix it
to do what I want here. Okay, so usually I always go in the order, red, green, blue.
So I'm gonna say setRed. To getRed() and, what did it say to, 0.75. Alright, so
that's, that one's good. And then we'll say setGreen to getGreen() times 0.75. And
then we'll do blue last. So setBlue, pixel.getBlue(). So you can sort of see
the pattern here of the set and get being combined. That's fine. It's a very
workable pattern. So I'll run it that way. Yeah, It's a little bit subtle but what
this has done, is taken the original image and made it a little bit darker. Cuz if
you think about it, by multiplying 0.75 we're sort of moving everything towards
zero, and obviously 0,0,0 is pure black, so we're kind of compressing down
that way. So let's try make it a little extreme. So, I'll multiply times 0.5 and
I'll run that. Oh, it's a little darker. And if almost by 0.25 so just a quarter of
the original values. Oh, then yeah, then it's getting quite dark. So, this shows
a good realistic sort of interesting use of this kind of scaling idea of using
setRed combined with getRed() and multiplying times some number to sort of play
with the values. Either scaling them up or scaling them down. Alright. So there's a,
a third problem here I, I'm gonna sorta skip over. This one's just for extra
practice, if you wanna come and try this one and it has a, it has a solution code
as well. So what I really want to do. Is work one of these five, ten, twenty
puzzles. So the idea with the five, ten, twenty puzzles is that there were some
image of a flower, piece of fruit or something and it's been modified and the
way it's been modified is that the red, green and blue values have all been divided by
either five, ten or twenty. So the values are way to small the images could be
really dark and the challenge. Is to multiply the red, green, and blue values
by either five, ten, or twenty. Essentially to kind of undo the darkening
to kinda get the image back. And so. Such as this it just comes down to some
experimenting and playing around a little bit to try and figure out how to get the
image back. So the number five is used once the number ten is used once the
number twenty is used once so basically you just have to figure out, which one
goes with which color. And I should say, you know there's only six possible ways to
have five, ten and twenty so there's really not that many to go through. The
way I think about it is you can imagine well maybe the five is first is on red and
so then there's either, five is first and then it's either five, ten, twenty. Or
five, twenty, ten. So if five is first there's only two possibilities and then
likewise if ten is first there's only two possibilities and if twenty is first
there's is only two possibilities so that's a way you can kind of organize
while your searching through this, alright so let me let me go back here. As I said
before and grab, a copy of my code so we don't start with nothing. Alright, so in
this case what we have is a, a banana. Actually, here, I'll, I'll comment these
lines out for a second, so we can just see what the image looks like with nothing. So
there is the puzzle image. And what it show-, I'll tell you. There is a yellow
banana, and it's on a background of dark red bricks. And in between the red bricks,
there's little bits of green moss that you can see. So if you fix the image, we
should be able to see all of those things. So to fix the image. What I wanna do here
is multiply. Lets, I'm just gonna... I'll just start with five, ten, twenty like
these. So let's say, well let's guess that the red needs to be multiplied by five,
the green needs to be multiplied by ten and the blue has to be multiplied by
twenty. Its just a guess. So, If I do that. Mm-hm, well, well that, that's
clearly wrong, right? The banana doesn't look quite right. And the bricks have this
sort of blue cast, so that's not good. So I'll, I'll stick with the assumption that
the five is first, though. And I'll try the other permutation. Alright, so, well
maybe it's five, twenty, ten. So I'll try it that way. Oh, and that's worse.
Alright. So, I don't think the five is first. When I tried the two ways
with five first. So let's try the ten first, so I'll try ten. 520. Alright, so
I'm just scaling these up. Ew, hm. Well, I mean I think we're getting there, right? I
mean the banana looks pretty good but the bricks obviously are, that's not, you
know, that's purple, they're supposed to be red. So let me try, I'm
gonna try leaving the five in the middle and just putting the twenty first. Twenty,
five, ten, let's try that. There we have it. There's the banana, it looks nice and
yellow. You can see the bricks have this dark red color. And then even little bits
of, green moss here. That's sort of reassuring. So I'm gonna zoom in on this,
so I'll show you. [inaudible] some, some of the qualities of it. So partly there's,
there's the brick. And the moss and the bananas all look good. There's just a
minor thing but you'll see there's kind of a, see there's sort of this horizontal
banding. In the banana and that's okay that is that's the way the solution looks
when you do it quickly. That's happening because when the red, green, and blue when
they were divided by this numbers by ten or maybe twenty all of those values which
normally range to zero to fifty five they are compressed down to ranging maybe just
zero to twelve or zero to twenty four. And as a result... Because they were
compressed down to that range, there were just a few shades of yellow available,
when it was compressed down like that. And even when we expand it back up, we're
still stuck with just those few shades. So that's what we're seeing in these
horizontal band here, is, there, there were just a few different shades of
yellow. And so it's unable to capture. I'll zoom in a little bit. It's unable to
capture. The, the real gradations that you would want. And so that's just sort of a,
an artifact of the, the way this exercise works. Alright. So the, the exercises to
follow this section are actually just more of these five, ten, twenty puzzles. So,
it's something you should check out.