WEBVTT 00:00:00.000 --> 00:00:04.853 In this section, we're gonna add what are called expressions to the code we have 00:00:04.853 --> 00:00:09.590 available. And that's kinda the last piece we needed to start writing, you know, 00:00:09.590 --> 00:00:14.093 kinda realistic image manipulation code. And in particular by the end of this 00:00:14.093 --> 00:00:19.006 section we'll play with puzzles that are based on images so, that'll be kinda fun. 00:00:19.006 --> 00:00:23.860 So we've written code like this a lot of times. So, here it says print(42). We just 00:00:23.860 --> 00:00:28.246 have a number 40 or 100 or 250, or whatever and it's just in the code. It 00:00:28.246 --> 00:00:32.866 turns out you can instead write that this way. So it says print(11+31). And the 00:00:32.866 --> 00:00:37.408 11+31 here, that's called an expression. And basically, instead of a, a 00:00:37.408 --> 00:00:42.872 fixed number that's known ahead of time, we can put a little, a little arithmetic 00:00:45.440 --> 00:00:48.007 expression. So in this case, 11+31, it's a little problem. The way this works 00:00:48.007 --> 00:00:52.919 is that, when the computer runs, when it gets to this line. The first thing it's 00:00:52.919 --> 00:00:57.058 gonna do, is, it is said to evaluate the expression. So it just picks out the 00:00:57.058 --> 00:01:01.364 expression, and says, alright. Well, I need to work out what number this is. In 00:01:01.364 --> 00:01:05.172 this case, it just does the addition, so, 11+31, it's 42. So once the 00:01:05.172 --> 00:01:09.478 expression's been evaluated down to a number of 42, then the code can continue, 00:01:09.478 --> 00:01:13.837 and just use that number. So, in effect, this'll just print 42. And so anywhere in 00:01:13.837 --> 00:01:18.191 the code where we would have had a number like 0 or 255 or 100 or something 00:01:18.356 --> 00:01:23.041 instead we're gonna be able to put little arithmetic expressions to sort of embed a 00:01:23.041 --> 00:01:27.609 little computation to compute what number we want to use in that. That's gonna 00:01:27.609 --> 00:01:33.157 enable us to, to solve better problems. So we haven't talked about it up to now but 00:01:33.157 --> 00:01:38.894 the pixel has these three extra functions. There's pixel.getRed() and what getRed 00:01:38.894 --> 00:01:43.811 does is it, it's kind of the reverse of setRed. It retrieves the number out of 00:01:43.811 --> 00:01:49.043 the pixel. So there is some red value; 0 or 100 or something. This retrieves it 00:01:49.043 --> 00:01:54.150 out. And there's also getGreen and getBlue. And so these are going to be very 00:01:54.150 --> 00:01:59.217 natural to use in expressions to mess with the RGB values in a pixel. So 00:01:59.217 --> 00:02:04.357 suppose what I want to do is double the red value of a pixel so if it's 50 I wanna 00:02:04.357 --> 00:02:08.846 make it a 100 if it's a 100 I wanna make it a 200 or whatever. So here's some code 00:02:08.846 --> 00:02:13.390 that does that so I'm gonna walk through this and this idea of making a relative 00:02:13.390 --> 00:02:18.103 change to a pixel whatever it was change it to you know triple it or something like 00:02:18.103 --> 00:02:22.479 that, that gonna be a much more realistic way to deal with the RGB values 00:02:22.479 --> 00:02:27.085 of pixels. So let's walks with what this code does. So this quote is correct. It does 00:02:27.085 --> 00:02:31.672 double the red value of a pixel. So what the first line does, is, it calls pixel.getRed(). 00:02:31.672 --> 00:02:36.246 So that's gonna retrieve the number out. And let's just say, in this 00:02:36.246 --> 00:02:40.646 case, that the red value is 50. So, pixel.getRed(), is gonna retrieve the 50. 00:02:40.646 --> 00:02:45.046 And then, here, we're using the equal sign, and the way we have before, to just 00:02:45.046 --> 00:02:49.446 store that number in a variable. I'm, I'm just gonna call old, for the, the old 00:02:49.446 --> 00:02:54.194 value. So basically, this just stores 50 in old. So then, the next line says, 00:02:54.194 --> 00:02:58.481 pixel.setRed(old "times" 2). So here, I'm using the expression. And remember, the 00:02:58.481 --> 00:03:02.635 way it works is, when it gets to this line, the first thing it's gonna wanna do 00:03:02.635 --> 00:03:06.841 is evaluate the expression. So it's gonna look at old times 2. Old, remember it's 00:03:06.841 --> 00:03:10.790 just storing 50. So basically, this says 50 times 2, it's gonna evaluate that, 00:03:10.790 --> 00:03:14.944 come up with 100. So it evaluates the expression to get 100. And now that it has 00:03:14.944 --> 00:03:18.944 that value, then it can go ahead and run the code. And so it says pixel.setRed, 00:03:18.944 --> 00:03:23.995 essentially 100. So if you, you think through the whole sequence, basically this 00:03:23.995 --> 00:03:28.825 pulls the 50 out, multiplies by 2 to get 100, and then stores that back. So in 00:03:28.825 --> 00:03:35.152 effect, it multiplies by two. Now. In reality this is the way we're gonna write 00:03:35.152 --> 00:03:39.212 it. The whole thing can be condensed down to just one line because, really, that, 00:03:39.212 --> 00:03:42.907 that variable old there was, it wasn't adding a lot. It was just kinda a 00:03:42.907 --> 00:03:47.123 temporary holding spot. And so let's imagine that same case of pixel where the 00:03:47.123 --> 00:03:51.235 red value is 50, and I'm just gonna run this. I've just condensed it down to one 00:03:51.235 --> 00:03:55.503 line. So, let's imagine this code running. So, I have a pixel with actually here I 00:03:55.503 --> 00:03:59.459 have it. Pixel with red of 50 and I'm gonna run this line. So the first thing 00:03:59.459 --> 00:04:03.831 it's gonna do is it's gonna notice that there's an expression here, pixel.getRed() 00:04:03.831 --> 00:04:08.194 times 2. So, it's gonna evaluate that expression. So pixe.getRed() is 00:04:08.194 --> 00:04:12.652 gonna go get what the red value is currently. So let say 50. So it'll say, 00:04:12.652 --> 00:04:17.406 it's the same math we had before so 50 times two. That's 100. And so then with 00:04:17.406 --> 00:04:22.161 that value 100, essentially it's gonna call pixel.setRed of 100 to put that 00:04:22.161 --> 00:04:27.153 back. So it works out as the same dynamic we just went through. So it gets out the 00:04:27.153 --> 00:04:31.964 value, multiplies by two and puts it back. Or, in effect, served in English, it 00:04:31.964 --> 00:04:36.891 doubles the red value. So I'll do a bunch of examples that follow, sort of this 00:04:36.891 --> 00:04:44.265 pattern. So what we're gonna see. As I'll start using this inside of loops as were 00:04:44.265 --> 00:04:51.270 as previously we had to you know say zero or 250 I we had some fixed number but now. 00:04:51.270 --> 00:04:56.872 We're gonna write code and this is the example I just did. Code like this where 00:04:56.872 --> 00:05:02.475 we're going to change the red value based on what the red value was before. And so 00:05:02.475 --> 00:05:08.146 the dynamic is, we'll have, you know, very often we'll say pixel.setRed and then 00:05:08.146 --> 00:05:13.680 in the parenthesis we'll call pixel.getRed() and then have some arithmetic. So 00:05:13.680 --> 00:05:18.966 in this case, this line doubles the red value or ultimately, this line. Calls 00:05:18.966 --> 00:05:23.795 pixel.setRed of pixel.getRed() times 0.5. So it's getting the old value 00:05:23.795 --> 00:05:28.318 and multiplying it times 0.5, or essentially dividing by two, so it's gonna 00:05:28.318 --> 00:05:33.391 make it smaller and then put that back. So, that's gonna be the well, we'll follow 00:05:33.391 --> 00:05:38.341 that pattern, a lot of times. So let me get to a real example, here. So suppose I, 00:05:38.341 --> 00:05:42.999 I'm gonna take the flower's image. And let's say I wanna make it look kind of 00:05:42.999 --> 00:05:47.737 more orange. So my strategy is gonna be, well, let's change the green value. Let's 00:05:47.737 --> 00:05:51.756 just turn down the green. And so, mathematically, I'm gonna say, let's 00:05:51.756 --> 00:05:55.654 change the green to be 75 percent of whatever it was. Now, in this example, 00:05:55.834 --> 00:06:00.573 I've actually started the page with a no code in it. So I'm just gonna actually 00:06:00.573 --> 00:06:05.011 type this in. So I'll say pixel, so, if I wanna change the green to be 75 percent of 00:06:05.011 --> 00:06:09.570 what it was. And this is, you know, some of the example I just showed. I'll say 00:06:09.570 --> 00:06:14.189 pixel.setGreen. You can also write this outside in so, I wanna call setGreen 00:06:14.189 --> 00:06:19.123 and I want to put some kind of expression here, right so I want it 00:06:19.123 --> 00:06:23.551 to compute a number that I want to put back for the green value. So the pattern 00:06:23.551 --> 00:06:28.204 I'm gonna use here is I'll say pixel.getGreen(), I'm gonna get the old value and 00:06:28.204 --> 00:06:32.689 then I can kinda, you know multiply times whatever. In this case I multiply times 00:06:32.689 --> 00:06:37.615 0.75. So I'll change it to be sort of, three quarters of whatever it was. So lets 00:06:37.615 --> 00:06:42.818 try that. Oh, okay. So that does make it, if you recall it was 00:06:43.010 --> 00:06:49.062 sorta yellow. Actually if I put. 1.0 here. We can make no change. Right, so that's 00:06:49.062 --> 00:06:53.830 when it was nice and yellow. So that's your 0.75 back here. 00:06:53.830 --> 00:06:57.867 Then we get kinda a little more orange. I should say, for these examples. I'm gonna, 00:06:57.867 --> 00:07:01.954 I'm gonna just take the time to type the code in. And you can do that if you want 00:07:01.954 --> 00:07:06.092 to go back on this yourself. There's a little show solution button down here. So, 00:07:06.243 --> 00:07:09.977 if you come to the review later. The solution code is available. But, I just 00:07:09.977 --> 00:07:14.014 felt like practicing purposes. It's better to start with a blank screen. And then 00:07:14.014 --> 00:07:18.051 really go through the process of typing the code in. So, all these examples will 00:07:18.051 --> 00:07:22.621 follow that pattern. Let's try something a little bit more difficult. So this says 00:07:22.882 --> 00:07:29.753 set red, green and blue each to be, 0.75 of their original values, and then we'll 00:07:30.014 --> 00:07:37.171 try 0.5 and 0.25. So what I'm gonna do. A great computer science tradition, instead 00:07:37.171 --> 00:07:43.340 of typing the code in absolutely from scratch, I'm gonna copy it, the one I made 00:07:43.340 --> 00:07:49.665 before and I'll just paste it. I'll make three copies of it, and then we'll fix it 00:07:49.665 --> 00:07:56.067 to do what I want here. Okay, so usually I always go in the order, red, green, blue. 00:07:56.067 --> 00:08:02.269 So I'm gonna say setRed. To getRed() and, what did it say to, 0.75. Alright, so 00:08:02.269 --> 00:08:07.980 that's, that one's good. And then we'll say setGreen to getGreen() times 0.75. And 00:08:07.980 --> 00:08:13.548 then we'll do blue last. So setBlue, pixel.getBlue(). So you can sort of see 00:08:13.548 --> 00:08:18.903 the pattern here of the set and get being combined. That's fine. It's a very 00:08:18.903 --> 00:08:24.249 workable pattern. So I'll run it that way. Yeah, It's a little bit subtle but what 00:08:24.249 --> 00:08:28.916 this has done, is taken the original image and made it a little bit darker. Cuz if 00:08:28.916 --> 00:08:33.468 you think about it, by multiplying 0.75 we're sort of moving everything towards 00:08:33.468 --> 00:08:37.962 zero, and obviously 0,0,0 is pure black, so we're kind of compressing down 00:08:37.962 --> 00:08:42.599 that way. So let's try make it a little extreme. So, I'll multiply times 0.5 and 00:08:42.599 --> 00:08:48.095 I'll run that. Oh, it's a little darker. And if almost by 0.25 so just a quarter of 00:08:48.095 --> 00:08:53.591 the original values. Oh, then yeah, then it's getting quite dark. So, this shows 00:08:53.591 --> 00:08:59.427 a good realistic sort of interesting use of this kind of scaling idea of using 00:08:59.427 --> 00:09:05.058 setRed combined with getRed() and multiplying times some number to sort of play 00:09:05.058 --> 00:09:10.134 with the values. Either scaling them up or scaling them down. Alright. So there's a, 00:09:10.134 --> 00:09:13.721 a third problem here I, I'm gonna sorta skip over. This one's just for extra 00:09:13.721 --> 00:09:17.548 practice, if you wanna come and try this one and it has a, it has a solution code 00:09:17.548 --> 00:09:21.960 as well. So what I really want to do. Is work one of these five, ten, twenty 00:09:21.960 --> 00:09:27.560 puzzles. So the idea with the five, ten, twenty puzzles is that there were some 00:09:27.560 --> 00:09:33.378 image of a flower, piece of fruit or something and it's been modified and the 00:09:33.378 --> 00:09:39.268 way it's been modified is that the red, green and blue values have all been divided by 00:09:39.268 --> 00:09:44.868 either five, ten or twenty. So the values are way to small the images could be 00:09:44.868 --> 00:09:50.016 really dark and the challenge. Is to multiply the red, green, and blue values 00:09:50.016 --> 00:09:54.894 by either five, ten, or twenty. Essentially to kind of undo the darkening 00:09:54.894 --> 00:10:01.216 to kinda get the image back. And so. Such as this it just comes down to some 00:10:01.216 --> 00:10:05.783 experimenting and playing around a little bit to try and figure out how to get the 00:10:05.783 --> 00:10:10.295 image back. So the number five is used once the number ten is used once the 00:10:10.295 --> 00:10:14.587 number twenty is used once so basically you just have to figure out, which one 00:10:14.587 --> 00:10:19.264 goes with which color. And I should say, you know there's only six possible ways to 00:10:19.264 --> 00:10:23.721 have five, ten and twenty so there's really not that many to go through. The 00:10:23.721 --> 00:10:28.508 way I think about it is you can imagine well maybe the five is first is on red and 00:10:28.508 --> 00:10:33.182 so then there's either, five is first and then it's either five, ten, twenty. Or 00:10:33.182 --> 00:10:37.374 five, twenty, ten. So if five is first there's only two possibilities and then 00:10:37.374 --> 00:10:40.778 likewise if ten is first there's only two possibilities and if twenty is first 00:10:40.778 --> 00:10:44.009 there's is only two possibilities so that's a way you can kind of organize 00:10:44.009 --> 00:10:48.781 while your searching through this, alright so let me let me go back here. As I said 00:10:48.781 --> 00:10:55.588 before and grab, a copy of my code so we don't start with nothing. Alright, so in 00:10:55.588 --> 00:11:00.888 this case what we have is a, a banana. Actually, here, I'll, I'll comment these 00:11:00.888 --> 00:11:06.066 lines out for a second, so we can just see what the image looks like with nothing. So 00:11:06.066 --> 00:11:10.936 there is the puzzle image. And what it show-, I'll tell you. There is a yellow 00:11:10.936 --> 00:11:15.929 banana, and it's on a background of dark red bricks. And in between the red bricks, 00:11:15.929 --> 00:11:20.738 there's little bits of green moss that you can see. So if you fix the image, we 00:11:20.738 --> 00:11:26.287 should be able to see all of those things. So to fix the image. What I wanna do here 00:11:26.287 --> 00:11:31.162 is multiply. Lets, I'm just gonna... I'll just start with five, ten, twenty like 00:11:31.162 --> 00:11:36.294 these. So let's say, well let's guess that the red needs to be multiplied by five, 00:11:36.294 --> 00:11:41.234 the green needs to be multiplied by ten and the blue has to be multiplied by 00:11:41.234 --> 00:11:45.501 twenty. Its just a guess. So, If I do that. Mm-hm, well, well that, that's 00:11:45.501 --> 00:11:50.421 clearly wrong, right? The banana doesn't look quite right. And the bricks have this 00:11:50.421 --> 00:11:55.342 sort of blue cast, so that's not good. So I'll, I'll stick with the assumption that 00:11:55.342 --> 00:11:59.959 the five is first, though. And I'll try the other permutation. Alright, so, well 00:11:59.959 --> 00:12:05.618 maybe it's five, twenty, ten. So I'll try it that way. Oh, and that's worse. 00:12:05.618 --> 00:12:11.343 Alright. So, I don't think the five is first. When I tried the two ways 00:12:11.343 --> 00:12:20.603 with five first. So let's try the ten first, so I'll try ten. 520. Alright, so 00:12:20.603 --> 00:12:26.014 I'm just scaling these up. Ew, hm. Well, I mean I think we're getting there, right? I 00:12:26.014 --> 00:12:31.493 mean the banana looks pretty good but the bricks obviously are, that's not, you 00:12:31.493 --> 00:12:36.430 know, that's purple, they're supposed to be red. So let me try, I'm 00:12:36.430 --> 00:12:41.976 gonna try leaving the five in the middle and just putting the twenty first. Twenty, 00:12:41.976 --> 00:12:47.548 five, ten, let's try that. There we have it. There's the banana, it looks nice and 00:12:47.548 --> 00:12:53.158 yellow. You can see the bricks have this dark red color. And then even little bits 00:12:53.158 --> 00:12:58.492 of, green moss here. That's sort of reassuring. So I'm gonna zoom in on this, 00:12:58.492 --> 00:13:03.750 so I'll show you. [inaudible] some, some of the qualities of it. So partly there's, 00:13:03.750 --> 00:13:08.288 there's the brick. And the moss and the bananas all look good. There's just a 00:13:08.288 --> 00:13:12.540 minor thing but you'll see there's kind of a, see there's sort of this horizontal 00:13:12.540 --> 00:13:17.453 banding. In the banana and that's okay that is that's the way the solution looks 00:13:17.453 --> 00:13:22.695 when you do it quickly. That's happening because when the red, green, and blue when 00:13:22.695 --> 00:13:27.875 they were divided by this numbers by ten or maybe twenty all of those values which 00:13:27.875 --> 00:13:33.117 normally range to zero to fifty five they are compressed down to ranging maybe just 00:13:33.117 --> 00:13:37.737 zero to twelve or zero to twenty four. And as a result... Because they were 00:13:37.737 --> 00:13:41.850 compressed down to that range, there were just a few shades of yellow available, 00:13:41.850 --> 00:13:45.963 when it was compressed down like that. And even when we expand it back up, we're 00:13:45.963 --> 00:13:50.077 still stuck with just those few shades. So that's what we're seeing in these 00:13:50.077 --> 00:13:53.826 horizontal band here, is, there, there were just a few different shades of 00:13:53.826 --> 00:13:58.043 yellow. And so it's unable to capture. I'll zoom in a little bit. It's unable to 00:13:58.043 --> 00:14:02.642 capture. The, the real gradations that you would want. And so that's just sort of a, 00:14:02.642 --> 00:14:07.485 an artifact of the, the way this exercise works. Alright. So the, the exercises to 00:14:07.485 --> 00:14:11.998 follow this section are actually just more of these five, ten, twenty puzzles. So, 00:14:11.998 --> 00:14:13.980 it's something you should check out.