week_14 interface and application programming

a hell of a ride...

software: processing
input: a button
location: Green FabLab Valldaura (BCN)

since i made the button in the input assignment i wanted to find out how to use it in programming because also my "tipping point" (final project) will have a button as an input.
the closest example i could find was the "mouseClicked()". when you run the code a rectangle appears and when you click on it it changes the color.
first i had to change the input from the mouse to the serial input. again i went into the processing website to find the code, which is here.

then i looked at various examples in to try to understand the code for loading an image. also the tutorial was very helpful to make me understand the code. whatever image you want to load needs to be in the same folder as the sketch, preferably in a folder called "data"

After that i finally had to wrap my head around this to combine the two pieces of code. for many trys it just didn't work until i found out that the input was characters. so the read() function was the key to success. this is the result:

import processing.serial.*; 
int inString;
int value = 0;
Serial myPort;    // The serial port
PImage img1; 
PImage img2;


void setup() { 
  size(640, 1138);
  myPort = new Serial(this, Serial.list()[0], 9600);  
  img1 = loadImage("14onebite.jpg");
  img2 = loadImage("14twobite.jpg");
}

void draw() {
  while (myPort.available () > 0) {
    int inString = myPort.read();    
    if (inString == 117)
    {
      image(img1, 0, 0);
      println(inString);
    } else 
    {
      image(img2, 0, 0);
      println(inString);
    }
  }
}

void serialEvent(Serial p) { 
  if (value == 0) {
    value = 255;
  } else {
    value = 0;
  }
}

nomnomnomnom

this gif was made with gifmaker.me