Week 8 - Homework 1: Interactive installation or experience (planting trees)

For this week's homework, we were supposed to create an interactive installation/experience that included one button on the arduino and used processing as the output. This is what I came up with:

When thinking of what I could do in processing that would change when pushing a button, I started thinking of an assignment I did a few weeks ago - the random cosmos flower pattern. In the cosmos flower assignment, flowers would appear at random positions in the window when running the code. For this assignment I used the same principle but changed it so that objects (in this case trees) would appear at random positions (within a specified area) in the window when pushing the button.

While the cosmos flower assignment was my inspiration, I decided against using the flower code for this assignment because I did not think is was interactive enough. If I used it, flowers would be planted for no specific purpose or goal - pointless. Therefore I changed it to planting trees with the goal to 'save the environment' (and the screen showing dying grass, dirty air and a factory spewing smoke) to bring more purpose into the action of pushing the button (even though pushing that button does not save our actual environment of course).

I would have liked to code it so that the grass would become green and the sky would become blue after a certain amount of trees appeared on screen - but as I currently do not know how to do that, it will be something I can try later.

The code - Arduino

For the arduino code, I used the same code we learned in class. Why change it when we were supposed to do the same thing?

int inputPin = 2;

void setup() {
Serial.begin(9600);
pinMode(inputPin, INPUT);
}

void loop() {
int state = digitalRead(inputPin);
Serial.write(state);
delay(100); 
}

The code - Processing

To give you a clearer image of what the processing window looked like, here is a picture from what happened on the screen during the video:

import processing.serial.*;

Serial myPort;
int val;

void setup(){
 
size(600, 600);
  size(600, 600);
  // the ground
  background(159, 184, 37);
    //the sky
  fill(189, 199, 153);
  noStroke();
  rect(0, 0, 600, 180);
 
   // smoke 1
  fill(71, 66, 66);
  ellipse(143, 12, 20, 70);
  // smoke 2
  fill(112, 104, 104);
  ellipse(150, 12, 20, 70);
 
  // factory, main body
  fill(115, 115, 115);
  rect(20, 110, 150, 90);
  // chimney
  rect(130, 50, 30, 100);

printArray(Serial.list());

String portName = Serial.list()[0];
myPort = new Serial(this, portName, 9600);
}

void draw() {
if ( myPort.available() > 0) {
val = myPort.read();
}


if (val == 1) { 
pushMatrix();
   //random tree placement
  translate(random(0, 600), random(-10, 400));
  //tree trunk
  fill(138, 71, 0);
  rect(-10, 200, 20, 70);
 
  //tree leaves
  stroke(5, 102, 1);
  fill(5, 138, 0);
  circle(0, 200, 70);
 
  popMatrix();
}

} 


This code basically combines the code we learned in class for using processing as the output for the arduino and the cosmos flower code (but changing the flowers to trees and adding the factory and sky). I started off by making the visual design; making the tree, factory, deciding where the sky should be and so on. After that I added the random placement of the trees with translate and tried out if it worked with an if statement before using the arduino (if (keyPressed){if (key == 'b'){ tree code }  }). After that, I combined it with the arduino and it worked like a charm! Finally I added the paper note and arrow to make it more interactive.