1 / 24

IAT 265

IAT 265. Images in Processing PImage. Outline. Programming concepts Classes PImage PFont. 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:.

roy
Download Presentation

IAT 265

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IAT 265 Images in Processing PImage

  2. Outline • Programming concepts • Classes • PImage • PFont IAT 265

  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: PImageimg= loadImage(“<image filename>”); IAT 265

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

  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. IAT 265

  6. Accessing Pixels • How do we know which pixel to look for in the array? 0 1 2 3 4 0 1 2 3 IAT 265

  7. Accessing Pixels • How do we know which pixel to look for in the array? 0 1 2 3 4 0 1 2 3 0 IAT 265

  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 IAT 265

  9. 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 2 3 IAT 265

  10. 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 2 3 IAT 265

  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. PImageim = loadImage(“test1.jpg”); color c1 = im.pixels[3 + 2*im.width]; // get color at (3, 2) stroke(c1); // set our line color IAT 265

  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. IAT 265

  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. IAT 265

  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]; IAT 265

  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. IAT 265

  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 array convention just makes it easier for us to access the array based on things like our x and y values. IAT 265

  17. PFont • PFont is the Processing class for manipulating fonts • Like PImage for images • Use PFont with • PFontloadFont()– 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 IAT 265

  18. Simple example // the fonts must be located in the data directory PFont engravers = loadFont("EngraversMT-48.vlw"); PFontcour = loadFont("Courier-32.vlw"); textFont(engravers, 44); text("word", 10, 30); textFont(cour, 44); text("word", 10, 60); IAT 265

  19. Use fill() to change the color of text // the fonts must be located in the data directory PFont engravers = loadFont("EngraversMT-48.vlw"); PFontcour = loadFont("Courier-32.vlw"); fill( 0, 255, 0 ); textFont(engravers, 44); text("word", 10, 30); fill( 255, 0, 0 ); textFont(cour, 44); text("word", 10, 60); IAT 265

  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 IAT 265

  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! IAT 265

  22. Processing example 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( engrvr, 44 ); text( "Yo!", mouseX + 20, mouseY + 20 ); fill( 255, 0, 0); pushMatrix(); textAlign( RIGHT ); rotate( 0.2); textFont( courier, 44 ); text( "Yo?", mouseX, mouseY + 100 ); popMatrix(); } PImageim ; PFontengrvr ; PFont courier ; void setup() { size( 600, 600 ); im = loadImage( "cdshaw.96.jpg" ); for( inti = 600 ; i >= 0 ; i -= 50 ) image( im, i, i ); engrvr = loadFont( "EngraversMT-48.vlw" ); courier = loadFont( "Courier-32.vlw" ); textFont( engrvr ); } IAT 265

  23. Review • Graphics: image( img, x, y ) • PImage is also a class. • Each actual image is an object IAT 265

  24. Review • Object Oriented Programming • Class -- a type you define • Instance -- one variable of a class • Fields -- variables within a class • Methods -- functions that act within a class • Constructor -- create an instance of a class IAT 265

More Related