Week 05: State

Topics:

• Other data formats (xml, json)
• ArrayLists and for in loops
• switch statements
• Review homework
• State machines logic and examples (levels, interactive characters)
• Implementing state for scenes

XML and JSON:

XML and JSON are more flexible data formats to use than CSV, as you can store arbitrary patterns and dimensions of data, compared to a CSV's rows and columns. Both were created around the idea that web technology should serve as a foundation for data storage patterns, which can be seen as XML strongly resembles HTML, and JSON is based on Javascript objects.

XML reference: https://processing.org/reference/XML.html

JSON reference: https://processing.org/reference/JSONObject.html

Both have examples in Processing's examples library, in Examples/Topics/Advanced Data (LoadSaveXML and LoadSaveJSON).

for in

for in loops are convenient ways to iterate through a collection. In class we used ArrayLists, but they can also be used for arrays.

int[] nums = { 0, 1, 2, 3, 4 };

// a normal array loop
for (int i = 0; i < nums.length; i++) {
  println(nums[i]);
}

// a for in loop, doing the same as above
for (int num : nums) {
  println(num);
}

For ArrayLists:

ArrayList<Bubble> bubbles = new ArrayList<Bubble>();

// a normal for loop
for (int i = 0; i < bubbles.size(); i++) {
  Bubble bubble = bubbles.get(i);
  bubble.display();
}

// a for in loop, doing the same as above
for (Bubble b : bubbles) {
  b.display();
}

switch

Switch statements are another kind of conditional. They are used to check the value of a supplied variable, and then matching it to one or more "cases" that you define. Anything after a matched case will be called unless you use the break statement to exit the switch. A default case matches if no other case was matched.

int num = 1;

switch(num) {
  case 0: 
    println("Zero");
    break;
  case 1: 
    println("One");
    break;
  case 2: 
    println("Two");
    break;
  default:
    println("No match");
    break;
}

Switches are good at checking multiple outcomes for a single variable, that would otherwise have to be written as a chain of else ifs. The above would be written in a normal conditional like the code snippet below - sometimes keeping track of ifs and else ifs and elses can be a little unwieldy compared to a switch.

int num = 1;

if (num == 0) {
  println("Zero");
} else if (num == 1) {
  println("One");
} else if (num == 2) {
  println("Two");
} else {
  println("No match");
}

One thing that switch statements are very effective for is checking a 'state' value.

State Machines

A 'state machine' is a system for explaining the 'states' of an entity as it changes over time. It marks the states themselves as well as the transitions between those states. It's useful for us as we program interactive systems because very often we will have multiple layers of entities all with their own states, responding to user input or other conditions to transition between states.

We can use a state machine to describe the behavior of anything with more than one state. They can be simple like this state machine representation of a light bulb:

Or something more complicated, like this game character (and this is still relatively simple):

Also, if you've used Unity's animation system, you've been working with a state machine:

When writing functionality to manage state in Processing, you should be able to visualize something for these graphs. Also for most cases, an integer is a good way to represent state.

int state = 0;
// 0 - idle
// 1 - walking
// 2 - jumping

This way you can use a switch to quickly check state in different conditions, and do something appropriate for each case. This simple example uses keyPressed() to see if the spacebar is pressed, then does something different in the case of each state.

void keyPressed() {
  if (key == ' ') {
     switch (state) {
       case 0: // go to case 1, it's the same result
       case 1: // set state to jump, call a jump() function
         jump();
         state = 2;
         break;
       case 2: // if I'm already in the air, I can't jump
         break;
     }
  }
} 

Remember that state machines are just one way to think about encoding behavior in a program. It can be a useful way to think about things, but there are other ways around various kinds of problems too.

Code:

There are four examples in the repo for Week 5. Build off the first three for your code submission.

• w05_00_simpleSlide has a very simple state machine to determine different 'slides' that are drawn to the screen. Each slide is comprised of a color held in an array, and there is a 'slide' integer that will determine which one of those colors will be drawn. The keyPressed() function has a switch that changes the slide based on what state it is. Change the code so that each slide also displays different text, by using an array of strings.
• w05_01_drawScenes is a similar simple state machine, but it also has a switch in the draw statement to draw different graphics for each state. Change the code to have more complex state transitions. For example, instead of only pressing any key, maybe the first scene changes based on a mouse press. Maybe the next scene only advances when pressing an arrow key. Try some different things and draw each scene to hint about how to proceed.
• w05_02_characterState is an example of using state in a class. Write your own simple version where a class has its own state. Use a switch in its display() method, just like the example. Then have your program create multiple instances of that class on the screen. For example, a bouncing ball class that has a state to determine its color. What should the logic be for managing your state transitions? Key press? Timing?
• w05_03_jsonScenes is another version of the code from class where we made a little block-clearing level system with a state machine and the previous homework assignment's starting point. It uses JSON instead of CSV. This is just here for your reference.