IAT 800

IAT 334Lab 2Computer Graphics: Rocket,PImage1June 4, 2010IAT 3342OutlineProgramming conceptsProgramming Computer GraphicsTransformationsMethodsClassesPImagePFont

2ArraysAn array is a contiguous collection of data items of one typeAllows you to structure dataAccessed by index numberMay 21, 2010IAT 33433Effect of creating an int variableMay 21, 2010IAT 3344// Single intint anInt;

// Put a value in the intanInt = 3;

// Type error!anInt = hello;CodeEffectName: anInt, Type: int3Name: anInt, Type: intName: anInt, Type: inthelloCant shove hello into an int4Creating an array of intsMay 21, 2010IAT 3345// declare int arrayint[] intArray;

// initialize int arrayintArray = new int[5];

// set first elementintArray[0] = 3;

// set third elementintArray[2] = 5; CodeEffectName: intArray, Type: int[]01234each element has type int00000012343000001234305005June 4, 2010IAT 3346Drawing a rocketbackground(0);fill(255);triangle(10, 0, 0, 20, 20, 20);rectMode(CORNERS);rect(5, 20, 8, 23);rect(12, 20, 15, 23);6June 4, 2010IAT 3347Now I want to draw several rocketsWant several rockets in different locations on the screen

I could copy and paste the codeNeed to adjust all the numbers for the new location

Or define a method7June 4, 2010IAT 3348First method for drawing a rocketvoid 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 (cant just directly call drawRocket() at the top of the file)8June 4, 2010IAT 3349Didnt seem to help muchStill 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)9June 4, 2010IAT 33410DrawRocket() with argumentsvoid 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);}

Were purposely ignoring the arguments for now

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

11June 4, 2010IAT 33412Classes12June 4, 2010IAT 33413ClassesJava (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 classesClasses are the blueprint, objects are built from the blueprintObjects are called instances of classes

Our rocket sure seems like a thing lets turn it into a class13June 4, 2010IAT 33414Parts of a classClasses define fields, constructors and methods

Fields are the variables that will appear inside every instance of the classEach instance has its 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 instances14June 4, 2010IAT 33415Defining the rocket classclass Rocket {// fieldsfloat rotation = 0; float xPos; float yPos; final int halfWidth = 10; final int halfHeight= 10;

// constructorRocket( int initialX, int initialY, float initialRot ) {xPos = initialX; yPos = initialY;rotation = initialRot;}}15June 4, 2010IAT 33416Using the class to create instancesClasses define a typeYou can now declare variables of this type and initialize them using the constructorLike 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 dont do anything (need methods!)16June 4, 2010IAT 33417Adding a draw routine to our Rocketvoid 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();}

Dont need arguments because we use the fieldsBut we could define additional arguments if we wanted toNo Arguments! 17June 4, 2010IAT 33418Calling methods on objectsYou 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 themselvesr1.draw();

In general, to call a method, take the name of the variable holding the object + . + the method namemyObject.myMethod();18June 4, 2010IAT 33419What else do we want to do to the Rocket?We may want to change the rotationrotateClockwise();rotateCounterclockwise();

We may want to give the rocket a boostfireThrusters();19PImageJune 4, 2010IAT 3342020June 4, 2010IAT 33421Loading ImagesLoading ImagesGive your project a name and save.Place the image file in:/sketchbook//data/Use this code:

PImage im = loadImage();21June 4, 2010IAT 33422Displaying Imagesimage() shows your image.image(im, 0, 0) will display your image from the last slide at the top left of the window.22June 4, 2010IAT 33423Accessing PixelsThe 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.23June 4, 2010IAT 33424Accessing PixelsHow do we know which pixel to look for in the array?01324012324June 4, 2010IAT 33425Accessing PixelsHow do we know which pixel to look for in the array?01234013240123025June 4, 2010IAT 33426Accessing PixelsHow do we know which pixel to look for in the array?01234567890132401230126June 4, 2010IAT 33427Accessing PixelsHow do we know which pixel to look for in the array?012345678910111213141516171819013240123012327June 4, 2010IAT 33428Accessing PixelsArray Indexx + y*width0123456789101112131415161718190132401230123(4, 0) = 4 + 0*5 = 4(3, 2) = 3 + 2*5 = 1328June 4, 2010IAT 33429Accessing PixelsWhat would a piece of code look like that got a color from a pixel?

Lets 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.29June 4, 2010IAT 33430Window vs. ImageThe drawing window also has a pixels[] array. You must call loadPixels(); to get the image from the screen You dont need a PImage object.

loadPixels();color c2 = pixels[3 + 2*width]; // gives us the color at (3, 2) in the window.30June 4, 2010IAT 33431Window vs. ImageWhen would we want to use both of these?Use the Windows pixels if you want to draw more things based on the image thats already on the screen.Use the Images pixels if you want to manipulate the pixels of the image before you draw them.31June 4, 2010IAT 334322D ArraysJava lets us make Arrays of Arrays, otherwise called 2D Arrays. These are very useful for accessing arrays of pixels like the ones weve been working with.int[][] bob = new int[3][4];color[][] pixels2d = new color[200][200];32June 4, 2010IAT 334332D ArraysProcessing doesnt provide us with a 2D array of pixels to use, so lets develop a class that will make manipulating pixels easier.33June 4, 2010IAT 334342D ArraysInterestingly, 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 arrayconvention just makes it easier for us to access the array based on thingslike our x and y values.34June 4, 2010IAT 33435PFont PFont is the Processing class for manipulating fontsLike PImage for images

Use PFont with PFont loadFont() loads a fonttextFont(PFont font, int size) sets the current fonttext(String str, int x, int y) draws a string in the current font at the current locationAlso text(String str, float x, float y)35June 4, 2010IAT 33436Simple example// the fonts must be located in the data directoryPFont 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);

36June 4, 2010IAT 33437Use fill() to change the color of text // the fonts must be located in the data directoryPFont 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); 37June 4, 2010IAT 33438textMode sets the alignmenttextAlign( 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

38June 4, 2010IAT 33439Producing text effectsAll the transform methods apply to drawing textThat means you can translate, rotate, and scale text

Combined with draw(), this means you can move text around the screen in real timeRemember, 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!39June 4, 2010IAT 33440Processing examplePImage 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();}40Reading timeint 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 appMay 21, 2010IAT 3344141ReviewGraphics:triangle()draw a trianglepushMatrix() copy the top of the matrix stacktranslate()change XYZ locationrotate()rotate about origin draw in translated & rotated coordinatespopMatrix()recover the previous matrix image( img, x, y )

June 4, 2010IAT 3344242ReviewObject Oriented ProgrammingClass-- a type you defineInstance-- one variable of a classFields-- variables within a classMethods-- functions that act within a classConstructor-- create an instance of a classJune 4, 2010IAT 3344343ReviewGraphics/ OO ExampleRocketTranslated & rotated to its new locationData of location stored within its classEach rocket has its own locationAnd its own data!PImage is also a class. Each actual image is an objectJune 4, 2010IAT 3344444