Expressions

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.