220 likes | 307 Views
IAT 800. Lecture 8 PImage and PFont. Outline. Programming concepts 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:. PImage im = loadImage(“<image filename>”);.
E N D
IAT 800 Lecture 8 PImage and PFont
Outline • Programming concepts • PImage • PFont IAT 800
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: PImage im = loadImage(“<image filename>”); IAT 800
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. IAT 800
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 800
Accessing Pixels • How do we know which pixel to look for in the array? 0 1 2 3 4 0 1 2 3 IAT 800
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 800
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 800
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 800
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 800
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. 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. IAT 800
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 800
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 800
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 800
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 800
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 800
PFont • PFont is the Processing class for manipulating fonts • Like PImage for images • Use PFont with • PFont loadFont() – 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 • Also text(String str, float x, float y) IAT 800
Simple example // the fonts must be located in the data directory PFont eureka = loadFont("Eureka90.vlw"); PFont zig = loadFont("Ziggurat-HTF-Black-32.vlw"); textFont(eureka, 44); text("word", 10, 30); textFont(zig, 44); text("word", 10, 60); IAT 800
Use fill() to change the color of text // the fonts must be located in the data directory PFont eureka = loadFont("Eureka90.vlw"); PFont zig = loadFont("Ziggurat-HTF-Black-32.vlw"); fill( 0, 255, 0 ); textFont( eureka, 44); text( "word", 10, 30); textFont( zig, 44); fill( 255, 0, 0); text( "word", 10, 60); IAT 800
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 800
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 800
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( eur, 44 ); text( "Yo!", mouseX + 20, mouseY + 20 ); fill( 255, 0, 0); pushMatrix(); textAlign( RIGHT ); rotate( 0.2); textFont( zig, 44 ); text( "Yo?", mouseX, mouseY + 100 ); popMatrix(); } PImage im ; PFont eur ; PFont zig ; void setup() { size( 600, 600 ); im = loadImage( "cdshaw.96.jpg" ); for( int i = 600 ; i >= 0 ; i -= 50 ) image( im, i, i ); eur = loadFont( "Eureka90.vlw" ); zig = loadFont( "Ziggurat-HTF-Black-32.vlw" ); textFont( eur ); } IAT 800