A notebook of William Ngan Copyright %2017 Taking a line for a walk Paul Klee once said drawing is taking a line for a walk. Zen artists believed that the vitality of a line can express spiritual insights. But in the domain of digital art, the line often remains a crude, perhaps anti-aliased, element.

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.

2010-02-04 00:05:10
Mosumi Mosumi videos, images, and code are here:

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.

2010-02-03 02:02:16
Merry Christmas 2009 How time flies! Year 2010 is almost upon us, and the holiday season proves to be one of the busiest for me and wife. In-laws visiting, projects finishing, racks of lamb marinating...

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!

2009-12-24 04:48:52
Al Dente While well-cooked pasta is good for teeth, well-designed pasta is food for thought. When I was living in a small Italian town, I cooked pasta and contemplated upon their forms in idle evenings.

What a fantastic medium to capture tomato sauce indeed!

Spaghetti often isn’t sauce enough, and Rigatoni sometimes has too much. Variations of Fusilli (spiral-shape), Farfalle (butterfly-shaped), and Casarecce (has a nice twist) are lovely, practical, well-engineered solutions.

But my favourite is Canalini: it is like Linguini but with a “canal” in the middle, into which the perfect amount of sauce flows. It is an intellectual pasta.

Because of these witty, elegant, and high-carb inventions, life is good.

2009-11-11 10:02:49
Kubist I have always wanted to make something with Lee Byron's fantastic Mesh library, but, like many things that I plan to do, it has taken me a while to actually sit down and do it.

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).

2009-08-24 00:00:44
Fume Fume constructs typography on a field of force, in which each alphabet is rendered by the underlying “currents”.

The cursor combs the field, and the field sways the particles that flow to render the alphabets. This dynamic interaction brings forth complex and moving typography.

The first java applet shows an example of vector field; the second applet shows an alphabet on the vector field; and the third applet shows a 5-letter word on the field.

Fume was published in the Tokyo Type Director's Club Annual 2006.

2009-07-05 19:14:20
六四 - 二十年後

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.」。










2009-06-04 00:10:30
Blossfeldt Fractal

Had Nature shadowed there, by putting forth,
'Mid circumstances awful and sublime,
That mutual domination which she loves
To exert upon the face of outward things,
So moulded, joined, abstracted, so endowed
With interchangeable supremacy…

— William Wordsworth, The Prelude

Blossfeldt Fractals is a dynamic composition of plant forms, based on photographs by Karl Blossfeldt, generated through algorithms similar to Lindenmayer System.

Photographs by Karl Blossfeldt are both resource and inspiration in my project. I first scanned the photos and then manually edit and dissect the different plant elements.

Then I create a custom software to import these images and tag the points of interest in them. I mark points where stems or leaves or flowers may grow, specify the magnitude and direction of each point, and classify each image by its shape and texture.

This "visual" coding is analogous to L-System’s grammatical rules, which can be integrated into recursive algorithms. The data is saved as an xml file.

I created another custom software that reads the xml data, performs affine transformation and image processing functions, and generates a dynamic composition of plant form. Plants of different species, shapes, and textures attune to each other, and come together as a unified composition.

This project is created with Java and Processing.

2009-05-25 23:32:18
I-Ching the Book of Change I imagine that I lived in the ancient time, and was a hunter of deers and a forager of berries. I saw the direction of streams, the movements of stars, the shapes of clouds in summers and winters, and the colours of trees in springs and autumns. The lawfulness of nature was apparent to me, although I could not decipher the details of its laws.

What language must I create to describe nature? What system must I invent, to organize observations and experiences?

Reading I-Ching, a sweeping vision of nature and humanity spreads before me.

I-Ching, also known as the Book of Change, is a system said to be originated by Fu Hsi (~2800BC). Using a binary notation to represent a set of 64 symbols, it is an elaborate system that interprets the processes of nature, and thereby the affairs of man.

The name "I Ching" implies three ideas: Simplicity, Change, and Invariability. Each entry in the book starts with a hexagram,

which is a stack of six lines either solid (yang, masculine, creative) or broken (yin, feminine, receptive).

Each 3-lines forms a trigram, which represents an element of nature (heaven, earth, water, thunder, etc).

Each hexagram is a combination of 2 trigrams, representing a humanistic concept (family, youth, progress, conflict, revolution, perseverance, completion, etc).

The hexagram is then explained, its metaphor discussed, and the meanings on each of the six lines defined.

A delight it is to read and ponder these poetic metaphors, these mystic wisdoms! For example, water under mountain represents an image of youth:

It is not I who seek the young fool; The young fool seeks me.

Or, water above wood, mage of the well:

The town may be changed, but the well cannot be changed. It neither decreases nor increases. They come and go and draw from the well.

Or, mountain and thunder (hexagram shaped like a mouth), image of nourishment:

Pay heed to the providing of nourishment and to what a man seeks to fill his own mouth with.

Evidently, I-Ching was a system of divination in ancient China. Feng-Shiu, among many other superstitious practices, are its degenerated forms. As we manipulate atoms, unravel the genetic code, and know the specifics of nature’s laws, these hexagrams are now but intellectual relics to many of us. On the other hand, many of us who live in mega cities hardly have time to appreciate nature as our ancestors did, let alone contemplate upon its lawfulness and its relationships to humanity.

2009-05-18 00:19:15
Alarm Bed First, there was the rooster. Then, mechanical clock, electronic clock, snoozable clock, runaway clock. Yet they are insufficient.

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

2009-05-05 00:57:26
Software Structures Plankton and Fleece are two art pieces I created for Casey Reas' Software Structures project at Whitney Museum Artport. Casey's brief, inspired by Sol LeWitt, is very simple:

A surface filled with one hundred medium to small sized circles. Each circle has a different size and direction, but moves at the same slow rate. Display the instantaneous and aggregate intersections of the circles.

In Plankton, I intend to make circles life-like through their instantaneous intersections.

In Fleece, I imagine the circles wading through a field and their aggregate intersections are like "the wind that shakes the barley".

More information on Plankton and Fleece at the Software Structures project site.

2009-05-01 18:59:43
Layer Compose This Adobe Illustrator script automatically merge content and template layers to generate compositions. Oh joy!

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.

2009-04-09 00:26:38
Layer Export

Update Based on user feedbacks, I have added 2 new scripts which let you save (instead of export) the layers as separate AI and PDF file. You need Illustrator CS4+ to use the save scripts.

A little Adobe Illustrator script to ease those repetitive strain sufferings...

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.

These are experimental scripts, hopefully will be useful to you. Please share joy and report bug.

2009-04-08 00:22:37 V4 Now I can check off one of my New Year's resolutions. A refresh of has been completed.

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.

2009-04-05 15:53:24
About Oh, the moments of inspiration and beauty! Strange visions and thoughts float above my head like soap bubbles. They lift up my spirit, startle my mind, then they pop.

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. 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:

2009-04-01 00:28:26
RSS Feeds has new RSS feeds! RSS feeds let you subscribe to content updates. Learn more about RSS here.


Add any of these urls to your RSS readers.


But wait, there is more...

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

For example:

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

For example:

See the list of tags used in here.

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

For example:

2009-03-26 15:46:43
Specify! Blueprints and visual specifications, how tedious, how tiresome! Countless days wasted drawing those stoic lines and numbers!

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.

2009-02-11 20:10:51
Crystal Ball Stir up the snow by moving the cursor!

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.

2008-12-24 19:48:11
New Newspeak Newspeak is the weird official language of English Socialism (Ingsoc) in George Orwell’s 1984. Its purpsose is:

"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)

2008-07-01 01:44:53
Carousel 3D Another piece of old actionscript. This one is a bit more complex, and requires Flash 10.

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!

2007-12-19 23:27:56