[MUSIC] Hi there. So for today's module will be talking about images and playing with images, and showing you how you can actually manipulate images and different aspects of images. So the first thing you'll notice is that we have a new playground. There are two things to keep in mind. One are the sources and resources. So We will need the RGBAImage.swf file that we'll show you and you'll need. So let us actually add that as a new file. So we'll Add Files to Sources. And we'll add the RGBAImage.swf. And in Resources we'll add a file, an image of the forest. So, what this file is, I won't go into the details right now. But essentially, it provides a mechanism that we can individual access pixels in an image. So, we can change the red, green, or blue channel and individually manipulate the pixels, which is something we'll need for this module. So, first thing is, let us load the forest image, in the playground. So once we put this to playground runs, so you can see it's an image with a width of 160 and a height of 120, and we can actually show it here. So you see an image with lots of colors, greens, reds, and yellows that we're going to be manipulating in the module today. Now, what we need to do is actually convert this UI image to a RGBA image. So, manipulating UI image, by itself, is not possible, at least not easily, so what we need to do is convert it into an RGBA image. Just provided through the RGBAimage.swift. And now we have essentially, a variable that contains image pixels that can be individually manipulated. So the first thing we need to do, let's actually change one of the pixels. So we choose, let's say pixel at location x is 10 and y is 20. Now we'll have to create an index as to where in this RGB image this pixel corresponds to. And I'll explain that in a second. And we can actually read what this pixel contains, as a first step. Okay, so let's see what we've done. So we set two constants x and y to be equals ten. We then created one index which indexes are the RGBA array. And the way the pixels are actually stacked in the RGBA array is that, they're actually every column is sequentially stacked. So to find a particular index, you have to go through a certain number of columns. And within the remaining row, go through a series of pixels. So it's the y index times the widths of the image. So, since you are going to multiple widths of the image, and then from there, you're adding in the last, I guess, the last column. You're indexing through x to find a particular pixel. So this allows us to take an x, y coordinate. As we have it in this line. And convert it to a single index that we can index a one dimensional array. And this commonly done with this RGB image, so that you can store 2D images as a single stacked 1D array. Okay, so now we have this pixel, and what we can do is actually read the red, green, and blue channel of this pixel. So let's go ahead and do that. So we can see that at location 10, 10 on this image, which is kind of a greenish location, the red channel is 10, from 0 to 255. The green is 50 and the blue is 24. So this corresponds to slightly a greenish kind of pixel, which is what you would expect here. Now what we could also do is actually set the pixels to be a different color. Because pixel here is a variable. Now we could actually change it by assigning it to values. So what we could do is actually set the red to be 255, the green to be 0, and the blue to be 0 as well. So we're setting that pixel to be red. And now what we need to do essentially, is to write this pixel back into my RGBA variable. So then, the my RGBA is now changing. Then what we need to do is essentially, convert this back to a UI image that could be displayed. So now, this is going to run, and we now have a new UI image here, which we can have a look at. Now, if you were to run this, and you were to look at location 10,10 which is roughly here. You will notice a red pixel, which is hard to see in this screen here. But, in fact it is there. So, this one pixel we've now changed to be red. Now, one question we could ask is what is the average color that this image has. So, for example, what is the average green, red, and blue values that this image has. So we can actually go ahead and compute this as follows. So we can define a, essentially, a accumulators for the red, green and blue channel. And we can now go through the image, so we can go through all the x and y pixels. So we have one for loop going from y from zero to the height of the image, and from x from zero to the width of the image, of course going to just one below the width. So let's, we'll close this, so this loop right now, just loops through all the image locations, but doesn't do anything right now. So let's actually define, again, our pixels and index here. So here we're defining an index to be, a particular index in the image define by this x and this y. And the pixel who corresponds to the current pixel in this x, y loop that we're looking at right now. So, it's the image with a width of 160 and a height of 120 which means this loop it's done 19,200 times. Okay, so this loop right now isn't doing anything interesting. But let's now compute the total red and green values. So we can do that by Having a total red being that's accumulation of all the red pixel values, green, same accumulation of green. And blue being an accumulation of the blue value. So these three variables now contain a total red, total green, total blue values for the entire image. This is going to get repeated 19,000 times to compute the value. So what we need to do now is see how many times actually, how many pixels in total we have. And you can get a sense that we have in fact 19,200. And divide the totals by the 19,200. So here we can simply state this, so count is the number of pixels. Again, this is going to be 19,200 because that's the width times the height. And to get the average red, average green an average blue, we divide the total red, divide it by the count. Same for the total green and same for the total blue. So after we've gone through all these processes what we get is, for these three constants, we get the average of what this image is. For red the average is 122, for green the average is 112 and for blue the average is 51. Of course, now that we know what these averages are, we don't have to run this every single time in the playground. So we could simply comment this out. And just let the, redefine these average variables to be what we found in the previous section. So you ran this once to get these averages. But again, we don't need to run it again. So now we know what the average color values are, and we have this image. So what we want to do essentially, is filter the image in a way that, let's say the red channel is amplifying. So we're creating a red boosting filter, something you might see often in places like Instagram that the image filter essentially applies a certain amplification on the red pixels in the image, so it looks more red. So if you have red lipstick it becomes even more red. Or if you have a red flower, as we do in this case It actually, the red is amplified. So the way we would do this, again, we would have to go through all the pixels in the image. So let's create our standard four loop and indexing. So we have that here. So what we're doing is going through all the y pixels, all the x pixels, and computing these. The index of where we actually will be accessing, and the particular pixel corresponding to that. So right now this loop is not doing anything, but it's going to run 19,200 times. And what we're going to do here, is to compute how different is each pixel from the average. So, let's call that the red difference and we're focusing on red but you could, of course, focus on any color channel. [SOUND] So the red different constant is the difference between the current pixel, the red value, and the average red which we had before. So is it more red? Is it less red than on average? So this variable will actually let us know that. And what we're going to do is that if it is more red, which means this red difference will be above zero, Then we're going to do something to the image. So we're going to actually compute a new red pixel. That's would be as follows. So essentially let's be careful in terms of what this line is doing. So a new red pixel is the average red. Plus five times the difference. So essentially, it's amplifying the difference between the average and the current pixel by a factor of five. So if the pixel is just a bit more red, it becomes five times more red. If it's a lot more red, it becomes, again, five times more red. So it's an amplification of the red value. And we have to make sure that when you do this, you don't actually make this go beyond 55 which is the limit for the red channel. So we have to the minimum of 255 and a new pixel and red value redefined. It's a good idea to make sure that it actually isn't negative. There's no way for this to become negative. But in fact, in cases where you're But pixels this could become negative, so we take the max of zero and this, so this ensures the range is from zero to 255 so it caps it at zero and at 255. And the last thing we need to do is because of this we have to make sure it's type cast to u and eight so there's a type casting that happens here. To make sure this is correctly cast before we sign it to the red pixel. So before any kind of manipulation of a pixel, make sure you do this casting before you sign it back to a pixel. Okay, so having done this, it's great. But still it doesn't change damage. So here, we have to make sure that this pixel is actually written back to the My RGBA image, which is what we have here. So this is going to now repeat. And every single time it's going to store the pixel back in the original location, original RGBA image. That now we can have a look at, and we can see what it looks like. Now notice that, although this is being repeated 9,200 times, the number of times the pixel's more red than average only happens 9,197 times. So, this if statement only is called about half the time. Which makes sense, because we wanna be more than average. And now what we're going to do is to display the new image that we have, so we have to take this RGB image and store it or convert it to a UI image which we do by the two UI image function. So again this will repeat and then we'll see a new. UI image that we can display. >> So now that's complete. Let's have a look at this new image. So you can see that this image is now more red. All the red areas, or the areas that had more than average red are actually amplified. So let's look at the original image that we actually had as well. So every time you make a change this whole thing repeats. So it'll take a second for this image to be Shown on the playground. But what it does, we can actually compare what the new image after the red amplification looks like verses the image we had before. So here let's show this image as well. So you can now compare the difference between this image The filtered image and the original image. So all the red values here are amplified, whereas here you see mostly green elements and a few red areas. So this is our first imaging filter that we've created, but now you can create many more based on this. So one of the things we could do is a red attenuation filter. So if the pixel, for example, is Is more than the usual red. You actually can attenuate the redness. So here, instead of multiplying the red by 5, here we're going to divide the red by 5. Let's see what a difference that this makes on the image. So what we would expect to see is that areas that would normally be more red Become less red. So this takes a few seconds to compute. So we're almost there. So you can see now in this image Most of the red valleys are taken out. It's a lot more green. So you can create may different types of filters that affect the red channel, all the channels. So you can be very creative as to what impact, what things you do to the pixels that impacts the whole image. And that's essentially how filters are made on your favorite social imaging applications that can attenuate colors and adjust certain color change channels To get a certain effect.
