1. IAT 800 Lecture 8 PImage and PFont

2. Oct 13, Fall 2009IAT 8002 Outline  Programming concepts –PImage –PFont

3. Oct 13, Fall 2009IAT 8003 Loading Images  Loading Images –Give your project a name and save. –Place the image file in: /sketchbook/ /data/ –Use this code: PImage im = loadImage(“ ”);

4. Oct 13, Fall 2009IAT 8004 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.

5. Oct 13, Fall 2009IAT 8005 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.

6. Oct 13, Fall 2009IAT 8006 Accessing Pixels  How do we know which pixel to look for in the array? 01324 0 1 2 3

7. Oct 13, Fall 2009IAT 8007 Accessing Pixels  How do we know which pixel to look for in the array? 01234 01324 0 1 2 3 0

8. Oct 13, Fall 2009IAT 8008 Accessing Pixels  How do we know which pixel to look for in the array? 0123456789 01324 0 1 2 3 01

9. Oct 13, Fall 2009IAT 8009 Accessing Pixels  How do we know which pixel to look for in the array? 0123456789 10111213141516171819 01324 0 1 2 3 0123

10. Oct 13, Fall 2009IAT 80010 Accessing Pixels  Array Index –x + y*width 0123456789 10111213141516171819 01324 0 1 2 3 0123 (4, 0) = 4 + 0*5 = 4 (3, 2) = 3 + 2*5 = 13

11. Oct 13, Fall 2009IAT 80011 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.

12. Oct 13, Fall 2009IAT 80012 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.

13. Oct 13, Fall 2009IAT 80013 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.

14. Oct 13, Fall 2009IAT 80014 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];

15. Oct 13, Fall 2009IAT 80015 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.

16. Oct 13, Fall 2009IAT 80016 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.

17. Oct 13, Fall 2009IAT 80017 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)

18. Oct 13, Fall 2009IAT 80018 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);

19. Oct 13, Fall 2009IAT 80019 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);

20. Oct 13, Fall 2009IAT 80020 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

21. Oct 13, Fall 2009IAT 80021 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!

22. Oct 13, Fall 2009IAT 80022 Processing example 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 ); } 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(); }