1. IAT 334 Lab 2 Computer Graphics: Rocket, PImage

2. June 4, 2010IAT 3342 Outline  Programming concepts –Programming Computer Graphics –Transformations –Methods –Classes –PImage –PFont

3. Arrays  An array is a contiguous collection of data items of one type  Allows you to structure data –Accessed by index number May 21, 2010IAT 3343

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

5. Creating an array of ints May 21, 2010IAT 3345 // declare int array int[] intArray; // initialize int array intArray = new int[5]; // set first element intArray[0] = 3; // set third element intArray[2] = 5; CodeEffect Name: intArray, Type: int[] 01234 each element has type int 00000 01234 30000 01234 30500

6. June 4, 2010IAT 3346 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);

7. June 4, 2010IAT 3347 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

8. June 4, 2010IAT 3348 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)

9. June 4, 2010IAT 3349 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)

10. June 4, 2010IAT 33410 DrawRocket() with arguments void drawRocket(int x, int y, float rot) { final int halfHeight = 10; final int halfWidth = 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

11. June 4, 2010IAT 33411 Using pushMatrix() and popMatrix() void drawRocket(int x, int y, float rot) { final int halfHeight = 10; final int halfWidth = 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(); }

12. June 4, 2010IAT 33412 Classes

13. June 4, 2010IAT 33413 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

14. June 4, 2010IAT 33414 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

15. June 4, 2010IAT 33415 Defining the rocket class class Rocket { // fields float rotation = 0; float xPos; float yPos; final int halfWidth = 10; final int halfHeight= 10; // constructor Rocket( int initialX, int initialY, float initialRot ) { xPos = initialX; yPos = initialY; rotation = initialRot; }

16. June 4, 2010IAT 33416 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!)

17. June 4, 2010IAT 33417 Adding a draw routine to our Rocket 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 No Arguments!

18. June 4, 2010IAT 33418 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();

19. June 4, 2010IAT 33419 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();

20. PImage June 4, 2010IAT 33420

21. June 4, 2010IAT 33421 Loading Images  Loading Images –Give your project a name and save. –Place the image file in: /sketchbook/ /data/ –Use this code: PImage im = loadImage(“ ”);

22. June 4, 2010IAT 33422 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.

23. June 4, 2010IAT 33423 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.

24. June 4, 2010IAT 33424 Accessing Pixels  How do we know which pixel to look for in the array? 01324 0 1 2 3

25. June 4, 2010IAT 33425 Accessing Pixels  How do we know which pixel to look for in the array? 01234 01324 0 1 2 3 0

26. June 4, 2010IAT 33426 Accessing Pixels  How do we know which pixel to look for in the array? 0123456789 01324 0 1 2 3 01

27. June 4, 2010IAT 33427 Accessing Pixels  How do we know which pixel to look for in the array? 0123456789 10111213141516171819 01324 0 1 2 3 0123

28. June 4, 2010IAT 33428 Accessing Pixels  Array Index –x + y*width 0123456789 10111213141516171819 01324 0 1 2 3 0123 (4, 0) = 4 + 0*5 = 4 (3, 2) = 3 + 2*5 = 13

29. June 4, 2010IAT 33429 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.

30. June 4, 2010IAT 33430 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.

31. June 4, 2010IAT 33431 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.

32. June 4, 2010IAT 33432 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];

33. June 4, 2010IAT 33433 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.

34. June 4, 2010IAT 33434 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.

35. June 4, 2010IAT 33435 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)

36. June 4, 2010IAT 33436 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);

37. June 4, 2010IAT 33437 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);

38. June 4, 2010IAT 33438 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

39. June 4, 2010IAT 33439 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!

40. June 4, 2010IAT 33440 Processing example 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 ); } 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(); }

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 May 21, 2010IAT 33441

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 ) June 4, 2010IAT 33442

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 June 4, 2010IAT 33443

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 June 4, 2010IAT 33444