iat 800
DESCRIPTION
IAT 800. Lecture 8 PImage and PFont. Outline. Programming concepts PImage PFont. Loading Images. Loading Images Give your project a name and save. Place the image file in: /sketchbook//data/ Use this code:. PImage im = loadImage(“”);. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/1.jpg)
IAT 800
Lecture 8PImage and PFont
![Page 2: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/2.jpg)
Oct 13, Fall 2009 IAT 800 2
Outline
Programming concepts– PImage– PFont
![Page 3: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/3.jpg)
Oct 13, Fall 2009 IAT 800 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>”);
![Page 4: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/4.jpg)
Oct 13, Fall 2009 IAT 800 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.
![Page 5: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/5.jpg)
Oct 13, Fall 2009 IAT 800 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.
![Page 6: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/6.jpg)
Oct 13, Fall 2009 IAT 800 6
Accessing Pixels
How do we know which pixel to look for in the array?
0 1 32 4
0
1
2
3
![Page 7: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/7.jpg)
Oct 13, Fall 2009 IAT 800 7
Accessing Pixels
How do we know which pixel to look for in the array?
0 1 2 3 4
0 1 32 4
0
1
2
3
0
![Page 8: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/8.jpg)
Oct 13, Fall 2009 IAT 800 8
Accessing Pixels
How do we know which pixel to look for in the array?
0 1 2 3 4 5 6 7 8 9
0 1 32 4
0
1
2
3
0 1
![Page 9: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/9.jpg)
Oct 13, Fall 2009 IAT 800 9
Accessing Pixels
How do we know which pixel to look for in the array?
0 1 2 3 4 5 6 7 8 9 10
11
12
13
14
15
16
17
18
19
0 1 32 4
0
1
2
3
0 1 2 3
![Page 10: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/10.jpg)
Oct 13, Fall 2009 IAT 800 10
Accessing Pixels
Array Index– x + y*width
0 1 2 3 4 5 6 7 8 9 10
11
12
13
14
15
16
17
18
19
0 1 32 4
0
1
2
3
0 1 2 3
(4, 0) = 4 + 0*5 = 4(3, 2) = 3 + 2*5 = 13
![Page 11: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/11.jpg)
Oct 13, Fall 2009 IAT 800 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.
![Page 12: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/12.jpg)
Oct 13, Fall 2009 IAT 800 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.
![Page 13: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/13.jpg)
Oct 13, Fall 2009 IAT 800 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.
![Page 14: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/14.jpg)
Oct 13, Fall 2009 IAT 800 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];
![Page 15: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/15.jpg)
Oct 13, Fall 2009 IAT 800 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.
![Page 16: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/16.jpg)
Oct 13, Fall 2009 IAT 800 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 arrayconvention just makes it easier for us to access the array based on thingslike our x and y values.
![Page 17: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/17.jpg)
Oct 13, Fall 2009 IAT 800 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)
![Page 18: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/18.jpg)
Oct 13, Fall 2009 IAT 800 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);
![Page 19: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/19.jpg)
Oct 13, Fall 2009 IAT 800 19
Use fill() to change the color of text
// the fonts must be located in the data directoryPFont 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);
![Page 20: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/20.jpg)
Oct 13, Fall 2009 IAT 800 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
![Page 21: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/21.jpg)
Oct 13, Fall 2009 IAT 800 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!
![Page 22: IAT 800](https://reader035.vdocuments.us/reader035/viewer/2022062314/56812da3550346895d92c6dc/html5/thumbnails/22.jpg)
Oct 13, Fall 2009 IAT 800 22
Processing examplePImage 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();}