IAT 334 Lab 2 Computer Graphics: Rocket, PImage

June 4, 2010IAT 3342 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 May 21, 2010IAT 3343

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

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[] each element has type int

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);

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

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)

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)

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

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

June 4, 2010IAT Classes

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

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

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

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

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

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

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

PImage June 4, 2010IAT 33420

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

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

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

June 4, 2010IAT Accessing Pixels  How do we know which pixel to look for in the array?

June 4, 2010IAT Accessing Pixels  How do we know which pixel to look for in the array?

June 4, 2010IAT Accessing Pixels  How do we know which pixel to look for in the array?

June 4, 2010IAT Accessing Pixels  How do we know which pixel to look for in the array?

June 4, 2010IAT Accessing Pixels  Array Index –x + y*width (4, 0) = 4 + 0*5 = 4 (3, 2) = 3 + 2*5 = 13

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

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

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

June 4, 2010IAT D 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];

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

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

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

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

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

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

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

June 4, 2010IAT 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[ * im.width ] ; loadPixels(); c1 = pixels[ * 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 ); popMatrix(); }

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

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

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

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