IAT 334

Lab 2Computer Graphics: Rocket,PImage

June 4, 2010 IAT 334 2

Outline

g Programming concepts– Programming Computer Graphics– Transformations– Methods– Classes– PImage– PFont

Arrays

g An array is a contiguous collection of data items of one type

g Allows you to structure data– Accessed by index number

May 21, 2010 IAT 334 3

Effect of creating an int variable

May 21, 2010 IAT 334 4

// Single int

int anInt;

// Put a value in the int

anInt = 3;

// Type error!

anInt = “hello”;

Code Effect

Name: anInt, Type: int

3

Name: anInt, Type: int

Name: anInt, Type: int

“hello”

Can’t shove “hello” into an int

Creating an array of ints

May 21, 2010 IAT 334 5

// declare int array

int[] intArray;

// initialize int array

intArray = new int[5];

// set first element

intArray[0] = 3;

// set third element

intArray[2] = 5;

Code Effect

Name: intArray, Type: int[]

0 1 2 3 4

each element has type int

0 0 0 0 0

0 1 2 3 4

3 0 0 0 0

0 1 2 3 4

3 0 5 0 0

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

June 4, 2010 IAT 334 7

Now I want to draw several rockets

g Want several rockets in different locations on the screen

g I could copy and paste the code– Need to adjust all the numbers for the

new location

g Or… define a method

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

June 4, 2010 IAT 334 9

Didn’t seem to help much…

g Still just draws a rocket at one fixed location

g 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

g Argument variables are available within the method, but not outside (method scope)

June 4, 2010 IAT 334 10

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, 2010 IAT 334 11

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, 2010 IAT 334 12

Classes

June 4, 2010 IAT 334 13

Classes

g Java (Processing) is an object-oriented language

g This means that parts of your program that you treat as conceptual things, become things (objects) in the program code

g Objects are built from classes– Classes are the blueprint, objects are built from the blueprint– Objects are called instances of classes

g Our rocket sure seems like a thing – let’s turn it into a class

June 4, 2010 IAT 334 14

Parts of a class

g Classes define fields, constructors and methods

g Fields are the variables that will appear inside every instance of the class– Each instance has it’s own values

g Constructors are special methods that define how to build instances (generally, how to set the initial values of fields)

g Methods are how you do things to instances

June 4, 2010 IAT 334 15

Defining the rocket class

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

}}

June 4, 2010 IAT 334 16

Using the class to create instances

g Classes define a typeg You can now declare variables of this type and initialize

them using the constructorg 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);

}

g Nice, but my rockets don’t do anything (need methods!)

June 4, 2010 IAT 334 17

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 fieldsBut we could define additional arguments if we wanted to

No Arguments!

June 4, 2010 IAT 334 18

Calling methods on objects

g You call methods on instances

g Think of the method as something your asking the object to do

g For example, we can now ask the rockets to draw themselvesr1.draw();

g In general, to call a method, take the name of the variable holding the object + “.” + the method namemyObject.myMethod();

June 4, 2010 IAT 334 19

What else do we want to do to the Rocket?

g We may want to change the rotationrotateClockwise();rotateCounterclockwise();

g We may want to give the rocket a boostfireThrusters();

PImage

June 4, 2010 IAT 334 20

June 4, 2010 IAT 334 21

Loading Images

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

June 4, 2010 IAT 334 22

Displaying Images

g 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, 2010 IAT 334 23

Accessing Pixels

g The PImage class allows you to access the RGB values of each individual pixel of the image, with the pixels[] array.

g You can get the width and height of the image file using the width and height fields of PImage.

June 4, 2010 IAT 334 24

Accessing Pixels

g How do we know which pixel to look for in the array?

0 1 32 4

0

1

2

3

June 4, 2010 IAT 334 25

Accessing Pixels

g How do we know which pixel to look for in the array?

0 1 2 3 4

0 1 32 4

0

1

2

3

0

June 4, 2010 IAT 334 26

Accessing Pixels

g How do we know which pixel to look for in the array?

0 1 2 3 4 5 6 7 8 9

0 1 32 4

0

1

2

3

0 1

June 4, 2010 IAT 334 27

Accessing Pixels

g How do we know which pixel to look for in the array?

0 1 2 3 4 5 6 7 8 9 10

11

12

13

14

15

16

17

18

19

0 1 32 4

0

1

2

3

0 1 2 3

June 4, 2010 IAT 334 28

Accessing Pixels

g Array Index– x + y*width

0 1 2 3 4 5 6 7 8 9 10

11

12

13

14

15

16

17

18

19

0 1 32 4

0

1

2

3

0 1 2 3

(4, 0) = 4 + 0*5 = 4

(3, 2) = 3 + 2*5 = 13

June 4, 2010 IAT 334 29

Accessing Pixels

g What would a piece of code look like that got a color from a pixel?

g 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, 2010 IAT 334 30

Window vs. Image

g 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, 2010 IAT 334 31

Window vs. Image

g 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, 2010 IAT 334 32

2D Arrays

g 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, 2010 IAT 334 33

2D Arrays

g 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, 2010 IAT 334 34

2D Arrays

g 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, 2010 IAT 334 35

PFont

g PFont is the Processing class for manipulating fonts– Like PImage for images

g 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, 2010 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);

June 4, 2010 IAT 334 37

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

June 4, 2010 IAT 334 38

textMode sets the alignmentg textAlign( LEFT );

– x, y is the upper left hand corner of the text

g textAlign( RIGHT );– x, y is the upper right hand corner of the

text

g textAlign( CENTER );– x, y is the upper center of the text

June 4, 2010 IAT 334 39

Producing text effectsg All the transform methods apply to drawing

text– That means you can translate, rotate, and scale

text

g 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

g So you can make textual machines where text moves around the screen!

June 4, 2010 IAT 334 40

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

}

Reading 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 app

May 21, 2010 IAT 334 41

Review

g Graphics:triangle() draw a trianglepushMatrix() copy the top of the matrix

stacktranslate() change XYZ locationrotate() rotate about origin… draw in translated & rotated coordinates

popMatrix() recover the previous matrix image( img, x, y )June 4, 2010 IAT 334 42

Review

g 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, 2010 IAT 334 43

Review

g 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, 2010 IAT 334 44