xystudio-blog - Tumblr blog

[xystudio-blog]

Maple Motion Design

A month ago, Maple asked me whether I can make a simple line animation for both their website and iOS. The animation needs to be created by vector graphics, meaning SVG in web and CoreAnimation in iOS. After reviewing the designs and feeling their passion of perfection, I took the challenge.

For the web version, I chose After Effects with BodyMovin ( a plugin which export shape animation into svg graphics ). BodyMovin is still in beta, one issue I experienced is that, when one path transforming into anohter, both paths should have the same number of anchor point, otherwise, the BodyMovin will fail.

Screenshot of Affer Effects

For iOS version, I used QuartzCode. QuartzCode's interface is very simple, it reminds me of Flash sometimes. Overall it works, however, there are some small issues always bug me, such as, it's not allowed to move multi paths on the timeline at the same time. Also, if one path animated more than once overtime, you better duplicate it, since when you apply an ease or custom animation, it applies to the whole lifespan of the path, which is very annoying.

Screenshot of QuartzCode

It has been a great collaboration experience with the design team at Maple. Here is a version of the full animation made in After Effects.

[xystudio-blog]

IMA Visual Identity

Inspired by the MIT Media Lab Logo in 2011, I did an animation study to explore the brand identity through the lens of typography. The three colors stand for the diversity of the program, the color multiply effect stands for the birth of creativity. [code]

View the Project

[xystudio-blog]

Expressing Data

I’m teaching a 7-week class at NYU Shanghai called ‘Expressing Data’. Here is the syllabus of the class:

Expressing Data

Mon/Wed 4:00pm - 5:30pm

Course Description

Human beings are producing, consuming and sharing data at any given moment. However, what kinds of data are meaningful to us? How do we capture and collect that data? What are the best ways to present it? What stories do we want to tell with data? This course will explore these questions and more. Students will learn basic techniques for data collection and filtering. Student projects can be digital, physical, visual, musical, or (with approval) take any form imagined. Prerequisite: Interaction Lab

Learning Objectives

* Students will understand data compositions behind objects. * Students will learn basic technologies of capturing and visualizing data. * Students will explore online data through APIs.

Assignments

There are 4 assignments and 1 final project in this course. In the first 4 weeks, students will capture one data series per week, sketch out the data in paper as Monday assignment; learn some related computer technology, and sketch out the same data in code as Wednesday assignment. * Week 1: Capture data about stuff you eat or drink in text * Week 2: Take photos about people or things you see * Week 3: Record audios about sound you listen * Week 4: Track locations about places you go

From week 5 to week 7, students will learn technologies related to larger dataset and work on their final projects.

Readings

'The Visual Display of Quantitative Information' by Edward Tufte * Chapter 4 ( Page 90 - 105 ) * Chapter 6 ( Page 122 - 137 ) * Chapter 9 ( Page 176 - 191 )

'Envisioning information' by Edward Tufte * Chapter 3 ( Page 52 - 65 ) * Chapter 5 ( Page 80 - 95 )

Grading

Grades will be determined based on the following breakdown: * 20% Attendance & Participation * 60% Assignments & Exercises * 20% Final Project

Attendance

Attendance in all classes is mandatory. Unexcused absences and tardiness will effect your grade. Please let me know ahead of time so that I can help you determine how to make up the material. Cellphones not permitted in class.

Weekly Breakdown

* Week 1   * Introduction, Text Visualization Inspirations, Data Formats   * Charts, Color, Shape and Typography in Data Visualization * Week 2   * Assignments Review, Image Visualization Inspirations, Image Capture   * Image Process and Visualization Techniques * Week 3   * Assignments Review, Audio Visualization Inspirations, Audio Capture   * Audio Process and Visualization Techniques * Week 4   * Assignments Review, Location Visualization Inspirations, Location Capture   * Location Data Process and Visualization Techniques * Week 5   * Assignments Review, Using APIs   * Workshop * Week 6   * Collecting and Filtering Data   * Workshop * Week 7   * Workshops   * Final Projects

Links

http://feltron.com http://dear-data.com/ http://dataphys.org/list/

[xystudio-blog]

EXHIBITION: "Personal Absurdities", Galerie Gebauer, Berlin, 1997

Adam showed me this photo when we met up for lunch at Grand Sichuan, I immediately said to him, “Let’s host a coffee time party with this concept.” It was a crazy week, we only had 3 nights to make shoes for more than 30 people. It also happened to be the same week which I had to apply a business travel visa of Italy. 

First, we made a survey to find out the tallest person in our studio: 6′4″; Second, we created a spread sheet of people’s heights and their shoe sizes. The first prototype we made is this blue foam one in the photo. It was easy to make, however, it took quite a while to cut and it costs so much material. We soon came up a manageable solution: a black box with a cross inside.

Adam is hand cutting some foam cores to test out a design solution. 

Luckily, Adam and I got some help with our friend Jake Hodges. In the end, three of us made 34 pairs in 2 nights. This is the photo of everyone lined up. 

More Photos on Flickr

[xystudio-blog]

My colleague Adam organized a gallery show for our design studio. The theme of the show is ‘TIME’. He and I had many conversations about how to use social network as a crowd sourcing tool. In the end, we created a printer, it prints live tweet from the globe which contains the current timestamp in its message text. You can view a static version here.

It’s super interesting to read all the tweets together. Each tweet has its own story, when you are reading the tweet one by one, the highlighted timestamps start weaving all the stories into a bizarre illusion. Here is the open sourced project if you are interested: https://github.com/xyfeng/24hours

Some friends points out to a ‘similar concept’ film called ‘The Clock’, made by video artist Christian Marclay in 2010. This guy is crazy, he hired a team of video editors, went through all the films to find the clips which somehow contains a piece of timestamp, then stitched the thousands of pieces into a 24 hours film.  When the film is showed to the public, it will play 24 hours straight, Insane! Here is a clip from Youtube:

[xystudio-blog]

Project Link

How to make a 3D figure out of iPhone photos

Photoscan by AgiSoft is a great software for 3D scanning. There are many tutorials on youtube, the one I followed is called ‘Photoscan Portraits’ by Specular. Iphones are good enough for the photos, as long as you know how to set your camera to shoot in manual settings, and the object/person you are shooting are in a good lighting environment. 

After exported from 3D scanning, I realized there are too much details generated by this application. You will get lots of noise on on human’s curly hair and beard.

The next step is filling the holes and smoothing the polygons, I used Meshmix to do the job.

As you see here, it’s pretty good in general, however, there are lots of the noise around the ear and a giant ball on the back of the head. I tried to use zBrush and some other applications to manually sculpt out some details, it’s really hard. I quickly give up that idea after several trials. The solution I end up with are reducing the polygons and making it into a low resolution model. 

Then I went to find a 3D cartoon models online and stitched them together. 

I imported the final object into Rhino, add a screw hole there, then sent to a 3D printer. After it’s got printed, my friend Jenny hand painted it with some really beautiful patterns. You can see more photos here.

[xystudio-blog]

There is no such thing as a creative person

Everybody has a song in them. By that I mean everyone invents things in various capacities at various different points in their days and lives. Whether these inventions do or do not come to the surface for the world to see has no bearing on whether someone is creative or not. To call someone a ‘creative person’ or to call yourself a 'creative’ person is completely reductive and can only serve to make a large number of humans feel inferior for no good reason. 'Creatives’ are now seemingly a fixture at every workplace around the country. It’s only a matter of time before we have the 'excitings’ and the 'borings’ in separate departments. It’s all a bit of a nonsense. If you’ve ever made breakfast, you’ve created something. If you’ve ever told a lie, you’ve created something. If you’ve ever dreamt at night, you’ve created something. To be alive is to be creative. 

[xystudio-blog]

Made With Lines

[code]

Frog host screen printing workshop every year. Yumi and I are both into optical illusions, we decide to work together on some new graphs to print. The concepts we came up with are very straight forward, I found they are simply easier to generate with code than illustrating.

[code]

[xystudio-blog]

Ear + Lights

I really like the gloss finish of ceramic ear, a little spot light shows so much beauty of its organic form. 

[xystudio-blog]

设计 － DESIGN, 2012

[xystudio-blog]

During Frog new york studio renovation, Dino (head of the Industrial Design team) asked for new designs of the wall volume knob which controls our studio sound system, I volunteered.

I came up with the idea of making real size human ear as a knob. I started with modeling ears in 3D softwares. (Not like real human ears, which connecting to a face, these 3D models need to have a closed back, and the side angle is more vertical in order to better facing people.)

After spending hours of modeling ears, I suddenly obsessed with them. They are such interesting organs. When we ever think about ears, we usually picture them as speakers due to the open shape, however, they are super sensitive stereo microphones[The Microphone vs The Ear]. Because they are on the sides of our head, sometime get covered by hairs, they are not as attractive as other organs. (I had silicone injected into my ear canal once for making custom in-ear headphones, I was surprised to see how deep my inner ears are, they almost meet each inside my brain!) What mostly attracted me are the complex shapes of outer ears, they have such unique shapes, I observed several peoples' ears, there are so much characters and very different from people to people. Not like eyes you can define by the size and color, ears are much harder to describe with language. I have to admit, observing people's ears is my new hobby when riding new york's subway ;)

The 3D printed ear knob is surprisingly comfortable to hold and rotate. To better fit with the steel plate, it's coated in gold to get a vintage cooper feeling. 

I also designed a ceramic ear hook, which can be easily installed on walls for hanging stuff, it is white and glazed, very smooth finishing.

[xystudio-blog]

Imitated from: ‘Boy, 2007’ (The Big Family Series) of my favorite artist Zhang Xiaogang

(btw, the blend feature in Pencil is perfect to draw these styles)

[xystudio-blog]

Imitated from: 'Apparat - Black Water'

[xystudio-blog]

Poster for Megan

Friend Megan(IxD) is leaving frog pond. As a tradition - we make poster for parties - Yoo-jung and I designed a series of posters for her farewell party. 

We use post-it as pixels for letter 'M', different poster use different language and has unique color.

[xystudio-blog]

Imitated from: 'Erotomagie préliminaire, 1948' by VICTOR BRAUNER

[xystudio-blog]

Imitated from: 'Drift - Nosaj Thing' Album Cover

[xystudio-blog]

Imitated from: 'The Double EP: A Sea of Split Peas' Album Cover