IAT 800 Lecture 8 Oct 13 Fall 2006

IAT 800 Lecture 8 Oct 13, Fall 2006 IAT 800

Outline g Programming concepts – BImage BFont – Creating XImage – Typography Oct 13, Fall 2006 IAT 800 2

Loading Images g 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 = load. Image(“<image filename>”); Oct 13, Fall 2006 IAT 800 3

Displaying Images g 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 4

Accessing Pixels g The BImage class allows you to access the RGB values of each individual pixel of the image, with the pixels[] array. g 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 5

Accessing Pixels g How do we know which pixel to look for in the array? 0 1 2 3 4 0 1 2 3 Oct 13, Fall 2006 IAT 800 6

Accessing Pixels g 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 2006 4 IAT 800 7

Accessing Pixels g How do we know which pixel to look for in the array? 0 1 2 3 4 0 1 2 3 Oct 13, Fall 2006 4 5 6 7 8 9 IAT 800 8

Accessing Pixels g How do we know which pixel to look for in the array? 0 1 2 3 4 0 1 2 3 Oct 13, Fall 2006 4 5 2 6 7 8 9 10 IAT 800 3 11 12 13 14 15 16 17 18 19 9

Accessing Pixels 0 1 2 3 4 (4, 0) = 4 + 0*5 = 4 (3, 2) = 3 + 2*5 = 13 0 1 2 g 3 – x + y*width 0 1 2 Array Index 3 Oct 13, Fall 2006 4 5 2 6 7 8 9 10 IAT 800 3 11 12 13 14 15 16 17 18 19 10

Accessing Pixels g What would a piece of code look like that got a color from a pixel? BImage im = load. Image(“test 1. jpg”); color c 1 = im. pixels[3 + 2*im. width]; // gets color at (3, 2) stroke(c 1); // set our line color so we can draw with this color. g Let’s look at some applications of this. Oct 13, Fall 2006 IAT 800 11

Window vs. Image g 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 c 2 = pixels[3 + 2*width]; // gives us the color at (3, 2) in the window. Oct 13, Fall 2006 IAT 800 12

Window vs. Image g 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 13

2 D Arrays g Java lets us make Arrays of Arrays, otherwise called 2 D 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[][] pixels 2 d = new color[200]; Oct 13, Fall 2006 IAT 800 14

2 D Arrays g Processing doesn’t provide us with a 2 D array of pixels to use, so let’s develop a class that will make manipulating pixels easier. Oct 13, Fall 2006 IAT 800 15

2 D Arrays g Interestingly, 2 D Arrays are just covering up a 1 D array much like the pixels[] array. color[][] pixels 2 d = new color[20]; color c 2 = pixels 2 d[3][2]; color[] pixels 1 d = new color[400]; color c 1 = pixels 1 d[3 + 2*20]; Underneath, these two pieces of code do the same thing. The 2 D array convention just makes it easier for us to access the array based on things like our x and y values. Oct 13, Fall 2006 IAT 800 16

BFont g BFont is the Processing class for manipulating fonts – Like BImage for images g Use BFont with – BFont load. Font() – loads a font – text. Font(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 17

Simple example // the fonts must be located in the data directory BFont meta. Bold = load. Font("Meta-Bold. vlw. gz"); BFont bauer. Bodoni = load. Font("Bauer. Bodoni. vlw. gz"); text. Font(meta. Bold, 44); text("word", 10, 30); text. Font(bauer. Bodini, 44); text("word", 10, 60); Oct 13, Fall 2006 IAT 800 18

Use fill() to change the color of text // the fonts must be located in the data directory BFont meta. Bold = load. Font("Meta-Bold. vlw. gz"); BFont bauer. Bodoni = load. Font("Bauer. Bodoni. vlw. gz"); fill(0, 255, 0) text. Font(meta. Bold, 44); text("word", 10, 30); text. Font(bauer. Bodini, 44); fill(255, 0, 0); text("word", 10, 60); Oct 13, Fall 2006 IAT 800 19

text. Mode sets the alignment g text. Mode(ALIGN_LEFT) – x, y is the upper left hand corner of the text g text. Mode(ALIGN_RIGHT) – x, y is the upper right hand corner of the text g text. Mode(ALIGN_CENTER) – x, y is the upper center of the text Oct 13, Fall 2006 IAT 800 20

Producing text effects g All the transform methods apply to drawing text – That means you can translate, rotate, and scale text g 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 g So you can make textual machines where text moves around the screen! Oct 13, Fall 2006 IAT 800 21

Processing examples g Typing Oct 13, Fall 2006 IAT 800 22