IAT 265 Images in Processing PImage Outline g

IAT 265 Images in Processing PImage

Outline g Programming concepts – Classes – PImage – PFont Jun 27, 2014 IAT 265 2

Loading Images g Loading Images – Give your project a name and save. – Place the image file in: • <processing dir>/sketchbook/<project name>/data/ – Use this code: PImage img = load. Image(“<image filename>”); Jun 27, 2014 IAT 265 3

Displaying Images g image( PImage img, int x, int y); shows your image(img, 0, 0) will display your image from the last slide at the top left of the window. Jun 27, 2014 IAT 265 4

Accessing Pixels g The PImage 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 PImage. Jun 27, 2014 IAT 265 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 Jun 27, 2014 IAT 265 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 Jun 27, 2014 3 4 IAT 265 7

Accessing Pixels g 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 2 Jun 27, 2014 3 4 5 6 7 IAT 265 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 0 1 2 Jun 27, 2014 3 4 5 2 6 7 8 9 10 IAT 265 3 11 12 13 14 15 16 17 18 19 9

Accessing Pixels g 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 Jun 27, 2014 3 4 5 2 6 7 8 9 10 IAT 265 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? PImage im = load. Image(“test 1. jpg”); color c 1 = im. pixels[3 + 2*im. width]; stroke(c 1); g Let’s Jun 27, 2014 // get color at (3, 2) // set our line color look at some applications of this. IAT 265 11

Window vs. Image g The drawing window also has a pixels[] array. – You must call load. Pixels(); to get the image from the screen – You don’t need a PImage object. load. Pixels(); color c 2 = pixels[3 + 2*width]; // gives us the color at (3, 2) in the window. Jun 27, 2014 IAT 265 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. Jun 27, 2014 IAT 265 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]; Jun 27, 2014 IAT 265 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. Jun 27, 2014 IAT 265 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. Jun 27, 2014 IAT 265 16

PFont g PFont is the Processing class for manipulating fonts – Like PImage for images g Use PFont with – PFont load. Font() – loads a font – text. Font(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 Jun 27, 2014 IAT 265 17

Simple example // the fonts must be located in the data directory PFont engravers = load. Font("Engravers. MT-48. vlw"); PFont cour = load. Font("Courier-32. vlw"); text. Font(engravers, 44); text("word", 10, 30); text. Font(cour, 44); text("word", 10, 60); Jun 27, 2014 IAT 265 18

Use fill() to change the color of text // the fonts must be located in the data directory PFont engravers = load. Font("Engravers. MT-48. vlw"); PFont cour = load. Font("Courier-32. vlw"); fill( 0, 255, 0 ); text. Font(engravers, 44); text("word", 10, 30); fill( 255, 0, 0 ); text. Font(cour, 44); text("word", 10, 60); Jun 27, 2014 IAT 265 19

text. Mode sets the alignment g text. Align( LEFT ); g text. Align( RIGHT ); g text. Align( 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 Jun 27, 2014 IAT 265 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 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 g So you can make textual machines where text moves around the screen! Jun 27, 2014 IAT 265 21

Processing example PImage im ; PFont engrvr ; PFont courier ; void setup() { size( 600, 600 ); im = load. Image( "cdshaw. 96. jpg" ); for( int i = 600 ; i >= 0 ; i -= 50 ) image( im, i, i ); engrvr = load. Font( "Engravers. MT-48. vlw" ); courier = load. Font( "Courier-32. vlw" ); text. Font( engrvr ); } Jun 27, 2014 void draw( ) { image( im, mouse. X-370, mouse. Y-210 ); color c 1 = im. pixels[365 + 210 * im. width ] ; load. Pixels(); c 1 = pixels[ 3 + 2 * width ] ; stroke( c 1 ); fill( c 1 ); text. Align( LEFT ); ellipse( mouse. X, mouse. Y, 20, 10 ); text. Font( engrvr, 44 ); text( "Yo!", mouse. X + 20, mouse. Y + 20 ); fill( 255, 0, 0); push. Matrix(); text. Align( RIGHT ); rotate( 0. 2); text. Font( courier, 44 ); text( "Yo? ", mouse. X, mouse. Y + 100 ); pop. Matrix(); } IAT 265 22

Review g Graphics: image( img, x, y ) g PImage is also a class. – Each actual image is an object Jun 27, 2014 IAT 265 23

Review g Object Oriented Programming – Class – Instance – Fields – Methods – Constructor Jun 27, 2014 ------ a type you define one variable of a class variables within a class functions that act within a class create an instance of a class IAT 265 24