Metaphorical | Craft and Code at Metaphorical.net

Taking a line for a walk

2010-02-04 00:05:10

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.

Mosumi

2010-02-03 02:02:16

Mosumi videos, images, and code are here:

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.

Merry Christmas 2009

2009-12-24 04:48:52

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!

Kubist

2009-08-24 00:00:44

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

Layer Compose

2009-07-09 00:26:38

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.

Layer Export

2009-07-08 00:22:37

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:

Layer names will become the file names. Rename if needed.
Run the script (File > Scripts > Other Scripts... or use shortcut key Ctrl-F12).
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.

Tween Sprite

2009-06-11 00:09:45

Tweening, a.k.a. Linear Interpolation, a.k.a. Lerp, creates animation by moving a value between start and end.

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.

Curly Frame

2009-04-14 00:32:23

Found another piece of forgotten code inside a dusty folder. Let's clean it up.

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.

Bezier Path

2009-04-11 09:08:46

Just updated a piece of old code into Actionscript 3 / Flex.

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.net V4

2009-04-05 15:53:24

Now I can check off one of my New Year's resolutions. A refresh of metaphorical.net 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.

About Metaphorical.net

2009-04-01 00:28:26

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.

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:

RSS Feeds

2009-03-26 15:46:43

Metaphorical.net has new RSS feeds! RSS feeds let you subscribe to content updates. Learn more about RSS here.

Simple

Add any of these urls to your RSS readers.

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

Specify!

2009-02-11 20:10:51

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

Only tested on Adobe CS3. Hope CS4 will work. Not sure about earlier versions.
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;
Font and line style cannot be customized yet.
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.
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).
Anything else? Write a comment.