HealthbiTs

 

can we change our routines and eventually change ourselves into who we want to be?    

——— The Science of Habit Formation “ Chunking Healthy Habits ”

 

 

According to the article Behavior First, Design Second, some behaviors that drive us nuts are core to the human experience:

  1. We want attention.
  2. We collect things.
  3. We want status.
  4. We are vain.
  5. We make judgments accordingly

The author argues that we need to consider these behaviors before jumping into designing and building things. 

grid365_purplespan.gif

According to the Behavior grid by BJ Fogg, there are 15 ways that behavior can change. I want to tackle Purple Span behavior, which is increasing behavior over a period of time. 

bj-fogg-behavior-model-grapic.jpg

 

Also, he mentions that motivation, ability, and trigger should converge at the same moment, like shown in the Fogg Behavior model, in order to facilitate a behavior. 

Now, in the article How Companies Learn Your Secrets, author explains how powerful the science of habit formation is. He mentions, "although habits are so difficult to change once they're formed, habits are not destiny- they can be ignored or replaced." He argues how important that once the loop is established and a habit emerges, your brain automatically does things without decision-making process.

Learning from the articles above, I wanted to ask a few questions. If facilitating a behavior is a convergence of motivation, ability, and triggers, how can I tackle Purple Span Behavior, which is to increase a behavior over a period of time?  How powerful our habits are? If habits are controllable, simple as to be formed from cue, routine, reward, and those small habits (automatic behaviors) form routines, can we change our routines and eventually change ourselves into who we want to be? And I raised some of more specific questions. How can I fix exercise habits for those of who hate working out? How can i make people healthy in a more fun and effective way? How can I make them work out regularly without making them feel stressed? So I ended up thinking of ideas of creating apps that fix people's habits with a social habits log book. In this app, users can collect coins (reward) as you try to reach your goals -- following the guide from the first article to make users collect things which is human nature. And at the end of the week the ranking system comparing how much users and their friends have earned will motivate users to work out harder (motivation). Whenever the users slack off, the app pushes notifications to trigger the users (cue/triggers). Moreover, users can exchange the virtual coin with coupons or.. donation to charities they want! (reward). 

Some possible features:

AR marathon

AR running machine/ cycle - something like mario cart 

AR drinking water 2L a day

AR eating a salad a day

Screen Shot 2018-02-14 at 7.05.57 PM.png

 

Inspiration: social check in platform "swarm"

ios-31-08-2015-1441078260.png
and-31-08-2015-1441078800.png
570a03a9f67bc378c3301534f6daa8cb.jpg

Motalk - motion talk chat room

Motalk (Motion+Talk) shows true, live, genuine profile videos, so you can’t hide your emotion when you are chatting. Every time you type a message, it records a video of you with the front camera until you click "send" to send the message, and updates your profile into the video just recorded. 

By lively updating your profile video, you can no longer fake your face or post old photos anymore, which gives the true representation of "profile". Also, there is no need to use emojis anymore because you can simply express your emotion by your face!

Sketch & Planning

IMG_6529.JPG
IMG_6537 2.JPG
IMG_6536 2.JPG

Inspiration - Kakao Talk and my never-changing old profile picture 

Screen Shot 2017-12-12 at 12.32.41 PM.png
Screen Shot 2017-12-12 at 12.17.21 PM.png

Designing Meaningful Interaction HW #1

3A. 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.  

3B. 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.

4. Order pizza from Facebook Messenger. Enjoy the experience (and pizza)! See how a chatbot engages with you, notice various interactions that happen inside a chatbot. Write on your blog about how engaging (or frustrating) the pizza ordering experience is.

 

3A. Good Design - cushion foundation

 

Iope-Air-Cushion-Foundation-N21-Natural-Vanilla.png

I have fallen in love with my cushion foundation, which is a makeup foundation compact that makes users easy to use with its unique design. First starting in 2016 in Korea, cushion foundation has been a huge global trend in cosmetics industry. Liquid foundation usually comes in a bottle or a tube, but this cushion compact houses liquid foundation in a sponge-like cushion, where the name of this item stems from. This cushion foundation allows users to easily put on makeup by holding the compact at one hand while the case is open and built-in mirror is facing the user, and using a built-in pad to put on foundation. It’s convenient because you can use the built-in mirror everywhere, and second all you have to do is patting your face using the built-in pad. That built-in pad helps users to evenly put on foundation on their face. Moreover, it is really convenient to carry around and you can fix makeup anywhere really quickly. Makeup beginners like me find it hard to use bottled foundation because they don’t know how much liquid they should pump out, where to pump it out, and how to put it on their face. Also, you can’t carry the bottled foundation around and fix your makeup frequently. Therefore, people like me who know about this beauty of cushion foundation cannot go back to bottled foundation. I believe in the future all the makeup foundation will be replaced to the cushion compact, for its innovative design.

 

3B. Bad Design - iPhone earphones

Since iPhone 7, apple has removed the regular earphone hole. This design is very inconvenient because it is not compatible with regular earphones anymore. When I first bought the iPhone7, I lost its own earphones and there were so many times that I mistakenly tried to use the regular earphones and sighed. Now I am using iPhone 6 again and even when I forget to bring earphones and borrow ones from friends, I can still enjoy earphone function and actually listen to something! I can’t believe how much more convenient iPhone6 is than iPhone7. 

 

landscape-1473273032-iphone-7-headphones-lightning.jpg

4. Ordering pizza from Facebook Messenger

I tried to order a pizza from Domino’s Pizza. It started with “Hello! This is Dom, the Domino’s ordering assistant bot. How can I help?”. When I started the conversation, I typed “Can I get something?”, and “I want to get chicken wing” just like I would say in a normal conversation because it asked me how it can help. But all it said was “I’m sorry. I seem to be having trouble understanding”, and “I’m sorry I didn’t get that”. I was really frustrated and thought this bot wasn’t working. But when I tried typing just simple words like “new order”, “chicken pizza”, “delivery”, and my information, the bot responded quickly and it seemed to be working fast and well. I think this chatbot could be helpful for people who don’t have much time to read and choose pizza carefully by browsing the website. However, to me, this chatbot is not smart enough to be able to respond most of our normal language and not informative enough to explain the menu. I highly prefer using the website because it has a more intuitive user interface with the use of visual cues and simple clicks. 

Screen Shot 2018-02-01 at 5.49.58 PM.png
Screen Shot 2018-02-01 at 7.39.36 PM.png
Screen Shot 2018-02-01 at 7.40.19 PM.png
Screen Shot 2018-02-01 at 5.50.33 PM.png

Magic Windows. Interaction with the city + final idea

Initial Idea: Using Foursquare API and Google Map API, I will create a restaurant application. It will feature the information of and directions to food venues. At first, I will display information and pictures about food venues on the corresponding buildings of restaurants, cafes, and bars using AR kit and Foursquare API. Later on, I will incorporate direction function using Google Map API. Like HotStepper example, I will put White Rabbit from Alice in Wonderland on the road, and he will guide you to the restaurant you type. On the way to the restaurant, the world becomes like a tea party scene from Alice in Wonderland and displays food pictures from Foursquare on dishes on the road, like Hansel and Gretel's food path. Every time you pass by the food, it has some sound effects to make you feel like earning points. Music will play based on the type of food you are going to eat. So if you are going to a Chinese restaurant, a traditional Chinese song will play as the background music.

Screen Shot 2017-11-28 at 10.33.00 PM.png
b5d52c15fafc882ca9d8e60418499031.jpg
6207541391_53fb03bb09_b.jpg
hansel_and_gretel_by_isildur123.jpg

AR kit demo with the White Rabbit: The White Rabbit dancing in the city. 

Screen Shot 2017-12-04 at 11.22.12 PM.png

Final Idea: Using Google Maps API, I will make the sneaky White Rabbit guide users to one of the closest speakeasy bars in NYC, which are hidden in random places all over the city.  I will make the rabbit much smaller than the size in the video above, and he will run rather than dance, capturing his original characteristic from the movie, Alice in Wonderland. The users will also have to run to catch the running rabbit holding a ticking clock. Otherwise, the users will lose the rabbit and won't get to the bar! They will be given 10 mins to get there. If they make it, they will see the crazy cocktail (tea) party with the characters from the movie at speakeasy bar. If they don't make it, the rabbit will run away!

Live Web midterm : Collaborative Drawing Room

For the Live Web midterm, I created a collaborative drawing room for multiple users. The concept is that users can share their drawing or draw on top of each others' drawing, while looking at their own face using their webcam. Once you click "draw your face", the video captures your face and displays a still image of your face. You click either "small", "medium", or "big", and start drawing with the corresponding stroke size by clicking on the canvas to set a starting point and pressing arrow keys to draw only in linear lines. The stroke color is random. The other user can draw on top of your drawing in the same way to play with his or her own face, and the drawing corresponding to his or her own face will display on your canvas too and you can play with the drawing by moving your head (face).

Screen Shot 2017-10-17 at 12.21.39 PM.png
Screen Shot 2017-10-17 at 12.51.12 PM.png

live web final idea

Inspiration: Interstellar 4d space

skip to 4:32 of the video below

4dchatroom.jpg

3D printing 6. Final Project: Water Bottle Floral Vase

For the final project of the 3d printing class, I created a floral vase that can be used anywhere with a regular plastic water bottle. Basically you just cover your water bottle with this vase, and you will put flowers inside the water bottle filled with water. Now the regular water bottle has transformed into a modern and simple vase.

Artboard 1.png
IMG_3425 2.JPG
FullSizeRender 3.jpg
FullSizeRender 4.jpg

I carefully measured the water bottle so that the vase fits the bottle, and then designed a simple unit cell that can make a patterned texture to cover the whole surface of the vase base. 

Inspiration

Inspiration

2d drawing of the unit cell

2d drawing of the unit cell

Unit cell - positive pattern

Unit cell - positive pattern

Unit cell - negative pattern

Unit cell - negative pattern

Experimenting with making inverse (negative) patterns. This shape above on the left is the unit cell.  Draw lines, Extrude curves, Cap, Make cube, Boolean difference or split... to make the inverse pattern!

Experimenting with making inverse (negative) patterns. This shape above on the left is the unit cell.

Draw lines, Extrude curves, Cap, Make cube, Boolean difference or split... to make the inverse pattern!

It took so much time to boolean difference 10 x 7 array of the pattern compared to one unit cell.  

It took so much time to boolean difference 10 x 7 array of the pattern compared to one unit cell.  

I had to cut the edges so that when both edges meet they create a smooth pattern.   FlowAlongSrf on the vase base with the use of the reference plane on the pattern. Now I erased the vase base. The design is ready!  I had to have many different testings because my obj files were having a weird problem all the time whenever I exported.  

I had to cut the edges so that when both edges meet they create a smooth pattern. 

FlowAlongSrf on the vase base with the use of the reference plane on the pattern. Now I erased the vase base. The design is ready!

I had to have many different testings because my obj files were having a weird problem all the time whenever I exported.  

Screen Shot 2017-10-30 at 8.02.25 PM.png
This is how the design is supposed to look like.

This is how the design is supposed to look like.

When I tried to import obj files to Cura, it didn't work at all because the files were corrupted making lines and holes instead of solids. So I had to revisit Rhino and check if any part on the process I made a mistake. I started from the scratch like 10 times, and tried to export partially but with different number of array of the patterns. For some reason, it only worked normally until 4x3. However, whenever I warped the texture onto a surface of something like vase base or just simple cylinder, it broke again. The errors in the files were like this: all the points of the object are pointing to the center of the grid, which completely breaks the shape of the object. How they are breaking down looks kind of cool but it was really stressful because I couldn't find any reason those are doing it and I had to create the same project again and again... 

Screen Shot 2017-10-30 at 6.47.38 PM.png
Screen Shot 2017-10-30 at 7.12.29 PM.png
Screen Shot 2017-10-30 at 7.13.48 PM.png
Screen Shot 2017-10-30 at 6.48.54 PM.png
Screen Shot 2017-10-30 at 6.50.03 PM.png
Screen Shot 2017-10-30 at 6.48.37 PM.png
Screen Shot 2017-10-30 at 7.06.02 PM.png
Screen Shot 2017-10-30 at 6.49.52 PM.png
Screen Shot 2017-10-30 at 6.50.48 PM.png
Screen Shot 2017-10-30 at 7.13.27 PM.png
Screen Shot 2017-10-30 at 6.49.46 PM.png
Screen Shot 2017-10-30 at 6.48.25 PM.png
Screen Shot 2017-10-30 at 7.14.02 PM.png

Artistic Chaos.............. why always making lines to the center?

Screen Shot 2017-10-30 at 6.50.21 PM.png

This was the maximum amount I could export normally in .obj so I printed bunch of it to test the texture. 

Screen Shot 2017-10-30 at 7.26.36 PM.png

Finally, Jesse in my class told me that I should try using .stl instead of .obj. Boom! It worked. so the problem was the .obj format itself. I still don't know why it's doing it.. So yay for the vasejesse.stl! Now, 8 hours and 30 minutes of meditation to go.

Screen Shot 2017-10-30 at 4.31.42 PM.png
IMG_36002.jpg
IMG_3591.JPG

Avatar 6. ITP

For the final stage of the 3d avatar making project, I made a short video of the batgirl who represents me going through the midterms and finals at ITP. 

I used Maya to make the model much bigger, Mixamo to download 5 different animations, and Unreal game engine to put all the assets together and animate. This is just the visuals of the animation. I am going to synch this animation with some dark and scary sounds. 

3D printing 5. Final project progress

Instead of the lighting for a cup, I decided to make a vase that covers a water bottle. 

 

waterbottle.jpeg
IMG_3425.JPG
Screen Shot 2017-10-23 at 5.53.21 PM.png
Screen Shot 2017-10-23 at 6.17.24 PM.png

I drew bunch of guidelines for the water bottle to make sure the shape of the vase does not intrude the bottle. Then I put the profile picture of the water bottle to make sure the lines are almost accurate.

Screen Shot 2017-10-23 at 6.30.08 PM.png

I drew a curve along the edge of the bottle and revolved 360 degrees. I am going to put a 3d texture that I design on top of the vase model surface! and the 3d texture mesh itself will be the vase that goes with the water bottle! 

Avatar 5. cleaning 3d scanned model in Zbrush

Screen Shot 2017-10-23 at 12.43.48 AM.png

I brought my photo-scanned batgirl into Zbrush in obj file. It looks bumpy and rough. First, I closed holes to make my model watertight. 

ready to decimate polygon to make her smooth.

ready to decimate polygon to make her smooth.

Screen Shot 2017-10-23 at 1.17.31 AM.png
Screen Shot 2017-10-23 at 1.18.13 AM.png

I cleaned up surface shapes of the model carefully with ZRemesher. 

Screen Shot 2017-10-23 at 2.31.55 AM.png
Screen Shot 2017-10-23 at 1.27.31 AM.png

UV mapping in UV master! 

Screen Shot 2017-10-23 at 1.30.29 AM.png
Screen Shot 2017-10-23 at 1.34.06 AM.png

When I imported the remeshed obj file into Photoscan, The batgirl aligned at the far corner.. and when I put texture on it, it turned black. Wrong alignment!!!

Screen Shot 2017-10-23 at 1.36.43 PM.png
Screen Shot 2017-10-23 at 1.19.10 PM.png

I tried to remesh a bunch of times more, and it finally got aligned in the center. but she is still tilted because I only used pictures from a high angle.

Fixing her to be straight in Zbrush.   

Fixing her to be straight in Zbrush.

 

I revisited Zbrush and fixed the angle, so that the batgirl stand straight in the Mixamo. 

Screen Shot 2017-10-23 at 3.40.17 AM (1).png
Screen Shot 2017-10-23 at 3.42.15 AM.png

I finally rigged her in Mixamo and she is ready to dance!

avatar 4. 3D scanning batgirl

My task was to 3d scan an action figure. So here is the documentation of my failure to capture a Batgirl action figure.

batgirlbutt.gif

First I put the figure on a revolving disk so I can get consistent 360 degree views of the figure. Then I put a green wall to have a strong contrast to the figure to mask the background out. To get enough light, I put two led lights for the wall, and two led lights for the figure. I set the settings as manual - large f stop for a deep depth of field, short shutter speed, low ISO, and manual focus. 

Here is my set up.

IMG_3290.JPG
IMG_3293.JPG
This is my first trial, which is a failure. Photoscan, a software for rendering a model from a series of 360 views of photos, aligned the photos chunk in one place.

This is my first trial, which is a failure. Photoscan, a software for rendering a model from a series of 360 views of photos, aligned the photos chunk in one place.

It only rendered the upper body part and the head. 

It only rendered the upper body part and the head. 

This is my second trial. The model has its shape, but is not accurate at all. 

This is my second trial. The model has its shape, but is not accurate at all. 

I thought it would work better if I take the Batgirl's cape off. I took the whole new set of photos and aligned in the Photoscan again. It somehow aligned in a weird shape instead of aligning in a ring of 360 views. 

I thought it would work better if I take the Batgirl's cape off. I took the whole new set of photos and aligned in the Photoscan again. It somehow aligned in a weird shape instead of aligning in a ring of 360 views. 

I deleted a bunch of photos stuck in the left side and only rendered the half ring of 180 views. Still not a pleasing result.

I deleted a bunch of photos stuck in the left side and only rendered the half ring of 180 views. Still not a pleasing result.

I took another set of photos again and all the photos got aligned in a half ring..

I took another set of photos again and all the photos got aligned in a half ring..

I took more sets of photos and finally got this result- 360 views of the model in a ring!

I took more sets of photos and finally got this result- 360 views of the model in a ring!

This is the final model screen-captured in Photoscan software.   I think the major reason of this series of failure is that the model's texture is too shiny and that the lights are reflected too much on the figure's body. When the highlights of the object change every time I rotate it, the software wouldn't be able to recognize the figure in different pictures as one same object. Next time, I want to try to 3d scan a model with a more detailed and less shiny texture. 

This is the final model screen-captured in Photoscan software. 

I think the major reason of this series of failure is that the model's texture is too shiny and that the lights are reflected too much on the figure's body. When the highlights of the object change every time I rotate it, the software wouldn't be able to recognize the figure in different pictures as one same object. Next time, I want to try to 3d scan a model with a more detailed and less shiny texture. 

3D printing 4. Chopstick Helper ver.2 & Final Project Idea

So my chopstick helper I made last week had a dimension problem. When I printed it out with a 3d printer, the four holes in this device came out smaller than they were supposed to be. So I had to test this out with wooden chopsticks on their narrow parts. 

chopstickhelper.gif

This time, I made the holes 1.6 mm bigger than the actual size. Also, I wanted to test out a different material with higher resolution. 

For my final project, I want to make a cup light, which is a portable light that fits into the bottom of a cup. It is meant to offer a fun experience to users who enjoy drinking in daily life or at a bar by lighting up their drinks with different animations and colors. I am going to use a neopixels LED ring and program the lighting based on the accelerometer's xyz values, which detects the movement of the cup. So if the users lift up the cup to drink, the lighting animations and colors change. In order to make this device, I need to design a holder for the LED, the accelerometer sensor and a battery, which also fits into the cups. 

cup.jpg

Magic Window 4. Object that has Personality / Object project Idea / Midterm Idea

Object that has personality

This lovely balloon in my room above my bed seems to have personality. I adopted him 10 days ago but he is still alive, although I thought helium balloon would last only a few days. I talk to him everyday. I say, "stay strong, you can do it!" and he seems to say "Yes I will stay strong for you!" I attribute him human characteristics because he is always standing, and if he gets tired, he will eventually fall and lie down on the floor. Whenever I touch or poke him, he dances gently and stops when he gets to the ceiling again. I want to live with him for a long time. He is my lovely balloon! 

IMG_3252.JPG
object.jpg

Augmented Object Project

For this project I would like to augment a soda can we see everyday in daily life. I want to make it a magical swimming pool and have a person jump into the soda pool. 

Or I would like to augment the pot I used for previous project, "Genie Assistant", and create 3D version of the Genie assistant.

 

 

Midterm Ideas

I have several ideas I want to explore

  1. Moving portraits
  2. Augmented business card
  3. Genie assistant watch
  4. AR map
  5. AR menu
card.jpg
businesscard.jpg
geniewatch.jpg
arMap&arMenu.jpg

Live Web 4. Chat Room aka Text Party

For the midterm project, I would like to continue what I did last week: a chat room with a live profile picture using WebRTC. Not unlike a real cocktail party, a number of random people enter into this chat room, aka text party in digital space. Simulating the real cocktail party, people gather around the people they want to talk to. They can start talking by themselves, or chat with other people by clicking any point on the canvas. Every time they talk, their profile picture is updated to show their lively facial expressions of the current moment. They can never fake their emotions because their face is captured every moment they talk (type and submit), and their profile picture substitutes emojis with the more accurate depiction of their emotions. 

liveweb_midterm.jpg

3D Printing 3. Chopstick Helper

For this week, I designed a "chopstick helper" to assist people who are not familiar with using chopsticks. Users have to put this device at the top of the chopsticks to fix two sticks together at a certain distance like the sketch below. I first created this device in Rhino and imported the design into Cura for 3D printing. 

FullSizeRender 4.jpg
Screen Shot 2017-10-02 at 1.20.57 PM.png
Screen Shot 2017-10-02 at 1.22.22 PM.png
Screen Shot 2017-10-02 at 1.23.09 PM.png
Screen Shot 2017-10-02 at 1.25.44 PM.png
Screen Shot 2017-10-02 at 4.35.42 PM.png
IMG_2944.JPG
IMG_2949.JPG
IMG_2966.JPG

I used LulzBot TAZ6 this time. The print did not come out as I desired because the four holes collapsed a little. Next time, I will try printing with Ultimaker for the more accurate details because I can use 0.4 nozzel instead of 0.6 one with this printer.

Avatar 3. Recontextualizing Digital Space

In this assignment, we were asked to create a small performance that disrupts or recontextualizes a digital space, which I chose to be my favorite app, Yelp. First, I went to the page of my favorite restaurant, "Love Mama", and went to the review page. Then I wanted to change the review I wrote a while ago into something totally irrelevant to the restaurant review. Instead of talking about the food there, I wanted to respond to the food experience there by singing a song "All you need is love" by Beatles to fool the people who read this. Then I hacked the page and changed all the reviews from the others into the same lyrics. Now, everyone sings the same song almost like a chant. I left some parts of the review comments from the other people below the lyrics so that the chant has some variations. The variations part is where my disruption and the real review parts meet, which makes this page interesting and confusing to the app users. Now the review page of Love Mama on Yelp has a musical or poetic performance in the most irrelevant place. 

Screen Shot 2017-10-02 at 12.22.14 PM.png
Screen Shot 2017-10-02 at 12.22.23 PM.png
Screen Shot 2017-10-02 at 12.29.15 PM.png
Screen Shot 2017-10-02 at 12.29.19 PM.png
Screen Shot 2017-10-02 at 12.29.26 PM.png

Live Web 3. Drawing Room

I created a collaborative drawing room for multiple users on the server using websocket. To start the drawing, simply click on the canvas to designate where to start your line. They are limited to draw only straight lines horizontally and vertically, using arrow keys on their keyboard, because I believe limitations provide more creativity into artwork. They can choose brush size between small, medium, and big by clicking buttons. 

Here is the demo: http://104.131.166.52:9999/index.html

Screen Shot 2017-09-26 at 4.26.17 AM.png
Screen Shot 2017-09-25 at 1.07.04 AM.png