Week 8 - Arrays of Objects and Debugging

Note: We will take breaks at least once an hour

Today’s Schedule

  • check-in
  • midterm
  • arrays of objects
  • finite state machine

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?

original Grace Hopper moth 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.

Finite State Machines

A few weeks ago we looked at diagrams of finite state machines.

dog finite state machine

animal finite state machine

Today, we will code one.

At its core, the finite state machine are a series of functions with different states. You can transition between these states. And you can never be in more than one state at a time.

void draw(){
  if (state == "sleeping"){
    sleeping();
  } else if (state == "laughing"){
    laughing();
  } else if (state == "eating"){
    eating();
  } else {
    sitting();
  }
}

Basic finite state machine example

String state = "sleeping";

void setup(){
  
}

void draw(){
 if (state == "sleeping"){
   sleeping(); 
 } else if (state == "eating") {
   eating();
 } else {
   sitting(); 
 }
}

void sleeping(){
 println("It's sleeping"); 
 
 if (mousePressed){
  state = "sitting"; 
 }
}

void sitting(){
 println("It's sitting"); 
 
 if (mousePressed){
  state = "eating"; 
 }
}

void eating(){
 println("It's eating");
 
 if (mousePressed){
  state = "sitting"; 
 }
}

Next steps:

Now we add in:

  • drawing
  • timers
  • interactivity

Midterm project checkin

  • work on midterm project
  • Midterm project is due on Oct 26

For next week:

Prototype of virtual pet due.

Your prototype must include:

    1. flowchart of finite state machine and 2. your code
  • Code all states from your submitted finite state machine flowchart. Your code must reflect on the states and triggers from your finite state machine flowchart
  • Implementation of all triggers and states (triggers are the events that transition between states)
  • compelling visuals of the pet to accompany each of its states (consider how you can animate as well)
  • completion of interactivity and timers between states

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).