WEEK 7

INTERFACES

With the skills gained in week 6, use an analogue or digital sensor to collect certain data, could be an answer to a question. Visualise that data by using interfaces.

PROCESSING WORKSHOP

2

ASSIGNMENT

which data and how to visualise it

selecting a sensor

What I have noticed is that the data was showed in a funnier way and with a bit more 'personality', so there is not only a graph which shows certain informations or super strict, organised drawing but also an element of what the data is actually representing, the symbols get a character.

I wanted to focus on something specific and realise it instead of making something super complicated and not understanding it. I wanted to visualise the arc which fills in by holding the sensor longer in a certain position.

I thought I could use a tilt sensor which I have been testing in week 6, so components from Rick and Asle. The reason I choose that one is because I thought it is very convenient to have a sensor which doesn't just turn on and off but really measures the time you have it turned into a certain direction.

A sensor that reacts like a switch when tilted. Works by a ball inside creates a curcuit when it touches specific sides of the 'box' it's stored in.

Goal: get the base of visual programming

To start with the interfaces first we had a class about processing, so Moritz was explaining us about the basic codes and how to actually make it all work.

we started with making the basic working space, so size of the 'screen' in which you can create objects afterwards

after the base being made, we continued with making a shape within this space

changing colours of the ellipse by changing the amounts of fill with RGB numbers

changing the background image,
important is that the image is placed in the same file as the processing file originally is and that the size of the image is exactly the same as the void setup

afterwards we have made a moving dot by clicking the mouse button

void setup() {
size(480, 120);
}

void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}

PROCESS OF MAKING AN INTERFACE

reading a sensor

In order to be able to make an interface for a sensor, of course the first step is to start reading data that sensor is sending you.
There were problems with installing the right code in order to read the data but with Loes's and Kaj's help we made the connection between the sensor and interface.

Arduino code:

int tiltValue = 0;

void setup() {
pinMode(D1, INPUT); // Tilt sensor connected to D1
pinMode(LED_BUILTIN, OUTPUT); // Onboard LED on pin D0

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

tiltValue = digitalRead(D1);
Serial.write(tiltValue);
delay(10);

if (tiltValue) {
// Serial.println(tiltValue);
digitalWrite(LED_BUILTIN, LOW);
}
else {
// Serial.println(tiltValue);
digitalWrite(LED_BUILTIN, HIGH);
}
Serial.write(tiltValue);
delay(200);
}

Processing basic code:

import processing.serial.*;
Serial myPort;
int dataInput;
int xPos; // position one on x axis
int xPos2; // position two on x axis

void setup() {
size(255,255);
//println(Serial.list());
String portName = "/dev/cu.wchusbserial1410";
myPort = new Serial(this, portName, 9600);
}

void draw() {
background(0);
fill(255);
if (dataInput == 0){
xPos = 50;
xPos2 = 154;
}
else {
xPos = 154;
xPos2 = 50;
}
fill(color(145,102,12));
ellipse(xPos, height/2, 20, 20);

println(dataInput);

}

void serialEvent(Serial myPort) {
dataInput = myPort.read();
}

I was searching for the examples of the visualised data and I found quite many in the book Dear Data by Stefanie Posavec.

making the interface

I was thinking which data I should visualise and I thought it would be relevant to capture how aware of sustainability in fashion are people nowadays.

so the tilt sensor sends different data, 0 and 1 so digital, by being in a certain position if the sensor is in the position 0 (picture) then it sends 0 and if the sensor is in the position 1 (picture) then it sends 1, it senses the data constantly so the longer you hold it in a certain position the more values of 0 or 1 you are going to receive

position 0 - sends value 0

position 1 - sends value 1

first I made an arc and changed the colour of the background to first fully understand what am I doing and which values can be adjusted and how

in the next step I have created an arc which changes the filling, according to the position of the sensor you are holding it in and I have placed a background to see how it all looks

I realised I have to change the concept of the arc in the contrast direction because if the arc is filling, once it fills it doesn't go back to 0 but if you have an arc and you hold the sensor and the arc 'infills' then it goes automatically back to full arc after the sensor is not being used. So that was the reason I decided to go with the second opposite concept of an arc.

After I understood the code and decided on the concept of the arc, I started to make a collage in photoshop, which would serve as a background base. Beside that I also wanted to add a bit of handwritten fill, so I wrote down the question and instructions and then scanned it in and inserted it in the background. The last step was to place the arc on correct spot and to change the transparency, so you can see the background through but not so clearly.

final video of working interface

assumptions of the created cultural interface

-people can read
-people know what sustainability is
-people recognise metaphor for earth
-differently interpretations of sustainability, for some small things can means they are already really sustainable and aware of the environmental impact
-that everyone understand what they have to do with the sensor, unclear at which degree it works
-that everyone sees the upper transparent layer evenly and they know what it supposed to mean
-the abstract background could maybe me confusing for some