Cauê is kind enough to let me play with it before wwx and I coded two little Processing demos for him to shown during his talk. The Java target is very well designed such that using “native” Java class is extremely easy. It is very similar to creating externs for Haxe/JS. I used a little jQuery script to help me building extern from Javadoc pages (btw @Dr_Emann, @razaina also had similar ideas). Later I think it would be fun and useful to create a Chrome extension for the script. Since there is already a Haxe extern of Chrome extension, it is pretty easy to implement it in Haxe.

Here it is from Chrome store

Go install Javadoc2Haxe from Chrome store.

How to use

Go to a Javadoc page (eg Processing’s). Select a class from the class menu and you should see a orange icon next to the class name:

Click on the button, see the magic:

Copy and paste the output to your project.

Edit it as you find appropriate, since the generated extern may contain unwanted methods(maybe referencing another Java type that you don’t want to create extern for it).

You’re more than welcome to fill issues, or even fork the extension from github. Just beware of its quick and dirty code

Here above is my haXe implementation of head-tracking 3D, creating motion-parallax effect using Away3D 4. You can play with the live demo or grab the source.

This type of head tracking VR has been around for quite a long time. The first popular one should be Johnny Lee’s Wiimote hack, back in 2007,  built in C# running as a desktop app. Two years later it appeared in the browser, a Flash version made by Mr. doob. But it was merely a hack and far from accurate comparing to Johnny Lee’s. Boffswana also created one in the same year (2009), and then an improved one with better head tracking algorithm. Sadly Boffswana hasn’t release the source.

Head tracking and camera movement is relatively simple, since there are so many libs for these. The tricky part is the perspective projection matrix. The projection point (the head), unlike most of the implementation assumption, isn’t always perpendicular to the projection surface (screen).

Simplest implementation would ignore the problem. It places a camera at the position of viewer’s head and render it to the screen, like what Mr. doob did. The problem is illustrated below.

When viewer’s head is perpendicular to the screen, everything is perfectly aligned:

However, when the viewer moves, for example to the left, there is misalignment of the rendering on screen and the “actual” position of the virtual object:

Knowing little about C#, it is hard for me to dig out Johnny Lee’s matrix code. I found the suitable code form the paper “Generalized Perspective Projection” from Robert Kooima. It is written in C++, but translating it to haXe isn’t hard, just remember matrix in OpenGL is column-major order but Flash’s is row-major order.

Head-detection is done using my fork of hxmarilena. My fork is simply some API changes and switching the XML parsing from flash.xml.XML to Xml so it may be used in C++ target in the future. In order to reduce jittering, I’ve included a simple optical flow tracking on the head. It is a block-matching process applied to four points on previous head detection result. The optical flow tracking result is merged to head-detection result by a ratio. It improved a bit, but I guess to address the problem it is better to port some better algorithms, like FaceTracker, in the future.

Finally, remember you can play with the live demo and it is open source.

For the absolute latest solutions in creating standards based websites and applications… you need to hit REFRESH!

Adobe Refresh 2012 is coming on 23 February 2012. The event covers various web design and application development technologies this year, including HTML5, CSS3, jQuery Mobile, PhoneGap, Typekit and Edge.

Refresh 2012 is aimed at developers and designers who are wanting to increase their knowledge and extend their reach to standards based content across devices. And it is free this year!

More information and registration

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.

Engage the widest audience possible with the latest print, mobile, and interactive features.

When you need to deliver rich, immersive experiences, master an ever-growing array of mobile screens and keep ahead of the trends in digital publishing, you need the power of Adobe Creative Suite 5.5.

Improve your workflow, stay on top of industry trends and monetize your creations. Whether you’re a publisher, designer, developer, content creator or marketing professional, it’s time to discover the new possibilities within your reach.

Join us for a major launch event to celebrate the arrival of CS5.5, featuring an end-to-end workflow presentation.

More information and registration

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.

The new version includes an updated Eclipse, 3.6 SDK and mobile SDK.

http://www.adobe.com/products/flash-builder.html