IAT 800

Lecture 8

Oct 13, Fall 2006 IAT 800 2

Outline

Programming concepts– BImage BFont– Creating XImage

– Typography

Oct 13, Fall 2006 IAT 800 3

Loading Images

Loading Images– Give your project a name and save.– Place the image file in:

• <processing dir>/sketchbook/default/<project name>/data/

– Use this code:BImage im = loadImage(“<image filename>”);

Oct 13, Fall 2006 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.

Oct 13, Fall 2006 IAT 800 5

Accessing Pixels

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

Oct 13, Fall 2006 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

Oct 13, Fall 2006 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

Oct 13, Fall 2006 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

Oct 13, Fall 2006 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

Oct 13, Fall 2006 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

Oct 13, Fall 2006 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.

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

Oct 13, Fall 2006 IAT 800 12

Window vs. Image

The drawing window also has a pixels[] array. This array holds all the colors in the current window, and is accessed in the same way, but you don’t need a BImage object.

color c2 = pixels[3 + 2*width]; // gives us the color at (3, 2) in the window.

Oct 13, Fall 2006 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.

Oct 13, Fall 2006 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];

Oct 13, Fall 2006 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.

Oct 13, Fall 2006 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.

Oct 13, Fall 2006 IAT 800 17

BFont

BFont is the Processing class for manipulating fonts– Like BImage for images

Use BFont with – BFont loadFont() – loads a font– textFont(BFont 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 2006 IAT 800 18

Simple example

// the fonts must be located in the data directoryBFont metaBold = loadFont("Meta-Bold.vlw.gz");BFont bauerBodoni =

loadFont("BauerBodoni.vlw.gz");textFont(metaBold, 44); text("word", 10, 30);textFont(bauerBodini, 44);text("word", 10, 60);

Oct 13, Fall 2006 IAT 800 19

Use fill() to change the color of text

// the fonts must be located in the data directoryBFont metaBold = loadFont("Meta-Bold.vlw.gz");BFont bauerBodoni = loadFont("BauerBodoni.vlw.gz");fill(0, 255, 0)textFont(metaBold, 44); text("word", 10, 30);textFont(bauerBodini, 44);fill(255, 0, 0);text("word", 10, 60);

Oct 13, Fall 2006 IAT 800 20

textMode sets the alignment textMode(ALIGN_LEFT)

– x, y is the upper left hand corner of the text

textMode(ALIGN_RIGHT)– x, y is the upper right hand corner of the

text

textMode(ALIGN_CENTER)– x, y is the upper center of the text

Oct 13, Fall 2006 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 loop(), 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 2006 IAT 800 22

Processing examples Typing