IAT%20800

1
IAT 800

• Lecture 8
• PImage and PFont

2
Outline

• Programming concepts
• PImage
• PFont

3
Loading Images

• Loading Images
• Give your project a name and save.
• Place the image file in
• ltprocessing dirgt/sketchbook/ltproject namegt/data/
• Use this code

PImage im loadImage(ltimage filenamegt)
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.

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.

6
Accessing Pixels

• How do we know which pixel to look for in the
  array?

0
1
3
2
4




0
1
2
3
7
Accessing Pixels

• How do we know which pixel to look for in the
  array?

0
1
3
2
4




0
1
2
3
0
0 1 2 3 4
8
Accessing Pixels

• How do we know which pixel to look for in the
  array?

0
1
3
2
4




0
1
2
3
0
1
0 1 2 3 4 5 6 7 8 9
9
Accessing Pixels

• How do we know which pixel to look for in the
  array?

0
1
3
2
4




0
1
2
3
0
1
2
3
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
10
Accessing Pixels

• Array Index
• x ywidth

0
1
3
2
4




(4, 0) 4 05 4 (3, 2) 3 25 13
0
1
2
3
0
1
2
3
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
11
Accessing Pixels

• What would a piece of code look like that got a
  color from a pixel?
• Lets look at some applications of this.

PImage im loadImage(test1.jpg) color c1
im.pixels3 2im.width // gets color at (3,
2) stroke(c1) // set our line color so we can
draw with this color.
12
Window vs. Image

• The drawing window also has a pixels array.
• You must call loadPixels() to get the image from
  the screen
• You dont need a PImage object.

loadPixels() color c2 pixels3 2width //
gives us the color at (3, 2) in the window.
13
Window vs. Image

• When would we want to use both of these?
• Use the Windows pixels if you want to draw more
  things based on the image thats already on the
  screen.
• Use the Images pixels if you want to manipulate
  the pixels of the image before you draw them.

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 weve
  been working with.

int bob new int34 color pixels2d
new color200200
15
2D Arrays

• Processing doesnt provide us with a 2D array of
  pixels to use, so lets develop a class that will
  make manipulating pixels easier.

16
2D Arrays

• Interestingly, 2D Arrays are just covering up a
  1D array much like the pixels array.

color pixels2d new color2020 color c2
pixels2d32
color pixels1d new color400 color c1
pixels1d3 220
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
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
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
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
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
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
Processing example
void draw( ) image( im, mouseX-370,
mouseY-210 ) color c1 im.pixels365 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 gt 0 i - 50 )
• image( im, i, i )
• eur loadFont( "Eureka90.vlw" )
• zig loadFont( "Ziggurat-HTF-Black-32.vlw" )
• textFont( eur )