Designing Meaningful Interactions – Week1

2A. Have you ever fallen in love with an everyday object?  Is there an object that you use every day or frequently that you appreciate for it’s touch, appearance or usability? Most of us have attachments to things. Post to your blog an object  that appeals to you because of the way you interact with it. Describe the appeal of the object to you and analyze what you love about it and why.


IMG_1829
IMG_1832
Recently, I’ve fallen in love with my auto film camera which was a birthday gift from my brother. I really love taking photo and also love to be taken. Especially, love black and white film pictures which has more analog feeling.

As a beginner, to get used to taking photo every moments, this camera was perfect for me. Unlike other film camera which has a lot of controllers and option, this camera is very easy to control. Its interface is very simple to understand. There is one small screen on the top that I can check flash mode and how many film are used. And there are on/off button and three side buttons to control the camera date, flash mode and timer. On the side of the camera, there is a viewer and a simple zoom in/out controller. What I need to do is I just find something which catch my eyes and control the flash mode and zoom in or out. Then press the shutter button. That’s it.

And this camera is much lighter than DSLR which I carried before. So it’s good for carrying everyday.

It’s true that auto film camera with simple options and less options brings more low quality image than other professional film camera. But for me, less controllers make me easy to record every moments.

My favorite interaction of using film camera is waiting for results. I love the feeling when I have to wait to see the images until I finish the whole rolls and until the rolls get developed. When I received vinyl bag covering my photos, my heart flutters. Unlike digital photos, It’s not easy to edit, duplicate or delete. It prints once what I exactly saw in that moment and exist in physical paper. I can touch the photo which feels like I’m touching that moment. This is why I love my film camera.

 


2B. Also post to your blog an example of a frustrating user experience.  This can be a physical or digital experience.  Be prepared to share with the class the object you love, the experience that frustrates you and sketches of how you would fix the frustrating user experience. Think beyond the obvious digital interfaces but focus on everyday interactions.


Screen Shot 2017-01-29 at 5.59.48 PM

I think our ITP Locker is terrible for user. It might be safe then other lockers because it’s kind of complicated to open, but it’s also difficult to owner. When I received the locker in the first day of orientation, I had no idea how to open the locker, even I heard the instruction more then 10 times.

It took a while until I get used to use it. My hand remembers how to open it automatically, but I can’t remember over my head. We have to turn a knob to match to first number and rotate the knob twice fully in a clockwise direction and match to second number. And then rotate it counterclockwise once and match to third number. Then it might open. I’m not sure this is a right instruction, but this is how I remember. I think it’s hard to memorize the order of three number that we have to match and hard to arrange it to the exact position ( grid) as well. Actually, I still can’t open my locker at once and I makes me annoyed anywaySo now I don’t lock my locker often.

Screen Shot 2017-01-29 at 5.54.58 PM

 At this point, I prefer this button style which I used a lot when I was in Korea. There are 10 buttons on the lock and users have to push five button which is arranged to that lock. If you push five button, the lock will be opened. I feel like this kind of style of lock is more convenient for user. We don’t need to think about the order and It’s much easier to memorize patterns of number. If you push back any one of the buttons in forward, it will be locked. So we don’t need to push all buttons back, just one button to lock again.

Designing Meaningful Interactions – Week1

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

3D printing

I had some problem with the previous idea, so I decided to make a Halloween pumpkin using light.

Sketch

img_6034 img_6033

Processscreen-shot-2016-10-15-at-10-50-41-am screen-shot-2016-10-18-at-11-24-16-am screen-shot-2016-10-18-at-11-22-14-am screen-shot-2016-10-18-at-11-22-46-am screen-shot-2016-10-18-at-11-21-26-am


-3D printing
img_5903

img_5921


-Removing the support material

img_5926img_5929


– I made a small stem (top) of the pumpkin that you can take it off.

img_6047img_6048


-Sandingimg_5950

img_6007


– I used the primer spray and sand it again to make a texture.
img_6042img_6039


I used the phone flash light to make the pumpkin glow.

img_4548

3D printing

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