Today’s Schedule

• check-in
• small group check-in - finite state machine
• images!
• class coding time and check-in

Midterm Exam

Arrays of objects

Several weeks ago we built Frogger in class. We created a Car class and then built a number of car objects (car0, car1, car2, etc). What do these objects have in common?

This is a perfect use case for an array. Especially if we want to make a large number of cars.

Let’s re-use our car class:

class Car {
  float x;
  float y;
  float xspeed;
  color c;
  
  Car(float tempX, float tempY, float tempXspeed, color tempC){
    c = tempC;
    x = tempX;
    y = tempY;
    xspeed = tempXspeed;
  }
  
  void display(){
    rectMode(CENTER);
    stroke(0);
    fill(c);
    rect(x, y, 20, 10);
  }
  
  void move(){
    x = x + xspeed;
    
    if (x > width){
      x = 0;
    }
    if (x < 0){
      x = width;
    }
  }
}

Let’s say we have 2 cars.

Our main code:

Car car0, car1;

void setup(){
  size(500,500);
  car0 = new Car(100,150,1,color(100,0,100));
  car1 = new Car(300,230,2,color(220,0,120));
}

void draw(){
  background(255);
  car0.display();
  car0.move();
  car1.display();
  car1.move();
}

What happens if we have more than 2 cars. What if we have 10 cars? 30 cars?

It would be a lot easier if we didn’t have type in all of the cars individually.

Car[] cars = new Car[20]; //an array of 20 cars

void setup(){
  size(500,500);
  
  for (int i = 0; i < cars.length; i++){
    cars[i] = new Car(random(width),random(height),random(2),color(random(255)));
  }
}

void draw(){
 for (int i = 0; i < cars.length; i++){
    cars[i].display();
    cars[i].move();
    }
}

Debugging

Processing comes with a Debugger.

What’s a bug?

an error, flaw, failure or fault in a computer program or system that causes it to produce an incorrect or unexpected result, or to behave in unintended ways. Wikipedia

Bugs cause disasters:

• The Challenger spaceship explosion
• European Space Agency’s $1 billion Ariane 5 rocket was destroyed a minute after launch due to a bug in the guidance program
• stuck accelerator in certain Toyota cars

Using Processing’s Debugger

1. Turn on the debugger (Debug menu or click the Moth icon)
2. Click on the line where you want to set a breakpoint (a pause when running the code)
3. Choose Set Breakpoint from the Debug menu
4. Run your code. It will pause at the breakpoint and show your variables.
5. You can hit step to move one line of code, or continue to run until the next breakpoint
6. You can set multiple breakpoints. You can click on the Processing folder to see builtin variables.

Working with Images

After all of the other work we’ve done this semester, working with images is quite easy.

To work with images, declare a global variable of type PImage

PImage img1;
PImage img2;
//we'll have two image files

How it works: Images

Make a new instance of PImage by loading in an image file in your setup

void setup(){
  size(500,500);
  img1 = loadImage("dawg.jpg");
  img2 = loadImage("cat.jpg");
}

Now that we’ve loaded our image, we can draw them to the screen.

void draw(){
    imageMode(CORNER); //the default, like rectMode's default
    image(img1,0,0); //now draw it to screen at x,y

    imageMode(CENTER);
    image(img2,width/2,height/2,200,200);
    //draws img2 in center as a square 200 wide, 200 high
    //width and height are optional parameters
}

Images can be manipulated just as other shapes. For example, they can be drawn on screen at mouseX,mouseY.

noCursor();
image(myImg,mouseX,mouseY); //replace the cursor with an image

Where must your images be located to use them?

In the data folder.

Go to Sketch > Add file OR Sketch > Show Sketch Folder and drag your image files in there.

Image Processing filters

tint()

• added like fill before drawing your image

tint(255) // original state
tint(100) // darker

adding a second argument, for transparency

tint(255, 127) //50% opacity

You can change brightness of red, green, blue components of color

tint(200, 0, 255)  //most red, no green, all blue components

Note: If you use a tint on one image but want NO TINT on another, make sure you set it back to the default tint(255);.

tint(200,0,0,127)

For next week:

Grading Rubric for final of virtual pet project:

Code

• Your project’s code should be well-commented. Variables, functions and class names should be clear. Classes should be on their own separate tab.
• Your coding should be efficient. Break your code into meaningful chunks using functions and classes. Rather than repeat code, use loops. Consider how arrays might help your code.
• Your code should work!
• Don’t hard code numbers. Use variables, width, height - for example - to make your code function on different computers.

Idea

• Your software should be accompanied by a description (more than a paragraph, less than a page. What is the idea? How did you approach it? What challenges did you have? How did you solve it? These are example questions. Feel free to add additional information.
• Did you base your functionality on other virtual pets, animals, Aibo, something else?
• What feedback did you receive on your prototype? What changes did you make based on that feedback?
• Your originality will be judged. Do not copy projects already found online.

Functionality and Design

• Is it clear how to use and navigate your virtual pet? Remember K.I.S.S. principles (“Keep It Simple, Stupid!”)
• How do you interact with it?
• Does the program flow (of your finite state machine) make logical sense?
• Do the aesthetics suit the concept? Is it engaging more than a minute? Is the interaction compelling for users?
• How does the virtual pet show that it’s passing time?
• A complete virtual pet must include both timers as well as interactivity (mouse or keys).