Computers as an Expressive MediumLoading ImagesDisplaying ImagesAccessing PixelsSlide 5Slide 6Slide 7Slide 8Slide 9Slide 10Window vs. ImageSlide 122D ArraysSlide 14Slide 15Onward!Computers as an Computers as an Expressive MediumExpressive MediumLab 4: Image ManipulationLab 4: Image ManipulationMayhew SeaveyMayhew SeaveyLoading ImagesLoading ImagesWanna know how? Here’s how!Wanna know how? Here’s how!Give your project a name and save.Give your project a name and save.Place the image file in:Place the image file in:<processing dir>/sketchbook/default/<project <processing dir>/sketchbook/default/<project name>/data/name>/data/Use this code:Use this code:NOTE: You MUST put the image in this directory NOTE: You MUST put the image in this directory in order for Processing to export it to the in order for Processing to export it to the Courseware.Courseware.BImage im = loadImage(“<image filename>”);Displaying ImagesDisplaying Imagesimage() shows your image.image() shows your image.image(im, 0, 0) will display your image image(im, 0, 0) will display your image from the last slide at the top left of the from the last slide at the top left of the window.window.Accessing PixelsAccessing PixelsThe BImage class allows you to The BImage class allows you to access the RGB values of each access the RGB values of each individual pixel of the image, with the individual pixel of the image, with the pixels[] array.pixels[] array.You can get the width and height of You can get the width and height of the image file using the width and the image file using the width and height fields of BImage.height fields of BImage.Accessing PixelsAccessing PixelsHow do we know which pixel to look for in How do we know which pixel to look for in the array?the array?0 1 32 40123Accessing PixelsAccessing PixelsHow do we know which pixel to look for in How do we know which pixel to look for in the array?the array?00112233440 1 32 401230Accessing PixelsAccessing PixelsHow do we know which pixel to look for in How do we know which pixel to look for in the array?the array?001122334455667788990 1 32 401230 1Accessing PixelsAccessing PixelsHow do we know which pixel to look for in How do we know which pixel to look for in the array?the array?0011223344556677889911001111112211331144115511661177118811990 1 32 401230 1 2 3Accessing PixelsAccessing PixelsArray IndexArray Indexx + y*widthx + y*width0011223344556677889911001111112211331144115511661177118811990 1 32 401230 1 2 3(4, 0) = 4 + 0*5 = 4(3, 2) = 3 + 2*5 = 13Accessing PixelsAccessing PixelsWhat would a piece of code look like What would a piece of code look like that got a color from a pixel?that got a color from a pixel?Let’s look at some applications of this.Let’s look at some applications of this.BImage im = loadImage(“test1.jpg”);color c1 = im.pixels[3 + 2*im.width]; // gets color at (3, 2)stroke(c1); // set our line color so we can draw with this color.Window vs. ImageWindow vs. ImageThe drawing window also has a The drawing window also has a pixels[] array. This array holds all the pixels[] array. This array holds all the colors in the current window, and is colors in the current window, and is accessed in the same way, but you accessed in the same way, but you don’t need a BImage object.don’t need a BImage object.color c2 = pixels[3 + 2*width]; // gives us the color at (3, 2) in the window.Window vs. ImageWindow vs. ImageWhen would we want to use both of When would we want to use both of these?these?Use the Window’s pixels if you want to Use the Window’s pixels if you want to draw more things based on the image draw more things based on the image that’s already on the screen.that’s already on the screen.Use the Image’s pixels if you want to Use the Image’s pixels if you want to manipulate the pixels of the image manipulate the pixels of the image before you draw them.before you draw them.2D Arrays2D ArraysJava lets us make Arrays of Arrays, Java lets us make Arrays of Arrays, otherwise called 2D Arrays. These otherwise called 2D Arrays. These are very useful for accessing arrays are very useful for accessing arrays of pixels like the ones we’ve been of pixels like the ones we’ve been working with.working with.int[][] bob = new int[3][4];color[][] pixels2d = new color[200][200];2D Arrays2D ArraysProcessing doesn’t provide us with a Processing doesn’t provide us with a 2D array of pixels to use, so let’s 2D array of pixels to use, so let’s develop a class that will make develop a class that will make manipulating pixels easier.manipulating pixels easier.2D Arrays2D ArraysInterestingly, 2D Arrays are just Interestingly, 2D Arrays are just covering up a 1D array much like the covering up a 1D array much like the pixels[] array. pixels[] array. color[][] pixels2d = new color[20][20];color c2 = pixels2d[3][2];color[] pixels1d = new color[400];color c1 = pixels1d[3 + 2*20];Underneath, these two pieces of code do the same thing. The 2D arrayconvention just makes it easier for us to access the array based on thingslike our x and y values.Onward!Onward!Left to do:Left to do:Look at some Look at some example image example image manipulation.manipulation.Come up with a Come up with a couple simple couple simple image tool ideas image tool ideas and discuss and/or and discuss and/or code them.code them.Recap inheritance.Recap
View Full Document
Unlocking...