103" Plasma HD TV
By City University of Hong Kong Press  |  View on Facebook

Come and join us to play the interactive programme at our bo
By City University of Hong Kong Press  |  View on Facebook

By City University of Hong Kong Press  |  View on Facebook

By City University of Hong Kong Press  |  View on Facebook

Kinect(OpenNI) is used for motion tracking, running a program I wrote in C++ with openFrameworks. Collision and softbody simulation is done by Bullet.

Artist statement

“Between the lines/書中” is an interactive installation that visualizes the famous Chinese proverb “書中自有黃金屋”, which literally means “A book holds a house of gold”.

Viewers can go into a 3D virtual space where Chinese literature sentences suspended all over the place. By waving and touching, the Chinese characters will be transformed into gold. And with enough golden characters, a house of gold will be constructed.

The Chinese sentences are extracted from The Four Books(四書), which are the authoritative texts of Confucianism(儒家) in China written two thousand years ago. They are displayed in both traditional Chinese calligraphy and modern fonts, in the meaning of those classic texts are relevant to society independent of time.

The interaction is a visual representation of the joyful and rewarding experience of reading books. There can be multiple viewers interact with the installation at the same time, which aligned to the fact that book reading can be a social process, where readers can share thoughts, recommend books to each other.

Chinese sentences that hang inside the screen.

The house of gold appears when there is enough golden sentences.

Viewers can touch the sentences and turn them into gold.

http://www.facebook.com/video/video.php?v=255107494499599

It’s almost half a year, coding a piece of generative art everyday using haXe and openFrameworks. It was certainly fun and educational to me, as I had to keep reading, trying and mixing all those generating methods, brainstorming new algorithm, looking for best programming approach etc. Doing all those things everyday sharpen my skill a lot, and I’m really excited when people tweet about them, leave comment here or over Flickr. Thanks guys!

However, I decided to stop continuing the journey (at least for a while). Occurring to me often in the last few weeks, I either spent too much time on one piece, affecting my school works, or because I have to finish some urgent things, I tweaked only a little on the previous code, resulted in producing an unsatisfactory piece. I was sick and had a fever last week, which became a good time to close the project.

I now have more time to play with other interesting ideas, and finishing the works that queued up. hxOpenFrameworks will continue be developed, of course. Let’s expect some OpenCV, Kinect (OpenNI) and other goodness

Finally here are the selected pieces I made in June:

Kept the fractal circles idea going.

Some more saturated color with complementary color scheme.

Reduced opacity, the circles merged nicely to each other.

Simplified but surprisely eye-catching vector-style flower.

I ported Eugene Zatepyakin(in-spirit)’s AS3 FluidSolver to haXe and started to play with it.

Here I put several rotating color sources in the center and push out dark red colors. Pretty horror looking.

More sources, larger radius. It looks like an eclipse, does it?

An eye-catching fire ring. The key is to add color and force periodically other than continuously.

Simulating the diffusion of ink on paper.

A cup of generative latte. Think I can build an app for making coffee art.

Another color, another pattern.

I introduced some changes that would like to expain here:

package jQuery;

Finally jQueryExtern has its own package, “jQuery”. The previous “jQueryPlugins” package is also moved to “jQuery.plugins”.

It is done because jQuery has more and more types, eg. “jqXHR“, “Deferred“ and”Promise” are introduced in jQuery 1.5. In the previous versions of jQueryExtern, most of them are prefixed by “JQuery” (“JQueryPromise”, “JQueryDeferred”, “JQueryEvent”) which is lengthy and redundant, with “jQuery” package, it is now safe to remove the prefix. In case of name collision, simply use the fully qualified names, eg “jQuery.Event”.

To conclude, you should now “include jQuery.JQuery;” instead of “include JQuery;”.

JQueryStatic and _static

To solve the problem of haXe disallowing the use of same name for static and non-static members, previously I grouped the static methods into a separate class “JQueryS”. It is now renamed as “JQueryStatic”, which is more meaningful.

I’ve also added a “_static” static property to “JQuery”. It is for the people who don’t read documentation, when they type “JQuery.”, there is still a code completion “_static” for them to retrieve the “JQueryStatic” class.

Whether to use “JQuery._static” or “JQueryStatic” is up to you.

Backward compatibility and JQUERY_NO_DEPRECATED

Don’t worry on having to change all your production codes to match the changes mentioned above. I’ve included a top-level “JQuery.hx” for maintaining backward compatibility. A number of typedef are placed there to solve the old naming.

However, the old naming are deprecated and the top-level “JQuery.hx” will be removed a few versions later. You should try to update your code and test with “-D JQUERY_NO_DEPRECATED”.

The typedef trick have not been made for the plug-ins, so if you’re using any of the plug-ins, you have to make the changes when updating to jQueryExtern 1.6.1.

Drawing only part of the lines generated by midpoint displacement algorithm can give out some interesting unknown creature contours, looking into each other’s eyes.

Another arrangement. It now looks like an island.

Used a algorithm that I read from somewhere, that start with a point with some color, for each iteration the color spread to the neighbors with a little variation. I really love its oil-painting texture.

Increased the spread’s random factor, allowing it to spread a little bit backward.

Keeped changing the spread implementation. This one keep increasing its hue from the center with a probability of reseting itself (to red).

Made the spread much more unstable and let there be more than one starting point. Resetting the lightness to 0 periodically gave out interesting organic layers.

Well, a beautiful rainbow color cup water mark on tablecloth…?

Played with fractal patterns. Full of circles in different sizes and positions in ratio.

Used only small circles. Pretty cyber-looking.

Used solid-filled circles. Colorful snowflakes.

Simpler smaller patterns.

It’s a starry night on a overcrowded planet. A simple but beautiful piece. Nothing complex there, just some random circles/rectangles placed together with a very thin layer of perlin noise as cloud. Be sure to click on it to view it in full size.

Discovered an interesting wave pattern while trying to implement midpoint displacement algorithm.

Below is a typical mountain created by midpoint displacement algorithm. Notice the sky and the mountain shares the same algorithm.

Let it displaces in color space instead of xy-plane.

Same as above but with slightly different painting method.

Changing the input lines to circular form created a perspective. It’s like the grand canyon is undergoing sandstorm.

I’ve also tried making procedural cloud from old-school perlin noise.

Applying perlin noise in some mixed strange color spaces(YUV, XYZ, HSL) instead of regular RGB.

6÷2(1+2)=?

It's a question that comes around in Facebook recently (I've also read it somewhere in the past). There are two major answers: "1" and "9".

For "1", (Assuming “multiplication by juxtaposition” has higher precedence than regular division. Whether the assumption is true, is depending on which literature is being referred to. If you don't agree on it, the answer is simply 9)

6÷(2×(1+2))
=6÷(2×3)
=6÷6
=1

For "9",

6/2*(1+2)
=6/2*3
=3*3
=9

Notice the question is interpreted differently, you can tell it from looking at the symbols. One is mathematical notation, another is program operator notation.

The difference between mathematics and programming shown above is that, they use different kind of symbols(operators), so they have different order of operation.

Google thinks that is 9.
Check it yourself.

WolframAlpha thinks that is 9.
Check it yourself.

My Casio calculator thinks that is 1.

One interesting thing is, even in programming, different programming languages may have different order of operation, ie. they have different operator precedence (or operator associativity). The difference is mostly on bitwise operations(eg. << & |), and it has been a nightmare for programmers who want to port algorithms between languages. And luckily haXe, the language I'm in love with, that outputs C++/JS/PHP and others, already abstracted the different by inserting the necessary brackets in the output automatically(see here). So I'm happily writing codes in haXe and share the same result in different platforms

Reused previous month’s feather code to make a sensitive plant.

Backed to play with abstract geometry. I like its sketch style wooden texture.

Following one gives some nice harmonic color.

Replacing lines with circles, it’s now more saturated.

Since Martin Lindelöf made available its clothx physics lib, which is based on traer physics for Processing, I used its spring/attraction system to draw some stuff.

It is very easy to create beautiful structures with the lib.

More organic one. Stroke size is proportional to particle speed.

Linking up the particles.

Sorting the particles before drawing in each frame.

Old school generative curves. Can you hear the sound?

Smaller, moving strings.

Fixed, more complex strings with rainbow colors.

Scaling up.

Scaling down with blood vessel colors.

Even more complex strings. Simply drawing them down but not painting them frame-by-frame like the previous ones.

Colored version. It looks like coral. Maybe the algorithm is similar to coral’s growth.

For those haven’t tried haxe/cpp:

1. Go install haxe.
2. Install c++ development tools.
   • Windows: Visual Studio (Express version is free)
   • Mac: XCode (in order to get GCC)
   • Linux: GCC (should be already there)
3. Open up Terminal (Windows users please choose “Visual Studio Command Prompt” from start menu)
   1. haxelib setup
      It is need for 1st time use of haxelib. Simply press enter to set to the default path.
   2. haxelib install hxOpenFrameworks
      It will install hxOpenFrameworks as well as the dependencies (HSL and hxRtAudio). Mac user should also install Jack OSX manually.
4. Browse to hxOpenFramework and try compiling the examples.
   1. Windows: cd C:\Motion-Twin\haxe\lib\hxOpenFrameworks\0,062,0
      Mac/Linux: cd /usr/lib/haxe/lib/hxOpenFrameworks/0,062,0
   2. Open of/examples/Main.hx(previously is in the root dir, see issue 1) and uncomment one of the examples.
   3. haxe compile-{your_platform}.hxml

Please refer to openFrameworks website for API documentation.

Anyway, here below are the selected pieces from my set of creations.

After last time I discovered the beauty of physics, I went with some typical simulations…shooting bullets.
It is not in real-time, but a frame-by-frame rendering. It would be nice if there is a haXe binding to PhysX or something.

Click here to view the embedded video.

Following is simply putting some circles from inside of a grid of sands. Look pretty like corruption.

Click here to view the embedded video.

And then there is a series of connecting points on a circle. It generates soooo many patterns with a single algorithm, I have to align the variations in a grid. Don’t draw them on a paper, it may summon a fire ball or something, don’t say I haven’t warned you

Since I was leaking idea, so better do some old school recursive stuffs… Turn out applying color on them can give you nice harmonic color scheme, and the proportion is perfect!

I like the following one very much. It first generates an array of points according to some regular polygon math, then sorts them according to the angle from origin and finally links them up.

Same as above, but reversed part of the math so the lines point outward.

Still playing with the above idea, but applied lots of tweaks to bring the interesting parts out.

In the latest weeks, I have been trying to create more concrete graphics. It takes more time then messing around with math equations, but I have more artistic control. First one plays with circuit board like structures.

Applying Tron-style color.

Second concrete thing I created is a feather, as I really like birds. I used the easing equations(which are usually used for tweening) by Robert Penner to create the curves.

Creating a pair of wings is easy when you have feathers.

And finally, why not have 3 pairs when you simply can? Here comes a seraph.

In order to test it, I’ve been using it for some little projects. I decided to create (at least) one piece of generative art everyday… right, everyday starting from the 1st day of 2011. Quite similar to what Keith Peters did some time ago (art from code). The process is pretty fun once I had got used to start my day by coding some art.

Accidentally I found setCircleResolution a very interesting function to play with. It controls how a circle is approximated by drawing regular polygons. Below is circles with radius increasing and resolution(number of sides of regular polygon) decreasing.

Sometimes the generating process is even more amazing than the final image.

Click here to view the embedded video.

sin/cos/tan are also interesting functions that often give you unexpected results. Below is a combination of sin and tan.

Writing recursive/iterative code is the easiest way to produce complex graphics with few lines of code. Spiral forms are particularly attractive, as there is a point of focus.

With some modifications, it looks like some kind of rose.

Below is my favorite piece at the moment. I used physaxe for physics simulation. Thousands of particles(in fact, tiny circles) are shot from outside of the canvas, producing trails of blue. When they collides, some red will be drawn, which look like sparks. The generating process is recorded, you can find it on youtube.

Finally, all the codes of the above pieces are open source, can be found in the description of individual flickr/youtube page. I’ll post some more interesting ones next month.

PS. Nicolas Barradeau is producing a series of basics in generative art in his blog, which contains a lot of useful codes in AS3. Be sure to check it out if you’re interested in generating some art!