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, 2010 IAT 334 3
4. 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
5. 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
7. June 4, 2010 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
8. 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)
9. June 4, 2010 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)
10. 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
11. 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();
}
13. June 4, 2010 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
14. June 4, 2010 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
15. June 4, 2010 IAT 334 15
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, 2010 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!)
17. 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 fields
But we could define additional arguments if we wanted to
No Arguments!
18. June 4, 2010 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();
19. June 4, 2010 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();
21. June 4, 2010 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>”);
22. June 4, 2010 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.
23. June 4, 2010 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.
24. June 4, 2010 IAT 334 24
Accessing Pixels
How do we know which pixel to look for in the
array?
0 1 3
2 4
0
1
2
3
25. June 4, 2010 IAT 334 25
Accessing Pixels
How do we know which pixel to look for in the
array?
0 1 2 3 4
0 1 3
2 4
0
1
2
3
0
26. June 4, 2010 IAT 334 26
Accessing Pixels
How do we know which pixel to look for in the
array?
0 1 2 3 4 5 6 7 8 9
0 1 3
2 4
0
1
2
3
0 1
27. June 4, 2010 IAT 334 27
Accessing Pixels
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 3
2 4
0
1
2
3
0 1 2 3
29. June 4, 2010 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.
30. June 4, 2010 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.
31. June 4, 2010 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.
32. June 4, 2010 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];
33. June 4, 2010 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.
34. June 4, 2010 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.
35. June 4, 2010 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)
36. 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);
37. June 4, 2010 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);
38. June 4, 2010 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
39. June 4, 2010 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!
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, 2010 IAT 334 41
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, 2010 IAT 334 42
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, 2010 IAT 334 43
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, 2010 IAT 334 44
