There is a jQuery wrapper appeared on haxelib last year, but I don’t really like its API, which is too different from the original one, and I’ve never used to having method names first letter capitalized… OK, it’s just personal taste Anyway I’ve written a jQuery extern to replace it, which provides API closer to jQuery and smaller compiled JS file (smaller because the haXe compiler does not generate codes for extern class).

Here I will illustrate a bit on how to use it, requiring you to have some experience on both haXe and jQuery.

Installing the jQuery extern

Since its put on haxelib, you can install it using the command:

haxelib install jQueryExtern

and then add “-lib jQueryExtern” in the hxml.

OR, you can download the cutting edge version from github: http://github.com/andyli/jQueryExternForHaxe, extract and place “JQuery.hx” (optionally with the “jQueryPlugins” folder) into your project source directory.

Using the jQuery classes

It should be better to illustrate with example. For a typical JS starting point with jQuery, you write:

$(function(){
	//do your magic
});

If you don’t know, it’s a short-hand that bind your magic codes to the document ready event, same as you write:

$(document).ready(function(){
	//do your magic
});

HaXe does not allow using “$” as a class name or a function name, but “$” is just a short-hand to “jQuery”. However, haXe requires all class names start with capital letter, so it is “JQuery” not “jQuery”. You start your haXe/JS codes using the jQuery extern as following:

import JQuery;
 
class Main {
	static public function main():Void {
		new JQuery(function():Void {
			//your magic codes
		});
	}
}

It seems to be a few lines more than JS, but you should already know, the extra lines are the same for all other haXe targets, its how haXe program starts. The main point is “new JQuery(…)” which is the same as “$(…)” in JS.

So, when you code in JS like:

	$("#myMightyDiv").hide();

now you do the same in haXe:

	new JQuery("#myMightyDiv").hide();

Simple.

Static functions

One thing to aware, that is the static methods of jQuery are placed to “JQueryS” in the extern. The reason is haXe does not allow using same name for both static and instance methods. For example in the original jQuery, there is “$.data()” and “$(…).data()”, they are now in the extern as “JQueryS.data()” and “new JQuery(…).data()”.

Extra methods in the jQuery extern

And there are some extra methods appears in the extern comparing to the original jQuery. For example, there is “cssSet()”, and it is just the same as “css()” but limiting you to really setting a css property and it is properly typed as returning a JQuery object, so you can happily chaining the methods with code completion and type checking. All the extra methods are like that and they are all set as “inline”, so that the haXe compiler will generate correct codes, that is “css()” not “cssSet()” in the compiled JS, because “cssSet()” is not really existing in jQuery. And because they are not really existing, don’t try to call the extra methods with Reflect.

Using plug-ins

I’ve included some jQuery plug-in externs. Currently there are jQuery Tools, jQuery media plug-in and jQuery UI (work-in-progress).

The plug-in architecture is a bit hard to deal with… To understand how it works, first of all you have to know there is a mighty “using” keyword in haXe, which inject methods into object instance. And the jQuery plug-in in my haXe extern is utilizing both “using” and “inline”.

Anyway, here is how you use the plug-ins. For example, when using jQuery Tools in JS, you just include its JS file in HTML and you can call the plug-in’s method on the jQuery object, that is:

$(".my_overlay_trigger").overlay({...}); //overlay is from jQuery Tools

In haXe, with my extern, you have to write:

import JQuery;
//there are several classes in Overlay.hx, we "using" only the "Overlay" class.
using jQueryPlugins.jQueryTools.Overlay.Overlay;
...
new JQuery(".my_overlay_trigger").overlay({...});
...

Because this implementation doesn’t deal with optional parameter very well, in most of the cases I made the optional parameters mandatory. If the method has a optional config parameter, but you just want to use the defaults, simply pass in “{}”.

And there are many cases some functions does not fit that well, I’ve wrap them into classes/methods with “inline”. You may have to look at the source file to fully understand how to use.

There will be more plug-ins to come when I need them. Feel free to integrate other plug-ins and let me put them into the extern.

Feel free to Flattr this post at flattr.com, if you like it.

Using the technique, a sample installation called Mind-Body Interaction is made. As the title suggests, it is about Philosophy of mind. It has just been exhibited in Playful Media (SIG Showcase, Exhibition of BSc Creative Media) and The SCM Annual (graduation show of School of Creative Media).

Here below is an interview done in Playful Media:

Click here to view the embedded video.

I’m glad that the artwork is mentioned in some of the news on the exhibitions:

Augmented Mirror appearing on the CityU News.

Augmented Mirror appearing on HK Headline (頭條日報).

By the way, thanks for my teachers and schoolmates for all the efforts put in the exhibitions!

Feel free to Flattr this post at flattr.com, if you like it.

In my final year project, I have been exploring stereo camera, ie. using multiple cameras at the same time. It is not too difficult, just place the cameras side-by-side in the same plane, with OpenCV you can calibrate them and compute a disparity map to get the depth info of the capture subject. What it means is you can do 3D tracking and probably 3D gesturing like Project Natal. And yes, I use PS3Eyes.

4 PS3Eyes combined with their original parts (Front view).

4 PS3Eyes combined with their original parts (Rear view).

I was using Ubuntu and OpenFrameworks for the project and everything is fine. You do not need to install a driver for using PS3Eye, however, to get extra controls, I used a patched driver. But the driver is less stable and sometimes it outputs corrupted frames.

I have a bit more time these few days, so I try move back to Windows and port the code to use haXe/C++ with Code Laboratories‘s CLEye SDK. I created a simple binding to the SDK and the result is pretty good. I have again put the code to github (hxCLEye), and there is a sample program(Main.hx), which use the not-yet-released nme2. It still needs to be optimized for the Bytes=>BitmapData conversion, but it is quite stable I think.

Feel free to Flattr this post at flattr.com, if you like it.

Processing, one of the most well-known language/framework for creative coding.

For interactivity/creative coding, except the graphical programming platforms like Pure Data, Max and Isadora, there are four major languages people are using:

1. C++(OpenFramworks),
2. Java(Processing),
3. ActionScript, and
4. Python.

The first two are developed mainly for the high performance nature of the languages, as real-time interaction and fancy visual effect is a main focus in creative coding, but they are somewhat difficult to designer/artist. ActionScript is mostly chosen for the friendliness of its API, tools and easy to distribute on the Internet, but it’s slow. Python is somewhere in the middle of the C++/Java and ActionScript: For once I heard that, if you want something faster than ActionScript but easier than C++, try Python. However I think programs created in Python are not easy to be distributed on the Internet, I mean, it cannot run in the browser. Also, Python’s syntax is less similar to the others (although it is still very nice ).

I believe haXe has a very good potential to fit the gap. As we can use the friendly API of Flash to target C++ native code by using nme/neash. When we want to put the work on the Internet, simply compile it to swf or to HTML5 canvas with canvas-nme. We get best of both worlds.

What haXe is still missing

After intensively using haXe for a few months, I discovered a few things are missing in haXe. But they are all being improved in progress.

IDE

First of all, a real solid IDE. Yes, there are several IDEs with haXe plug-in you can choose: On Windows you have FlashDevelop, on Mac you have TextMate(I haven’t tried) and Linux there is Gedit.

FlashDevelop has build in support for haXe as well as ActionScript.

But if you want a cross-platform one, no, not yet. Cross-platform is important for creative coding as designers/artistes really love Mac. The amount of them using Mac is the same as those using Windows, if not more than. I myself spends a lot of time in all Windows/Mac/Linux, and I am sticking on Gedit on both Mac and Linux(Ubuntu) and avoiding to code in Windows… Gedit is usable on Mac but missing a few features like open terminal in the files panel or custom command with hotkey binding. And the UI is a little bit buggy, for example the code completion list can go off-screen…

There is eclihx, the haXe plug-in for eclipse. But it is really really buggy that I cannot get it fully functioning on any OS. Code completion is my minimal requirement for an IDE, but I cannot get that from eclihx, although it says it has this feature…

The situation is improving. FDT, which many people prefer it to Flash Builder, will have haXe support in its version 4. Since it is based on eclipse, it will be available on the three main OSes. And it is more feature-complete than all the IDEs I’ve tried at the moment. Although it is not open source, but open source developers can get a free license from them (hope the program will continue for version 4).

Moreover, discussed on the haXe mailing list, people are investigating the possibility of building a web based IDE, like Bespin from Mozilla. There is a Google group created over there but no actual development has started yet. Join it if you’re interested.

Libraries

Number of libraries that designed exclusively for haXe is still small. There are quite a few pretty good ones though, like the data structure lib and 2D physic engine from polygonal lab (available from haxelib). But for interactivity/creative coding, libraries for vector graphics, image processing, hardware integration etc. are still missing.

Arduino. Photo by Nicholas Zambetti

I’m working on this area, trying to port some of the libraries from different languages or at least to create a haXe binding. I first ported Casa Lib, as CasaHx, which is a big collection of small classes. I’m also working on C++ target of Sandy3D, but still waiting for the next release of hxcpp and the release of nme2. hxSerial is my latest creation, based on ofSerial in OpenFrameworks, enabling serial port communication from haXe/C++ program, so that you can talk to Arduino, for example.

Some ideas I will try later in the future (if I have time) will be:

• Binding OpenCV to haXe/C++.
• Binding OpenFrameworks to again haXe/C++.
• Creating a haXe OSC/TUIO lib.
• Porting my stk-in-as3 to haXe.
• Porting AS3 branch of Degrafa to haXe.
• Porting FLARtoolkit to haXe (saqoosha, the author of FLARtoolkit may have done this before me, since he started to use haXe too).

Well, if you’re interested, feel free to work on those ideas and let me know your result/progress

Community

The last one is a community of interactivity/creative coding in haXe. It is always a good thing if there are more people you can share your creations with and ask question from. Hope the community will grow after the above is improved

Feel free to Flattr this post at flattr.com, if you like it.

I myself was making it for fun. I don’t think we should block any HTML5 tags anytime since it is a part of the web, just like I do not agree people blocking Flash. What is interesting is, seems like we cannot effectively block the canvas tag, which will be discussed later in this post.

Features

I made the script blocks not only canvas tag but also video tag and audio tag. It is because Flash is going to be replaced by all the three tags but not only canvas. Video and audio can be as annoying as canvas.

Like those Flash-blockers, the blocked contents are replaced by a line of text, “Click to show xxxx”. You may click on it to get back the blocked content.

CanvasBlock is tested on FireFox 3.6 on Mac, FireFox 3.5 on Ubuntu and Chrome on Ubuntu. Other platforms should works too.

Implementing the script

I used haXe instead of writing pure JS. No big reason here, just to see if it is possible. Turn out there is no big difference from using JS, you just need to copy all the meta data to the compiled JS file. And the events listener need to be assigned by “addEventListener” instead of something like “onclick = function …”.

Detecting HTML5 tags is easier than detecting Flash objects. Firstly, the tags are standardized meaning you can simply use “getElementsByTagName”. For Flash objects you need to check the params of the “object” and the “embed” tags, which is a bit troublesome. Secondly, currently no one (at least not much ppl) is creating canvas tags on the fly, unlike for Flash the standard way is to use swfobject. So I can detect the tags once the DOM is ready, no need to wait for the execution of the page’s JS.

Replacing the tags and saving them for later retrieval is easy too. Using normal JS method will work.

The tags are blocked but…

The script is functional and I went to do some more testing. Blocking video and audio seems ok, but there is some problem of blocking canvas.

Possibility of Freezing/Crashing

I went to ChromeExperiments and randomly picked one. You know what? The browser freezed.

So, look like after I blocked the canvas, the JS on the page which is used to draw thing on the canvas originally, is still there trying to work on the canvas. And this become a big problem since I don’t know exactly which JS function is going to work on canvas, because different web page have different functions, so no way I can work on that. You can completely disable JS, but this is not a CanvasBlock should do.

Browser freezed and an timeout message was shown after blocking canvas.

However, I have tested some more web page and they are ok with the blocking script. So maybe only some complex JS will have this problem. But anyway the possibility of freezing a browser is not a good thing.

No significant reduction on CPU usage

The remaining JS script  problem reminded me to test on the CPU usage. And the result is, blocking canvas does not bring significant reduction on CPU usage. See the following screenshots, which is using another Chrome experiment:

Page opened, canvas blocked. However CPU usage still rise to a very high level.

Clicked to show back the canvas. CPU usage rose even higher, but not much difference.

So what’s that mean? Again if I want to block the real CPU hog, I should block the JS with the canvas. But again, stated above, it is not possible to block the right function without blocking all JS.

Conclusion

Blocking canvas can only introduce little benefit on CPU usage but give you possibility of freezing/crashing!

Let’s look at Flash again. Flash can be blocked easily because ActionScript is included in the swf. Removing the swf from the page automatically removes the associated scripts. Also, usually JS does not control a Flash object so it is pretty safe to kick Flash out without dealing with the remained JS. From this point of view, seems that Flash is more user friendly than canvas, and HTML5 ads will be more annoying than Flash ads…

If you want to try, you may install the script from CanvasBlock’s page on userscripts.org.

You’re also welcome to get the haXe source from CanvasBlock’s github repo.

Feel free to Flattr this post at flattr.com, if you like it.

If you’re not familiar with it, it has a set of display object classes that have build in methods for removing all listeners/all children, and a destroy method that do that all in once. There are also simple tweening classes, layout helper and a huge set of utilities.

I try to make all the classes as cross-target as possible so that you can use it in JS/C++/PHP/Neko (some of them need nme/neash/canvas-nme).

With haXe’s “using” keyword, the utility classes are even sweeter than the AS3 version. Let’s take an example form the official documentation(in AS3):

var people:Array = new Array(	{name: "Aaron", sex: "Male", hair: "Brown"},
				{name: "Linda", sex: "Female", hair: "Blonde"},
				{name: "Katie", sex: "Female", hair: "Brown"},
				{name: "Nikki", sex: "Female", hair: "Blonde"}	);
 
var person:Object = ArrayUtil.getItemByKeys(people, {sex: "Female", hair: "Brown"});
trace(person.name); // Traces "Katie"

Now you can write it in haXe in this way:

using org.casalib.ArrayUtil;
 
var people = [	{name: "Aaron", sex: "Male", hair: "Brown"},
		{name: "Linda", sex: "Female", hair: "Blonde"},
		{name: "Katie", sex: "Female", hair: "Brown"},
		{name: "Nikki", sex: "Female", hair: "Blonde"}	];
 
var person = people.getItemByKeys({sex: "Female", hair: "Brown"});
trace(person.name); // Traces "Katie"

Note that with “using”, auto-completion can also show the added methods (from ArrayUtil, for the above example).

I’ve also typed all the methods. That means, for ArrayUtil.getItemByKeys() with a Array<Point> input, its output will be typed as Point. Nice feature of haXe isn’t it?

PS. Aaron Clinger, the author of CASA Lib, has found me some days ago. He is very nice that may put CasaHx as the official branch of CASA Lib when it is mature enough

Feel free to Flattr this post at flattr.com, if you like it.

And because of I need to write some 3D stuff in a project, I tried finding a Haxe 3D engine  that can compiled to C++, but who knows, there wasn’t one. Actually the 3D engines in Haxe are all quite young. There are 3 I found, all targeting only Flash: Sandy3D, originally written in AS, has switched its trunk to Haxe; Away3D, again originally written in AS, now has a Haxe branch inside its SVN in active development; Haxe3D, developed by Nicolas(the creator of Haxe), written in Haxe from the very beginng, seems to be very light-weight but I can’t found much info about it.

So I decide to work on one of them to enable a Haxe C++ 3D engine. Because Sandy3D should be the most complete and stable one(which actually stopped active development…), I chose it.

In the development of it, some issues are related to nme/neash, which are the re-invented cross-platform Haxe version of the Flash API. With the help from Hugh and Niel, project owner of neash and developer of Sandy3D, most of the problems are solved. However as I can see, re-inventing the Flash API is a hard job as consideration of other target is also needed, eg. JS/Canvas. I really hope Adobe can help this.

Currently some very basic demos of Sandy can be compiled to C++ and it shows that, in OpenGL rendering mode, the performance can goes over 300% of the Flash(Haxe, not AS3) version. However in normal rendering mode, the frame rate may actually be reduced if the window size is large. Anyway, I think the performance is quite depend on hardware/OS, also the 3D scene you’re showing.

Thanks for the Sandy3D team, they added me as a committer in their official Google project. And I have just committed the changes to the trunk There should be a new release soon if everything is fine.

A note to the ones can’t wait for a release:

1.Install hxcpp, nme, neash from haxelib.

2.Replace contents in neash’s neash/display/IBitmapDrawable.hx to a simple “typedef IBitmapDrawable =
nme.display.IBitmapDrawable;”.

3.To make mouse event work, in neash’s neash/Lib.hx, the code:

// Process pending timers …
neash.Timer.CheckTimers();
// Send frame-enter event
var event = new Event( Event.ENTER_FRAME );
mStage.Broadcast(event);

should be moved to the end of the do-while loop, just before the:

mStage.RenderAll();

4.For mouse event in opengl mode to work, additional fix which required a recompile of nme is needed. I haven’t tried
yet. Now just ingore this…

5.You should be able to use Sandy3D in C++ without the above patches for the next release of nme/neash. But for now, please do it.

BTW, I am also porting ported casalib, which I often use in AS3 development, to Haxe, see casahx.

Feel free to Flattr this post at flattr.com, if you like it.

Select color blind type from the menu.

Accessibility is a an important part of both web and game design. And for web and game design, one of the popular tool is Flash. That means very often you need to ensure accessibility in Flash. However there are still not many tools available even for simple things like color blind simulation… so I write my own:)

>> download installer (.air)

It’s a very simple AIR app. You open it, drop a swf file on its window, select the color blind type and that’s it.

The inner of Colorblink is using a Pixel Bender filter, applying to the whole application. The algorithm is just a color transform matrix, found in a Java Color-Blindness Simulators. That simulator have more simulation config, which I used only the simplest one.

This is also my first time using a git repo. So go to have a look, see if you can fork it for more features.

One thing is, there is problem loading Flex applications into Colorblink… I don’t know how to read the loaded app’s default width and height and then resize it… So, if you want to test your Flex app, get the filter and apply it to your app manually (can’t be easier).
Now you can load Flex swf or even html file! But the app wouldn’t resize automatically since the size cannot be determined. If Colorblink does not work for you, you can still always get the filter and apply it to your app manually (can’t be easier).

Oh, yes, there is a simulation of what a dog sees… So, design some game for your dogs in your free time…

Feel free to Flattr this post at flattr.com, if you like it.

Concept image from The Flash Blog demostrates iPad's ultimate browsing experience.

Steve Jobs says the iPad is “Amazing, Awesome, Beautiful, Great, Incredible, Really Nice and Unbelievable”. I’m sure you wanna try it. If you still haven’t get one to experience by yourself, here I made a little GreaseMonkey script for you to feel it first.

Once you installed the iPad experience script on FireFox (or any other browser that can use user script), you wouldn’t see any Flash elements again. No more Flash can hurt you or your children. Instead, all the swfs are replaced with a “Amazing, Awesome, Beautiful, Great, Incredible, Really Nice and Unbelievable” blue lego, reminding you the glory of Apple.

Update:
You can use it in Chrome now (if you have extension enabled)!

Feel free to Flattr this post at flattr.com, if you like it.

First of all, the mixed use of letters and numbers (also an icon) to name floor is confusing. I have seen many people had difficulty finding the right floor at first sight. If there were tens of floors which goes from lower-ground 5 to upper-ground 25, grouping the floors with something like “UG” and “LG” would be meaningful. But as you can see in the photo, there are only seven floors… So actually I cannot really tell it is some kind of grouping as the group has at most two members only… And for “UG”, I really don’t know why they’re not naming the “1″ and “2″ with “UG” as “UG1″,”UG2″,”UG3″. Or simply use “1″,”2″,”3″? You also need to think if “LG2″ or “LG1″ is upper floor.

Secondly, not all Hong Kong people know “LG” and “UG” stand for “lower-ground” and “upper-ground”. I have some friends misunderstood “UG” as underground… The users are mostly Hong Kong people which are not having English as native language. Anyway I don’t see a point why not use “-1″, “0″, “1″, “2″…

Lastly, the arrangement of the grid is confusing. The arrangement is different from written English(left to right, top to bottom) or traditional Chinese(top to bottom, right to left). See below:

Not only Festival Walk, but also City University of Hong Kong has this arrangment:

Is that only Hong Kong has these kind of lift? If so, maybe that’s because we Hong Kong people are proud to have both Western and Chinese culture which expressed in lift button arrangement?

Update:
I finally have found another example of the arrangement, that is… Japanese comic?!

Feel free to Flattr this post at flattr.com, if you like it.