240 likes | 383 Views
IAT 265. Images in Processing PImage. Outline. Programming concepts Classes PImage PFont. Loading Images. Loading Images Give your project a name and save. Place the image file in: <processing dir>/sketchbook/<project name>/data/ Use this code:.
E N D
IAT 265 Images in Processing PImage
Outline • Programming concepts • Classes • PImage • PFont IAT 265
Loading Images • Loading Images • Give your project a name and save. • Place the image file in: • <processing dir>/sketchbook/<project name>/data/ • Use this code: PImageimg= loadImage(“<image filename>”); IAT 265
Displaying Images • image( PImageimg, int x, int y);shows your image. image(img, 0, 0) will display your image from the last slide at the top left of the window. IAT 265
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. IAT 265
Accessing Pixels • How do we know which pixel to look for in the array? 0 1 2 3 4 0 1 2 3 IAT 265
Accessing Pixels • How do we know which pixel to look for in the array? 0 1 2 3 4 0 1 2 3 0 IAT 265
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 IAT 265
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 2 3 IAT 265
Accessing Pixels • Array Index • x + y*width 0 1 2 3 4 (4, 0) = 4 + 0*5 = 4 (3, 2) = 3 + 2*5 = 13 0 1 2 3 0 1 2 3 IAT 265
Accessing Pixels • What would a piece of code look like that got a color from a pixel? • Let’s look at some applications of this. PImageim = loadImage(“test1.jpg”); color c1 = im.pixels[3 + 2*im.width]; // get color at (3, 2) stroke(c1); // set our line color IAT 265
Window vs. Image • The drawing window also has a pixels[] array. • You must call loadPixels(); to get the image from the screen • You don’t need a PImage object. loadPixels(); color c2 = pixels[3 + 2*width]; // gives us the color at (3, 2) in the window. IAT 265
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. IAT 265
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]; IAT 265
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. IAT 265
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. IAT 265
PFont • PFont is the Processing class for manipulating fonts • Like PImage for images • Use PFont with • PFontloadFont()– loads a font • textFont(PFont font, int size)– sets the current font • text(String str, int x, int y) – draws a string in the current font at the current location IAT 265
Simple example // the fonts must be located in the data directory PFont engravers = loadFont("EngraversMT-48.vlw"); PFontcour = loadFont("Courier-32.vlw"); textFont(engravers, 44); text("word", 10, 30); textFont(cour, 44); text("word", 10, 60); IAT 265
Use fill() to change the color of text // the fonts must be located in the data directory PFont engravers = loadFont("EngraversMT-48.vlw"); PFontcour = loadFont("Courier-32.vlw"); fill( 0, 255, 0 ); textFont(engravers, 44); text("word", 10, 30); fill( 255, 0, 0 ); textFont(cour, 44); text("word", 10, 60); IAT 265
textMode sets the alignment • textAlign( LEFT ); • x, y is the upper left hand corner of the text • textAlign( RIGHT ); • x, y is the upper right hand corner of the text • textAlign( CENTER ); • x, y is the upper center of the text IAT 265
Producing text effects • All the transform methods apply to drawing text • That means you can translate, rotate, and scale text • Combined with draw(), this means you can move text around the screen in real time • Remember, the movement of the rocket and asteroids in our asteroids example was just translation and rotation • So you can make textual machines where text moves around the screen! IAT 265
Processing example void draw( ) { image( im, mouseX-370, mouseY-210 ); color c1 = im.pixels[365 + 210 * im.width ] ; loadPixels(); c1 = pixels[ 3 + 2 * width ] ; stroke( c1 ); fill( c1 ); textAlign( LEFT ); ellipse( mouseX, mouseY, 20, 10 ); textFont( engrvr, 44 ); text( "Yo!", mouseX + 20, mouseY + 20 ); fill( 255, 0, 0); pushMatrix(); textAlign( RIGHT ); rotate( 0.2); textFont( courier, 44 ); text( "Yo?", mouseX, mouseY + 100 ); popMatrix(); } PImageim ; PFontengrvr ; PFont courier ; void setup() { size( 600, 600 ); im = loadImage( "cdshaw.96.jpg" ); for( inti = 600 ; i >= 0 ; i -= 50 ) image( im, i, i ); engrvr = loadFont( "EngraversMT-48.vlw" ); courier = loadFont( "Courier-32.vlw" ); textFont( engrvr ); } IAT 265
Review • Graphics: image( img, x, y ) • PImage is also a class. • Each actual image is an object IAT 265
Review • Object Oriented Programming • Class -- a type you define • Instance -- one variable of a class • Fields -- variables within a class • Methods -- functions that act within a class • Constructor -- create an instance of a class IAT 265