Image Processing

um so I'm Olivia I uh work at fathom information design we're over in Boston um and we do a lot of our work is in data visualization and information design and we use processing for that which is what we're going to be using today so processing is both a community a development environment and a language to kind of make it as simple as possible to get up and running with something visual on the screen um so you can use it for making 3D you can do what we're going to do image processing kind of looking at the pixel information of images or kind of pulling in data and creating Things based on that um so would do any of you guys have an idea of what you think of when you hear image processing or what that might be yeah yeah yeah so a lot of it is about kind of manipulating the information that you get when you kind of take a picture um usually it's to enhance it so whether that means you're making it more clear to be able to kind of analyze information in there or enhancing it in an aesthetic way kind of like with Instagram or SnapChat um so kind of doing that through code is what we're going to do today um and it uses mix of math and computer science so a lot of it is these mathematical functions that manipulate the different pieces of the image information and we're going to use computer science with processing to kind of mix it all together and create our filters so there are a lot of different things you can do it can be a simple as uh kind of enhancing the contrast so in this case this is a photo that's taken underwater on the left and you can't really see anything so later people have gone in and just enhanced the contrast which usually means playing with the values the light and the Dark of the image to start to make out the different shapes and then they can use it for analysis or to put in a book um sometimes we take images I you guys were building cameras earlier using visible light x-rays are another way of taking images but you're using x-rays instead of the visible light wavelengths and then again kind of enhancing those images so that we can find different medical anomalies you can also use x-rays to look at layers behind paint so a lot of times you might hear a story about oh they found that like a person was in this painting and then it got painted over the way they know that is through sort of taking these different images and enhancing the information in them and one that I think is really cool is uh so a lot of space images that you see are mixes of image data from different telescopes so this is actually a combination from three different telescopes I think the blue is x-ray information the gold is information from Hubble and then the red might be a different uh x-ray telescope so kind of merging all of those together and coloring them in a certain way so that people can start to get scientific knowledge from the photos and then there's also this kind of um cyclical process of so now we have cameras that are really good at recognizing faces so that our pictures of our family can be way better but the way we were able to do that is by looking at pictures of faces and kind of teaching the camera what to look for so kind of using images to enhance later images and what we're going to focus on today is kind of manipulating the uh color information of our photos for purely aesthetic purposes so Instagram uses a set of filters which really is just a set of mathematical functions that are applied to the image information and then spit back out your image with its new colors so in order for us to be able to do this I'm going to talk a little bit about the different ways you might access the color information of your photo and kind of how computers see color you might have talked about this a little bit with the cameras earlier so uh it's a good refresher but let's start with a grayscale image so on the left is our image of the baboon and when you have a grayscale image everything is either is on a range of black to white that can be stored as a number usually 0 to 255 and then over here it's just kind of plotting what those values are so you start to get a sense of kind of how IM information can be seen as just sort of a set of numbers a set of values this is up close at like one square of your image so again every pixel in a grayscale image will have one value um and so it can be zero for black and 255 for white and then a color image is usually just like three layers of that information so if you're looking at an image in RGB mode which is pretty standard for sort of how digital cameras work usually how computers are thinking about color information uh it's three layers of those 0 to 255 values but in this case it's like from black to Pure red or black to pure green and black to pure blue and then when we kind of add those all together with the correct weights you'll get your full color image so this is one way to start pulling out the information and playing with it so in processing you'll see in the filters that sometimes people will go through and for every pixel take out what is the red what is the green and what is the blue of that pixel and then you can just say Okay add 10 to red and that will totally change your image so this is just an example of like what happens when you start playing with the different RGB values um and we'll see an example of a different kind of color scheme in a second but when so if this is my original image over here I've started like bumping up the blue or like taking down the red so the whole image has this color shift but it also starts to manipulate the lights and the darks because in RGB mode the lightness and the Darkness of an image is tied to the color of the image so sometimes you might want to edit those separately and that's where HSB mode is really helpful so Hue saturation and brightness so you can also uh through processing take the color information of your image but separate how bright it is what color it is and how intense that color is so in this case what we're looking at across here is where someone has if this is their original image they've shifted the Hue so Hue is like the color you see um but they haven't changed the lightness or the intensity of the color um if we think of an apple as red and this is also this is chalk which is also technically red but it looks more like pink because it has a lower saturation so this is like when you have like a pure red versus something that's lower saturation and then cherries are also red but they have a darker value so that's the brightness so again pure red versus something with a lot more black in it so you can also think of this as like if you were mixing colors with paint if it needs a lot of white to create that color then it probably has a lower saturation if you needed a lot of black to make that color then it probably has a lower value so here you can start to play with your image and say I want everything to be darker but I want it to stay the same color or like with the butterfly I want to like so like in this case I the one on the right I changed just the color but I didn't change any of the saturation or the value so you can see how kind of like these are equally bright and this one in the middle starts to get more gray cuz as I've manipulated the RGB values I've also manipulated like how light it is so now we can start to make filters of our own um and the filters that we have kind of set up for you guys to play through are these are some of them uh so there's this one which is kind of like posterization so so a lot of the time um like if you want to print something as a poster you kind of have to get it as close as possible to like black and white as opposed to like having all the range of uh gray values so kind of just messing around and seeing like what happens when you start to take out those middle values of gray um and then also manipulating the colors this one is not so much playing with the color information but if you have your image dimensions and you want to add something like a vignette to it being able to say here's where the center of my image is and then kind of how based on that you can add a color on top and so adding this ring on top um this one it allows as you click around the image it'll pick one color so this is using like Hue saturation and brightness so it'll pick the Hue and then light up all the other pixels with that Hue and get rid of the Hue and all the other ones so kind of seeing how many colors there are in an image or being able to highlight like just the red pieces and then the last one is so I don't know how many of you guys have ever played around with like Photoshop but they have this thing called blend modes which is like what a lot of people use to apply different colors on top and so that just says if you put a color on top how and what's the math that it's taking with that color on top and the image on the bottom and how it like adds them together so this is trying to like imitate the overlay mode which just kind of does this like taking part of one color and part of the other and then spitting back out a new color so those are the different filters we have today [Applause]