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

Week2. sunrise/sunset

 


-One element controlled by the mouse :  sun

I put a ellipse shape (sun) instead of mouse cursor which I can move the sun.

I used the map() function to change the background color. If the sun( mouse ) goes down, it gets darker ( night ). And if the sun rises, it gets brighter ( Day ).


-One element that changes over time, independently of the mouse : clouds

I add “x++” to move the clouds to x-direction which seems like floating in the sky.


-One element that is different every time you run the sketch : mountains

I gave a random value to the top point of the mountains, so that the mountain’s height can change every time when I refresh the sketch.

 

 

Week2. sunrise/sunset

Week1. Sketch- “First week” / Blog post

 

First week”  – p5.js Web Editor

I draw my self-portrait with basic shapes (circle, triangle, rectangle) by p5.js.

It is myself feeling confused in the first week in ITP. I emphasized a sense of dizziness by using random() value for my eyes color and the background color.

Drawing Bezier was the hardest part during this process. I tried to use bezier to draw my hair, but I couldn’t figure it out how to do. So I just draw with triangles to make the shape what i want.

The result seems similar with drawing in Illustrator. But the way I had to draw the shapes was totally different. While I can draw a circle wherever I want once I click and drag or use pen tool in Illustrator, It was kind of difficult to pick the exact position with numerical value by p5.js.

 

 

 


Blog post – How computation applies to me & What projects do you imagine making this term? What projects do you love?

As a beginner, I’m not sure how far is it possible to create something with code. But it is very clear that I want to or maybe I must !!! learn computation to extend my possibility of using diverse medium.

I was in Fine art field for more than 10 years and always imagined what if my drawing and sculpture can be alive. To make it come true, the next step was learning Animation, Motion graphic. After I studied those subjects I could mix my art works with screen based motion using monitor and speaker which can be more dynamic and dramatic. But it was not enough to me. I wanted a real interaction between my work and audience. So, for my final project in undergrad, as a side work I made a sticker about my work that audiences could take. Through that small interaction, the message could directly delivered to audiences. Then, I wanted to apply technology to my work to expand the limit of expression and suddenly got interested in computation, code, physical interaction. Even though I have a very little experience on coding so far , I really love it. So from now, computation is very new and important medium for me which I can make my work alive. I’m pretty sure that studying computation will make a big change in my life.

I’m not clear yet about what I want to create in this term.  I love projects that people can play like a playground. I’m interested in covering our common matters/ daily stories about people, love, relationship, society with interactive installation using iconic and linguistic symbols. Maybe…I can make a series of short episode in a small set like a interactive stage, connecting with Physical computing.

Week1. Sketch- “First week” / Blog post