Transcript Computers as an Expressive Medium
Computation as an Expressive Medium
Lab 4: Image Manipulation Jason Alderman
Today’s Exciting Schedule!
Using Images (and Stuff) Loading Images Displaying Images Accessing Pixels 2D Arrays [Coding for a captive audience!]
Using Images (and Stuff)
A lot of you have already done this! Whoo!
Processing is very lenient with location and filetype ..as long as you’re only running locally .
But wait! I need to EXPORT!! Here’s how: Give your project a name and save Find your .pde file, and in the same directory, new folder called
data
make a Place the image files ( .JPG
or .GIF
or .TGA
only!
) in it Presto! Anything (font, sound, image) the
data
applet folder will get when you export bundled you put in into your .jar
(I speak in pictures, too.)
data some.jpg
Loading Images
In the code, just use the following lines: PImage im; [in variable declaration] im = loadImage(“
You really don’t want to load an asset into memory every single time the screen redraws , do you?! (You CAN put it in draw()…just make sure you know what you’re doing…)
Displaying Images
image() shows your image.
image(im, 0, 0) will display your image from the last slide at the top left of the window.
Accessing Pixels
The PImage class allows you to access the RGB values of each individual pixel of the image, with the pixels[] array.
You can get the width and height of the image file using the width and height fields of PImage.
Accessing Pixels
How do we know which pixel to look for in the array?
0 1 2 3 4 2 3 0 1
Accessing Pixels
How do we know which pixel to look for in the array?
0 1 2 3 4 0 1 2 3 0 0 1 2 3 4
Accessing Pixels
How do we know which pixel to look for in the array?
0 1 2 3 4 0 1 2 3 0 1 0 1 2 3 4 5 6 7 8 9
Accessing Pixels
How do we know which pixel to look for in the array?
0 1 2 3 4 0 1 2 3 0 1 0 1 2 3 4 5 6 7 8 9 2 3 10 11 12 13 14 15 16 17 18 19
Accessing Pixels
Array Index x + y*width 0 1 2 3 4 2 3 0 1 (4, 0) = 4 + 0*5 = 4 (3, 2) = 3 + 2*5 = 13 0 1 0 1 2 3 4 5 6 7 8 9 2 3 10 11 12 13 14 15 16 17 18 19
Accessing Pixels
What would a piece of code look like that got a color from a pixel?
PImage 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.
Let’s look at some applications of this.
Window vs. Image
The drawing window also has a pixels[] array. This array holds all the colors in the current window, and is accessed in the same way, but you don’t need a PImage object.
color c2 = pixels[3 + 2*width]; // gives us the color at (3, 2) in the window.
Window vs. Image
When would we want to use both of these?
Use the Window’s pixels if you want to draw more things based on the image that’s already on the screen.
Use the Image’s pixels if you want to manipulate the pixels of the image before you draw them.
2D Arrays
Java lets us make Arrays of Arrays, otherwise called 2D Arrays. These are very useful for accessing arrays of pixels like the ones we’ve been working with.
int[][] bob = new int[3][4]; color[][] pixels2d = new color[200][200];
2D Arrays
Processing doesn’t provide us with a 2D array of pixels to use, so let’s develop a class that will make manipulating pixels easier.
2D Arrays
Interestingly, 2D Arrays are just covering up a 1D array much like the 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 array convention just makes it easier for us to access the array based on things like our x and y values.
Onward!
Left to do: Look at some example image manipulation.
Come up with a couple simple image tool ideas and discuss and/or code them.
Talk about subclasses and inheritance…?
(Yes? No?! Not yet?!) Fig. 4: Image manipulation