Mind Map for the Presentation

Mindmap

As it is shown in the map, for the areas I'm studying, my blog can be divided to three part: fashion, technology and visualisation. As for the contain, it can be identified as inspiration, context and practice.  Welcome to visit them.

The small images used in the map came from a series of open source from zcool.com.cn.

Reading List of Books and Websites

Fashion:
1. Kim Johnson Gross and Jeff Stone(1998) What Should I Wear? London, Thames and Hudson Ltd.
2. Sophie Woodward(2007) Why Women Wear What They Wear. Oxford, Oxford International Publishers Ltd.
3. Jay Calderin(2009) Form Fit Fashion. United States of America, Rockport Publishers, Inc.
4. Simon Traves-Spencer and Zarida Zaman(2008) The Fashion Designer's Directory of Shape and Form. London, Quarto Publishing plc.
5. Style Makeover HQ(n.d.) [Online] Available from: http://www.style-makeover-hq.com [Accessed 21st Nov. 2011].
6. Patrick and John Ireland(2007) New Fashion Figure Templates. London, Batsford.
7. Magazine of Elle and Marie Claire.
8. the chic fashionista(n.d.) [Online] Available from: http://www.thechicfashionista.com/body-shapes.html [Accessed 4st Dec. 2011].

Story:
1. C.S.Evans(1919) Cinderella. London, William Heinemann.Ltd.
2. Jeffrey Scott(2002) How to Write For Animation. United States of America, Overlook.

Technology:

1. Jason Cranford Teague(2011) Css3. United States of America, Peachpit Press.
2. Buce Lawson and Remy Sharp(2011) Introducing HTML5. United States of America, Peachpit Press.
3. Emily Vander Veer(2011) Javascript for Dummies. United States of America, Wiley Publishing, Inc.
4.  webs.com(n.d.) [Online] Available from: http://www.webs.com [Accessed 22nd Nov. 2011].
5.  Google Logo(n.d.) [Online] Available from: http://addieworks.typepad.jp/google_logo_museum/2011/09/google-logo-%E3%82%B8%E3%83%A0-%E3%83%98%E3%83%B3%E3%82%BD%E3%83%B3-%E7%94%9F%E8%AA%9575%E5%91%A8%E5%B9%B4.html [Accessed 22nd Nov. 2011].
6.  canvasdemos.com(n.d.) [Online] Available from: http://www.canvasdemos.com/ [Accessed 22nd Nov. 2011].
7.  openprocessing.org(n.d.) [Online] Available from: http://www.openprocessing.org/ [Accessed 22nd Nov. 2011].
8. Ben Fry and Andy Oram (ed.) (2007) Visualizing Data. United States of America, O'Reilly Media, Inc.
9. Matt Woolman (2002) Digital Information Graphics. London, Thames & Hudson Ltd.
10. Peter Lunbbers, Brian Albers, and Frank Salim (2010) Pro HTML5 Programming:Powerful APIs for Richer Internet Application Development.  United States of America, Apress.

Drawings:

1. Preston Blair(n.d.) Cartoon Animation.
2. Richard Williams(2002) The Animator's Survival Kit.
3.  ~samuel123 @ deviantart(n.d.) [Online] Available from: http://samuel123.deviantart.com/ [Accessed 22nd Nov. 2011].
4. Complexity Graphics by Tatiana Plakhova http://www.complexitygraphics.com/

Something About a Magic Mirror

Tell Me, Magic Mirror!(Sorry, I couldn't find the artist)

I came across the idea of data visualisation about personal preference when I saw this picture last year.  I hope someday this project can really tell girls the ways to get beautiful be analysis the data of themselves. Anyway, what I want to talk about here is the relation among women, dress and mirror.

In the story of Snow White, the queens always wanted to get information about 'the fairest' from her magic mirror. In fact, she just wanted get admiration from it. As Woodward says in her book, the importance of a mirror is that 'Looking in the mirror is therefore a marriage of the intimate and the generic, as women consider their own dressed bodies in light of wider social ideals and expectations.' According to her theory, when a women find the girl in the mirror is exactly the one fits her imagination of herself and what she want the society to see as 'her', she will find this fits. That's why occasion,  body shape finess and preference colors are important factors when choosing the prefect dress.

That's why sometimes it's funny that we such a different 'me' in the mirror.

Can you spot your REAL shape? from dailymail.co.uk

In our last meeting, Dr. O'neill sent me an interesting website name Can you spot your real shape? This article describe an experiment that when looking at the same body shape, women see different shapes according to their expectation of themselves. So as for my project, I thing it's important that the user should tell the website some data of themselves before the advice about what 'fits' the user.

Another interesting question is that what will people usually do in front of a mirror? Here's something I read and find in life:
1. Really look at myself;
2. Try the clothes on, look carefully, turn around;
3. Take off the clothes, change to another one;
4. 2<-->3;
5. Smile when it looks good, or even dance with it;
6. Angry or disappointed when it doesn't fit, or even kick the mirror;
7. Talk to myself.


Reference:
Sophie Woodward(2007) Why Women Wear What They Wear. Oxford, Oxford International Publishers Ltd.

Life Drawing Pratice

This semester I takes a life drawing class on every Thursday morning. The teacher is very nice, and after this practice for two month, I really fall in love with this kind of sketch.

Sketch@ Oct.

Sketch @ Oct.

Sketch @ Nov.

Sketch @ Nov

At first, I was lack of experience and always feeling to shy to draw. After each picture, I just wondered oh, what the hell am I drawing! Then the teacher told me to focus on the lines and scale of the body, and be more confident to starting drawing. Now it's great that I began to just enjoy the feeling of drawing, and then I look back to my drawing, somethings I started to like it, cause you can see your improvement through these 2 months.

For the next 2 month, I'm going to do some drawing practice on Models of different body shape, and try to do so sketch on fashion design, hope this will contribute to my project.

The Story of Cinderella

Cinderella Pumpkin Carriage

Once I was talking with Brian about my project, he gave me a good idea of digging into different versions of the story of Cinderella, and so I did.

First I watch some movie of Cinderella. One of them is Cinderella 1950 produced by Disney. I dont think much of this version, cause it pays too much attention to the mouses and the cat, which make me loose my patience. Another is Cinderella III A Twist in Time, also produced by Disney in 2007,  which post a question that if the slippers didn't fit Cinderella? Will the prince still fall in love with her? It's some kind of interesting that it make you really consider about the importance of the dressing to a woman.

Then I interviewed people from different country about their idea of Cinderella, this including friends from UK, New Zealand, China and so on. And found that most people learn about the story from the Disney movie, which means people have a similar concept of this story. When ask the question that Why do you think Cinderella wanted to go to the ball? Most of them thought it's because she wanted to meet the prince, or she was curious about the ball, or she wanted a change of her life.

I also read some books of Cinderella. Most children's books of the story are really simple and short, but one of them impressed me a lot. It's Cinderella told by C.S.Evans. The writer enriches the story with imagination of the detail, such as what people think in certain moments, but that means he also changes the story a lot. Anyway, it's funny to hear something different.

Choose Your Color

It's said that the right color can make you look younger, slimmer and brighter. It has something to do with your body shape, skin, hair and eye, and of course you should also choose your dressing color according the occasion.

Color and Season from Style Makeover HQ

When trying to understand the color in dressing, we should consider its culture, psychology and its change with season.

For culture, it means to understanding the connotations that a color carries from culture to culture and for different socia groups can clarify(Jay Calderin, 2009). It's important cause personal preference of color often connects to their cultural background.

As for psychology, it's that when we see a color, it might bring certain feeling to us. Blue may bring in the feeling of a clear sky and make you feel soothing. Red might be hot and stimulate. You can find more about Color Psychology by clicking this.

Changing seasons mean the past of time and switching of the occasions. There aren't any certain rules about what color to choose from, cause fashion is always developing. But we can offer some basic tips.

Spring: Besides of some basic color you are always wearing, may be this time, your want to add some warm, bright and clear color for yourself. Do remember to try navy, which is springtime classic.

Summer: In this hot time, maybe everyone want to try some cool color, which make your dressing breezy. But for beach occasion, you could also taste the sherbet, mangoes and candy-colored which may you smile.

Autumn: It's a time when the sun hangs lower and casts longer shadows, and brings us the color of nature. It's easy to wear black, brown and grey now, but do warm yourself up with wine reds, forest greens, cadet blues accessories.

Winter: It's really a free time, you can calm yourself down with dark colors, or just feel the heat with a red dress. Just try something exiting in the pale snowing days.

Reference:
1. Kim Johnson Gross and Jeff Stone(1998) What Should I Wear? London, Thames and Hudson Ltd.
2. Jay Calderin(2009) Form Fit Fashion. United States of America, Rockport Publishers, Inc.
3. Simon Traves-Spencer and Zarida Zaman(2008) The Fashion Designer's Directory of Shape and Form. London, Quarto Publishing plc.
4. Style Makeover HQ(n.d.) Do You Know Your Color? [Online] Available from: http://www.style-makeover-hq.com/seasonal-color-analysis.html [Accessed 21st Nov. 2011]

Dressing for Occasion

Street Chic From vogue.co.uk

These information are mainly found from the book What Should I Wear?

Seasonless Occasions:
birthdays, business dinners, movie dates, anniversaies, bar, weddings, weekend getaways, dinner for two, art opening, business conferences, theater.

Spring Occasions:
Easter, May Day, Mother's Day, Graduations.
Spring Basic:
white cotton skirt, silk knit sweater set, dark stretch cotton pants, denim jeans and skirt, blazer, spring suit, microfiber raincoat;
Tips:
1. While the winter cold is still on, do remember to prepare some woolen clothes;
2. The order of progression: wool to wool blends to silk to cottons and linens.

Summer Occasions:
Father's Dat, barbecues, beach parties, afternoon teas, baby showers
Summer Basic:
Capri pants, sundress, carryall bag, sunglasses, cotton sweater, sun hat, cotton T-shirt, swimsuit and cover-up, evening wrap, hoop earrings ,white cotton short, sandals.
Tips:
1. At the beginning of summer, dont miss the shinning colors that make you smile. But when the sun reaches its hottest, it's cool to wear no-color or frosty colors.
2. Cool and breezy is what we want from our simple summer dressing.

Autumn Occasions:
back to school, back to work, Harvest time, Halloween.
Autumn Basic:
long-sleeved T-shirt, turtleneck, sweaters, wool slacks, jacket, leather bag, leather boots, wool suit, cocktail dress.
Tips:
1. Autumn is a good time for you to wear the color of nature;
2. Do remember to warm yourself up with woolen and leather jacket;

Winter Occasions:
Christmas, New Year's, sky trips, Valentine's Day.
Winter Basic:
silk blouse, evening pants, velvet scarf, black coat, two--ply cashmere sweater, boots, hat, evening bag, drop earrings.
Tips:
1. Winter is a time to try a mix of fabrics on yourself, to keep warm, but do remember to dress in layers.
2. December is an important time to social, dressing in red is a good idea.

Hat Occasions:
Weddings, Easter, Synagogue, Derby Day, Ascot, Garden party, Pool party.

Reference:
1. Kim Johnson Gross and Jeff Stone(1998) What Should I Wear? London, Thames and Hudson Ltd.

Dress According to Your Body Shape

Body Shape is an important factor for women to get dress, according to the books & website I had  read. Following is some information I collect for my project.

• Ways to find out your own body shape

One simple way is to stand naked in front of your mirror, look carefully to yourself, learn about your bustline, waistline, hipline, mid-thigh, knee length and ankle length.

Another way is to ask your friend to photograph you front, back and sideways. Then you can look into the picture and discuss with your friend. 

Of course, your can also ask your friend to give you some honest opinion.

• Different types of body shape

According to Style Makeover HQ, you can classify your height. If you are less than 160cm and without large body scale, you may call yourself Petite.  In Jay Calderin's book, she argues that women mature figure height is 1.65-1.68m, and petite height is 1.57-1.63m. I think this difference is not a great deal.

This is Style Makeover HQ's method of Identifying women's body shape.

Hourglass Figure

Hourglass Figure is a lucky shape,  the body vertical shape is balanced, and the bustline  and hipline are the same width, and the waist is well defined.

Inverted Triangle

Of this nice body shape, you might have a large bust or broad shoulders, narrow hips with well defined waist,  mostly long and slim legs, maybe a flat bottom.

Triangle or Pear Shape Body

You are with this body shape if your bustline is narrower than your hipline, and you have a well defined waist, typically a narrow shoulders, balanced or short legged, full thighs and round bottom.

Rectangle

Rectangle shape is typical for their bustline  and hipline are the same width, little waist, slender legs and arms, small to medium bust, balanced or long legs, flat bottom. 

Oval

This body shape is similar to apple. They have undefined waist line, wide hips, large stomach, and full bottom.

• Dress according to your body shape

Here's some suggestion for getting dress for each body shape.

Hourglass Do:

1. Fitted and semi-fitted clothes
2. Soft, clingy, flowing fabrics
3. Low to medium-low necklines
4. Dresses with defined waistlines
5. Straight and gently flared pants
6. Straight and gently flared shirts

Hourglass Dont:

1. Stiff, bulky, fabrics
2. Baggy styles
3. High necklines (unless you have a small bust)
4. Skirts with open pleats
5. Very tapered pants

Inverted Triangle Do:

1. Flowing fabrics
2. Low to medium-low necklines
3. Set-in sleeves
4. Three-quarter length sleeves
5. A good fitting, well adjusted bra
6. Tops and dresses that flow through the waist
7. A-line skirts
8. Flared pants

Inverted Triangle Dont:

1. Stiff, bulky, fabrics
2. Styles that emphasize your shoulders
3. High necklines
4. Big collars
5. Tapered skirts and pants

Triangle Do:

1. Accessories and designs to draw attention to your upper body
2. Short-sleeved tops
3. Shoulder pads to broaden your shoulders. This may sound very 80s advice, but they really do work. However, they should not be visible
4. Medium to high necklines
5. Garments to emphasize your waist
6. Skirts and dresses that are straight or slightly flared
7. Low rise pants to avoid gaping at the waist
8. Boot leg and straight pants

Triangle Dont:

1. Baggy garments
2. Stiff fabric
3. Garments that add bulk to your hips
4. Hems or design lines at hip-line
5. Open pleats on skirts or pants
6. Tapered skirts or pants

Rectangle Do:

1. Shoulder pads to emphasize your shoulders. This may sound very 80s advice, but they really do work. However, they should not be too large and definitely shouldn't be visible
2. Semi-fitted clothes
3. If you have firm upper arms, short-sleeves and sleeve-less tops and dresses
4. Medium to high necklines
5. Dresses that wrap or flow through the waistline
6. Straight to gently flared flat-fronted pants
7. A-line shirts

Rectangle Dont:

1. Clingy fabrics
2. Fitted clothes
3. Low necklines
4. Baggy tops
5. Baggy pants
6. Narrow skirts

Oval Do:

1. Ear-rings, necklaces and other focal points designed to draw an observer's eyes up towards your shoulders and face
2. Shoulder pads to emphasize your shoulders. This may sound very 80s advice, but they really do work. However, they should not be be visible
3. Semi-fitted and loose fitting clothes
4. Good fitting, well adjusted bras
5. Support underwear
6. Tops and bottoms in the same colors
7. Low necklines
8. Un-tucked tops
9. Tops and dresses that flow through the waistline
10. Straight flat-fronted pants in soft, flowing fabric
11. Straight and slightly flared skirts

Oval Dont:

1. Clingy fabrics
2. Fitted clothes
3. Fabric with large patterns
4. High necklines
5. Large lapels
6. Belts
7. Tucked-in tops
8. Pleats
9. Narrow or tapered skirts
10. Narrow or tapered pants

Reference:

1. Kim Johnson Gross and Jeff Stone(1998) What Should I Wear? London, Thames and Hudson Ltd.

2. Sophie Woodward(2007) Why Women Wear What They Wear.  Oxford, Oxford International Publishers Ltd.

3. Jay Calderin(2009) Form Fit Fashion. United States of America, Rockport Publishers, Inc.

4. Simon Traves-Spencer and Zarida Zaman(2008) The Fashion Designer's Directory of Shape and Form. London, Quarto Publishing plc.

5. Style Makeover HQ(n.d.) What's Your Body Shape? [Online] Available from:

http://www.style-makeover-hq.com/body-shape.html#top [Accessed 21st Nov. 2011]

The Changing Ideas and Mindmaps

As December is coming, all the classes of this semester are coming to the end. For this three months, I learn a lot by reading & practice, and my idea of the project has changed a lot with this.

I remember for the first workshop with John in Shanghai,  I was intended to focus on the visualisation of data, so the main idea is about visualizing different type of data. But at the beginning of this semester, I realized that I was more interesting in the dynamic online visualization, so I determined to try some thing on personal preference.

the first mindmap

drawing mindmaps in the workshop

The first mindmap in this semester really gave me a direction that maybe I should try more focus on the data type and the out come.  At that time I just thought that I wanted to made an online magic mirror. It made me think about how to do the research, what should I learn and how can I make the project more attractive.

Brian's help, the second mindmap

 This little note came after the talk with John, I asked Brian for advice. He's amazing and really help me to clear my mind. We decided to simplify the data as time is really limited, and what's more important, we made a list of what to do(script and storyboard, character, background, design, research, programming, animation) and from whom I could ask help for. And he suggested me to dig into different versions of Cinderella's story, which is really an helpful interesting research for me.

a more clear mindmap for research

This mindmap is from the research method lesson of John, drawn by Thomas. We discussed each other's project and it's of great fun. By certain questions, we really saw something brilliant coming out from our project. I was inspired that I should add some more element from the story of Cinderella & magic mirror into my project, so that it might be more fancy and easy to understand.

I was thankful that for these three months I gained so much help from the class and staff  . It's exiting to see my project to become clear and fancy with all these help and supervise.

Image Sprites, Easy Animation

For my project, I intend to post a short animation about Cinderella Getting Dress at the entry of the website, followed by an interactive animation to be the dynamic visualisation.  These animation would be 2D, short and with limited branches, which are inspired by the technology named Image Sprites. Google.com made this technology to be an amazing tool for online animation.

The video above is what Google Doodle to honour the birthday of Jim Henson, who was well known as the creator of The Muppets. It's not a gif nor video, but some collection of images put into a single image(image sprites, defined by w3cschool.com). 

henson11-hp-3o.png From Google.com

Google Logo – Jim Henson's 75th Birthday 

Maybe you already guess how it came from when you see the pictures above, for each movement, we create small images similar as "frame" of Flash, which is not strange for us animation students. To make it easy to control, it's better for the images to has the same width and height. Then we merge these images to be a big one, and use Javascript and CSS code to show certain part of the collection.

explain the image sprites 

In my website, I use the image and the idea of the Google logo in honor of Martha Granham to rebuild the animation, trying to understand this technology. You can visit it thought this link.

Collection of the movement of Google Logo to Honor Martha Granham

Try the Image Sprites, All source from Google.com

Some Important Principles of Getting Dress

These days, I am looking in the principles of how women getting dress. I read several books about fashion and women's lives, and watched some teaching video by Trinny & Susannah, which was recommended by Mhairi.

By the video of T&S, I learn that maybe to most important thing of getting dressing is to know your body, to find the clothes according your body shape. It's suggested that we should stand in front of the mirror, look carefully and find out our body type.

As for body shape, I find a website named style-makeover-hq ,which gives fantastic information about the relation of body shape and dress style.

Another thing that matters is social expectations, which we my also call dress for the occasions and personal status. A skirt suitable to ball may not be a good idea for going to club with you.

Personal preference is of course important too. Everyone have their own idea about style, their color and their design.

At last, color is an powerful thing for the dress style. Different color has different mood and influence. And as Trinny said, there are certain pattern for people of difference body shape to follow.

There are certainly many other principles for getting dress, but as the time is limited, the body shape, occasion, color and personal preference are the elements I will really consider in my visualisation project, and I talk about them individually.

Art Style Inspiration——samuel123

For these months, I am trying hard to find the art style for my project. I want it to have light, cause I want to show the mouse position by a drop of light. And I want it to be pleasant and comfortable. When I saw the gallery of samuel123, I knew I got it.
From his website, we see that he's an artist from UK, and he's always drawing a mole named Otter in specific occasion.

Otter and the Mothby ~samuel123

This one is my favorite, telling a story about Otter met a moth. I really like the curious face of Otter, and the desk and book make the scene full of fun.

Here are some more his works.

staying up all nightby ~samuel123

Halloweenby ~samuel123

This one made me think about Cinderella's magical pumpkin car.

Otter Bandby ~samuel123

To find more about the story of Otter, you can visit I am Otter.

By the way, I really recommend the website deviantart, where you can discover many awesome artist, their self description and their favorite art works, so you can see what inspires these artists.

Set Up a Place for Practice

This weekend, I was trying to set up my own website for my project. Finally I chose the Webs, because it allow me to freely edit the html code. So I will test my project on http://siusinng.webs.com/ in the future.

There's some disadvantage of the Webs' service, which is that they only offer 40M space for your whole website. That means I wont have enough space to store the profile for the user, so I might have to set up my own server in the end.

A lot of work about beauty & function is in need for the website, but during these days, I found CSS3 a really useful tool for web application, maybe I will take advantage of it for my project.

Lev Manovich's Language of New Media

In Sharon's Context & Review class, Mhairi and I read some material about Lev Manovich, a professor of Visual Art. Here is something about his concept of new media.

For the definition of new media,  Professor Manovich think that the common idea that 'the use of a computer for distribution and exhibition rather than production' is to limiting.  He argues that the computer media revolution affects all stages of communication and all types of media, which is full of possibility and  allow us to do media, such as texts, images and sound in a completely different way.

To further his theory, he states the five principles of new media---numerical representation, modularity, automation, variability and cultural transcoding. I'm deeply impressed by the words of automation and variability.  Nowadays, computer technique  allow us to find out the preference of our audiences,  analysis them and show the difference works they really want. As for my project, which aims at visualizing the data of personal interest, I could create a profile for the user and find out their needs automatically, thus provide them variety of visualisation.

As for practice, Pro. Manovich created some great project for cinematograph, which means 'writing movement'. You can visit his works though images and video.

ImagePlot by Lev Manovich

Reference:
Lev Manovich. (2001) The Language of New Media, London, The MIT Press Cambridge