Metaphorical | Craft and Code at Notes on the themes Craft, Code, and Play. is a notebook of William Ngan. Copyright %2018 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
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
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
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