WEEK 7

Cultural Interfaces

ASSIGNMENT

PART 1: With the skills attained in Electronics week, use an analog or digital sensor to capture any subjective data (e.g. responses to a question, the distance of peoples preferred personal space, stress levels, ...) and visualize this data in a meaningful way using Processing.

This is an individual assignment that is meant to get each of you comfortable with the very basics of visual programming. Some of you may have some experience in (Arduino or Javascript) coding; we challenge you to try and take your visualization a step further - e.g. calculate the average of the data captured, use arrays etc.

PART 2: Empower your public/users to make up their own mind, and be as transparent as you can be about the perspective you took, the data you used, the relationship between the system and its parts (hardware, software) and the assumptions and limitations connected to the interface. Let this week's readings inspire you!

//FOR ARDUINO
int sensorValue = 0;

void setup() {
Serial.begin(9600);
}

void loop() {
//Serial.println(analogRead(A0));
sensorValue = analogRead(A0); // store value in sensorValue
Serial.write(map(sensorValue, 0,1023,0,255)); // map analog range to size of window in processing
delay(50);
}

I'm a bit scared
for this weeks assignment

ARDUINO CODE

In the beginning I was very scared for this assignment. We had worked with Arduino in week 1, but then Katharina took the lead. For this assignment we didn't have to work in pairs and that frightened me even more. Luckily Loes was there to help. After she sat with Asle for a while, Asle shared his code on slack.

In week 6 I used a Capacitive Soil Moisture Sensor, but I decided to switch to an analog rotation sensor. I did this because I find programming very difficult and I didn't wanted to make it more difficult than it already is...

CHANGING SENSORS

PROCESSING

The first day of week 7 we got an introduction lesson from Moritz about Processing. Because of his step-by-step plan I understood it a bit better, but I still thought it was pretty vague.

Useful Website

WORKSHOP BY MORITZ

color c1 = color(245,12,112);
PImage img;

void setup() {
size(768, 768);
background(112,112,112);
img = loadImage("paint.jpg");
background(img);
}




void draw() {
fill(color(255,0,0));
noStroke();
ellipse(400,400, 250, 250);



fill(color(0,255,0));
triangle(50, 70, 70, 70, 50, 50);
}

import processing.serial.*;
Serial myPort;
int dataInput;
PImage img;

void setup() {
size(768, 768); //size interface in px
String portName = Serial.list()[0];
//String portName = "COM7"; //change to your port address!
myPort = new Serial(this, portName, 9600);
}

void draw() {
background(0);
img = loadImage("IB.png");
background(img);

fill(color((255 - dataInput/3),dataInput/3,0)); //dataInput is 605/3
rect(width/2-25,768, 48, dataInput*-1); // use the dataInput to positionn the rectangle on the x,y axis
println(dataInput);
}

void serialEvent(Serial myPort) {
dataInput = myPort.read();
dataInput = dataInput * 3;
dataInput = (int)map(dataInput, 0,767,0,608);
}

The beginning is there...

MAKING THE INTERFACE...

Before designing the interface, I had to think of a question that will be based on the interface. I managed (with a little help from Kai) to extend a square while rotating the rotation sensor. That's why I wanted to design an interface that would fill a tube. (See image 4)

I came up with the question: How happy are you today?
And from here I wanted to look for a suitable background to continue with. I found a picture online that I wanted to tweak a bit. (See the image below)

I deleted the background and made it blue with the Gradient Tool in Photoshop

Positioning of the tube, exactly at the coordinates of the processing file.
I removed the white background in Photoshop.

After I made the interface I wanted to test it.
But the image didn't work...
I made the background exactly the same size as my processing file. Strangely enough the file got a bit bigger when it was saved as JPEG. Then Kai gave me the tip to save it as a PNG file.
And this did work!

THE END RESULT

https://ezgif.com

Based on my chosen interface, I want people to check how they feel.

Everybody has a bad day now and then, but by indicating this, people know how to react to you and you become aware of how happy you feel. In the long run this could mean that if someone continuously indicates that they are doing badly, you can intervene to offer that person help.

I have chosen for 3 smileys. Red stands for unhappy, yellow stands for neutral/normal, and green stands for very happy. Everything that is chosen between the red and yellow smileys is not too good.

I chose the color red, because red is associated with: being angry, stopping at the traffic light or being wrong.

While green stands for: You've made it, good, happy, Keep going.
Hardly anyone feels very happy, but everyone should at least feel comfortable in their own skin. That's why everything between yellow and green is a good area to sit between.
So the real question is yours: How are you feeling today?