VR experience

During the experience of trying HTC Vive, I liked the Tilt Brush the most. I am always a little bit scared of sketching on paper. Without any training or practices of drawing, I am afraid that I would make mistake and I couldn’t control the movement of fingers precisely to transfer what is in my mind to what is on the paper. I think Tilt Brush made the creative process less intimidating. I used my whole body to draw, by moving my foot, arms, hand and fingers all together, the drawing process seemed more intuitive than just moving my fingers on paper. I was also fascinated by the different effects of my brushes, such as fire, snow and papers. They seemed so real and I am more emotionally attached to the drawing process than drawing 2D images. I would improve the gravity or resistance simulation to make it more realistic to a real world.

I think the Tilt Brush control panel could be improved a little bit. The menu is a bit confusing and I got lost when I accidentally clicked on a button, and couldn’t figure out how to go back to my previous sketch. Maybe instead of having the control panel as a 2D menu, it could be a 3D fitting room, I can go into the room to change my equipments.

Servo Motor

Description

My servo sometimes crawls  and sometimes doesn’t, depending on its mood…I used cardboards as its legs.

Components

  • 1 Arduino
  • 1 DC Motor
  • 1 Servo Motor
  • Several cardboards
  • 1 Breadboard

Code

/*
 * Servo with Potentiometer control
 * Theory and Practice of Tangible User Interfaces
 * October 11 2007
 */

int servoPin = 7;      // Control pin for servo motor
int potPin   = 0;      // select the input pin for the potentiometer

int pulseWidth = 0;    // Amount to pulse the servo
long lastPulse = 0;    // the time in millisecs of the last pulse
int refreshTime = 20;  // the time in millisecs needed in between pulses
int val;               // variable used to store data from potentiometer

int minPulse = 500;   // minimum pulse width

void setup() {
  pinMode(servoPin, OUTPUT);  // Set servo pin as an output pin
  pulseWidth = minPulse;      // Set the motor position to the minimum
  Serial.begin(9600);         // connect to the serial port
  Serial.println("servo_serial_better ready");
}

void loop() {
  val = analogRead(potPin);    // read the value from the sensor, between 0 - 1024
  
  if (val > 0 && val <= 999 ) {
    pulseWidth = val*2 + minPulse;  // convert angle to microseconds
    
    Serial.print("moving servo to ");
    Serial.println(pulseWidth,DEC);
  
  }
  updateServo();   // update servo position
}

// called every loop(). 
void updateServo() {
  // pulse the servo again if the refresh time (20 ms) has passed:
  if (millis() - lastPulse >= refreshTime) {
    digitalWrite(servoPin, HIGH);   // Turn the motor on
    delayMicroseconds(pulseWidth);  // Length of the pulse sets the motor position
    digitalWrite(servoPin, LOW);    // Turn the motor off
    lastPulse = millis();           // save the time of the last pulse
  }
}

Panda Massage Pad

Description

I created a panda massage pad using dc motor, FSR, and Arduino.

Components

  • 1 Arduino
  • 1 DC Motor
  • 1 Transistor
  • 1 Battery
  • 2 Resistors
  • 1 Breadboard

Code

int potPin = A0; // select the input pin for the potentiometer
int motorPin = 9; // select the pin for the Motor
int val = 0; // variable to store the value coming from the sensor
void setup() {
 Serial.begin(9600);
}
void loop() {
 val = analogRead(potPin); // read the value from the sensor, between 0 - 1024
 Serial.println(val);
 analogWrite(motorPin, val/4); // analogWrite can be between 0-255
}

Thoughtless acts

I came across a few thoughtless actions inspired by my MIMS classmates.

When a student comes to a small classroom where there is no table in front of him/her, people often put their laptop on their legs in this posture. An easy design solution would be to add a foldable table for each chair, like these foldable/hidden ones for the front seats on any airplanes. Many other universities have this kind of chairs, unfortunately, South Hall doesn’t have them.

slack-for-ios-upload

Another thoughtless action is also inspired by my classmate: when people have a luggage or bag while sitting in a moving vehicle, they want to free their hands to do other things, while at the same time, they want to hold their belongings. Many people would put the luggage between their legs to secure it. A design solution could add a clip on the bag or luggage that hold it against the wall or holding poles.

img_5651

Paper flower singing Super Mario theme song

Description

I created a singing paper flower which can change colors following the rhythm. I can use a potentiometer to adjust the brightness of the colors.

Components

  • 1 Arduino
  • 1 Pot
  • 1 Piezo Buzzer
  • 3 LEDs
  • 4 Resistors
  • 1 Breadboard
  • several Papers

Code

#include "pitches.h"

const int piezoPin = 7; //piezo
int rPin = 9;  //red LED
int gPin = 11;  //green LED
int bPin = 10;  //blue LED
int potPin = A0;  //pot 

int potValue = 0;
// notes

int melody[] = {NOTE_E7, NOTE_E7, 0, NOTE_E7,
  0, NOTE_C7, NOTE_E7, 0,
  NOTE_G7, 0, 0,  0,
  NOTE_G6, 0, 0, 0,
 
  NOTE_C7, 0, 0, NOTE_G6,
  0, 0, NOTE_E6, 0,
  0, NOTE_A6, 0, NOTE_B6,
  0, NOTE_AS6, NOTE_A6, 0,
 
  NOTE_G6, NOTE_E7, NOTE_G7,
  NOTE_A7, 0, NOTE_F7, NOTE_G7,
  0, NOTE_E7, 0, NOTE_C7,
  NOTE_D7, NOTE_B6, 0, 0,
 
  NOTE_C7, 0, 0, NOTE_G6,
  0, 0, NOTE_E6, 0,
  0, NOTE_A6, 0, NOTE_B6,
  0, NOTE_AS6, NOTE_A6, 0,
 
  NOTE_G6, NOTE_E7, NOTE_G7,
  NOTE_A7, 0, NOTE_F7, NOTE_G7,
  0, NOTE_E7, 0, NOTE_C7,
  NOTE_D7, NOTE_B6, 0, 0};

// durations: 2 = half note, and 8/3,4,6,8,12. It appears that 8/2.9 is more accurate than 8/3.

float noteDurations[] = {
 12, 12, 12, 12,
  12, 12, 12, 12,
  12, 12, 12, 12,
  12, 12, 12, 12,
 
  12, 12, 12, 12,
  12, 12, 12, 12,
  12, 12, 12, 12,
  12, 12, 12, 12,
 
  9, 9, 9,
  12, 12, 12, 12,
  12, 12, 12, 12,
  12, 12, 12, 12,
 
  12, 12, 12, 12,
  12, 12, 12, 12,
  12, 12, 12, 12,
  12, 12, 12, 12,
 
  9, 9, 9,
  12, 12, 12, 12,
  12, 12, 12, 12,
  12, 12, 12, 12,
};

// calculates the number of elements in the melody array.
int musicLength=sizeof(melody)/sizeof('NOTE_F5');

void setup() {  
  pinMode(rPin, OUTPUT);
  pinMode(gPin, OUTPUT);
  pinMode(bPin, OUTPUT);
}

void loop() {
    Serial.println(potValue);
       
    for (int thisNote = 0; thisNote < musicLength; thisNote++) {
         potValue = analogRead(potPin);
      
      // calculate the note duration. change tempo by changing 2000 to other values
      int noteDuration = 2000/noteDurations[thisNote];
      tone(piezoPin, melody[thisNote],noteDuration);

      // to distinguish the notes, set a minimum time between them.
      // the note's duration + 30% seems to work well
      float pauseBetweenNotes = noteDuration * 1.1;
      delay(pauseBetweenNotes);

      // blink the three LEDs in sequence
      if (thisNote%3==0){    
          analogWrite(rPin, potValue/4);
          analogWrite(gPin, 0);
          analogWrite(bPin, 0);
          delay(100);
      }
      else if (thisNote%3==1){    
          analogWrite(rPin, 0);
          analogWrite(gPin, potValue/4);
          analogWrite(bPin, 0);
          delay(100);
      }
      else if (thisNote%3==2){    
          analogWrite(rPin, 0);
          analogWrite(gPin, 0);
          analogWrite(bPin, potValue/4);
          delay(100);
      }
   }
      
}

Calendar for grandma (Reema, Olivia, Yifei)

We aim to build an interactive calendar for elder people to schedule their activities and events easily with a selected group of people (families, friends, or social worker etc). These people can send voice messages to the elderly through an app and it will light up a corresponding magnet with the person’s image on the grandma’s (Lucy) wall (blinking lights mean action needs to be taken. Slow blinking: outgoing message and waiting for response from recipient. Fast blinking: action/confirmation pending from Lucy for incoming messages)

1

This is what the system looks like in resting state. The pictures of people are physical magnets which can be moved around and put on the calendar to indicate when an activity is scheduled with them.

 

2

Situation 1: The son sends Lucy a message through his app (e.g.  “Mom, I’m visiting on Tuesday”) and his magnet lights up. The light will turn off only after Lucy presses the magnet(and hears his recording) and then moves it to Tuesday. If she wants to reject this visit, she can double click the magnet and the light will go off, and the son will get a message on the app informing him of the rejection.

 

4

Situation 2: Lucy initiates interaction (“come visit me”) by moving the son’s magnet to Sunday. The light on the magnet will blink slowly till the son confirms (because he will get a notification on his app prompting him to act).

6

If he accepts the invitation, the light on Lucy’s wall turns off.

5

If he rejects it, the lights blink faster because Lucy is required to now move this magnet to its resting position or to another day.

IKEA EXPEDIT Shelf

One of my favorite industrial designed artifacts is IKEA’s EXPEDIT (a new model is called KALLAX) shelf. Blauvelt wrote in his article, “multifunctionality has long been a characteristic of furniture design, particularly in circumstances where space is at a premium”. I had an IKEA’s 4 by 4 EXPEDIT shelf in my small studio when I lived in DC. I loved its simplicity and versatility: it was composed of 16 square shelves that were suitable for storing and organizing anything: it was a room divider, a book shelf, a clutter organizer, and a shoe rack. The multifunction of the shelf allowed me to maximize the utility of my space, and the simple and clean design also added style to my tiny room.

It is also worth mentioning that the shelf units come in different sizes, making it adaptable to different room sizes and layouts if the owner moves to a new apartment (sadly I sold mine as I moved to California). Users can also purchase inserted drawers or doors to add to the shelf to make it even more customized.

The simple design of the EXPEDIT shelf opens up a lot of possible utilities for the users to figure out.  Just as Blauvelt said, the design “allows for some sort of uncertainty to take place in terms of the final product by centralizing the user as an active and creative participant.” The creativity is handed over to the user’s hands, making me think about my living space differently.

image from web

(image from web)

Piet Mondrian and Rubber Duck

Description

I created an interactive Piet Mondrian painting using Processing, Arduino, a LED and a rubber duck.

First, when I run Processing and click on the artboard, a piece of music will be played, and the color blocks of the Piet Mondrian will appear and start dancing.

Secondly, when I squeeze the rubber duck, a duck image will appear on my Processing artboard and move up and down based on the level of pressure I put on the actual rubber duck. The LED light inside the duck will also increase based on the level of pressure. The FSR inside the rubber duck transfers the pressure into Arduio, from Arduio to the port, from the port to the Processing. In Processing, the level of pressure converts into the position of a duck image.

Components

  • 1 Arduino
  • 1 LEDs
  • 4 Resistors
  • 1 FSR
  • 1 Breadboard
  • 1 Rubber Duck
  • 1 Processing

Code

Arduino

int fsrAnalogPin = A0;
int LEDpin = 11;     
int fsrReading;      
int LEDbrightness;

void setup(void) {
  Serial.begin(9600);   
  pinMode(LEDpin, OUTPUT);
}
 
void loop(void) {
  fsrReading = analogRead(fsrAnalogPin);
  Serial.println(fsrReading);
  LEDbrightness = map(fsrReading, 0, 1023, 0, 255);
  analogWrite(LEDpin, LEDbrightness);
  delay(100);
}
Processing
PImage img; // Declare variable 'img' of type PImage

import processing.serial.*;
// Change this to the portname your Arduino board
String portname = "/dev/cu.usbmodem1411"; // or "COM5"
Serial port;
String buf="";
int cr = 13; // ASCII return == 13
int lf = 10; // ASCII linefeed == 10
int serialVal = 0;

Maxim maxim;
AudioPlayer player;
float power=0;
//float threshold = 0.35;// vary this until the square appears on the beats
float threshold = 0.35;// vary this until the square appears on the beats
int wait = 0;
boolean playit = false;

float x = 0;
float y = 0;

void setup() {
  size(800,450);
  frameRate(20); // this is the framerate. Tweak for performance.
  maxim = new Maxim(this);
  player = maxim.loadFile("beat1.wav");
  player.setLooping(true);
  player.setAnalysing(true);
  smooth();
  noStroke();
  port = new Serial(this, portname, 9600);

  img = loadImage("duck.png");
  
  
}

void draw() {
  background(255);
  println(wait);
  stroke(0);
  strokeWeight(6);
  line(90,0,90,500); //first line left
  line(150,0,150,500); // second line left
  line(200,0,200,80); // third line left
  line(400,300,400,380); // fourth line left
  line(460,0,460,500); // middle line
  line(520,80,520,500); // fourth line right
  line(700,380,700,500); // third line right
  line(720,0,720,80); // second line right
  line(750,0,750,380); // first line right
  
  line(0,40,150,40);//first line top
  line(460,40,750,40); // first line top, middle
  line(150,80,800,80); //second line top
  line(460,150,800,150); //third line top
  line(0,300,460,300); //left, second line bottom
  line(0,380,800,380); //left, first line bottom
  line(150,420,700,420); //middle, first line bottom

if (playit) {
    //fill(0);
  player.play(); 
  power = player.getAveragePower(); 
  rectMode(CENTER);
  noStroke();
  fill(235,215,0);
    //ellipse(mouseX,mouseY,power*500,power*500);
  rect(x+120,y+18,32+(power*70),14+(power*70)); //second yellow rect left
  rect(x+635,y+265,200+(power*70),200+(power*70));//big yellow rect
  rect(x+776,y+115,25+(power*70),40+(power*70));//first yellow rect right
  fill(185,0,0);
  rect(x+305,y+190,250+(power*180),160+(power*180)); //big red rect
  rect(x+490,y+400,30+(power*70),11+(power*70)); //small red rect, bottom
 
  fill(0,40,105);
  rect(x+43,y+417,77+(power*20),57+(power*20));//left bottom blue rect 
  rect(x+610,y+437,165+(power*20),20+(power*20));//middle bottom blue rect
  rect(x+590,y+60,242+(power*20),24+(power*20));//top  blue rect
    if (power>threshold && wait < 0) {
    noStroke();
    fill(235,215,0);
    rect(x+43,y+19,87,37);//first yellow rect left
    fill(185,0,0);
    rect(x+153+152,y+383+18,305,36); //long red rect 
    rect(x+735,y+19,25,38); //small red rect, top
    fill(0,40,105);
    rect(x+44,y+341,88,75);//left, second bottom blue rect
    wait=4;
  }
  wait--;
 
}

  int xDuck = int(random(800));
  int yDuck = int(random(450));
  image(img, (1600-serialVal)/2, (900-serialVal)/2);
  
}

// called whenever serial data arrives
void serialEvent(Serial p) {
 int c = port.read();
 if (c != lf && c != cr) {
 buf += char(c);
 }
 if (c == lf) {
 serialVal = int(buf);
 println("val="+serialVal); 
 buf = ""; 
 }
}

void mousePressed() {
    playit = !playit;
    if (playit) {

         player.play();  
    } else {   
     player.stop();    
    }
  
}

Ambient media: virtual window

The first example came to my mind is a virtual window that brings the weather, sun light, nature indoor, when reading on calm computing and ambient media. When I worked for my last employer, my office didn’t have a window. Just like many of my colleagues, I often felt down to stay in a windowless room for a whole day. I thought a virtual window could help me to calm down and improve my productivity. In the taxonomy of ambient system, the information system of virtual window is quiet, and “afford opportunistic glances to the information”. It gives people an illusion that they are staying outside and they are close to the nature. This kind of ambient information would be helpful for people who have to seat in front of their desks during most of the daytime, but still want to connect to the outside world. People don’t need to give full attention to the “windows”, just knowing that the “window” exists and an occasional glance is enough to make a different in a closed space. I came across Winscape, a virtual window that can show different sceneries such as Golden Bridge, beach, snow etc. It also mimics an actual window, if you move, the angle of the scenery changes accordingly. A brief introduction video is embedded below.

Midterm Proposal – Reema and Yifei

The problem space we’re interested in exploring is occupied by the aging population, especially those in unassisted living arrangements. We aim to build something to impact and hopefully improve their quality of life. Quality of life means different things to different people and in this context could range from enabling them to do their daily activities or create a general sense of satisfaction.

Issues commonly faced by this segment of society include feelings of loneliness or isolation, difficulty in expanding the ever-shrinking social network, fading memories that make simple daily tasks (e.g. taking medication) considerably challenging, loss of purpose in life, in addition to decline in mobility.

We have not narrowed down on what the details of our solutions will look like but aim to design a tangible user interface in the form of a ‘game’, that can be spread out on the ground. Our target population is uncomfortable (sometimes lacking the dexterity) to use smartphones and tablets. So, such a game will tap into output signals such as lights and sound which are easily understood and promote a bit of physical movement, potentially have a social aspect (e.g. old people in a local context could play the game together in the physical space), and challenge the minds of the old in a gentle but intellectually provoking way to keep them sharp.

We are inspired by Mahjongg and its complexity that enables old minds to stay healthy and active. Instead of checkers though, we are considering using artifacts from the people’s lifetime e.g. ‘arrange these events in chronological order’, the events being landmark points in time such as World War II, a marriage etc. Perhaps the children could set the game up for their parents or grandparents. The idea is to make the game as personal as possible and make their rich past a part of their present.