2/8/12

Reflective Writing


My project aims at creating an online animated data visualization system, which is based on female style preference and the story context of Cinderella. During the past 5 months, I have done a lot of technical preparation and concept design. When I think back on these times, I’m glad to see that the project have changed so much and everything become more clear.

For the context part, I’m really fond of the idea that as some kind of reflection of real life, data can tell us an interesting story if we could better comunicate with them. In this project, I use the data of figure to find the suitable clothing for women who pursue fitness and beauty. And then the story of Cinderella and Snow White came up to my mind. Sometimes girls might want to be a Cinderella, go to the ball with a shining dress and have a great evening. I hope using some background of the fairytales can make the visualization part more attractive. But as my supervisor suggested, such context will involve massive amount of character design and drawings, so for the next step I will do the storyboard and try to simplify the whole story.

As for the interaction and visualization, I tried to do it on the website with some programming works. The main point is ask the user to input their choices in a friendly way. Based on some research on fashion design and sociology, to gather the information and make up the dressing advice, we need data of occasion, color, age, body size and style preference. To make this part more funny, I will try to do it through the interaction with the magic mirror. And I also had a lot of discussion with my supervisor about the data to be visualize. In the end we came across a useful material, the fashion segments of female types done by Experian United Kingdom, which we believe would answer most people’s curiosity about women’s fashion style preference.

About the technique to realize all these design, at first I were excited by the powerful tool named Processing, but after several test, I’m afraid that it’s not easy to do the whole interaction part and it’s not very friendly to ask the user to wait for the Java environment to set up. And then I was inspired by the Image Sprite which was used by Google Logos and the new technique of HTML5. They own a lot of possibilities in online interactive animation. But still they might be not so enough for the project. In the beginning of this semester, my supervisor suggested me to look into Processing again, and I’m pleased to find that there’s a new tool to translate the processing code into javascript code, which means we can run the Processing programme really fast and cost less resource of the system. So I decided to try finishing the animation part in the language. 

During these five months, I’m afraid I have wasted so much time on hesitating about what to do and whether I could work out what I thought about. Maybe I should have done the storyboard earlier and tried to simplify the project according to the main goal. But I really do enjoy this process of exploration and looking for all these possibilities.

2/3/12

Test on ProcessingJs

test on http://siusinng.webs.com/
Just tried something funny in ProcessingJs, and glad to see that it worked quite well with the website and especially HTML5.

The steps of coding is about:
1. Design the animation and interaction;
2. Programming on Processing in PDE or Eclipse;
3. Do the website stuff and import the .pde you just finished with processingJs.js file, use HTML5 to leave a canvas node. See guidance in the official website http://processingjs.org/articles/p5QuickStart.html.

Something about animation:
1. One important thing is time, use the draw() and redraw() function to adjust the frames.
2.  The color might be different in browsers, do more test.