IAT 800
Lecture 8
PImage and PFont
Outline
 Programming
concepts
– PImage
– PFont
Oct 13, Fall 2009
IAT 800
2
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>”);
Oct 13, Fall 2009
IAT 800
3
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.
Oct 13, Fall 2009
IAT 800
4
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.
Oct 13, Fall 2009
IAT 800
5
Accessing Pixels

How do we know which pixel to look for in the
array?
0
1
2
3
4
0
1
2
3
Oct 13, Fall 2009
IAT 800
6
Accessing Pixels

How do we know which pixel to look for in the
array?
0
1
2
3
4
0
1
2
3
0
0
1
2
3
Oct 13, Fall 2009
4
IAT 800
7
Accessing Pixels

How do we know which pixel to look for in the
array?
0
1
2
8
9
3
4
0
1
2
3
0
1
0
1
2
3
Oct 13, Fall 2009
4
5
6
7
IAT 800
8
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
0
1
2
3
Oct 13, Fall 2009
4
5
2
6
7
8
9
10
IAT 800
3
11
12
13
14
15
16
17
18
19
9
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
0
1
2
3
Oct 13, Fall 2009
4
5
2
6
7
8
9
10
IAT 800
3
11
12
13
14
15
16
17
18
19
10
Accessing Pixels
 What
would a piece of code look like that
got a color from a pixel?
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.
 Let’s
look at some applications of this.
Oct 13, Fall 2009
IAT 800
11
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.
Oct 13, Fall 2009
IAT 800
12
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.
Oct 13, Fall 2009
IAT 800
13
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];
Oct 13, Fall 2009
IAT 800
14
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.
Oct 13, Fall 2009
IAT 800
15
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.
Oct 13, Fall 2009
IAT 800
16
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)
Oct 13, Fall 2009
IAT 800
17
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);
Oct 13, Fall 2009
IAT 800
18
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);
Oct 13, Fall 2009
IAT 800
19
textMode sets the alignment
 textAlign(
LEFT );
 textAlign(
RIGHT );
 textAlign(
CENTER );
– x, y is the upper left hand corner of the text
– x, y is the upper right hand corner of the text
– x, y is the upper center of the text
Oct 13, Fall 2009
IAT 800
20
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!
Oct 13, Fall 2009
IAT 800
21
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-Black32.vlw" );
textFont( eur );
}
Oct 13, Fall 2009
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();
}
IAT 800
22