Slides for Lecture 8
Download
Report
Transcript Slides for Lecture 8
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