|
ICM / NotesWeek4
Introduction To Computational Media- Week 4Modified from Shawn Van Every's ICM notes Classes and ObjectsLet's take another look at classes and objects. As we talked about last week, a class is a blueprint for an object. For example, a Human has an eye color, a height, a shoe size, and an age. But "Jim" has green eyes, is 67" high, a shoe size of 10, and is 32 years old. Human is the class, and "Jim" is the object. All Humans eat, sleep, and move, but "Jim" will eat, sleep, and move in ways unique to him. How about a ball? What are attributes that all balls share? They are a certain size, they have a certain color, they move, and they bounce. A class for a ball might look like this: Look closely at the comments to figure out the syntax. class Ball{//Everything in the class must be surrounded by a code block. There is no "()". By convention, classes start with uppercase letters
//any global variables you declare will be global for this class only.
int ballSize = 0;
int x, y; //keeps track of the location of the ball
int speedX, speedY; //keeps track of the speed of the ball
color rgb; //color of the ball the "color" variable type is unique to Processing and holds color info.
/* Ball Constructor. The "_" underscores on the arguement variables
are to differentiate them from the global variables in the class.
The constructor method is your chance to do some setting up right off the bat.
Anything inside the this method will be run when someone types Ball something = new Ball(....);
*/
Ball(int _ballSize, int _x, int _y, int _speedX, int _speedY, color _rgb){
ballSize = _ballSize;
x = _x;
y = _y;
rgb = _rgb;
speedX = _speedX;
speedY = _speedY;
}
// Methods for ball. move() will calculate the location, and drawBall() will draw it to the screen.
void move(){
//move the ball
x = x + speedX;
y = y + speedY;
//determine if the ball hit a wall
int halfBall = ballSize / 2;
if (x > width- halfBall || x < halfBall){
speedX = speedX *-1;
}
if (y > height- halfBall || y < halfBall){
speedY = speedY *-1;
}
}
void drawBall(){
fill(rgb);
ellipse(x,y,ballSize, ballSize);
}
}
The main class is pretty simple, as most of our code now lives inside the ball class. //Construct new a "Ball"
//arguments are ballSize, initial XY location, initial XY speed, and color
Ball ball1 = new Ball(10, 6,50, 3,4, color(255,0,0));
void setup(){
size(400, 400);
noStroke();
}
void draw(){
background(0);
ball1.move();
ball1.drawBall();
}
See the demo here ---- Another class and object demo here. Try taking the code and making more than one object. Loops (once again)Computers are very good at doing some things, particularly good at following exact instructions and very good at doing the same thing over and over again without complaint (unlike us). One example of of this repetition is Processing's built-in draw function or method. This is a loop; a block of code that gets repeatedly called until the program is terminated or some other condition is met. In the case of the draw() function, that stop condition is set by calling the noLoop() function. This is an example of a Processing program that only goes through the draw function once. int x = 10;
void setup()
{
size(200, 200);
stroke(255);
framerate(30);
}
void draw()
{
background(0);
x++;
if (x >= width)
{
x = 0;
}
line(x, 0, x, height);
noLoop();
}
The draw() function is called as it should be (automagically) but at the end of the first time through, noLoop() is called which sets a condition (somewhere that we can not see) that states that the draw() function should not be called repeatedly. If we are to comment out the code that calls noLoop() or add a function that does the opposite, calls loop(), which sets the same condition to true when the mouse is pressed and again calls noLoop() when the mouse is released we can illustrate. int x = 10;
void setup()
{
size(200, 200);
stroke(255);
framerate(30);
noLoop();
}
void draw()
{
background(0);
x++;
if (x >= width)
{
x = 0;
}
line(x, 0, x, height);
}
void mousePressed()
{
// Tell Processing to loop the draw function
loop();
}
void mouseReleased()
{
// Tell Processing not to loop the draw function
noLoop();
}
This does not mean that execution of the program has suspended. Other functions may be running and the program is still listening for mouse input. Another noLoop demo. This one uses the keyPressed() call back function. While LoopsOf course, we can create our own loops and have our own conditions on whether or not they should run. void setup()
{
size(100,100);
}
void draw()
{
whileExample(); // Call our function with the while loop
}
void whileExample()
{
int x = 10;
while (x < 100) // Just like an if statement only keep doing it until the condition is no longer true
{
line(x,0,x,height);
x = x + 10;
}
}
while() statements can contain variables as well as constants. change the while statement to while(x < mouseX) to add more interactivity. For Loops For loops are very much like while loops with the exception that they specify an initialization, a condition and what to update. Generally, these three are all related. In our while loop example above, we also had the same thing but in multiple steps. int x = 10; // Initialization
while (x < 100) // Condition
{
line(x,0,x,height);
x = x + 10; // Update or increment
}
The corresponding for loop: for (int x = 0; x < 100; x = x + 10)
{
line(x,0,x,height);
}
Much easier and less to remember because it all done in one step.. Lots and lots of thingsArrays Arrays are a convenient way to handle multiple items of the same data type (integers, objects or anything else). This is a representation of an int array containing 9 elements: ------------------------------------------
| 0 | 1 | 4 | 9 | 16 | 25 | 36 | 49 | 64 |
------------------------------------------
The code to create this array might be something like the following: int[] myArray = {0, 1, 4, 9, 16, 25, 36, 49, 64};
or it could be done using a for loop int[] myArray = new int[9];
for (int i = 0; i < myArray.length; i++)
{
myArray[i] = i * i;
}
nameOfArray.length gives you the number of elements in the array. nameOfArray[indexNumber] gives you the individual element of the array at a given index number. Remember, index numbers start at 0 so the first index of the array is 0 and the last one in our array is 8. For Loops, as you can see above, are great for dealing with arrays. Start at 0 and go to the length of the array to perform the same operation on each element in the array. You can pull information out of an array using a similar for loop: for (int i = 0; i < myArray.length; i++)
{
int currentNumber = myArray[i];
println("index " + i + " contains " + currentNumber);
}
Arrays and ObjectsIf we develop a Ball Class such as follows: class Ball{
int ballSize = 0;
int[] location = new int[2]; // [0] is x location, [1] is y location
int[] speed = new int[2]; //[0] is x speed, [1] is y speed
color rgb;
//Ball Constructor. The "_" underscores on the arguement variables
//are to differentiate them from the global variables in the class.
Ball(int _ballSize, int _x, int _y, int _speedX, int _speedY, color _rgb){
ballSize = _ballSize;
location[0] = _x;
location[1] = _y;
rgb = _rgb;
speed[0] = _speedX;
speed[1] = _speedY;
}
void move(){
//move the ball
//iterate through the location and speed arrays
for (int i = 0; i < location.length; i++){
location[i] += speed[i];
}
//determine if the ball hit a wall
int halfBall = ballSize / 2;
if (location[0] > width- halfBall || location[0] < halfBall){
speed[0] = speed[0] *-1;
}
if (location[1] > height- halfBall || location[1] < halfBall){
speed[1] = speed[1] *-1;
}
}
void drawBall(){
fill(rgb);
ellipse(location[0], location[1], ballSize, ballSize);
}
}
And decide that we want multiple Balls, we can use an "array" of Ball objects like so: //create null Balls and put them in a new array
Ball[] balls = new Ball[15];
void setup(){
size(400, 400);
//Construct balls in the array.
//arguements are ballSize, initial XY location, initial XY speed, and color
for (int i = 0; i < balls.length; i++){
//get random numbers for the constructor arguements
int rndSize = randomInt(5,30);
int rndX = randomInt(rndSize, width-rndSize);
int rndY = randomInt(rndSize, height-rndSize);
int rndSpeedX = randomInt(-6,6);
int rndSpeedY = randomInt(-6,6);
//make sure the ball has some speed
if (rndSpeedX == 0 && rndSpeedY == 0){
rndSpeedX = rndSpeedY = 1;
}
color rndColor = color(randomInt(255), randomInt(255), randomInt(255));
balls[i] = new Ball(rndSize, rndX, rndY, rndSpeedX, rndSpeedY, rndColor);
}
noStroke();
}
/* % MAIN DRAW LOOP % */
void draw(){
background(0);
for (int i = 0; i < balls.length; i++){
balls[i].move();
balls[i].drawBall();
}
}
//I got sick of writing int(random(a,b)) over and over again, so I wrote
//my own function that does the same thing.
//This function will return a random int instead of a float. Takes 2 arguements.
int randomInt(int a, int b){
int theInt = int(random(a,b));
return theInt;
}
//This function will return a random int instead of a float. Takes 1 arguement.
int randomInt(int a){
int theInt = int(random(a));
return theInt;
}
Try typing 100 into the array size ( Ball[] balls = new Ball[100]; ). Try 1000. Try 10000! On week 2 I briefly showed you a program I wrote that randomly assigns the class into pairs. It sure looked scary 2 weeks ago, but now you have learned enough to figure it out. It only uses stuff we've learned over the past month. Here's a ball demo that's a little more advanced. Take a peek at the code if you are adventurous. |