18.03-
22.03.

week 7

reflection on cultural interfaces based on the readings

brief history of computing

learned the basics of processing

wrote the first processing programme

whats new?

what i have
done

collaboration

...

note of the week

I loved this week. It was fun to tinker around with the arduino and the processing programme. The workshop was a very nice way to kick off the whole topic. I found it really hands on and accessible.

this weeks zine

moritz' processing
workshop

cultural interfaces

the personal space alert

We did a basic programming workshop to get to know processing in the beginning. Never having programmed with Java before I found similar logics and easy to learn structures in the programme. Still a lot of it was new to me. Also the logic is slightly different then C# which I am used to.

I think Moritz did a very good job on explaining the basics. Loes jumped in every once in a while and they made a very good team explaining technical basics through examples. Thank you for this.

what i have
done

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!

SUPER NICE HANDS ON TUTORIAL TO GET GOING

Inspired by an example mentioned in the assignment I decided to go for the personal space approach. I wanted to use the HC-SR04 Distance Sensor for getting an input and use the input for making a visual feedback / interface which tells you when you entered the personal space of a person.

I wanted to create a setup, where one person enters his or her personal space in the programme as a variable (meters of the radius e.g.). After the personalZone is set, the person could take the sensor to the chest and stand at some point. A second person can then go towards the person with the sensor and see in the programme how far he or she is away from the barrier to the personal zone. I wanted to especially make visual when the personalZone is entered and therefore violated.

the idea

iterations

I did not have a distance sensor on hand unfortunately, but that also was not necessary for programming the functionality. I substituted the sensor with a rotation sensor. I could have used any analog input for testing the functionality.

There was some things to consider when programming:

1. Processing would only take analog sensor values between 0 - 255, so the value has to be mapped to that in arduino before being able to use it in processing.

import processing.serial.*;
Serial myPort;

ArrayList circles; //Arraylist to store the circles created

int dataInput; //stores the current sensor value
int ballWidth = 1;

color c; //variable for altering the color through variable
int circleX;
int circleY;


//Enter a value between 1 and 10 to declare your personal Zone
int personalZone = 10;
//calculator variables
int distanceToPersonalZone;
int normalizedPersonalZone;;

void serialEvent(Serial myPort)
{
dataInput = myPort.read(); //stores sensor value in the variable dataInput
}


void setup()
{
size(1920, 1080); //sets the screensize to Full HD
String portName = "COM7";
myPort = new Serial(this, portName, 9600);
background(255);

//creates the empty ArrayList (will store Circle objects)
circles = new ArrayList();

//starts adding circles by adding one element
circles.add(new Circle(circleX, circleY, ballWidth));
}



void draw()
{
strokeWeight(.1); //sets the stroke to a very thin line
ballWidth = dataInput*4; //displays a ball realating to the sensor value
normalizedPersonalZone = personalZone*25; //sets the personalZone in relation to the screensize (not used)
distanceToPersonalZone = ballWidth-normalizedPersonalZone; //calculates distance between the personalZone and the current distance (not finished, not used)

drawByInput();

for (int i = circles.size()-1; i >= 0; i--) {
//creates circles and stores them in the array
Circle ring = circles.get(i);
//ring.move();
//not used because it didn't work jet, as planned
ring.display();

if (ring.finished())
//deletes the circle after a certain time
circles.remove(i);
}
}


void drawByInput() {
c = color (255,distanceToPersonalZone,distanceToPersonalZone, 20);
fill(c);
//new Circle object is added to the ArrayList (by default to the end)
circles.add(new Circle(width/2, height/2, ballWidth));
}


class Circle {
float x;
float y;
float speed;
float dangerFactor = distanceToPersonalZone;
float w;
float life = 100;

Circle(float tempX, float tempY, float tempW) {
x = tempX;
y = tempY;
w = tempW;
}

//not working, but to good to go
void move()
{
//shall make it move in little circles
//set a value for the movement speed according to distance to the personalZone
speed = dangerFactor;
// Add speed to x and y location

x = x + speed;
// y = y + speed;

//if (y > 590) {
//speed = -speed;
// }

//if (y < height/2-20) {
// speed = -speed;
//}

if (x < width/2-20) {
speed = -speed;
}

if (x > width/2+20) {
speed = -speed;
}
}

boolean finished()
{
//counts back from 100, then is being used for deleting circles from the array
life--;
if (life < 0)
{
return true;
}
else
{
return false;
}
}

void display() {
//display the circle
circle(x,y,w);
}
}

code & comments processing

testing & learning

trying to alter the movement direction dependent to the input, not managing to get it randomized, only linear

tests with different movement patterns, controlled by different parameters

nice 3-dimensional effect through the movement

testing with movement, gradient and colour at the same time

tests with different color patterns, controlled by the input

Playing with the alpha value to create a gradient trough the different layers of the circles.

basic functionality, effekt created by drawing a new circle every frame based on the input and layering them

1. I needed to make an array, because the drawing of infinite circles lead to a black circle in the end, I needed to delete the existing ones after a while for avoiding this effect.

2. The desired movement didn't work out as I wanted. Also for the movement part I needed the array, to access each and every object again and alter their positioning. I planned it like this: The construct should rattle (each circle for itself) and the speed should be dependant on the remaining distance to the personalZone. Though I was able to discover some nice effects when using different types of movement functionalities, I didn't manage to programm that behaviour in the time given. Probably I could fix that if I invested more time.

int value = 0;

void setup()
{
Serial.begin(9600);
pinMode(0, OUTPUT);
}

void loop() {
value = analogRead(0);

//Serial.println(value);
Serial.write(map(value, 0,1023,0,255));
//Serial.println(value);
}

code arduino

makes the sensor value readable and therefore usable in processing

the result

I am quite satisfied with the result, although I find it sad I could not try my programme with the distance sensor because someone else was using it and there was only one of them available at the time I needed it.

I know it would work with some tweaking in the same way it works with the rotator. The result of the displayed code to the right can be seen below. The different stages are described below the images. The description is to be understood as if it would work with the distance sensor.

moving out of the personalZone to the more distant areas the color disappears

having just entered the personalZone again, for a little moment it gets visible, where it is

staying in the personalZone --> everything starts to turn red again

a person is very close to the personalZone radius, everything gets redder every frame

When the personalZone gets entered the maximum amount of red is shown

wrote a programme for displaying the exiting and entering of a persons personal zone

got another electric component to work (much faster than in the week before)

critical reflection

Looking at my programme with a critical eye: I used the color red, without even thinking about it. Why? Because it is a warning color and associated with danger. Everywhere in the world not dependant on a certain culture? I don't know, probably yes. Although I don't know, I figure because of the broad use of red as a danger color in nature. It is
everywhere: On poisonous berries. On flowers. On
plants. Blood is also red - and it is never good to see
blood on a living thing because it is hurt.
And so it made sense for me to use this for my
purposes. I also tried out different other color and
color combinations, but I didn't manage to make them feel like a warning.
And I wanted to warn when you enter a zone you are not supposed to go.

The dominant shape I was using is the circle. I decided for this because of the purpose and nature of the programme: a personal zone works all ways. Probably not so centered like I showed it, because one would probably consider the front, where one can see it more easily when being compromised more than the back.

I don't have any other presumptions concerning circles. I read once, that it is considered a female shape. I don't know if I like that, but if you come from this point of view one could see how it is round, soft and harmonic compared to the rectangle (which is considered male) with its edges and it's rougher, more stable appeal. Well...I don't know if this is relevant concerning my design but I know that I tend to use circles more often then edgy shapes. That's for sure and probably also exceeds to this project. What also could have been nice to explore: triangle, to show the cone of the personal zone in the front of the person.

"Circles are among the oldest of geometric symbols, and commonly represent unity, wholeness, and infinity. Pythagoras called the circle "monad," the most perfect of creative forms, without beginning or end, without sides or corners. He associated the circle with the number 1 and the practice of monotheism.

Perfection and Ideals
In the Zen Buddhist philosophy, a circle stands for enlightenment and perfection in unity with the primal principles. Circles are sometimes symbols of the Judeo-Christian God and sanctity, appearing as haloes. In Chinese symbology, the circle represents the heavens.

Circles are also often seen as protective symbols. In occult practices, standing within a circle shields people from supernatural dangers or outside influences. Circles can also represent containing, keeping what is inside from been released."

collaborative learning

Especially the open stype and Q&As during the workshop made a very good flow possible. Discussions were possible and everyone pitched in. Very nice