IAT 265 PImage and PFont

Outline Programming concepts PImage PFont May 24, 2016 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: PImage im = loadImage(“<image filename>”); May 24, 2016 IAT 265

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. May 24, 2016 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. May 24, 2016 IAT 265

Accessing Pixels How do we know which pixel to look for in the array? 1 2 3 4 1 2 3 May 24, 2016 IAT 265

Accessing Pixels How do we know which pixel to look for in the array? 1 2 3 4 1 2 3 1 2 3 4 May 24, 2016 IAT 265

Accessing Pixels How do we know which pixel to look for in the array? 1 2 3 4 1 2 3 1 1 2 3 4 5 6 7 8 9 May 24, 2016 IAT 265

Accessing Pixels How do we know which pixel to look for in the array? 1 2 3 4 1 2 3 1 2 3 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 May 24, 2016 IAT 265

Accessing Pixels Array Index x + y*width 1 2 3 4 5 6 7 8 9 1 2 3 4 1 2 3 4 (4, 0) = 4 + 0*5 = 4 (3, 2) = 3 + 2*5 = 13 1 2 3 1 2 3 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 May 24, 2016 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. 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. May 24, 2016 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. May 24, 2016 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. May 24, 2016 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]; May 24, 2016 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. May 24, 2016 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. May 24, 2016 IAT 265

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) May 24, 2016 IAT 265

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); May 24, 2016 IAT 265

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); May 24, 2016 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 May 24, 2016 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! May 24, 2016 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( 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 ); } May 24, 2016 IAT 265