Some Clothing Made with Illustrator

After reading the book The Fashion Designer's Directory of Shape and Form, I tried to create some of the clothing in the book by Illustrator. 

During the process, I thought the life drawing classes do me a great favor, because it gave me the sense of the scale and line of dress according to the human body. And the reflect transfer function of Illustrator also helped me a lot.

Skirt

Top

trousers

Programme of Study Proforma

Context & Method for Jeanette's Module

The cover of the powerpoint

Title: An  Exploration of online animated data Visualisation

The Research Problems:

• How to make data easier to understand by visualization?
• Can data visualization be animated instead of just static display?
• How to apply the new computer technology to create better data visualization?

Context:

Data visualization is the study of how to communicate information in a clear and effective way by graphic methods(Fry+Oram, 2007).

We are living at an information explosion time, but to many non-professionals, so much data is a disaster because they are hard to read and understand. Most of the time, people are trying to understand the meaning of the data instead of the numbers. That's why we need visual design to help the public to get the content of the data.

As for the exploration of data visualization, traditional visual artist like Woolman argued that 'The root of information visualization is in graph drawing'(Woolman,2002); This focus on static graphic method certainly help people to understand the relationship and meaning of the data, but it's not flexible enough to represent the change of the information if its data is dynamic.

Ben Fry, who is a consultancy of design and software,  proposed another theory for this kind of visualization. He stressed the importance of the interaction and change between data and users. Base on this theory, he summarized seven steps of data visualization, which are “acquire-parse-filter-mine-represent-refine-interact”(Fry,2007). These steps provided a very practical method of data display and also the possibility to allow user to communication with the data.

In the case of this project, which aimed at using the story background of Cinderella to build an online data visualization website, with the new technique HTML5 to draw the canvas, also involve Maya 3D modeling and 2D drawing, the seven-steps-method  that Fry suggested is inspiring; it somehow involves all the needs and stakeholders through the visualizing process, and it's easy to reuse in other visualization cases, such as an online HTML5 information animation.


Outcome:

Aimed at helping people understand themselves better by interacting with certain data, this project focuses on the data relative to personal interest. The outcome should be easy to access and simple to operate, and suitable for a planned online animated data visualization website.

The research and practice are relative to the areas of visualization, fashion and computer programming.

Research Methods:

The research will use the following research methods:

• Storyboard, which will simplify the data to be presented and clarify how to visualize it;
• Visual diary, which will be helpful to collect inspiration and build up the visualization ideas;
• Computer simulation, which will permit experiments to understand the possibility and limits of the new technologies used in the project, such as Javascript and HTML5;

Timetable:

• September - November 2011 (Program Learning of Maya and Life Drawing, Research on Technology and Fashion, Experiment on Web programming, data analysis)
• December 2012(script and storyboard, experiment on website)
• January - February 2012(Character Design, 3d modeling, work on the website)
• March - June 2012(background design, animation, sound, build the website)
• July - August 2012(music and sound, editing, coding and test of the website, poster)

Reference:

• Ben Fry and Andy Oram (ed.) (2007) Visualizing Data. United States of America, O'Reilly Media, Inc.
• Matt Woolman (2002) Digital Information Graphics. London, Thames & Hudson Ltd.
• Peter Lunbbers, Brian Albers, and Frank Salim (2010) Pro HTML5 Programming:Powerful APIs for Richer Internet Application Development.  United States of America, Apress.

An Experiment on Image Sprite

I have posted a blog(Image Sprites, Easy Animation) of Image Sprite and I really like this way of animation. In this experiment, I used some open resource images of clothes from zool.com.cn and create a large image as the basic background.

The Basic Background

The Image Frame that Shown On Website

It's glad to see that this experiment go along well with most browser. Feel free to visit it and give me some suggestion.

An Experiment on Realtime Lighting

I always wanted to show light on a website in a way of realtime, which means the lighting a certain object can change according to the movement of the mouse. I read a lot of website then one day I came across an amazing solution on 29a.ch created by Jonas Wagner. Then I fellow him on Twitter and asked if I could use this technique in my project. He's so nice that he gave this permission.

The I read some of him code. What I have to do is to create two image, one is for the normal face, and then use Photoshop or other better tool to revert its color, then the javascript file will use a certain maths principle to help calculate the alpha and color of the position of the mouse above the face image.

The face image

The Reverted Image (by PS)

 In my experiment, I used a picture I took of a castle in Highland, then use Photoshop to make it looked darker and created another image as the lighting image by 'revert' tool. The experiment went good on Chrome and Safari, you may visite it by this link.

The result of this experiment

Something about 3D

A Classroom I Created in Class, with the help of Link

This semester we had a module of 3D practice, and I learned a lot about modeling, animation, lighting, UV maps and so on. They are amazing and of great fun. But I think I still have to difficulty to transfer what I see as 2d to a 3d model, and it's hard for me to image what they look like and how then move from different angles. This's what have trouble me since I was doing 3D computer games with OpenGL in my undergraduate. So it's possible that I would avoid using Maya for my project.

Set Proportions by stylepilot.com

So when once Thomas recommended a website named stylepilot which used Flash to allow the users to changed the body shape on stylepilot.com, I began to think that maybe I could prepare a series of images and display one of them as the users change the data. That means I could do the scale or other changes with computer techniques like Python or Js online.

And if this doesn't work out, I shall try the online 3D technique name WebGL, which allow you to do a lot of changes to 3D object in realtime online. It's similar to OpenGL that I'm familiar with, but it's still under development and the coding is very complexity.

By the way, I saw some video about 123D of AutoDesk, I think it's a helpful tool for me to build models of different body shape if I just have to take some photo of people.

Two Tutorial Meeting of This Semester

Tutorial Meeting @21-11-2011

Mr. O'Neill and I had two tutorial meeting this semester, which were really inspiring and helpful to me.

For the first meeting, I introduced my intention of the project, and listed the techniques such as HTML5 that I would used. Then Mr. O'Neill helped me to sort out my mind and we discuss the data I were going to use. We decided to concentrate on color, body shape and occasions. He suggested me to do some research on fashion and dig into this factors and so I did.

 For the second meeting, we talked about the result of my fashion research and my website. Then he show me a website of women's body shape in their eyes. We also discussed some detail of how to get data from the users, and set up a plan for my project in the next month.

The Data I Will Collect and Their Interaction

As my project is an experiment of information graphic, it's certain that data will play an important role in it. To find out the user's preference of dressing, we need data of fashion, such as body shapes, colors, occasions and personal styles.

I have posted several blogs about these fashion definitions, so here I will focus on the measurement of the data. I did some search in the library, but wasn't able to find any clear tool of this. So I have to get some information from the internet, and I was glad to find a website named 'the chic fashionista' which offers many useful way to measure the body shape and so on. Here's the data I will use in my project:

• For Body Shape(Summarize from HOW TO TAKE ACCURATE BODY MEASUREMENTS  )

1. Shoulder Line: A straight line from one outer edge to the other;

2. Bust Line: Around the fullest part of the chest;

3. Waist Line: Around the narrowest part of the torso, avoid holding breath;

4. Hips Line: Around the widest part of the hips, with feet close together;

5. Rise: A line from natural waist down to crotch;

6. Inseam: Crotch to the inside of ankle.

Interaction: The user should be able to input these data and let the future website to calculate their body shape, or they could just choose the body shape from the 5 images we offer.

• For Occasions

The different kinds of Occasions have been summarized in the blog occasions.

Interaction: The user should be able to choose the occasion from a list of images or small animations.

• For Colors(Summarize from SEASONAL COLOR ANALYSIS)

1. The quality of skin tone;
2. The color of hair;
3. The color of eyes;

Interaction: A cute face should be offer on the website that users could choose the color of their skin, hair and eyes from a list and the face will change according to their options.

• For Styles(Summarize from Fashion Style Quiz)

1. Options: classic, trendy, dramatic, eclectic, romantic, Bohemian, sporty, urban;
Interaction: All of these styles could be chosen from a list of cute animations.

• For Registration and Login

1. User name(Neccesary);
2. Password(Neccesary)
3. Email(Neccesary)
4. Age(Optional)
5. Job(Optional)

Interaction: The user name and email should be check in real time from the database, job could be picked up from a provided list.

All these datas should be saved in a database, use the username name as the key, to produce a profile for the users.

Cinderella by Phil Porter

Last night I went to see the play of Cinderella, by Phil Porter in Dundee Rep. It's so amazing that all the children and adults I can see loved it.

There's many things that I can learn from the play.  First is the way it told the story, as written in the website, it recreate the story like this:

Cinderella works all day for her father in a floating retirement home for elderly magicians and their assistants. And when she’s not bailing out the family business, she’s bailing out the water! 

Back on dry land, the Queen announces that a ball will be held to find the dashingly handsome young prince a wife, but Cinderella’s wicked stepsisters are determined to ruin her dream of attending the Royal ball. 

With only the retirement home’s magicians to help her, who will work the magic Cinderella needs to get to the ball?

 I liked it because no matter how the background changed, it still focus on the magic and dreams, just as it said in the play "sometimes all you need is a little magic". Especially, it gave the characters some new dispositions. Cinderella was recreated as a girl no so weak, but still kind-hearted and have a strong sense of responsibility. She didn't go to the ball for the prince, instead she just wanted to be happy and beautiful for just one night. That's more understandable in nowadays. And the prince was someone who want to be "true me" and miss the simple but happy live before becoming a member of  nobility. And obviously, every audience loved its funny details.

For the stage, the play only had 3 scene: the ship(Cinderella's room and the magicians' dinning room), the castle. I think this is really intelligent because this covered the most famous part of the story already. In my project, I will also concentrate on the castle and Cinderella's room.

Another impressive thing I got from the play was to catch the audience's attention by casting a drop of light to a certain character on the stage. I can do it with HTML5, like the example I collected before on Normal Mapping with Javascript and Canvas.

There was one thing that really impressive me after the play. A lady asked her friend how she thought of this show, her friend said "I love it, it's happy, maybe because it's so easy to understand". That reminded once we talked about the definition of animation in  class, we looked back to a lot of early animations of producers such as Disney. Most of they are simple and just make you laugh. Nowadays, the development of technique allow the outcome of animation to have more possibility, but I think there's something that never change. That's take animation as a tool to write out what you see and feel from life, to recreate this into something simple and easy to accept, to help people better understand and pursuit something meaningful.