BLOG

CONCEPT

The more closely we are connected to the people we love, the happier we feel and the more personal satisfaction we have in our lives. Most people rate moments of connection and shared enjoyment with their loved ones as their most important life experiences.

Base on the concept of "Social Circle", I would like to create an art interactive installation to explore the relationship between technology, people and public space.

Good relationships keep us happier and healthier. Waldinger(2010) mentions that the Harvard Study of Adult Development have tracked the lives of 724 men for 75 years asking about their work, their home lives and their health to study people from the time that they were teenagers into old age to see what really keeps people happy and healthy. The clearest result from those 75-year study is: Good relationships keep us happier and healthier.

Social connections are really good for us. It turns out that people who are more socially connected to family, to friends, to community, are happier, they're physically healthier, and they live longer than people who are less well connected. It's not just the number of friends you have, and it's not whether or not you're in a committed relationship, but it's the quality of your close relationships that matters.

The World Value Survey (WVS) is a large cross-country research project that collects data from a series of representative national surveys. The WVS asked respondents hundreds of questions about their lives, including whether they were part of social or religious groups, how often they spent time with friends, and whether they felt happy with their life. The result of the survey is: in almost all countries people who often spend time with their friends report to be happier than those who spend less time with friends.

Table of Content

idea

There are 3 ideas in total. The installation will be highlighted on the relationship between people. The aims is visualise Social Circle. The participants would experience the concept "social circle" which means a group of people who are socially connected.

#1 blackroom

The first idea is using lighting as light is obvious. Light and dark are contrasted reflecting that people are intimate or distant. When people get closer and closer, the response of the art installation would be bigger.

Installation

There are a dark room which can included 2 people and they can walk a straight road. Two entrance in left and right side. More than 5 lamps would be hanged on the top. All the lamp and dark room would be handmade by wood.

Interaction

When two people walk closer, the respond of the lighting in the darkroom will be bigger. The closer people walk, the brighter light on.

Installation

Hardware

Arduino Zero * 1
Arduino Zero is a simple and powerful 32-bit extension of the platform established by the UNO. It can provide a platform for innovative projects in smart IoT devices, wearable technology, high-tech automation, crazy robotics, and much more.

PING * 3
The sensor perform measurements between moving or stationary objects. Provides precise, non-contact distance measurements within a 2 cm to 3 m range

RGB LED light * 10 For the lamps.

The reason of give up the idea

The installation is difficult to implement if the participant do not have same speed of footstep. The space which can contain 2 people only is limited which can't express the message clearly. Visitor do not know how to join in the installation without any instructions.

#2 MILUSION

The second idea is using mirror to create illusion. The name come from mirror + illusion.

Installation

There are a mirror installation. The shape is circle. There are some holes. When one people watching inside the hole, they only see a mirror which means themselves. When more that two people watching different holes, the mirror will be open, they can see each other.

#3 socle (SELECTED)

The selected idea is similar with the first idea using the same concept to visualise Social Circle but SOCLE is more simple and easy to understand. The name SOCLE come from Social + Circle.

Installation

SOCLE is a interactive installation aims to visualise the social circle in daily life. Social circle means a group of socially interconnected people. Social circles tend to have their own unique sets of norms and values. Everybody have their own social circle but the values of social circle is difference. When more people increase to their social circle, the more opinions and relationship they gain.

The reason of give up the idea

The message can't know bring out clearly. It like a networking event instead of social circle.

Interaction

When more people go inside the circle on the floor, the circle on the wall will have more graphic with different color and shape they can watch.

Input: The number of people inside the circle.

Output: The graphic projected on the wall.

Hardware

Projector * 1

projecting the graphic on the wall.

WebCam * 1

Tracking the number of people.

Software 

Using Processing to connect webcam and projector.

art and science

The project Circle is using mathematics science to track the position of people through using computer programming and webcam.

Webcam captures the real time images through a tiny grid of light-detectors, known as charge-coupled device (CCD) from the location where it is placed. The CCD converts the image into digital format so that computer can access this data. Webcam can start tracking by the default color black and a color range of 120 by computer programming. In the project, the black head can be tracked by webcam.

The project SOCLE also need to detect the distance between people. It also using the webcam and computer programming to determine the distance from the webcam to human. The triangle similarity can be used in to calculate the distance from an object or marker to camera.

There are a marker with a known width W. Placing this marker some distance D from camera. This allows us to derive the perceived focal length F of our camera:

F = (P x D) / W

Moving the camera both closer and farther away from the object/marker, the triangle similarity can be applied to determine the distance of the object to the camera:

D’ = (W x F) / P

The mathematics of calculating distance from object to camera can be used in the computer programming.

Therefore, the installation is using the mathematics and science. The computing world is not only for engineering, but also suitable for art. The project is combined art, mathematics and science.

schedule

Because of the global influenza COVID-19, the location of GT presentation is changed to classroom or zoom in semester B. I thought present in classroom may not have the same output and the material haven't prepared because of influenza. I decided to change my presentation in Summer.

code

I use Processing to build the installation and use library OpenCV to detect faces.

STAGE 1: dETECTING FACES

I use OpenCV to detect face in processing.

Code

import gab.opencv.*;

import processing.video.*;

import java.awt.*;

int center_x, center_y;

Capture video;

OpenCV opencv;

void setup() {

size(640, 480);

video = new Capture(this, 640/2, 480/2);

opencv = new OpenCV(this, 640/2, 480/2);

opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);

video.start();

}

void draw() {

scale(2);

opencv.loadImage(video);

image(video, 0, 0 );

noFill();

stroke(0, 255, 0);

strokeWeight(2);

Rectangle[] face = opencv.detect(); //detect face

println(face.length); //print line how many face

for (int i = 0; i < face.length; i++) {

//println(face[i].x + "," + face[i].y);

rect(face[i].x, face[i].y, face[i].width, face[i].height);

center_x = face[i].x + (face[i].width/2);

center_y = face[i].y + (face[i].height /2);

print(center_x);

print(", ");

println(center_y);

ellipse(center_x, center_y, 10, 10);

}

delay(100);

}

void captureEvent(Capture c) {

c.read();

}

Using rectangle with green color to mark detected face

STAGE 2: dETECTING FACES inside Circle

When my face go inside the circle, the colour of circle will be changed.

Code

import gab.opencv.*;

import processing.video.*;

import java.awt.*;

float center_x, center_y;

float distance;

Capture video;

OpenCV opencv;

void setup() {

size(640, 480);

video = new Capture(this, 640, 480);

opencv = new OpenCV(this, 640, 480);

opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);

video.start();

}

void draw() {

opencv.loadImage(video);

image(video, 0, 0 );

noFill();

stroke(0, 255, 0);

strokeWeight(2);

Rectangle[] face = opencv.detect(); //detect face

println(face.length); //print line how many face

//draw rect and circle on the face

for (int i = 0; i < face.length; i++) {

//println(face[i].x + "," + face[i].y);

rect(face[i].x, face[i].y, face[i].width, face[i].height);

center_x = face[i].x + (face[i].width/2); //the X center position of face

center_y = face[i].y + (face[i].height /2); //the Y center position of face

print(center_x);

print(", ");

println(center_y);

ellipse(center_x, center_y, 10, 10);

}

delay(100);

distance = dist(center_x, center_y,320, 240); //the x,y of circle

if (distance <= 200/2) { //200/2 --> 200 = center of circle

fill(0, 255, 0);

} else {

fill(255, 255, 255);

}

ellipse(320, 240, 200, 200); //(x, y, width, height)

}

void captureEvent(Capture c) {

c.read();

}

When face go inside the circle, the colour will be changed from white to green.

STAGE 3: change colour when dETECT more thAn one FACES inside Circle

When more than one face go inside the circle, the colour of circle will be changed.

Code

import gab.opencv.*;

import processing.video.*;

import java.awt.*;

float center_x, center_y;

float face0_x, face0_y;

float face1_x, face1_y;

float face2_x, face2_y;

float face0_distance, face1_distance, face2_distance;

Capture video;

OpenCV opencv;

void setup() {

size(640, 480);

video = new Capture(this, 640, 480);

opencv = new OpenCV(this, 640, 480);

opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);

video.start();

}

void draw() {

opencv.loadImage(video);

image(video, 0, 0 );

//setting

noFill();

stroke(0, 255, 0);

strokeWeight(2);

Rectangle[] face = opencv.detect(); //detect face

println(face.length); //print line how many face

///face detection

for (int i = 0; i < face.length; i++) {

rect(face[i].x, face[i].y, face[i].width, face[i].height);

}

//recognit different faces

for (int i = 0; i < face.length; i++) {

if (i >= 0) {

face0_x = face[0].x + (face[0].width/2);

face0_y = face[0].y + (face[0].width/2);

ellipse(face0_x, face0_y, 10, 10);

}

if ( i >= 1) {

face0_x = face[0].x + (face[0].width/2);

face0_y = face[0].y + (face[0].width/2);

ellipse(face0_x, face0_y, 10, 10);

delay(100);

face1_x = face[1].x + (face[1].width/2);

face1_y = face[1].y + (face[1].width/2);

ellipse(face1_x, face1_y, 10, 10);

}

if ( i >= 2) {

face0_x = face[0].x + (face[0].width/2);

face0_y = face[0].y + (face[0].width/2);

ellipse(face0_x, face0_y, 10, 10);

delay(100);

face1_x = face[1].x + (face[1].width/2);

face1_y = face[1].y + (face[1].width/2);

//fill(255, 0, 0); //red

ellipse(face1_x, face1_y, 10, 10);

delay(100);

face2_x = face[2].x + (face[2].width/2);

face2_y = face[2].y + (face[2].width/2);

ellipse(face2_x, face2_y, 10, 10);

}

delay(100);

//distance between circle and people

face0_distance = dist(face0_x, face0_y, 320, 240); //the x,y of circle

face1_distance = dist(face1_x, face1_y, 320, 240); //the x,y of circle

face2_distance = dist(face2_x, face2_y, 320, 240); //the x,y of circle

if (face0_distance <=200/2 || face1_distance <=200/2 || face2_distance <=200/2) {

fill(255, 255, 0); //yellow

}

if (face0_distance <=200/2 && face1_distance <=200/2 || face1_distance <=200/2 &&
face2_distance <=200/2 || face2_distance <=200/2 && face0_distance <=200/2 ) {

fill(255, 0, 0); //red

}

if (face0_distance <=200/2 && face1_distance <=200/2 && face2_distance <=200/2) {

fill(0, 0, 255); //blue

}

ellipse(320, 240, 200, 200); //(x, y, width, height)

}

void captureEvent(Capture c) {

c.read();

}

If one face detected
inside the circle, the colour will be changed to yellow.

If two faces detected

inside the circle, the colour will be changed to red.

If three faces detected inside the circle, the colour will be changed to blue.

Recognise different faces

Calculated the distance between circle and people

STAGE 4: Graphic

Using SIN, COS, TAN to create a series graphic. More people go inside the circle, more complete and richer graphic they can see.

Code

import gab.opencv.*;

import processing.video.*;

import java.awt.*;

//openCV

float center_x, center_y;

float face0_x, face0_y;

float face1_x, face1_y;

float face2_x, face2_y;

float face0_distance, face1_distance, face2_distance;

//visual

float t;

float angle =0;

int NUM_LINES = 100;

float v1 =0.4;

float v2;

boolean increment = false;

float fator =0.00001;

float c1, c2, c3;

Capture video;

OpenCV opencv;

void setup() {

size(640, 480);

//visual

v1 = random(0.4)+0.2;

smooth(2);

//openCV

video = new Capture(this, 640, 480);

opencv = new OpenCV(this, 640, 480);

opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);

video.start();

}

void draw() {

opencv.loadImage(video);

image(video, 0, 0 );

background(0);

//setting

noFill();

stroke(0, 255, 0);

strokeWeight(2);

Rectangle[] face = opencv.detect(); //detect face

println(face.length); //print line how many face

///face detection

for (int i = 0; i < face.length; i++) {

rect(face[i].x, face[i].y, face[i].width, face[i].height);

}

//recognit different faces

for (int i = 0; i < face.length; i++) {

if (i >= 0) {

face0_x = face[0].x + (face[0].width/2);

face0_y = face[0].y + (face[0].width/2);

//fill(255, 255, 0); //yellow

ellipse(face0_x, face0_y, 10, 10);

}

if ( i >= 1) {

face0_x = face[0].x + (face[0].width/2);

face0_y = face[0].y + (face[0].width/2);

//fill(255, 255, 0); //yellow

ellipse(face0_x, face0_y, 10, 10);

delay(100);

face1_x = face[1].x + (face[1].width/2);

face1_y = face[1].y + (face[1].width/2);

//fill(255, 0, 0); //red

ellipse(face1_x, face1_y, 10, 10);

}

if ( i >= 2) {

face0_x = face[0].x + (face[0].width/2);

face0_y = face[0].y + (face[0].width/2);

//fill(255, 255, 0); //yellow

ellipse(face0_x, face0_y, 10, 10);

delay(100);

face1_x = face[1].x + (face[1].width/2);

face1_y = face[1].y + (face[1].width/2);

//fill(255, 0, 0); //red

ellipse(face1_x, face1_y, 10, 10);

delay(100);

face2_x = face[2].x + (face[2].width/2);

face2_y = face[2].y + (face[2].width/2);

//fill(0, 0, 255); //blue

ellipse(face2_x, face2_y, 10, 10);

}

delay(100);

//circle in the center

stroke(0, 255, 0);

ellipse(320, 240, 200, 200); //(x, y, width, height)

//distance between circle and people

face0_distance = dist(face0_x, face0_y, 320, 240); //the x,y of circle

face1_distance = dist(face1_x, face1_y, 320, 240); //the x,y of circle

face2_distance = dist(face2_x, face2_y, 320, 240); //the x,y of circle

//one person

if (face0_distance <=200/2 || face1_distance <=200/2 || face2_distance <=200/2) {

//if (NUM_LINES <=250) {

NUM_LINES = 250;

c1 = random(255);

}

//}

//two people

if (face0_distance <=200/2 && face1_distance <=200/2 || face1_distance <=200/2 && face2_distance <=200/2 || face2_distance <=200/2 && face0_distance <=200/2 ) {

//if (NUM_LINES <=350) {

NUM_LINES = 350;

c1 = random(100, 255);

}

//}

//three people

if (face0_distance <=200/2 && face1_distance <=200/2 && face2_distance <=200/2 || face.length >= 3) {

//if (NUM_LINES <=500) {

NUM_LINES = 500;

c1 = random(100, 255);

}

//}

//no one

//if (face.length == 0 || face0_distance >200/2 || face1_distance >200/2 || face2_distance >200/2 || face0_distance >200/2 && face1_distance >200/2 && face2_distance >200/2) {

if (face.length == 0) {

//if (NUM_LINES >100) {

NUM_LINES = 100;

c1 = 255;

c2 = 200;

c3 = 255;

}

//visual start

println(NUM_LINES);

angle+= 0.01;

stroke(c1, c2, c3);

translate(width/2-40, height/2);

rotate(sin(angle));

for (int i=1; i < NUM_LINES; i++) {

strokeWeight(4);

point(x(t+i), y(t+i));

point(x2(t+i), y2(t+i));

strokeWeight(1.2);

line(x(t+i), y(t+i), x2(t+i), y2(t+i));

}

t += 0.0005;

if (increment) v1+=fator;

increment = true;

fator = 0.00005;

//visual end

}

float x(float t) {

return sin(t/10)*150 + cos(t/v1)*50;

}

float y(float t) {

return cos(t/10)*150 + sin(t/v1)*50;

}

float x2(float t) {

return sin(t/10)*10 + cos(t/v1)*50;

}

float y2(float t) {

return cos(t/10)*10 + sin(t/v1)*50;

}

void captureEvent(Capture c) {

c.read();

}

If one face detected inside the circle, the colour will be random and the number of line will be increased to 250.

If two faces detected inside the circle, the colour will be random and the number of line will be increased to 350.

If three faces detected inside the circle, the colour will be random and the number of line will be increased to 500.

That's means more people inside the circle, more complete and richer graphic they can see.

material

Before the global influenza COVID-19, I would like to made the circle by wood and paint to black colour. I would like to make it by myself through the wood workshop in CMC.

During the global influenza COVID-19, I cannot do the circle myself because the school was closed. I use the most easy way to make the circle which is using wall stickers. I buy two 1m * 50cm wall stickers with black colour online. I would like to cut it in a circle and will be shown during the exhibition.

EXHIBITION

One projector which project the output graphic from computer, one external camera to detect faces and two circles are using to set up the final work. The circle is cut by two black color stickers. The shape is like a wave but keeps the circle as I think every social circle is different. It’s more organic.

The difference between the graphics base on the number of people. The more the number of people in the circle, the more the completed the graphic. The graphic completes itself as people enter the circle. The “Completion” means the completion of the circle. When no one in the circle, the graphic is not connected together. When more people in the circle, the more stroke will appear which like they are connected together and more similar to a circle. It’s like the concept, when more people connect together, they can see more and know more.