1. IAT 265
PImage and PFont

2. Outline
Programming concepts
PImage
PFont
May 24, 2016
IAT 265

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. Accessing Pixels Array Index x + y*width 1 2 3 4 5 6 7 8 9 1 2 3 41 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. Processing example void draw( ) { image( im, mouseX-370, mouseY-210 );
color c1 = im.pixels[ * im.width ] ;
loadPixels();
c1 = pixels[ * 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 );
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