There are 2 main components: SpinSprite, which defines a sprite that can spin around a center point; and Carousel, which is a container for SpinSprites and rotate them accordingly.

First create a SpinSprite and define its properties (radius, speed, hasRotation, etc). Then create a Carousel and add a "cell", for example:

carousel.addCell(spin_sp, content, true);

Finally, you can spin the carousel like this:

carousel.direction -= carousel.sub_angle;

Obviously this is a barebone implementation of a carousel. I will leave it to you to implement z-depth sorting, selection event, and so on. See the included mxml for an example. Have fun!

This is a simple class that generates cross-fade effect. Just create an instance:

var cross:CrossFadeSprite = new CrossFadeSprite( sprite1, sprite2 );

Then when you call flip() function, sprite1 will fade to sprite2, and vice versa. The current property stores the sprite that's currently visible.

You can also change the minAlpha, maxAlpha, and speed properties to customize the fade effect. See the included mxml file for an example.

That's it! Simple and convenient.

These code examples explore the the craft of a line in Java/Processing code. Let's take it for some algorithmic walks.

The source code includes several packages of Java classes, and my home-brew Vector math library (probably inefficient for serious graphics need.) I recommend using an IDE such as Eclipse to try them out.

Also see the related video, and a related work called Mosumi.

P.S. I will be speaking about this and other things in the We Love Techonology conference in Sheffield UK next week.

• Videos at Vimeo
• High-res images at Flickr
• Source code of the processes

I travelled to China last year (a foreigner indeed in his "motherland") and rediscovered many things.

One of these things, Chinese ink painting along with its spirit and craft, continues to make me wonder:

Can the vitality of form express spiritual insights?

At which points do mountains and trees become humanistic?

How to take insights from traditional craft into digital craft?

It is emptiness that turns clay into pottery – what does that really mean?

Inspired by these, I decided to start with

a simple line, and to explore the craft of this simple element in code.

So Mosumi is, in many ways, more meditative than expressive.

It is probably unfortunate that the line looked like brushstroke, a predictable form, bounded by what I saw and thought. But it also has a strange quality about it, a humanistic expression in square pixels, a form that is unlikely to exist on paper yet it could well be there.

To me, these tensions and conflicts are almost zen-like. But I also know that I’m thinking too much.

So here I documented some initial results, in videos and images. This work is also for the Code Craft exhibition in Lovebytes 2010.

Let’s see how it may go from here.

A little video (does it look like wreath or broccoli?) -- made with processing, music by Debussy -- to wish you a Merry Christmas and a Happy New Year.

Love, Peace, and Champagne!

My first experiment is called Kubist, which transforms an ordinary image into a facetted, cubism-like composition.

In this sketch, the triangles of the meshes are random and unanimated, so that I can focus on the effects of sizes, blends, and sequences.

Next, I should try multiple viewpoints and animations -- whenever I can actually sit down and do it!

Hope you will enjoy a few sample compositions here, and the Java/Processing souce code (yet to be optimized).

Template layers: these are the fixed elements. For example, in a webpage layout, the header and footer may stay constant.

Content layers: these are the dynamic elements. For example, they may show design options of a webpage layout.

First, change all template layers' names. They should start with an underscore ( _xyz ).

Then simply run the script (File > Scripts > Other Scripts... or use shortcut key Ctrl-F12).

The zip file includes a test file (test.pdf) for you to try out. The script is only briefly tested in Illustrator CS3 (in Win XP). Let me know if you encounter any bugs.

Want to export each layer as an image or pdf then? Try this script.

This script automatically exports each layer in an Illustrator file as a separate PNG or PDF, in 3 easy steps:

1. Layer names will become the file names. Rename if needed.

2. Run the script (File > Scripts > Other Scripts... or use shortcut key Ctrl-F12).

3. Find the exported files in the same folder as your original Illustrator file.

A test Illustrator file (test.pdf) is included in the zip. Give it a try!

Only briefly tested in Illustrator CS3 (in Win XP). Let me know if you encounter any bugs.

P.S. You may also like this Layer Compose script, or check out other illustrator scripts.

"not only to provide a medium of expression for the world-view and mental habits proper to the devotees of Ingsoc, but to make all other modes of thought impossible."

It has three categories: A, B, and C vocabulary.

A vocabulary are words used in everyday life, but stripped down and then recombined (knife, speedful, doublepluscold, undark).

B vocabulary are words constructed for political purposes (goodsex, thinkpol, duckspeaker).

C vocabulary are obscure technical terms without reference to any scientific thinking.

But that was in 1984.

In our 21st century, the world speaks New Newspeak. It is conceived so as not to diminish

the range of thoughts, but to extend and obscure them. I would categorize them as such:

A vocabulary are pleasant words that makes you desire more than you need. (organic, design, vitamin)

B vocabulary are web 2.0 words that sound good, for now. (google, twitter, bing)

Tweening is quite easy, but managing all the "tweens" in a scene is often a humdrum task.

TweenSprite is a simple tweening class for Actionscript 3. It allows you to animate multiple properties of a sprite, and choreograph the movements by changing time steps and loops.

Some pseudo-code to help you get started:

Create a new TweenSprite:

var sp = new TweenSprite()

Add some content or draw some graphics into it:

sp.graphics.drawRect(...)

Get a tween setting object:

var setting:Object = TweenSprite.setting( start_value, end_value, steps, easing-constant, loops );

Add as many tweens as you like:

sp.addProp( setting, PROP-ROTATION); sp.addProp( setting, PROP-ETC );

Start the animation:

sp.start();

That's it! Download the file for the source code and example.

You can also find additional information on tweening and easing functions online. Robert Penner has a great tutorial on this topic.

An illustration (shared here) and some thoughts on the June 4th Movement in Beijing 20 years ago. Details of the June 4th Movement can be found at Open Past.

一九八九年六月四日，清早醒來，仍聽到新聞報導聲，父母仍坐在客廳看着電視，神情疲倦、哀傷、憤怒。

那年我十一歲，小學六年級。那年我第一次參加遊行，第一次感受社會動盪，第一次體會生命的意義和價值。我們這一代，在這二十年與中國一起成長的孩子和青年，也許可稱作「六四世代／Generation 6.4.」。

今年的中國已不是二十年前的中國，我們也不是二十年前的孩子。

至今回首二十年前的初夏，記得的不是死傷數字，不是標語，而是一種體認──對民族和社會的承擔，自身良知的省察，擇善固執的勇氣。

有人說，中國現今穩定繁榮，八九年春夏交際的那場政治風波，不談也罷。這種「稻草人」邏輯，不

單埋沒了歷史，也埋沒了良心。

管子說：衣食足，然後知榮辱。穩定繁榮，不是文明社會的終點，而是起點。嚴正對待事實，提昇國家文化，是社會領袖義不容辭的責任。

反觀現今中國，繁榮背後，被剝削侵犯的人，特別是孩子和女性，不可勝數。很多人面對社會的不公義，只有漠視、抱怨、以至從中取利；社會很多的「精英」，爭逐名利，富貴則淫，貧賤則移，威武則屈，延續以至鞏固了社會中嚴酷不公的制度。

八九年學生的訴求──民主改革，人權，自由，反貪污──二十年後仍沒有結果，反有倒退。

或許當年學生的行為有衝動之處，有錯失的地方，或許他們真的太傻太天真，但他們在廣場和平集會，追求的是對國家未來的期盼，一種民族未有的良知。罪總不至於死則肝腦塗地，生則監禁流亡？二十年過去，為什麼仍要混淆歷史，封殺言論，種疑於真相，更使死者不得公道，流亡者不得回國，使人民對六四事件禁若寒蟬？

民主進程，可以爭辯和妥協；自由人權，可以一步步走；但六四事件，黑白分明，為對死者和受難者交待，為對歷史和良心負責，我們必須鼓起道德勇氣，一寸也不能退讓。

Because dreams — dry or wet, scary or sweet — are far more alluring than the routines that await modern men and women in the morning. Let's hit that snooze button one more time...

But what is that creaking noise? What is that feeling of gravity? It is the bed rotating, 10 degrees per second.

The best alarm clock is ambition. The second best is this most ingenious invention of mine.

And, like this insubstantial pageant faded,
Leave not a rack behind. We are such stuff
As dreams are made on; and our little life
Is rounded with a sleep.
— The Tempest, Act 4, Scene 1

It displays a distorted frame that interacts with cursor position. It signifies the abstract emotional state of a drunken mermaid in love... Just kidding.

Originally created for a Hong Kong TV production company, in time immemorial.

This is a simple forward-differencing algorithm that animates a point moving along a bezier curve.

Drag any of the control point or end points to modify the bezier curve.

Metaphorical v1 (2002) was basically an experiment in Flash; v2 (2004) was a rebellion against usability. v3 (2006) was a blog-like site based on WordPress, which didn't work for me.

The new version has the format of a notebook, and I think this structure would well fit my wandering mind. Since WordPress didn't work for me, I also created a custom editor using Codeigniter (a PHP framework) and Flex. Fun!

The new design is glossless, clutterless, indeed boring — which is, at present, my cup of tea. Show one thing at a time, preferably without visual effects, without scrolling.

Above all, this new site is an attempt to revive a sense of self within myself. I have been quite lost in the jungles of coporate America.

Shall begin by cleaning up the old acts -- old projects, old writings, old code -- archiving and sharing them.

Indeed, modern life is full of steely obligations -- meeting, cleaning, cooking, flossing -- from which I cannot turn away. The moments of inspiration, interposed between the muddles of life, are too soon extinguished and forgotten.

Gradually, I shape my sense of self to the shape of bell curve, align my tongue to the bullet-point poetry of business, and optimize my heart rate to the pace of treadmill. Life is once again reduced to rushed meals, bad coffee, bullshits to-and-fro, and a sore spine.

To let a day go by without intellectual excitement, without a passionate attitude for art and beauty, without an eager appreciation of lovely useless little things around us… is to surrender myself, alas, to the "zombification" of the heart.

Metaphorical.net is a notebook that collects and extends strange thoughts and passions.

I learn best through experiments and sketches. I create, refine, discard, sift, undo and redo. I seek to impart lightness and intelligence to a multiplicity of things and ideas.

So I must echo Montaigne, who said of his assays:

I myself am the subject of my book: it is not reasonable that you should employ your leisure on a topic so frivolous and so vain.

Related notes on:

• Metaphorical.net V4
• William Ngan
• RSS feeds

Simple

Add any of these urls to your RSS readers.

• All of metaphorical.net
• Works only
• Writings only

Advance

But wait, there is more...

If you are interested only in specific themes, subscribe to them using this url format:

http://metaphorical.net/feed/theme/{name}

For example:

• feed/theme/code
• feed/theme/idea

If you are interested only in specific tags, subscribe to them using this url format:

http://metaphorical.net/feed/tag/{name}

For example:

• feed/tag/processing
• feed/tag/william

See the list of tags used in metaphorical.net here.

If you prefer minimalism, add /simple to receive only titles and short excerpts.

For example:

• feed/all/simple
• feed/theme/muse/simple
• feed/tag/flash/simple

So I wrote a quick illustrator script that semi-automate the process. This is a proof-of-concept, not a complete solution, but I hope you’ll still find it useful.

Usage 1:

Select one object and run the script (File > Scripts > Other Scripts… or use shortcut key Ctrl-F12). Confirm the orientation of the measurement. This will specify the width or height of the object.

Usage 2:

Select two objects and run the script. This will specify the horizontal or vertical gap between the two objects.

There are a lot of limitations, and a few potentials --

1. Only tested on Adobe CS3. Hope CS4 will work. Not sure about earlier versions.

2. Currently measurements are rounded to integer. If you need decimal points, edit the script and change the line
   var decimals = 0;
   For example, to add 2 decimals:
   var decimals = 2;

3. Font and line style cannot be customized yet.

4. UI is ugly. I would like to have a modaless dialog box, but encountered some weird bugs. Once Adobe has a more stable version of PatchPanel, I should further develop the UI.

5. Fixed. Based on the ruler unit setting, it will now measure objects in inch, cm, mm, pixel, point, or pica accordingly. You may want to add decimal points if you are measuring in inch or cm (see 2nd bullet above).

6. Anything else? Write a comment.

The source code includes an algorithm to map points on a spherical surface (see calcPoint in source code). It provides a quick and easy way to create the confetti-in-crystal-ball effect without going into another dimension. After all, Christmas is tomorrow.

May I wish you a Merry Christmas 2008. Peace on Earth.

Imagine Hong Kong in a time-lapsed movie: tall buildings sprouted upon landfills, people multiplied like fungus under subtropical heat, Mercedes jammed the roads, smog and hurricanes, came and went. Can you also see the Emperor's graffiti flickered, here and there?

For 50 years, the city must have been to him like an eternal SARS scene. A world silenced. Masked people. Nervous and discriminating eyes. A great city is always a great solitude, and to him, a great canvas as well.

For 50 years, he had written on walls and poles, in broad calligraphic strokes, the same nonsense:

Kowloon Emperor. New China Emperor. Chinese-British Emperor. Tsang Tsou Choi...

His calligraphy has a complex and strange charm: repetitious, obsessive, pompous,

childish. It is the antithesis of a pragmatic and fickle city.

The police used to charge him with vandalism, but now the government wants to preserve his scribbles as "cultural heritage".

During his last days in the hospital, doctors and nurses all hailed him as the Emperor of Kowloon. "Ah, Emperor, it’s time for lunch!" said the nurse.

Who among us can radiate such majestic presence? Is it not why Mencius said a great man is he who does not lose the child’s heart?

He was more lovable than the Chairman of China, more genuine than the Chief of Hong Kong, and more buoyant and steadfast than all of us. I shall miss him dearly.