1 / 44

IAT 334

IAT 334. Lab 2 Computer Graphics: Rocket, PImage. Outline. Programming concepts Programming Computer Graphics Transformations Methods Classes PImage PFont. Arrays. An array is a contiguous collection of data items of one type Allows you to structure data Accessed by index number.

jeri
Télécharger la présentation

IAT 334

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 334 Lab 2 Computer Graphics: Rocket, PImage

  2. Outline • Programming concepts • Programming Computer Graphics • Transformations • Methods • Classes • PImage • PFont IAT 334

  3. Arrays • An array is a contiguous collection of data items of one type • Allows you to structure data • Accessed by index number IAT 334

  4. Effect of creating an int variable Code Effect Name: anInt, Type: int // Single int intanInt; // Put a value in the int anInt = 3; // Type error! anInt = “hello”; Name: anInt, Type: int 3 Name: anInt, Type: int “hello” Can’t shove “hello” into an int IAT 334

  5. Creating an array of ints Code Effect Name: intArray, Type: int[] // declare int array int[]intArray; // initialize int array intArray = new int[5]; // set first element intArray[0] = 3; // set third element intArray[2] = 5; 0 1 2 3 4 0 0 0 0 0 each element has type int 0 1 2 3 4 3 0 0 0 0 0 1 2 3 4 3 0 5 0 0 IAT 334

  6. Drawing a rocket background(0); fill(255); triangle(10, 0, 0, 20, 20, 20); rectMode(CORNERS); rect(5, 20, 8, 23); rect(12, 20, 15, 23); IAT 334

  7. Now I want to draw several rockets • Want several rockets in different locations on the screen • I could copy and paste the code • Need to adjust all the numbers for the new location • Or… define a method IAT 334

  8. First method for drawing a rocket void drawRocket() { fill(255); triangle(10, 0, 0, 20, 20, 20); rectMode(CORNERS); rect(5, 20, 8, 23); rect(12, 20, 15, 23); } Gotcha! Once you start using methods, all code must be in methods (can’t just directly call drawRocket() at the top of the file) IAT 334

  9. Didn’t seem to help much… • Still just draws a rocket at one fixed location • Need arguments that allow me to tell the program where I want the rocket! • Must figure out the relationship between the position and the location of the rest of the parts • Argument variables are available within the method, but not outside (method scope) IAT 334

  10. DrawRocket() with arguments void drawRocket(int x, int y, float rot) { final inthalfHeight = 10; final inthalfWidth = 10; triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight); rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8, halfHeight + 3); rect(halfWidth - 8, halfHeight, halfWidth - 5, halfHeight + 3); } We’re purposely ignoring the arguments for now IAT 334

  11. Using pushMatrix() and popMatrix() void drawRocket(int x, int y, float rot) { final inthalfHeight = 10; final inthalfWidth = 10; pushMatrix(); translate(x, y); rotate(rot); triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight); rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8, halfHeight + 3); rect(halfWidth - 8, halfHeight, halfWidth - 5, halfHeight + 3); popMatrix(); } IAT 334

  12. Classes IAT 334

  13. Classes • Java (Processing) is an object-oriented language • This means that parts of your program that you treat as conceptual things, become things (objects) in the program code • Objects are built from classes • Classes are the blueprint, objects are built from the blueprint • Objects are called instances of classes • Our rocket sure seems like a thing – let’s turn it into a class IAT 334

  14. Parts of a class • Classes define fields, constructors and methods • Fields are the variables that will appear inside every instance of the class • Each instance has it’s own values • Constructors are special methods that define how to build instances (generally, how to set the initial values of fields) • Methods are how you do things to instances IAT 334

  15. Defining the rocket class class Rocket { // fields float rotation = 0; float xPos; float yPos; final inthalfWidth = 10; final inthalfHeight= 10; // constructor Rocket( intinitialX, intinitialY, float initialRot ) { xPos = initialX; yPos = initialY; rotation = initialRot; } } IAT 334

  16. Using the class to create instances • Classes define a type • You can now declare variables of this type and initialize them using the constructor • Like arrays, the keyword new is used to tell Java to create a new object (hmm, so arrays must be objects…) Rocket r1, r2 ; void setup() { r1 = new Rocket(75, 10, 0); r2 = new Rocket(50, 50, PI/2); } • Nice, but my rockets don’t do anything (need methods!) IAT 334

  17. Adding a draw routine to our Rocket No Arguments! void draw() { pushMatrix(); translate(xPos, yPos); rotate(rotation); triangle(0, -halfHeight, -halfWidth, halfHeight, halfWidth, halfHeight); rectMode(CORNERS); rect(-halfWidth + 5, halfHeight, -halfWidth + 8, halfHeight + 3); rect(halfWidth - 8, halfHeight, halfWidth - 5, halfHeight + 3); popMatrix(); } Don’t need arguments because we use the fields But we could define additional arguments if we wanted to IAT 334

  18. Calling methods on objects • You call methods on instances • Think of the method as something your asking the object to do • For example, we can now ask the rockets to draw themselves r1.draw(); • In general, to call a method, take the name of the variable holding the object + “.” + the method name myObject.myMethod(); IAT 334

  19. What else do we want to do to the Rocket? • We may want to change the rotation rotateClockwise(); rotateCounterclockwise(); • We may want to give the rocket a boost fireThrusters(); IAT 334

  20. PImage IAT 334

  21. 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>”); IAT 334

  22. 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. IAT 334

  23. 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 334

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

  25. 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 334

  26. 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 334

  27. 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 334

  28. 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 334

  29. 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. IAT 334

  30. 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 334

  31. 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 334

  32. 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 334

  33. 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 334

  34. 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 334

  35. 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) IAT 334

  36. 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); IAT 334

  37. Use fill() to change the color of text // the fonts must be located in the data directory PFont 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); IAT 334

  38. 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 334

  39. 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 334

  40. 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( 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(); } PImage 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 ); } IAT 334

  41. Reading time int hour() – returns the hour (0 – 23) int minute() – returns the minutes (0 – 59) int second() – returns the seconds (0 – 59) int day() – returns the day of the month (1 -31) int month() – returns the month (1 – 12) int year() – returns the four digit year (e.g. 2004) float milliseconds() – returns number of millis since start of app IAT 334

  42. Review • Graphics: triangle() draw a triangle pushMatrix() copy the top of the matrix stack translate() change XYZ location rotate() rotate about origin … draw in translated & rotated coordinates popMatrix() recover the previous matrix image( img, x, y ) IAT 334

  43. 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 334

  44. Review • Graphics/ OO Example • Rocket • Translated & rotated to its new location • Data of location stored within its class • Each rocket has its own location • And its own data! • PImage is also a class. • Each actual image is an object IAT 334

More Related