Posted on by xg679

Interaction Lab Final Project: Kaleidoshare —— Skye Gao (Spring 2018)

Final project: Kaleidoshare

Partner: Louis Veazey

Idea and inspirations:

For our final project, I first came up with the idea of building a device with the elements of a kaleidoscope. The concept inspiration comes from my own experience of playing with kaleidoscope in childhood. Seeing the changeable and amazing patterns coming from our own hands was a fantastic experience, which is also meaningful for children’s artistic appreciation and imagination. While for a traditional kaleidoscope, the user experience is quite private and temporary. One can only use one eye to see the pattern due to the small scale of the kaleidoscope, and it is hard to share the outcome with others because of its instability. Considering all these experience, I want to combine the physical theory and artistic elements of kaleidoscope with digital toolsto advance the user experience, making it more interactive, multisensory, shared and memorable.

Materials: 

  • 1* Arduino Kit and its contents, including:
  • 1 * Breadboard
  • 1 * Arduino Uno
  • 1 * USB A to B Cable
  • Jumper Cables (Hook-up Wires)
  • 1*DC motor
  • 2* 1k resisters
  • 1* 10k resisters
  • 1*big button
  • 9*220K resisters
  • 3* mirrors

Working process:

After discussing with Louis, we all agreed this idea is feasible, so we started to work on it. We divided our project into two parts, one is the functional part, namely making the basic components and coding work together; the other is the experiential part, which are the physical components and outfits that provide ideal user experiences.

Before all, we made a design for how the whole device will work. We made a 3-D model to present the idea. The pictures looks like below .

The idea is, at the back of the box (where the star stands) will be the screen of the computer, where we will use processing to present images. On the other side of the box will be a hubless wheel, which people will look through to see the screen and rotate to change the patterns on the screen. And between the screen and the wheel, there will be a triple prism to make reflections of the images. By this design, we tried to combine the physical theory of traditional kaleidoscope with digital media to create some innovative experiences.

Also, to make the kaleidoscope being shared and memorable, we thought of adding an button to  saw the images on the screen, and sent them to people keep and share their favorite images.

We got some inspirations for the idea of rotating and the structure of the box from two Youtube videos, and here are the links:

Demo & DC motor as input:

So we started with the functional part. Learning from our midterm project, this time we tried to make the coding as simple as possible. We found a demo on Youtube which exactly display the effect of a kaleidoscope, and here is the link:

We planned to use a Arduino input to play/stop the video thus to create a effect of the users are controlling the change of the patterns. 🌚YES, WE PLAYED A TRICK.

As for the input, in order to meet the effect of rotating, we first tried to use a rotary sense, however, the rotator sensor in ER can only go from 0 to 300 angle and this cannot work. So we did some research and found a tutorial on Youtube about how to use a DC motor as an input. Here is the link for the tutorial: Using a DC motor as an analog input (including the circuits and the model code). Following the tutorial in the video, we set up the circuit as well as the codes. Below is the circuit we built:

Wheels and gears:

After completing the circuit and coding, we began to think about how to build the experiential part. Since we want the users to rotate a wheel to control the input, that means we need to let the wheel drive the motor. We did some research and our initial plan was to use toothed belt to drive them. Here is the ideal model and what we found in our research:

So to do this, we first bought a wheel-like thing online, with some rubber band, and I also made a 3-D gear for the motor. Like below:

.

But these did not work, one thing was the rubber band did not have enough friction to make both of the components move together; the other thing is the 3-D motor was not a fit for the motor pin. So we changed our plan. As Nick suggested, we could use gears to make them  work together, and we could use laser cutting to make gears. So we further did some research about how to make wooden gears. We firstly tried to calculate and draw the gears by illustrato,r but Louis (fellow) suggested us to use a website named Gear Generatorto design it. So here is how we did the research and used the Gear Generator:

According to our design for the box, we need another wheel for the users to hold and rotate, so we design three hub less wheels, one is wide, one is thin, and another is the one with gears. And these  three would be put together as a sandwich and we will using the board to hold the middle one so that the whole gears will stand. Here are our laser cutting design:

And here are how the gears matches(the motor pin will be in the small hole on the smaller gear and will be driven by the larger gear). We put the “sandwich” together and made a small holder for the large wheel using wires:

since there was a lot friction between the board and the wheels,they are not rotating smoothly,  we tried several materials to make it work better. Here are the materials we tried (including the sandpaper, machine will and paper tapes, and the sandpaper worked the best):

After we set up all the things, the display was like this:

Website sharing, screen capture & QR code:

Next step, we started to work on the screen capture and share. We first used the mousePressed() function to test the screen capture, and it worked well. Our initial plan was to send the picture directly to the users’ emails, however, we considered that not all the people here have a gmail or VPN, but everyone here has a weChat. So we thought that rather than using email, we can use a QR code. However, there was a difficulty to connect the Processing with WeChat. After asking Professor Rudi, we thought we could upload the images to a website first and then make a QR code for the website. However, neither of us know how to make a web server, so professor offered to help us. He helped building the website for us and shared the code for uploading in Processing. (The code going credits to professor will be noted in the codes below).

After we had the website, we created the QR code. Also, we even made ourself a logo and named our project Kaleidoshare(kaleidoscope + share), because we wanted the experience can be shared. Here are our logo and the original design of  QR code:

         

Then we tries to use a button to control the screen capture. We found a big button from the storage room, which seemed to be a perfect match. We initially tried to built box to hold the button, but it may do harm to the integrity of the project, so we decided to cut a hole on the board to hold the button. The button and the box looked like below:

We also wanted to print our logo on the board, all by laser cutting. What’s more, considering the users may not get a signal whether they have captured or not, we added LEDs to the board which making up a shape of an arrow. So that every time people pressed the button, the arrow will turn on, pointing at the QR code.  Below are the process of laser cutting and outcomes, as well as the video of display:

Video for button display

Mirrors:

Then we bought three mirrors online and glued them together, here is the effect: (IT IS BEAUTIFUL !!!)😍

User experience and Vlog making:

After finishing all the process, we made a video of use experience, here is the link to the video:

User Experience: https://youtu.be/AMHgh1sSBr4

Also, since we made videos of the main process, we also madea vlog for our project process, here is the link to it:

Process Video: https://youtu.be/bzdadfvhV6E Hope you enjoy this video and do not forget to give a thumb up👍😛!

FINAL SHOW & User feedback:

On Friday, we set up our device before the final show. However, there suddenly appeared a lot of bugs. The first thing was the button was not working well. Every time the button was pressed, it sent several data and caused several images were saved and uploading. Also, the button seemed to have some interfere with the DC motor. We spent a lot of time on it trying to restrict the data input from both Arduino and Processing. With the help of Nick, we finally adjusted the data. The other thing was, since the motor was hanged in the air, it was easily to be loosen and caused errors. At that time we could do nothing but use more tapes to fix it. The last thing happened, was the QR code. Just an hour before the show, a user test showed that the QR code was expired!!! 😱 It was impossible to laser cutting another board at that time, so we decided to make another QR code, print it out and cover the old one. To make them look the same, I adjusted the color of the QR code which looked exactly the same as the wooden one. Here are the original code on the board & the new code:

:      

We showed the changed code to Professor and fellows, they did not even realized we changed it.😛 ANOTHER TRICK.TIP: Chinese domestic QR generating websites usually do not charge, while some google website charge a lot! Here we share with you the link to a good QR-generating website(it is in Chinese, which maybe a concern).

Also, considering that the QR code only goes to a website, that means as long as people do not have the QR code, they cannot visit the website anymore. So we printed out some QR code for people to take away with them.

On the show, I think it may because our project is very visually attractive, a lot people stopped by and gave a try. I think all of them loved it a lot, and just as them commented, this kaleidoscope is interactive, artistic, and memorable. We are glad that we successfully brought all our expectations into reality. Since there were so many people stopped by and we needed to introduce every time, we actually did not have time to taking more videos. Here are the video and pictures we took:

(above you can see the code we prepared for users to take away)

Also, we got some precious observation from the users, here are some:

  • People got attracted usually by the effect of patten changing, especially when somebody else was playing with the device.
  • Some people get confused at the first place about what to do with the device (including rotating the wheel and pressing the button)
  • The images shown on their screen were not arranged in order, it was hard for them to find the imaged they captured.
  • When people rotated with a narrow range, the images on screen did not change smoothly.
  • The motor still loosen sometimes
  • some people act too fiercely the whole devices shook a lot
  • …

Future improvement:

So based on those observations in our working process as well as on the show, we proposed the following future improvement:

  • Allow each user to select their own shapes, images, colors, etc. to show diversity patterns
  • rearrange the order to the images shown on the website and Allow each user to pair his/her name with the saved picture so that they can easily distinguish their own picture from others’
  • When the button is pressed then have an indication on screen
  • A similar concept with a small looking-hole to show different experiences
  • Better website looking
  • Better looking and more stable frame for the device (including the motor, mirrors and other components)
  • show clearer user instructions
  • As one of our users suggested, we can use gears with more teeth and smaller pitch so that the drive can be more sensitive
  • …

Conclusion:

For this project, we devoted much efforts and time into it. We are glad about the outcome and see people really enjoy the experience. And we presented our sincere thanks to:

  • Professor Rudi for the Website and instructions!❤️
  • All the fellows who helped us!❤️
  • All the audiences who gave us precious suggestions!❤️

A group photo of me, my partner and Professor Rudi!

Remember to see our volg lol!😛

-THE END-

Source Code:

//*code for Arduino
int playerPosition = 0;
int buttonState = 0;
const int buttonPin = 13;
const int ledPin1 = 2 ;
const int ledPin2 = 3;
const int ledPin3 = 4;
const int ledPin4 = 5 ;
const int ledPin5 = 6 ;
const int ledPin6 = 7 ;
const int ledPin7 = 8 ;
const int ledPin8 = 9;
const int ledPin9 = 10;
bool Signal = false;
int change2;
int buttonState2 = 0; // current state of the button
int lastButtonState = 0;

void setup() {
// put your setup code here, to run once:
Serial. begin(9600);
pinMode(13, INPUT);
pinMode(A1, INPUT);
pinMode(2, OUTPUT);
pinMode(3, OUTPUT);
pinMode(4, OUTPUT);
pinMode(5, OUTPUT);
pinMode(6, OUTPUT);
pinMode(7, OUTPUT);
pinMode(8, OUTPUT);
pinMode(9, OUTPUT);
pinMode(10, OUTPUT);
}

void loop() {
//put your main code here, to run repeatedly:
byte change;
playerPosition += change;
// Serial.print(change);
buttonState = digitalRead(13);
change = (analogRead (A1) – 511) / 2;
change = (analogRead (A1) – 511) / 2;
// modify the signal from motor
if (change == 0) {
change2 = 0;
}
else if (change > 0 && change < 100) {
change2 = 100;
} else if (change >= 100 && change != 255) {
change2 = 200;
}
//only when the button state changes will sent a signal to processing
if (buttonState == 0 && lastButtonState == 1) {
Signal = true;
}
else {
Signal = false;
}
if (Signal == true) {
change = 0;
change2 = 0;
}

//control leds
if (buttonState == HIGH) {
//Signal = true;
change = 0;
change2 = 0;
digitalWrite(2, HIGH);
digitalWrite(3, HIGH);
digitalWrite(4, HIGH);
digitalWrite(5, HIGH);
digitalWrite(6, HIGH);
digitalWrite(7, HIGH);
digitalWrite(8, HIGH);
digitalWrite(9, HIGH);
digitalWrite(10, HIGH);
}
else {
//Signal = false;
//change2 = 0;

// change = (analogRead (A1) – 511) / 2;
// change = (analogRead (A1) – 511) / 2;
// if (change == 0) {
// change2 = 0;
// }
// else if (change > 0 && change < 100) {
// change2 = 100;
// } else if (change >= 100 && change != 255) {
// change2 = 200;

digitalWrite(2, LOW);
digitalWrite(3, LOW);
digitalWrite(4, LOW);
digitalWrite(5, LOW);
digitalWrite(6, LOW);
digitalWrite(7, LOW);
digitalWrite(8, LOW);
digitalWrite(9, LOW);
digitalWrite(10, LOW);
}
// Serial.print(Signal);
//delay(100);
//Signal = 0;

// Serial.print(buttonState);
// Serial.print(‘,’);
// Serial.println(lastButtonState);
// delay(100);

// sent and test data
Serial.write(change2);
Serial.write(Signal);
delay(1);

// Serial.print(change);
// Serial.print(‘,’);
// Serial.print(change2);
// Serial.print(‘,’);
// Serial.println(Signal);
// delay(150);

//return the last state
lastButtonState = buttonState;
}

// *code for Processing
import processing.serial.*;
import processing.video.*;
Movie myMovie;
Serial myPort;
int change;
int change2;
int Signal;
int[] valueFromArduino= new int [2];

FTPClient ftp; // Declare a new FTPClient
String[] files; // Declare an array to hold directory listings
//boolean saved = false;

void setup() {
size (displayWidth, displayHeight);
background(0);
//frameRate(30);
myMovie = new Movie(this, “3.mp4”);
//myMovie = new Movie(this, “4.mp4”);
// myMovie.frameRate(2);
myMovie.loop();
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[3], 9600);
//myMovie.resize(displayWidth, displayHeight);
}

//void signal() {
////println(millis());
// saveftp();
//}

void draw() {
// control the display of the video
while ( myPort.available()>0) {
for (int i=0; i<2; i ++) {
valueFromArduino[i]=myPort.read();
}
if (myMovie.available()) {
if (change2!=0 && change2!=1) {
//if (change!=0&&change!=255&&change!=1&&change!=200 &&change!=2&&change!=3&&Signal!=-1) {
myMovie.read();
imageMode(CENTER);
image(myMovie, displayWidth/2, (displayHeight/2)-25);
}
}
// insert a function for screen capture
buttonsave();
//read data from Arduino
change2 = valueFromArduino[0];
Signal= valueFromArduino[1];
println (“change2 : “+ change2);
println (“Signal : “+Signal);
}
}
void buttonsave() {
if (Signal==1||change2==1) {
saveftp();
print(“saved to ftp”);
//saved = true;
}
}
//use mouse press for test
//void mousePressed(){
// saveftp();
//}

//captured images saving and uploading *credits go to Professor Rodolfo Cossovich*
void saveftp() {
String name = “kal-“+millis() + “.png”;
saveFrame(“/Users/xinyigao/” + name);

try
{

// set up a new ftp client
ftp = new FTPClient();
ftp.setRemoteHost(“plobot.com”); // ie. ftp.site.com

// set up listener
FTPMessageCollector listener = new FTPMessageCollector();
ftp.setMessageListener(listener);

// connect to the ftp client
println (“Connecting”);
ftp.connect();

// login to the ftp client
println (“Logging in”);
ftp.login(“ixlab2018@plobot.com”, “ixlab2018”);

// set up in passive mode
println (“Setting up passive, ASCII transfers”);
ftp.setConnectMode(FTPConnectMode.PASV);

// set up for ASCII transfers
ftp.setType(FTPTransferType.BINARY);

// copy BINARY file to server and overwrite the existing file
println (“Putting file”);
ftp.put(“.//”+name, “.//images/”+name, false);
// Shut down client
println (“Quitting client”);
ftp.quit();

// Print out the listener messages
String messages = listener.getLog();
println (“Listener log:”);

// End message – if you get to here it must have worked
println(messages);
println (” complete”);
}
catch (Exception e)
{

//Print out the type of error
println(“Error “+e);
}
}

Leave a Reply