Pcomp&ICM Final project – PICSELF

team project- Amanda lee& ANNIE KIM


CONCEPT

 

“Picself” is an interactive photo booth. This project was inspired by Sticker photo booth which was a big trend in our childhood. We tried to reinterpret that experience using motion sensor and chroma key effect. As not only using green screen as a background, but also using green colored props as well, we wanted people to interact more playful and understand our concept more easily.

And as our generation uses hand gesture as a new interface in these days, we tried to apply it to our project as a new style of drawing tool.  We combined physical interaction ( pressing buttons ) and non-physical interaction ( drawing on the air ), and both has an very instantaneous response by user’s interaction.


Concept Video

 


HOW TO PLAY

 

1.  User have to choose whether they are left-handed person or right-handed person.

( If the user is right-handed, right hand becomes a brush and left hand becomes a eraser, and vice versa to left-handed. )

 

2.  Users can see the instruction about how to play with.

 

3.  And users will start to move their hand above the motion sensor and draw whatever they want.

 

Brush size and position will be changed by user’s hand position

 x-position (width) and y-position (height) will control the position of the line, z-position(depth) will control the size of the brush.

They can also choose brush types between three different styles by using buttons and switch to sticker mode and play with stickers.

 

4. After drawing, users can play with green props and capture their favorite moment.

5. The image will be sent to our archive webpage, and users can check out their photos and download them.   ( https://picselfarchive.wordpress.com )

 


WE USED

 

p5.js for designing specific drawing tools,

leap.js for detecting hand motion (using Leap motion sensor),

Seriously.js for chroma key effect,

Arduino  for physical buttons and for capturing screen using keypress function,

Automator for sending screenshot images immediately to our archive webpage.


 

2016 ITP WINTER SHOW

 

 

To check out screenshot images which people took in our winter show :

HTTPS://PICSELFARCHIVE.WORDPRESS.COM/

 


INSTRUCTION VIDEO

 


PROCESS

 

first idea sketch

download download (1)


  • STEP 1 – coding

This was our first step using motion sensor to draw with our finger.

And we tested several styles of concepts.


  • step 2 – fabrication

We designed a box for our physical buttons.

We cut and assembled MDF board to make a box and used a laser cutter to print our front panel.

And soldered all the components in circuit to the board.

download (2) download (3) download (4) download (5) download (6) download (7) download (8) download (9)


PLAY TEST & USER TEST

 

download (10) download (11) download (12) download (13) download (14) download (15)

Pcomp&ICM Final project – PICSELF

ICM+Phycomp-Final Project Proposals

Annie and I’m working as a partner for this Final project, combining ICM and Phycomp.


Idea

Our Idea is making an “interactive drawing tool” using Leap motion sensor.

Our initial idea was making a simple drawing tool, and suddenly we got inspired by “photo sticker booth” that we can decorate our own photos. So we developed our idea to add a greenscreen and camera.

download           15e19d080f93ab2947a5ab1eb5249c43


Drawing my own background!!

fullsizerender-13

User will stand in front of the green screen and they will see themselves in the front wall which is projecting in a realtime. Then, They will start to draw their own background using their hand. Basic function is drawing, erasing and changing the color with different gesture. Some gesture will also generate shapes automatically.

After drawing, User can choose the pattern of their drawing : Single pattern, Circular pattern, Grid pattern.

At the last time, If you press the Screenshot button, it will send it to the webpage, so you can download and see other’s drawing.


Gesture 

These gestures are the drawing tools.

fullsizerender-14

 


Leap Motion Sensor

leap-motion-controller-2b41e83f2ef0b45c4a1b7f91d5bbc1c9

 

leap-motion-3d-motion-gesture-controller-10-large

 


screen-shot-2016-11-10-at-7-08-33-am

We will use  Seriously.js library for using green screen (chorma Key effect).

(https://github.com/brianchirls/Seriously.js)


 

Play test 

I used a cardboard as a buttons and whiteboard as a screen.

I draw a line&shapes in the whiteboard, following the user’s hand.

fullsizerender-12

-Comments & suggestions from Play test

  • Put a background image option- Make people to choose the background images (Space, forest, somewhere….), so people can easily imagine what to draw.
  • For the pattern options- Add “Crop” function, so you can make a pattern with any part of your drawing .
  • Hard to memorize the Instruction.-> put them on the side of the screen.
  • Using one hand is natural than using both hand.
  • Think about X, Y, Z gestures. especially X gesture.
  • Use a brush-” touching ” feeling is very important.
  • Print it out!!!! or Send it to user’s phone/email.
  • Hand icon -> make it more easy to read.
  • Add gestures that can generate shapes automatically.
ICM+Phycomp-Final Project Proposals

ICM+PCOMP_Synthesis

img_5768

First, we tried to connect potentiometer and our sketches.

We applied the sensor value to one of the slider which controls the size of the circle.

But, even we add all of the code and connect the circuit correctly, it didn’t worked.

The reason was we forgot to add p5.serialport.js library to our editor.

After we add the library, it finally worked !

 


https://alpha.editor.p5js.org/projects/B1-wtIHC

ICM+PCOMP_Synthesis

Week3. Everyday technology – Touch screen elevator

Everyday technology (Observation) – Touch screen elevatorimg_5432

When I moved to this apartment, It was interesting that there were two different types of interface of controlling numbers(floor) in one elevator. (I’m not sure the buttons can also control the floor.) We are used to use button for pressing the floor, not a touch screen. So I thought putting different interfaces near each other can make people confused and it also happened to me as well.

I haven’t seen a touch screen elevator before. At the first time, I automatically tried to use the button. But the button seemed little different with normal elevator button. My apartment was 12th floor and there was no 12. So I just asked the other person and realized I had to use the screen. I thought the touch screen was just a screen for showing something like advertisement. Most of my friends or other people who were new in this apartment had a same response as me. Trying to press the button and realize something is different. And finally ask “Is it a touch screen?”.

People tends to think the way they know and do what they are used to. Even it is a familiar technology, if it changes something what you are used to, you will feel new. But it doesn’t take so long to get familiar to that new feeling. Whenever you recognize how to use it, you will automatically ( unconsciously) input that information to your brain. As most of the people who uses this elevator were the residents, everyone knew how to use it and there was no different between people that I observed for several days. Only people who are the first time taking this elevator confused about the system.

Week3. Everyday technology – Touch screen elevator

week3. Distance sensor+LED+Tone

I tried to focus on understanding the connection of circuit and codes.

 

img_5560

Q. I connected the distance sensor to Digital pin and it works. But I realized that distance sensor might be an analog sensor. Do I supposed to connected to Analog pin? or doesn’t matter…?fullsizerender-2

Q2. I set as  Digital(OUTPUT) -> LED -> Resistor -> Ground.

But in most of the other examples, it was Digital(OUTPUT) -> Resistor-> LED-> Ground.

What is the difference?

 


Code

screen-shot-2016-09-27-at-11-18-59-pm screen-shot-2016-09-27-at-11-19-14-pm screen-shot-2016-09-27-at-11-20-23-pm screen-shot-2016-09-27-at-11-19-42-pm

 

 


+ I tried to add sound (tone) using speaker..

img_5580

At first, It was a little bit confused to use tone() function to make a different pitch in each LED output.

screen-shot-2016-09-28-at-10-06-21-am

 

week3. Distance sensor+LED+Tone

Week2. Switch+LED

img_5241

Arduino board, Resistance, LED, Wires

img_5244

I decided to use a paper and graphite(conductive material)  as a switch.


img_5249 img_5254

First, I built a simple circuit with LED, and checked if it works.


img_5269

With pencil, I drew two points and connected them to make current flows from one point to other point.

To check the LED brightness, I drew 4 lines with different length.


The shorter length, the brighter light.

The longer length, the dimmer light.

Which means different length can control the strength of brightness.

Week2. Switch+LED

Week1. What is interaction?

What is interaction?

At the first time, I was kind of confused and spend a lot of time to rethink the concept of interactivity while reading “The Art of Interaction Design”, because I was the one who had defined the term “interaction” very broadly. (maybe overused…) While Chris Crawford is defining interactivity in 3 steps:  Listen, Think and Speak, I tried to organize the concept in my own way and think simple.

I think “Asking” and “Answering” each other between more than two person or objects(devices) is the basic concept of interaction. A will ask(input) something to B and B will give an answer(output) to A. Then, A will get the answer like a normal conversation. It means Interaction is cycle of asking(input) and answering(output) between at least two entities. I’m still confused about the word “Physical interactivity”, but I think if I add the term “Physical” front of “interaction”, there should be something tangible between two entities like a screen which users can touch and control the interaction.

On my way to school, by walking the street and taking subway, I could find some physical interactions around me. For example, a man playing mobile game with his iPhone, Metro card machine(touch screen) and CVS self checkout machine. ( And I was wondering if it is an interaction or just a reaction between a man who sings a song in the subway and people who gives him money(tip). )

There are a bunch of good examples of digital technology these days, because our generation is living in an age of technological innovation. One of the best new interactive advances in my life was “Navigation”. When I was young, whenever we travel to somewhere, my family used a paper map to find the place. The person who seats next to the driver had to read the map, find the fastest way and tell the direction to the driver which is exactly the same function with today’s Navigation. There was no interaction between the driver and the paper map at that time. Navigation is exactly following the 3 steps that Chris Crawford mentioned. Listening to the input destination and thinking the fastest way and calculating the time then speaking out the data through the screen and the speaker. I can’t remember when this interactive Navigation came out to our world, but someday I realized that everyone got used to this genius machine very naturally, using it everyday. According to this point, good physical interaction is identifying the human needs and solving common matters from our daily lives.

 

Week1. What is interaction?