InteractiveArt_Landmark of Seoul

222.PNG

Title

Landmark of Seoul (2017)

Description

Lotte World Tower, Dongdaemoon Design Plaza, 63 Building – Did we should make our city’s identity by constructing buildings?

Landmark of Seoul is an interactive artwork which is controlled by Arduino UNO. It gives the massage that because Seoul, Korea has a beautiful landmark of nature like Hangang(Han river), Bukhansan(Mt.Bukhan), and Inwangsan(Mt.Inwang), it is more important to take care those nature resources before build something. By swiping buildings themselves, users could experience this intention.

I connect arduino and processing making to communicate information of users interaction with controller. A real-time send&receive process is very important to use projection mapping technique. The core component, gears, is made by 3D printer and body consisted of foam board as a prototype.

Video


Background Story

Seoul has two important environments – river & mountain. Even though there are some cities which have their one nature resources in the worldwide, this is still very unique landscape of city surrounded by mountains with big river. So I think maybe we, Seoul doesn’t have to build ‘landscape’ artificially that already have.

After than, I found out that buildings of city cover up these nature so that people almost cannot appreciate it. The idea of ‘swiping a buildings’ started from this.

To express my idea, I planed physical computing artwork. Arduino, processing and even 3D printer was needed.

_DSC5211
Final work

What is most urgent in this project is physical constitution. The controller should bear user’s hand pressure to protect sensor.

_DSC5223
Inner part of cover (eraser was used for weight)

To make the gears, I used SketchUp 2017. After designed a teeth of gears to be matched each other exactly, I printed out them by using 3D printer.

I should adjust very detail of gear while printing it again and again : 
https://vvansite.wordpress.com/2017/12/03/interactiveart_project-progress1/

_DSC5232
Potentiometer with gear

Potentiometer is for adjusting resistance from 0 to 1023, but I used this principle as a ‘position value’. If users move cover, potentiometer will rotate and send value to arduino. Processing use this value as a position of cover to know how many move ‘building images’.

11
Blurred building images will move according to potentiometer value
_DSC5233
Servo motor(rotate 360)

360 degree servo motor will move back the cover to first position. The reason why I made this process is for convenience of users. If there is no automatic return system, people would be hard to know what should they do after finishing move the cover.

I lost my arduino because of ignorance of motor driver & power : https://vvansite.wordpress.com/2017/12/10/interactiveart_project-progress2/

_DSC5206
Ultrasonic sensor

Ultrasonic sensor detects whether there are people or not. I want to give a little hint to users like ‘You can do something with this controller’ only just by coming near enough. So images will be changed according to user’s existence.

_DSC5224
Whole component in controller
_DSC5230
Arduino UNO

Code

Processing

/***Final Project for Interactive Arts***/
/***Wanho Kim***/
import processing.serial.*;
Serial arduino;

PImage[] backgroundImage = new PImage [3];
PImage[] buildings = new PImage[9];
PImage[] imageText = new PImage[3];

PImage title;

int empty, titleTint, imageTrans, imageTint, backgroundImageNum, leftCover, rightCover, sensor, watingTime;
float imageWidth, imageHeight, imageWidthVal, imageHeightVal;

boolean people = false, openBuilding = false, endAnimation = false;

void setup(){
 size(1394, 415);
 
 println("Available serial ports:"); 
 arduino = new Serial(this, Serial.list()[1], 9600);
 
 backgroundImageNum = 0;
 watingTime = 0;
 imageWidth = 2400;
 imageHeight = 1300;
 imageWidthVal = 72;
 imageHeightVal = 39;
 imageTint = 0;
 imageTrans = -30;
 titleTint = 255;
 empty = 0;
 
 for(int i = 0; i < 3; i++){
 backgroundImage[i] = loadImage("backgroundImage" + i + ".jpg");
 }
 for(int i = 0; i < 9; i++){
 buildings[i] = loadImage("building" + i + ".png");
 }
 for(int i = 0; i < 3; i++){
 imageText[i] = loadImage("imageText" + i + ".png");
 }
 
 title = loadImage("title.png");
}

void draw(){
 
 background(255);
 pushMatrix();
 translate(width/2, height/2);
 imageMode(CENTER);
 image(backgroundImage[backgroundImageNum], 0, -140, imageWidth, imageHeight);
 imageMode(CORNER);
 popMatrix();
 
 println();

if(openBuilding == false){
//leftImages
 pushMatrix();
 translate(-leftCover/2+20, 0);
 scale(0.7);
 image(buildings[0], 825 - leftCover/2, 20);
 image(buildings[4], 233 + leftCover/5, -50);
 image(buildings[5], -60, -48);
 image(buildings[6], 400 - leftCover, 81);
 image(buildings[1], 55 + leftCover/3, -139);
 popMatrix();
 
//rightImages
 pushMatrix();
 translate(rightCover/2-80, 20);
 scale(0.7);
 image(buildings[7], 1562 + rightCover/4, -106);
 image(buildings[8], 1166, 140);
 image(buildings[3], 1600 - rightCover/5, 143);
 image(buildings[2], 526 + rightCover/2, -132);
 popMatrix();
 }
 
 if(leftCover >= 930 && rightCover >= 930){
 openBuilding = true;
 }else if(openBuilding == true && leftCover < 900 && rightCover < 900){
 watingTime = 0;
 imageWidth = 2400;
 imageHeight = 1300;
 imageTint = 0;
 imageTrans = -30;
 backgroundImageNum = int(random(0, 3));
 openBuilding = false;
 endAnimation = false;
 titleTint = 0;
 }
 
 if(openBuilding){
 watingTime += 1;
 if(watingTime >= 50){
 if(imageWidth > 1590){
 imageWidth -= imageWidthVal;
 imageHeight -= imageHeightVal;
 if(imageWidth <= 1590){
 endAnimation = true;
 }
 } 
 }
 }
 if(endAnimation == true){
 tint(255, imageTint);
 if(backgroundImageNum == 0){
 image(imageText[0], 0, imageTrans);
 }else if(backgroundImageNum == 1){
 image(imageText[1], 0, imageTrans);
 }else if(backgroundImageNum == 2){
 image(imageText[2], 0, imageTrans);
 }
 imageTint += 15;
 if(imageTrans < 0){
 imageTrans += 2; 
 }
 noTint();
 }
 if( arduino.available() > 0 ){
 while( arduino.available() > 0 ){
 String str = arduino.readStringUntil('\n');
 if( str != null ){
 String[] vals = split( str, ' ' );
 if( vals.length == 3 ){
 leftCover = int(trim(vals[0]));
 rightCover = int(trim(vals[1]));
 sensor = int(trim(vals[2]));
 println( leftCover, rightCover, sensor);
 }
 }
 }
 }
 if(sensor <= 50){
 people = true;
 empty = 0;
 }else if(sensor > 120){
 if(empty < 60){empty += 1;}
 if(empty >= 60){
 people = false;
 }
 }
 if(people && titleTint >= -100){
 titleTint -= 30;
 }else if(!people && titleTint <= 255){titleTint += 30;}
 tint(255, titleTint);
 image(title, 0, -20);
 noTint();
}

Arduino

/***Final Project for Interactive Arts***/
/***Wanho Kim***/

#include <Servo.h>

Servo servoMotor2, servoMotor1;

int servoMotor2_num = 10, servoMotor1_num = 9;

int potentio1 = 1, potentio2 = 2;

int servoMotor2_count1, servoMotor2_count2, servoMotor2_count3, watingTime;

boolean moveRightCover;

const int trig = 2;
const int echo = 3;
long duration, distance;

void setup() {
 
 Serial.begin(9600);
 
 servoMotor2.attach(servoMotor2_num);
 servoMotor1.attach(servoMotor1_num);
 servoMotor2_count1 = 0;
 servoMotor2_count2 = 0;
 servoMotor2_count3 = 0;
 watingTime = 0;
 moveRightCover = false;

pinMode(trig, OUTPUT);
 pinMode(echo, INPUT);
 
}

void loop() {

digitalWrite(trig, LOW);
 delayMicroseconds(5);
 digitalWrite(trig, HIGH);
 delayMicroseconds(5);
 digitalWrite(trig, LOW);

duration = pulseIn(echo, HIGH);

distance = duration/29/2;
 
 delay(35);
 
 int rightCover = analogRead(potentio1);
 int leftCover = analogRead(potentio2);

int posRightCover = rightCover;
 int posLeftCover = leftCover;

Serial.print(leftCover);
 Serial.print(" ");
 Serial.print(rightCover);
 Serial.print(" ");
 Serial.println(distance);


if(posRightCover >= 930 && posLeftCover >= 930){
 moveRightCover = true; 
 }

if(moveRightCover){

watingTime += 1;
 
 if(servoMotor2_count1 < 43 && watingTime >= 130){
 servoMotor2.write(178);
 servoMotor1.write(15);
 servoMotor2_count1 += 1;
 delay(1);
 }
 else if(servoMotor2_count1 >= 43 && servoMotor2_count3 < 35){
 servoMotor2.write(80);
 servoMotor1.write(128);
 servoMotor2_count3 += 1;
 watingTime = 0;
 delay(1);
 }
 else {
 servoMotor2.write(102);
 servoMotor1.write(98);
 moveRightCover = false;
 delay(1); 
 }
 }
 else{
 servoMotor2.write(102);
 servoMotor1.write(98); 
 servoMotor2_count1 = 0;
 servoMotor2_count2 = 0;
 servoMotor2_count3 = 0;
 delay(1);
 }
}

InteractiveArt_Project progress2

NEWS : I lost my arduino & laptop computer

When I connect 12V extra power to the motor driver, not only smoke came out from arduino, but also laptop’s power gone…RIP. The problem is quite obvious : I give both 12V power and 5V USB power to arduino in the same time.

20171209_202742_HDR

Buying new arduino is not a problem compare to my computer’s situation. Because it is Saturday, what I can do is just put it to A/S center. They said they will check the laptop on Monday. I will be in a panic if my whole memory is deleted. My data of final project(of all class) is in there…

20171209_120552_HDR20171210_110537_hdr.jpg

Of course, there is no time to cherish my computer. I ran to the Yongsan and bought new arduino. After than, I started to make controller by using paper board(A new blueprint was needed cause I lost my original file data)

20171208_182432_HDR20171209_105431_HDR20171209_133252_HDR20171209_211809_HDR

As I worried about, it was not easy to match gear mechanism work smoothly. Anyway… my physical controller is done almost 80%. If my hard disk is alive, I should find a way to download my data files from it.

InteractiveArt_Project progress1

Project progress 1

What I have to solve first for this project is a gear mechanism. Not only my controller could withstand people’s hand pressure, but also return automatically. I cannot sure whether motor can deliver upper part or not overcoming friction of potentiometer. The only way to check this problem is just making the model and test it physically. I changed the sketches several times to reduce unpredictability.

스케치
Design sketches

 

스케치디테일
Sketch detail 1

There is some limitations on the 3D printer when it should print 1mm detail. So I give design a spare(at least 0.5mm) and double check a drilling machine.

스케치디테일2
Sketch detail 2

Structurally, it is possible to use only 1 motor to move upper structure if I use wire system, But more complex gear system means dangerous of ‘Trial and error’. So I choose two motors and dual-motor-module safely.

스케치디테일3
Sketch detail 3

I use SketchUp pro 2017 to make model file. By dividing each component, a total size could more bigger than first draft. Because changing of size makes possible to use a projection mapping, I modified first plan about monitor. Now upper component will get the roll of projection display.

모델링
SketchUp pro 2017 modeling work

Fortunately, I could find extended program for gear parameter. It calculates the parameters between gear and gear rack.

모델링2
Measure tool for gear rack
3D프린터
Running a 3D printer

It is disaster when cheapie 3D printer(300,000 KRW! What can I expect to this) print my first output. Gears should be printed very precisely to avoid break, so I should keep print them again and again until they have sufficient quality.

출력결과물
Output. OMG

I started to make an image source for processing(Photoshop CC) in advance and bought some components for next step.

이미지준비
Graphic work
부품주문
Add more component

InteractiveArt_Project Draft

Draft for Final Project


“What could be the landmarks of Seoul?”

1. Motive

Seoul(Korea) has 2,000 years history. After Chosun decides it as a capital of nation, especially, Seoul can accumulate a variety of culture. Now we live this city of history and enjoy the space-culture.

Then What makes Seoul as like Seoul? What is different from other cities like Amsterdam, Tokyo, and New york? One answer about this question is ‘Landmark’.

자산 2.png

Most of people will recall DDP, Namsan Tower, 63 Building, or Lotte World Tower if they should explain the landmarks of Seoul. There is unconscious believe that landmark is kind of artificial work of human.

But I believe we already have unique landmark of nature – River and Mountains.

201001271416373022IMG_5230ew

Han river cross center of the city and mountains wrap around a border. Because of these nature elements, Seoul could have a unique urban landscape that is nowhere else in the world.

1

캡처.PNG

Old pictures show this fact clearly. I want to inform people that we have a lot of landmarks already, and  try to think about whether or not the new architecture is suitable for Seoul.

2. Design

이미지2.PNG

I need monitor, controller, and arduino for my project.

이미지3

Even though I can use ready-made product, I want new monitor cause this is an artwork for museum. 2 different textures of acrylic for case and LED panel from an abandoned monitor will be used. There should be holes to circulation of heat and to pull out the wires.

이미지4

4 layered controller which has Seoul’s bird-eye view picture will be made by acrylic too. 1~3rd acrylics are symbol of urban landmark and 4th acrylic is represent ‘Nature Landmark of Seoul’. User can control the display by opening the controller’s acrylic one by one like window.

이미지5

Each acrylic is connected with potentiometer that calculates a movement.

이미지6

Ultrasonic sensor could be used for adjust scale of image. For example, if people move forward to the monitor, image will be bigger and bigger.

Arduino sends the potentiometer’s calculation result to computer(laptop), and computer display a processing program.

이미지7

User could noticed that something behind reveal by removing the shadow of buildings.

이미지8

Background image will be changed after user opens all acrylic controller and gets some information about nature landmark.

이미지9

I want to give controller an automatic return system. To do so, I should use 3D printer or CNC cutter to make gear-motor mechanism.

이미지10

For this project, both arduino and processing code will be used.

InteractiveArt_Assignment7

Soundprint Archive


Download Link

https://drive.google.com/file/d/1bOxcwKIz1Ljl7JBhGB8nPUmZGSPldPXl/view?usp=sharing


Business_Card_Mockup_3.jpg

By 3D printer & AI arising DIY(Do It Yourself) trend again, many corporation started to make ‘Custom’ product using high-technology.

I designed the Soundprint Archive program that could express own’s personality. I got inspired by fingerprint which is everyone had since born, and then imagine a ‘voice-print(trace)’. People can make their own symbol graphic by using this program recording their voice’s volume. This program could be installed with print-system like photo or ticket to make business model.

이미지1
Once click the button, the arduino will send your voice information to the computer

 

이미지2
Your own symbol that is made by your voice

Even though this program now has only one graphic style, shape or color could be added for more dynamic visual work.

KakaoTalk_20171111_154023019

KakaoTalk_20171111_154022453
I use sound seonsor

KakaoTalk_20171111_154023019


Arduino Code

int soundSensor = A0;
int soundSensorVal;

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

void loop(){
soundSensorVal = analogRead(soundSensor);

Serial.println(soundSensorVal/2);
delay(100);
 
}

Processing Code

import processing.serial.*;
Serial arduino;

PImage background;
float circleSize, circleSizeV;
boolean onMouse, startDraw;
int trans, transC, drawNum, soundValue, countLine, rotation;
float[] lineEnd = new float[180];
int[] drawSize = new int[180];
lineDraw[] lineDraws = new lineDraw[180];




void setup(){
 size(500, 700);
 
 background = loadImage("background.png");
 
 circleSize = 20;
 circleSizeV = 0.6;
 countLine = 0;
 rotation = 0;
 drawNum = 0;
 trans = 255;
 transC = 6;
 
 onMouse = false;
 startDraw = false;
 
 for(int i=0; i<180; i++){
 lineDraws[i] = new lineDraw();
 }
 
 for(int i=0; i<180; i++){
 drawSize[i] = 0;
 }
 
 arduino = new Serial(this, "COM3", 9600);
}

void draw(){
 background(#2C99F2);
 image(background, 0, 0);
 
 stroke(235);
 strokeWeight(2);
 line(50, 620, 450, 620);
 
 fill(235);
 textAlign(CENTER);
 textSize(20);
 
 if(drawNum == 180){
 text("Click the circle to restart", width/2, 650);
 }else if(startDraw == true){
 fill(235, trans);
 text("Record your voice", width/2, 650);
 if(trans > 255 || trans < 100){
 transC *= -1;
 }
 trans += transC;
 fill(235);
 }else{text("Click the circle of the center", width/2, 650);}
 
 if(arduino.available() > 0 && startDraw){
 String soundSize = arduino.readStringUntil('\n');
 if(soundSize != null && drawNum < 180) {
 drawSize[drawNum] = int(soundSize.trim());
 }
 if(drawNum < 180){
 drawNum ++;
 }
 }
 
 noFill();
 stroke(255);
 strokeWeight(1.5);
 ellipse(width/2, 360, circleSize, circleSize);
 
 if(onMouse == false && startDraw == false){
 if(circleSize > 25 || circleSize < 20){
 circleSizeV *= -1;
 } 
 circleSize += circleSizeV;
 }
 
 if(mouseX >= width/2 - 15 && mouseX <= width/2 + 15
 && mouseY >= 345 && mouseY <= 375){
 onMouse = true;
 circleSize = 20;
 
 fill(255);
 ellipse(width/2, 360, 12, 12);
 
 cursor(HAND);
 
 if(mousePressed){
 startDraw = true;
 }
 } else{
 onMouse = false;
 cursor(ARROW);
 }
 
 if(startDraw == true){
 
 for(int i=0; i<countLine; i++){
 rotation += 2;
 if(drawSize[i] != 0){
 lineDraws[i].lineMake(drawSize[i]);
 }
 }
 
 if(countLine < 180){
 countLine ++;
 }
 rotation =0;
 
 noStroke();
 fill(#FF5076);
 if(drawNum == 180){
 fill(255);
 if(mouseX >= width/2 - 15 && mouseX <= width/2 + 15
 && mouseY >= 345 && mouseY <= 375 && mousePressed){
 circleSize = 20;
 circleSizeV = 0.6;
 countLine = 0;
 rotation = 0;
 drawNum = 0;
 
 onMouse = false;
 startDraw = false;
 
 for(int i=0; i<180; i++){
 lineDraws[i] = new lineDraw();
 }
 
 for(int i=0; i<180; i++){
 drawSize[i] = 0;
 }
 }
 }
 ellipse(width/2+0.5, 360.5, 22, 22);
 }
 
}

class lineDraw{
 
 lineDraw(){
 }
 void lineMake(int lineEnd){
 pushMatrix();
 translate(width/2, 360);
 rotate(radians(rotation));
 stroke(255);
 strokeWeight(1.5);
 line(0, 30, 0, lineEnd);
 popMatrix();
 }
 
}

InteractiveArt_Assignment6

자산 11

I plan the Smart Safety Belt for worker’s safety. At the construction site, there have been many dangerous accidents that threaten workers. Problem is that some workers often forget or ignore the safety regulation for them for convenience.

So I imagine that ‘How about manager could know entire worker’s safety belt condition?’ By doing so, manager can control whole safety-issue and will be able to respond quickly to the sudden situation.

자산 12

The Smart Safety Belt consists of two main parts – belt part & rope part.자산 13

By joining these part together, belt part give power to the rope part and user can know this process by checking the LED.자산 14

There are three LED modes. If belt part and rope part are disconnected, LED will be off. Green light means connection is successful so user can proceed work safely. Red light means, however, the battery power is so low that user should recharge this product.자산 15

Once user connects this item to their back, It notifies battery problem to the microphone(I suppose there will be smart helmet also in the future)자산 16

Here is more detail explanation of using process. If user put the rope part to the belt part, digital switch in the rope part that detects whether electricity runs or not give LED a signal ‘light up’ and makes lock to be locked. And then, the machine begins sending Wifi signals to the central manager(connected).자산 17

After work, user can get rid of rope part by pressing the LED(it is not only communication system but also a safety button). Wifi signals naturally disappear(disconnected).자산 18

This item is personal equipment. So I come up with the new charging socket. In the locker, user can use built-in charger so that they don’t need extra hanger for this IoT item.자산 19

Now manager could know who do use safety belt and who don’t. Application shows the entire list of workers, and by pressing the picture of worker, manager can communicate with belt’s user(again, there should be helmet-microphone because site of construction is filled with noise).

자산 20.png

Moreover, acceleration sensor(in contrast to first on-off sensor, analog signal should be changed as a digital signal) could notice a fall accident. In many cases, this kind of accident needs quick first aid or response. So manager’s application make emergency beep sound with sending help-signal to the nearest co-worker.

InteractiveArt_Assignment5

Finally, I started to handle the Arduino! Soon, however, I noticed that I cannot make even a simple hardware than childhood(in elementary school, I remembered all the resistance value colors for challenge)

I make some kind of music box that sing a ‘Red Flavor – Red Velvet’. To visualize the song, there are 6 LED & 2 buzzers(one for main sound, and one for sub sound)  in breadboard. I use 3 pin to separate sound and lights. It is quite hard to match the sound scale properly – I should modify detail value of scale.

I want to believe there would be more nice function than ‘delay’ 🙂

code

void setup() {
 pinMode(13, OUTPUT);
 pinMode(12, OUTPUT);
 pinMode(11, OUTPUT);
}
 
void loop() {
 tone(13,440,80);
 delay(120);
 tone(13,440,160);
 delay(240);
 tone(13,440,160);
 delay(240);
 tone(13,440,80);
 delay(120);
 tone(13,440,160);
 delay(250);
 tone(12, 300, 80);
 delay(350);
 tone(12, 300, 80);
 delay(200);
 delay(600);
 tone(13,440,160);
 delay(240);
 tone(13,440,160);
 delay(240);
 tone(13,440,80);
 delay(120);
 tone(13,349,240);
 delay(360);
 tone(13,440,80);
 delay(300);
 tone(12, 300, 80);
 delay(600);

tone(13,440,160);
 delay(240);
 tone(13,440,160);
 delay(240);
 tone(13,440,80);
 delay(240);
 tone(13,440,320);
 delay(480);
 tone(13,440,160);
 delay(240);
 tone(13,440,160);
 delay(240);
 tone(13,440,160);
 delay(240);
 tone(13,495,160);
 delay(240);
 tone(13,532,320);
 digitalWrite(11, HIGH);
 delay(480);
 digitalWrite(11, LOW);
 tone(13,495,160);
 delay(240);
 tone(13,440,160);
 delay(240);
 tone(13,440,320);
 delay(480);
 tone(13,440,160);
 delay(1200);
}

 

InteractiveArt_Assignment4


Download Link

https://drive.google.com/file/d/0B8e6SGZJywWtNGh0Q1plREl2aTA/view?usp=sharing


UX is one of the most powerful design methodology which was made in latter half of the 20th century. Especially after 2007, Smartphone application environment have kept needing this User-centered-thinking process.

‘Hello Persona’ is a persona make application that helps people to make persona easily. I make some basic templets which include picture, information, and characteristic. Of course there should be more functions like flowchart, moodboard, goals, etc to be more perfect application, now I concern about important big framework first.


what is the UX?

https://en.wikipedia.org/wiki/User_experience_design

What is the Persona?

https://en.wikipedia.org/wiki/Persona_(user_experience)

사진1사진2사진3


Code

/*******
Hello Persona!
- Persona Maker
*******/

portraitArrow arrow1, arrow2;
inputInformation input1, input2, input3, input4;
bar bar1, bar2, bar3;

PImage portraitArrowC, portraitArrow, title;
PImage[] portrait =new PImage[6];

PFont middleTitle4, middleTitle3, middleTitle2, middleTitle1;

int inputNum, buttonColorNext, buttonColorBack, page, portraitNum, mouseColor;
int[] nameColor = new int[5];
boolean[] name = new boolean[5];
boolean[] nameClick = new boolean[5];
char[] inputLetter = new char[5];
String[] inputWords = new String[5];

float mousePoint;

boolean backPage, nextPage, goRight, goLeft, nextPortrait, click;

void setup(){
 
 size(450, 720);
 
 bar1 = new bar();
 bar2 = new bar();
 bar3 = new bar();
 input1 = new inputInformation();
 input2 = new inputInformation();
 input3 = new inputInformation();
 input4 = new inputInformation();
 arrow1 = new portraitArrow();
 arrow2 = new portraitArrow();
 
 middleTitle1 = createFont("NanumBarunGothicUltraLight.ttf", 20);
 middleTitle2 = createFont("NanumBarunGothic.ttf", 20);
 middleTitle3 = createFont("NanumBarunGothicUltraLight.ttf", 28);
 middleTitle4 = createFont("NanumBarunGothicBold.ttf", 16);
 
 inputNum = 0;
 buttonColorNext = 160;
 buttonColorBack = 160;
 portraitNum = 0;
 mouseColor = 255;
 mousePoint = 28;
 page = 1;
 
 backPage = false;
 nextPage = false;
 goLeft = false;
 goRight = false;
 click = false;
 nextPortrait = false;
 
 noCursor();
 
 portraitArrowC = loadImage("portraitArrowC.png");
 portraitArrow = loadImage("portraitArrow.png");
 title = loadImage("title.png");
 
 for(int i = 0; i < 5; i++){
 nameColor[i] = 210;
 nameClick[i] = false;
 name[i] = false;
 inputWords[i] = " ";
 inputLetter[i] = ' ';
 }
 
 for(int i = 0; i < 6; i++){
 portrait[i] = loadImage("P"+i+".png");
 }
}

void draw(){
 
 background(255);
 
 imageMode(CENTER);
 image(title, width/2, 70);
 
if(page == 1){
 image(portrait[portraitNum], width/2, height/2);
 
 arrow1.drawArrow(380, height/2, 1);
 pushMatrix();
 translate(135, 720);
 rotate(radians(180));
 arrow2.drawArrow(65, 360, 2);
 popMatrix();
 
 fill(20);
 textFont(middleTitle1);
 textAlign(CENTER);
 text("\"Please select the picture\"", width/2, 160);
}else if(page == 2){
 image(portrait[portraitNum], width/2, 260, 120, 120);
 fill(20);
 textFont(middleTitle1);
 textAlign(CENTER);
 text("\"Fill the basic informations\"", width/2, 160);
 
 
 input1.drawinput(0, 380, "Name");
 textAlign(RIGHT);
 text(inputWords[0], 400, 380);
 input2.drawinput(1, 450, "Age");
 textAlign(RIGHT);
 text(inputWords[1], 400, 450);
 input3.drawinput(2, 520, "Location");
 textAlign(RIGHT);
 text(inputWords[2], 400, 520);
 input4.drawinput(3, 590, "Interest");
 textAlign(RIGHT);
 text(inputWords[3], 400, 590);
 
 textAlign(CENTER);

}else if(page == 3){
 fill(20);
 textFont(middleTitle1);
 textAlign(CENTER);
 text("\"Determine character's personality\"", width/2, 160);
 bar1.drawBar(0, 260, "Quality", "Quantity");
 bar2.drawBar(0, 400, "Sensitive", "Insensitive");
 bar3.drawBar(0, 540, "Sociable", "Introvert");
}else if(page == 4){
 image(portrait[portraitNum], 110, 260, 120, 120);
 fill(60);
 textFont(middleTitle4);
 textAlign(LEFT);
 text("Name :", 195, 220);
 textAlign(RIGHT);
 text(inputWords[0], 400, 220);
 textAlign(LEFT);
 text("Age :", 195, 250);
 textAlign(RIGHT);
 text(inputWords[1], 400, 250);
 textAlign(LEFT);
 text("Location :", 195, 280);
 textAlign(RIGHT);
 text(inputWords[2], 400, 280);
 textAlign(LEFT);
 text("Interest :", 195, 310);
 textAlign(RIGHT);
 text(inputWords[3], 400, 310);
 textAlign(CENTER);
 fill(20);
 textFont(middleTitle1);
 textAlign(CENTER);
 text("\"Get a premium now! - Only 5,000\\\"", width/2, 160);
 bar1.drawBar(1, 390, "Quality", "Quantity");
 bar2.drawBar(1, 470, "Sensitive", "Insensitive");
 bar3.drawBar(1, 540, "Sociable", "Introvert");
}
//Page button
 fill(250);
 noStroke();
 rect(0, 650, width, 70);
 
 textFont(middleTitle2);
 fill(buttonColorNext);
 if(page == 4){
 fill(220);
 }else{fill(buttonColorNext);}
 text("Next", width/2+110, 691);
 if(page == 1){
 fill(220);
 }else{fill(buttonColorBack);}
 text("Back", width/2-110, 691);
 
 if(mouseX >= width/2+70 && mouseX <= width/2+150
 && mouseY >= 660 && mouseY <= 710){
 buttonColorNext = #F42F63;
 nextPage = true;
 }else{
 buttonColorNext = 160;
 nextPage = false;
 }
 
 if(mouseX >= width/2-150 && mouseX <= width/2-70
 && mouseY >= 660 && mouseY <= 710){
 buttonColorBack = #F42F63;
 backPage = true;
 }else{
 backPage = false;
 buttonColorBack = 160;
 }
 
//Mouse pointer design
 stroke(210);
 strokeWeight(2);
 fill(mouseColor, 180);
 ellipse(mouseX, mouseY, mousePoint, mousePoint);
 
 if(click == true && mousePoint >= 20){
 mousePoint -= 2;
 mouseColor -= 5;
 }else if(click == false && mousePoint <= 28 && mouseColor < 255){
 mousePoint += 2;
 mouseColor += 5;
 }
 
}
void keyTyped(){
 if(name[3]){
 inputNum = 3;
 }else if(name[2]){
 inputNum = 2;
 }else if(name[1]){
 inputNum = 1;
 }else if(name[0]){
 inputNum = 0;
 }
 
 if(inputWords[inputNum].length() > 12){
 }else if(nameClick[inputNum] == true &&
 (key >= 'A' && key <= 'z') || key == ' ' || key >= '0' && key <= '9'){
 inputLetter[inputNum] = key;
 inputWords[inputNum] += inputLetter[inputNum];
 }else if(nameClick[inputNum] == true && key == BACKSPACE){
 inputWords[inputNum] = "";
 }
}

void mousePressed(){
 click = true;
}

void mouseReleased(){
 click = false;
 if(nextPage == true && page != 4){
 page += 1;
 }else if(backPage == true && page != 1){
 page -= 1;
 }
 
 if(goRight){
 if(portraitNum == 5){
 portraitNum = 0;
 }else{portraitNum += 1;}
 }else if(goLeft){
 if(portraitNum == 0){
 portraitNum = 5;
 }else{portraitNum -=1;}
 }
 goRight = false;
 goLeft = false;
 
 if(name[0]){
 nameClick[0] = true;
 nameColor[0] = #F42F63;
 nameClick[1] = false;
 nameColor[1] = 210;
 nameClick[2] = false;
 nameColor[2] = 210;
 nameClick[3] = false;
 nameColor[3] = 210;
 }else if(name[1]){
 nameClick[1] = true;
 nameColor[1] = #F42F63;
 nameClick[0] = false;
 nameColor[0] = 210;
 nameClick[2] = false;
 nameColor[2] = 210;
 nameClick[3] = false;
 nameColor[3] = 210;
 }else if(name[2]){
 nameClick[2] = true;
 nameColor[2] = #F42F63;
 nameClick[1] = false;
 nameColor[1] = 210;
 nameClick[3] = false;
 nameColor[3] = 210;
 nameClick[0] = false;
 nameColor[0] = 210;
 }else if(name[3]){
 nameClick[3] = true;
 nameColor[3] = #F42F63;
 nameClick[1] = false;
 nameColor[1] = 210;
 nameClick[2] = false;
 nameColor[2] = 210;
 nameClick[0] = false;
 nameColor[0] = 210;
 }
}

class bar{
 int ellipseColor = #FFAFC5, ellipseX = 225;
 boolean ellipseClick = false;
 bar(){
 }
 void drawBar(int move, int y, String left, String right){


 stroke(#58EAC4);
 strokeWeight(8);
 line(150, y, 300, y);
 
 stroke(#F42F63);
 line(150, y, ellipseX, y);
 
 stroke(ellipseColor);
 strokeWeight(3);
 fill(240);
 ellipse(ellipseX, y, 25, 25);
 
 textFont(middleTitle4);
 fill(120);
 textAlign(RIGHT);
 text(left, 115, y+5);
 textAlign(LEFT);
 text(right, 325, y+5);

textAlign(CENTER);
 
if(move == 0){
 if(ellipseClick && mouseX <= 300 && mouseX >= 150){
 ellipseX = mouseX;
 ellipseColor = #F42F63;
 }else{ellipseColor = #FFAFC5;}
 
 if(mousePressed && mouseX >= ellipseX-20 && mouseX
 <= ellipseX+20 && mouseY >= y-20 && mouseY <= y+20){
 ellipseClick = true;
 }else{ellipseClick = false;}
 }
}
}

class inputInformation{
 inputInformation(){
 }
 void drawinput(int num, int y, String title){
 
 textFont(middleTitle3);
 textAlign(CORNER);
 stroke(120);
 strokeWeight(1.2);
 fill(nameColor[num]);
 text(title, 50, y);
 stroke(nameColor[num]);
 line(50, y+15, 400, y+15);
 textAlign(CENTER);
 
 if(mouseX >= 30 && mouseX <= 420
 && mouseY >= y-40 && mouseY <= y+30){
 if(nameClick[num] == false){
 nameColor[num] = 140;
 }
 name[num] = true;
 }else{
 if(nameClick[num] == false){
 nameColor[num] = 210;
 }
 name[num] = false;
 }
 }
}

class portraitArrow{
 portraitArrow(){
 }
 void drawArrow(int x, int y, int c){
 
 if(mouseX >= x-20 && mouseX <= x+25
 && mouseY >= y-60 && mouseY <= y+60){
 image(portraitArrowC, x, y);
 if(c == 1 && mousePressed){
 goRight = true;
 }else if(c == 2 && mousePressed){
 goLeft = true;
 }
 }else{
 image(portraitArrow, x, y);
 }
 }
}

InteractiveArt_Assignment3

Smart Kiosk for SKKU Healthcare Center

Information

Site : Reception desk in Sungkyunkwan University

User : Student, professor, faculty member etc

Design Concept : Minimize repetitive and predictable works in healthcare center by using GLS data and facial recognition system.

Download

https://drive.google.com/file/d/0B8e6SGZJywWtbmZVbi1HZVZkdXM/view?usp=sharing

사진1사진2

사진3사진4

What is this?

I designed Smart Registration System of Kiosk for SKKU Healthcare Center. In the hospital, reception process is essential but also quite stereotyped work. There should be name, age, and other physical information with answer why did I visit hospital. Basically, GLS(University’s data & web service) has information of students and faculty member. So, if there is a little technology in camera – facial recognition -, this process could be easier than now. Moreover, reception can be written in touch screen, not paper.

Nowadays, this kind of concept is not a fantasy anymore. (Actually smartphone already can do this) Several month ago, I visit Seoul National University Hospital for some  medical examination. There was so many people, and reception process was too difficult. I really hope that technology could fix this problem.

Code

/***********
SUNGKYUNKWAN_UNIVERSITY_HEALTHCARE_CENTER_SMART_REGISTRATION_SYSTEM
***********/

page1 page1;

PImage qrCode, cancel, blurBackground, returnHome, picture, title, schoolSymbol, loadingIcon;
PFont receptionFont, optionFont, welcomeFont1, welcomeFont2, bodyFont, subFont;
int massageTT, massageT, randomNumber, secondQColor, secondQLineColor, firstQLineColor, firstQColor, receptionWindowT, receptionWindowY, blur, returnHomeTint, reservation, information, reception, page, iconT, iconY, iconYTime, boot, bootingCount, putMouse, text1Trans, text2Trans, text2TransC, analysingTime;
float rotateSpeed, rotateAxel;
boolean informationClick, reservationClick, submit, clickYes, clickNo, secondQ, firstQ, receptionClick, moveIcon, analysing, text2Loading;
char receptionLetter2, receptionLetter1;
String receptionWords2 = "", receptionWords1 = "";
color submissionColor, boxColor, yesColor, noColor;

void setup(){
 
 size(650, 800);
 
 qrCode = loadImage("qrCode.png");
 cancel = loadImage("cancel.png");
 blurBackground = loadImage("blur.png");
 returnHome = loadImage("returnHome.png");
 picture = loadImage("picture.png");
 title = loadImage("title.png");
 schoolSymbol = loadImage("schoolSymbol.png");
 loadingIcon = loadImage("loadingIcon.png");
 
//Load font 
 receptionFont = createFont("HelveticaNeueLTStd-Md.otf", 20);
 optionFont = createFont("HelveticaNeueLTStd-Md.otf", 40);
 welcomeFont1 = createFont("HelveticaNeueLTStd-Md.otf", 30);
 welcomeFont2 = createFont("HelveticaNeueLTStd-UltLt.otf", 65);
 bodyFont = createFont("HelveticaNeueLTStd-Md.otf", 17);
 subFont = createFont("HelveticaNeueLTStd-UltLt.otf", 30);
 
 submissionColor = 220;
 boxColor = 249;
 yesColor = 180;
 noColor = 180;
 
 randomNumber = int(random(1, 10));
 massageT = 255;
 massageTT = 0;
 secondQColor = 0;
 secondQLineColor = 0;
 firstQLineColor = 0;
 firstQColor = 0;
 receptionWindowT = 0;
 receptionWindowY = height/2+150;
 blur = 0;
 page = 0;
 putMouse = 0;
 rotateSpeed = 0;
 rotateAxel = 0.1;
 text1Trans = 0;
 text2Trans = 0;
 text2TransC = 5;
 analysingTime = 0;
 boot = 0;
 iconY = 0;
 iconYTime = 0;
 iconT = 255;
 reception = 180;
 reservation = 180;
 information = 180;
 returnHomeTint = 90;
 
 submit = false;
 clickYes = false;
 clickNo = false;
 secondQ = false;
 firstQ = false;
 receptionClick = false;
 reservationClick = false;
 informationClick = false;
 moveIcon = false;
 analysing = false;
 text2Loading = false;
 
 page1 = new page1();
 
}

void draw(){
 
 bootingCount += 1;
 
 if(bootingCount >= 50){
 boot += 5;
 }
 
 background(0);
 fill(230, boot);
 rect(-5, -5, 655, 805);
 
 if(bootingCount >= 180){
 
 imageMode(CORNER);
 image(title, 50, 50);
 image(schoolSymbol, 535, 48);
 
 stroke(180);
 strokeWeight(2);
 line(50, 125, 600, 125);
 line(50, 750, 600, 750);
 
//Go next page
 if(page == 1){
 page1.start1();
 }else{
 
//Change the icon's color when user put the mouse cursor
 noStroke();
 fill(#A0D7E7, putMouse);
 if(analysingTime >= 450){
 fill(#BBD97D, iconT);
 }
 ellipse(width/2, 403 + iconY, 50, 50);

if(mouseX <= width/2+23 && mouseX >= width/2-23
 && mouseY <= 423 && mouseY >= 377){
 
 if(putMouse < 255){
 putMouse+=10;
 analysing = true;
 }
 
 } else if(putMouse>=0){
 
 putMouse-=10;
 analysing = false;
 
 }

//Rotate the icon when user put the mouse cursor
 pushMatrix();
 imageMode(CENTER);
 
 fill(0); 
 translate(width/2, 402);
 rotate(radians(rotateSpeed));
 tint(255, iconT);
 image(loadingIcon, 0, -2 + iconY);
 noTint();
 if(mouseX <= width/2+23 && mouseX >= width/2-23
 && mouseY <= 423 && mouseY >= 377){
 rotateSpeed += rotateAxel;
 if(rotateAxel < 9){
 rotateAxel += 0.1;
 }
 } else if (rotateSpeed > 0 && rotateAxel > 0){
 rotateSpeed += rotateAxel;
 rotateAxel -= 0.2;
 }
 if(analysingTime >= 450){
 rotateSpeed = 0;
 rotateAxel = 0;
 }
 popMatrix();
 
 if(analysingTime >= 450){
 moveIcon = true;
 analysing = true;
 text2Trans = 0;
 text2TransC = 0;
 text1Trans = 0;
 
 fill(50, iconT);
 text("Complete", width/2, 465 + iconY);
 }
 
 if(moveIcon == true) {
 iconYTime += 1;
 if(iconYTime >= 80) {
 iconY += 4;
 iconT -= 25;
 }
 if(iconT <= -1000) {
 page = 1;
 iconT = 255; 
 }
 }
 
 if(analysing == false){
 if(text1Trans<255){
 if(text2Trans <= 0){
 text1Trans += 5;
 }
 text2Trans -= 5;
 }
 analysingTime = 0;
 text2Loading = false;
 text2TransC = 5;
 } else {
 if(text1Trans > 0){
 text1Trans -= 5;
 }
 
 analysingTime += 1;
 
 if(analysingTime >= 20 && text2Trans <= 255){
 text2Trans += text2TransC;
 if(text2Trans == 255){text2Loading = true;}
 if(text2Loading == true){
 if(text2Trans == 255 || text2Trans == 80){
 text2TransC *= -1;
 }
 }
 }
 }

fill(50, text1Trans);
 textFont(bodyFont);
 textAlign(CENTER);
 text("Fix your eyes to this icon \n and put the mouse cursor in it", width/2, 465);

fill(50, text2Trans);
 text("Scanning your face now", width/2, 465);
 } 
 }
}

class page1 {

page1(){
 }
 
 void start1() {
 
 textAlign(CORNER);

textFont(welcomeFont1);
 fill(45);
 text("Welcome",245,207);
 textFont(welcomeFont2);
 text("Wanho Kim",245,267);
 
 image(picture, 102, 168);
 
 tint(255, returnHomeTint);
 image(returnHome, 50, 710);
 noTint();
 
 textFont(optionFont);
 textAlign(CENTER, CENTER);
 fill(reception);
 text("Reception", width/2, height/2-10);
 fill(reservation);
 text("Confirm Reservation", width/2, height/2+90);
 fill(information);
 text("Information", width/2, height/2+190);
 
 if(mouseX>=width/2-95 && mouseX<=width/2+95 &&
 mouseY>=height/2-30 && mouseY<=height/2+10 && receptionClick==false && reservationClick == false && informationClick == false){
 if(reception>45){
 reception -= 10;
 cursor(HAND);
 }
 if(mousePressed){
 receptionClick = true;
 }
 } else if(reception<180){
 reception += 10;
 cursor(ARROW);
 }
 
 if(mouseX>=width/2-190 && mouseX<=width/2+190 &&
 mouseY>=height/2+70 && mouseY<=height/2+110 && receptionClick==false && reservationClick == false && informationClick == false){
 if(reservation>45){
 reservation -= 10;
 cursor(HAND);
 }
 if(mousePressed){
 reservationClick = true;
 }
 } else if(reservation<180){
 reservation += 10;
 cursor(ARROW);
 }
 
 if(mouseX>=width/2-105 && mouseX<=width/2+105 &&
 mouseY>=height/2+170 && mouseY<=height/2+210 && receptionClick==false && reservationClick == false && informationClick == false){
 if(information>45){
 information -= 10;
 cursor(HAND);
 }
 if(mousePressed){
 informationClick = true;
 }
 } else if(information<180){
 information += 10;
 cursor(ARROW);
 }
 
 if(mouseX>=50 && mouseX<=110 &&
 mouseY>=705 && mouseY<=730 && receptionClick==false && reservationClick == false && informationClick == false){
 if(returnHomeTint<255){
 returnHomeTint += 10;
 cursor(HAND);
 }
 if(mousePressed){
 
//Return All Variable
 submissionColor = 220;
 boxColor = 249;
 yesColor = 180;
 noColor = 180;
 
 randomNumber = int(random(1, 10));
 massageT = 255;
 massageTT = 0;
 secondQColor = 0;
 secondQLineColor = 0;
 firstQLineColor = 0;
 firstQColor = 0;
 receptionWindowT = 0;
 receptionWindowY = height/2+150;
 blur = 0;
 page = 0;
 putMouse = 0;
 rotateSpeed = 0;
 rotateAxel = 0.1;
 text1Trans = 0;
 text2Trans = 0;
 text2TransC = 5;
 analysingTime = 0;
 boot = 255;
 iconY = 0;
 iconYTime = 0;
 iconT = 255;
 reception = 180;
 reservation = 180;
 information = 180;
 returnHomeTint = 90;
 
 submit = false;
 clickYes = false;
 clickNo = false;
 secondQ = false;
 firstQ = false;
 receptionClick = false;
 reservationClick = false;
 informationClick = false;
 moveIcon = false;
 analysing = false;
 text2Loading = false;
 cursor(ARROW);
 page = 0;
 }
 } else if(returnHomeTint>90){
 returnHomeTint -= 10;
 cursor(ARROW);
 }
//Draw Information Window
 if(informationClick == true){
 
 tint(255, blur);
 imageMode(CENTER);
 image(blurBackground, width/2, height/2);
 noTint();
 
 if(blur<255){
 blur += 20;
 }
 
 rectMode(CENTER);
 stroke(220);
 fill(255);
 rect(width/2, height/2, 350, 450);
 rectMode(CORNER);
 
 textFont(subFont);
 fill(45);
 text("Information", width/2, height/2-150);
 textFont(bodyFont);
 fill(80);
 textAlign(LEFT);
 text("Name : Wanho Kim", width/2-140, height/2-80);
 text("Gender : Male", width/2-140, height/2-40);
 text("Age : 23", width/2-140, height/2);
 text("Height : 179cm", width/2-140, height/2+40);
 text("Weight : 66kg", width/2-140, height/2+80);
 text("Disease : None", width/2-140, height/2+120);

fill(180);
 text("You can modify your information in GLS", width/2-155, height/2+190);
 textAlign(CENTER);

image(cancel, 470, 205);
 
 if(mouseX>=455 && mouseX<=485 &&
 mouseY>=180 && mouseY<=210){
 cursor(HAND);
 if(mousePressed){
 informationClick = false;
 cursor(ARROW);
 blur = 0;
 }
 }else{
 cursor(ARROW);
 }
 }

//Draw Reservation Window
 if(reservationClick == true){
 
 tint(255, blur);
 imageMode(CENTER);
 image(blurBackground, width/2, height/2);
 noTint();
 
 if(blur<255){
 blur += 20;
 }
 
 rectMode(CENTER);
 stroke(220);
 fill(255);
 rect(width/2, height/2, 400, 300);
 rectMode(CORNER);
 
 textFont(subFont);
 fill(45);
 text("No reservation", width/2, height/2-70);
 textFont(bodyFont);
 fill(80);
 text("Please make a reservation at the website", width/2, height/2-10);
 image(qrCode, width/2, height/2+70);
 
 image(cancel, 495, 280);
 
 if(mouseX>=480 && mouseX<=510 &&
 mouseY>=260 && mouseY<=290){
 cursor(HAND);
 if(mousePressed){
 reservationClick = false;
 cursor(ARROW);
 blur = 0;
 }
 }else{
 cursor(ARROW);
 }
 }

//Draw Reception Window
 if(receptionClick == true){
 tint(255, blur);
 imageMode(CENTER);
 image(blurBackground, width/2, height/2);
 noTint();
 
 if(blur<255){
 blur += 20;
 }
 
 rectMode(CENTER);
 stroke(220);
 fill(255, receptionWindowT);
 rect(width/2, receptionWindowY, 450, 600);
 
 stroke(submissionColor);
 fill(boxColor);
 rect(width/2, receptionWindowY+270, 450, 60);
 rectMode(CORNER);
 fill(190);
 textFont(receptionFont);
 
 if(receptionWords1 != "" && receptionWords2 != ""
 && (clickYes || clickNo)){
 boxColor = #D1E8FF;
 fill(#479FFA);
 text("SUBMISSION", 325, receptionWindowY+270);
 if(mouseX>=100 && mouseX<=550 &&
 mouseY<=700 && mouseY>= 640){
 submissionColor = #479FFA;
 
 if(mousePressed){
 submit = true;
 }
 
 }else{
 submissionColor = 220;
 }
 stroke(220);
 }else{
 boxColor = 249;
 text("Please fill up all the blanks", 325, receptionWindowY+270);
 }
 
 image(cancel, 520, -275+receptionWindowY);
 
 if(mouseX>=500 && mouseX<=540 &&
 mouseY<=140 && mouseY>= 100 && receptionClick==true){
 cursor(HAND);
 if(mousePressed){
 receptionClick=false;
 }
 }else{
 cursor(ARROW);
 }
 
 if(mouseX>=140 && mouseX<=505 &&
 mouseY>=150 && mouseY<=230){
 firstQ = true;
 firstQColor = #479FFA;
 firstQLineColor = #479FFA;
 }else{
 firstQ = false;
 firstQColor = 85;
 firstQLineColor = 220;
 }
 
 if(mouseX>=140 && mouseX<=505 &&
 mouseY>=250 && mouseY<=330){
 secondQ = true;
 secondQColor = #479FFA;
 secondQLineColor = #479FFA;
 }else{
 secondQ = false;
 secondQColor = 85;
 secondQLineColor = 220;
 }
 
 textAlign(CORNER);
 textFont(receptionFont);
 fill(firstQColor);
 text("What is the problem?", 140, -215+receptionWindowY);
 textFont(subFont);
 
 fill(25);
 text(receptionWords1, 140, 220);
 stroke(firstQLineColor);
 line(140, -175+receptionWindowY, 505, -175+receptionWindowY);
 
 if(mouseX>=140 && mouseX<=505 &&
 mouseY>=280 && mouseY<=360){
 secondQ = true;
 secondQColor = #479FFA;
 secondQLineColor = #479FFA;
 }else{
 secondQ = false;
 secondQColor = 85;
 secondQLineColor = 220;
 }
 
 fill(secondQColor);
 textFont(receptionFont);
 text("How long did you sick?", 140, -95+receptionWindowY);
 
 textFont(subFont);
 fill(25);
 text(receptionWords2, 140, 350);
 stroke(secondQLineColor);
 line(140, -45+receptionWindowY, 505, -45+receptionWindowY);
 
 fill(85);
 textFont(receptionFont);
 text("Are there any other medications \nyou currently take?", 140, 35+receptionWindowY);
 fill(yesColor);
 if(mouseX>=415 && mouseX<=450 &&
 mouseY>=88+receptionWindowY && mouseY<=110+receptionWindowY){
 yesColor = #479FFA;
 if(mousePressed){
 clickYes = true;
 clickNo = false;
 }
 }else if(clickYes == false){
 yesColor = 180;
 }
 text("YES", 415, 105+receptionWindowY);
 fill(noColor);
 if(mouseX>=475 && mouseX<=505 &&
 mouseY>=88+receptionWindowY && mouseY<=110+receptionWindowY){
 noColor = #479FFA;
 if(mousePressed){
 clickNo = true;
 clickYes = false;
 }
 }else if(clickNo == false){
 noColor = 180;
 }
 text("NO", 475, 105+receptionWindowY);
 
 if(clickYes == true && clickNo == false){
 noFill();
 stroke(#479FFA);
 ellipse(435, 497, 50, 50);
 }
 
 if(clickNo == true && clickYes == false){
 noFill();
 stroke(#479FFA);
 ellipse(489, 497, 50, 50);
 }
 }
 
 if(receptionClick==false && receptionWindowY < height/2+150){
 receptionWindowY += 15;
 receptionWindowT -= 30;
 receptionWords1 = "";
 receptionWords2 = "";
 blur = 0;
 yesColor = 180;
 noColor = 180;
 clickYes = false;
 clickNo = false;
 }
 
 if(receptionWindowY > height/2 && receptionClick == true){
 receptionWindowY -= 15;
 receptionWindowT += 30;
 }
 
 if(submit == true){
 
 receptionClick = false;
 reservationClick = false;
 informationClick = false;

rectMode(CENTER);
 stroke(#479FFA, massageT);
 fill(250, massageT);
 rect(width/2, height/2, 300, 110);
 rectMode(CORNER);
 textFont(receptionFont);
 fill(80, massageT);
 text("Successfully submitted", width/2, height/2-20);
 text("Waiting number : " + randomNumber, width/2, height/2+20);
 stroke(220);
 
 massageTT += 1;
 
 if(massageTT >= 160){
 submit = false;
 submissionColor = 220;
 massageTT = 0;
 massageT = 255;
 }else if(massageTT >= 100){
 massageT -= 5;}
 }

}

}
void keyTyped() {
 
 if(firstQ == true) {
 if(receptionWords1.length() >= 28){
 }else if((key >= 'A' && key <= 'z') || key == ' '){
 receptionLetter1 = key;
 receptionWords1 += receptionLetter1;
 }
 if(key == BACKSPACE){
 receptionWords1 = "";
 }
 }
 
 if(secondQ == true) {
 if(receptionWords2.length() >= 28){
 }else if((key >= 'A' && key <= 'z') || key == ' ' || key >= '0' && key <= '9'){
 receptionLetter2 = key;
 receptionWords2 += receptionLetter2;
 }
 if(key == BACKSPACE){
 receptionWords2 = "";
 }
 }
}

 

Physical computing projects research

#1 inFORM – Dynamic Shape Display

What is the ‘inFORM’ ?

The inFORM is a dynamic shape display made by Tangible Media Group in MIT media lab. It  changes digital signal to physical objects consisting grid-system. If user inputs a signal to the sensor(Microsoft’s kinetic) by moving hands or something, 150 custom Arduino decide how many sticks should be moved and change their height to reproduce entered real motion. So conceptually, this is the remote-physical-communication-system. Moreover, it could express digital 3D model including graph, mathematical  function. Because a technical problem, limit of resolution is now 30×30. In the future, however, it could change entire concept of ‘remote communication’ from display based virtual world to physical based real sense world.

캡처

Why do I select this project?

The inFORM shows new possibility of future communication. Nowadays, area of VR(Virtual Reality) and AR(Augmented Reality) are rapidly bigger and bigger because they could overcome real world’s many limits so that freely overlay virtual information or even make entirely new earth as many as someone’s need. The problem is however VR and AR technology would be higher than now, they still could handle only visual-problem. In that sense, the inFORM suggests two step forward future. Classical visual communication have been using 2D image(although there are so many software that could make 3D object file, as far as those kind of file was printed by 3d printer, it could be recognized only in the flat display or paper) as  an alternative of text, but the way of communication of inFORM will bring new paradigm – physical communication.

캡처2

How did they make this? (guess)

First, Microsoft’s Kinect’s seems getting information of physical motion by using sensors. I think depth sensor would be mainly used to calculate three-dimensional information. After that, hundred of Arduino will start to change this analogue signal as a digital shape because they should give orders to the each of 30×30 grid stick. In the Processing, code should consider:

  1. Is there any height value entered by depth sensor? If yes, get height information. If not, leave the stick.
  2. Raise the stick based on the height information. If there is any changes, instantly reflect new height of stick.
  3. At the same time, choose appropriate image of projector

What I wonder is, how processing make real image as a 30×30 low resolution digital image. Algorithm which calculate average value of specific area could be one answer, I guess. Maybe, Arduino use this specific area’s value to move 1 stick( = 1 pixel)

#2 Senseless Drawing Bot

What is the ‘Senseless Drawing Bot’ ?

The Senseless Drawing Bot is a robot that could draw abstract painting to the wall. It is made by arduino, robot arms, spray, and skateboard . With repetitive front-back movement of skateboard, robot arms naturally started pendulum motion and this unpredictable random movement make linear trace to the wall by using spray. This kind of painting algorithm seems very similar with  Jackson Pollock style who dropped a paint by making hole to the paintpot and swing it in the air. Users can only control the color of paint, number of times of spraying out, speed of skateboard.

캡처

Why do I select this project?

As time goes by, supposition that I have from several years ago becomes conviction : In the future(or maybe now), designer should design ‘Design Algorithm’, not design result itself. Argument that area of art couldn’t be robot’s work because it cannot imitate human’s original emotion which is essential to artistic behavior is losing its strength. But in my opinion, whether the paint was created by real emotion or not is secondary thing cause what is more meaningful for audience could be that do audience can feel any emotion from artwork or not. So if someone feel ‘beauty’ or experience any kind of emotional changes, the senseless drawing bot is clearly an artist. In the conclusion, now human should make ‘artist’.

캡처2

How did they make this? (guess)

It seems there is some kind of acceleration sensor which could know speed of skateboard. Knowing when did robot start the painting is very important cause robot arms should reach to the enough height to do action painting. It is quite sure there will be algorithm between speed of skateboard and how many times did skateboard move, or at least things like rotation sensor could know how much the arms rotate from base line. So in the Processing, code should consider like ‘Did arm reach to the enough height / or rotation angle / or moving distance?’

I imagine that how about If user want to fill whole wall with this robot’s art. There will be a variety of ways to solve this problem. Maybe robot could be made like spider-man so that it could move X & Y axis or just simply give new function to the legs of robot that can control vertical movement.

WordPress.com 제공.

위로 ↑