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…

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

Here we have many lifts in Hong Kong since we have so many tall buildings. One of the lift I am using very often is the one inside Festival Walk(a shopping mall). Here are its buttons:

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

>>Demo<< (Click to toggle filter)

source (Flex project including pbk)

I have been very busy since the last few weeks… so the chroma key filter was put aside for a long time until today

I have used conditional compile in the filter to avoid having if-else in the runtime, hopefully can increase performance… Anyone volunteer to measure it and post the different?

In the last week I have tried to make some CSS-only experiments. Originally it’s just an idea to play some effects with CSS animation which now available in webkit. But at the end I am obsessed and making games with CSS… Yup, that’s embedding game logic in the place which designed to be presentation layer only…

Video first, description follows:

Click here to view the embedded video.

Mouse shadow

Open experiment

It works on webkit browsers only (Chrome, Safari).

What I want to create is just some old-school shadow, fading etc. Turn out using a deeply-nested div for the effect is quite stylish. The divs are assigned to different classes based on their nested level to improve performance because div > div >div > … is just too slow…

Gear

Open experiment

Again, works on webkit browsers only (Chrome, Safari).

I find the deeply-nested div has quite a potential to make some more things, so here is another product of it. Swapping the CSS transition with CSS transform achieved something very similar to fractal.

One little defect is I used percentage for the size of divs and the rounding number cause some gaps between divs… It is more noticeable when using resolution 3.

Pixel art

Open experiment

This one works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome)

This is a drawing board that you can click to draw pixel.

I remembered there are hackers tried to get users’ browsing history by using color-change of visited link. It impressed me to store valued in the browsing history. Originally I used links with hash values (ie. <a href=”#123″></a>) and it works in all the browsers… except IE. IE will turn the color when you click on it but it does not store it in the history. So I switched to use iframe, that is setting the links to open in the iframe and serve a dummy webpage with random URL…

Click Challege

Open experiment

This one is webkit browsers only (Chrome, Safari).

This is the latest experiment I made, which is really a playable game. CSS keyframe animation is used to simulate a timer. Lots of identical checkboxes to act as an area to let user clicks on. They are removed when clicked on it, using :checked in CSS. Finally a CSS counter is used to label the checkboxes (actually a ordered list will be fine).

2009-11-26: Gear is now on Chrome Experiments! Being the first CSS-only experiment over there

When writing BrainFlash, I was thinking if the string concatenations for program output will slow down the whole interpreter. That is because I was once hit that a year ago when dealing with XML.

I asked for better handling methods over StackOverflow. It is interesting that some of the answers shown that using “+=” is already the fastest. But I still want to know more about that, so I wrote my own simple testing program, which is below:

ActionScript version

source code

Methods used are:

1. str += concateString;
2. str = str.concat(concateString);
3. array.push(concateString); … str = array.join(“”);
4. vector.push(concateString); … str = vector.join(“”);
5. byteArray.writeUTFBytes(concateString); … str = byteArray.readUTFBytes(byteArray.length);
6. byteArray.writeMultiByte(concateString,”us-ascii”); … str = byteArray.readMultiByte(str.length,”us-ascii”);

The result shows that fastest method is using “+=”, but using Array/Vector is still very close to it. Using ByteArray is slow and with ASCII instead of UTF-8 is even slower…

And all the methods are performed reasonably fast, what is slow is when showing the resulting string on TextArea… It takes a few seconds! But when it is drawn, run it again and it will become normal speed, maybe there is some caching?

JavaScript version

I coded a JavaScript port too. See it here.

Methods used are:

1. str += concateString;
2. str = str.concat(concateString);
3. array.push(concateString); … str = array.join(“”);

Interesting enough, the result is very similar to AS3. It is the opposite of what we believe using the Array trick will let it performs faster. “+=” is the fastest in most cases, if not, that’s not much difference.

I’ve only tested in IE8(Win), Firefox 3 (Win/Mac), Safari 4 (Win/Mac), Chrome 3 (Win). The really really really interesting part is in Chrome 3, using the concat method of String is x7000 SLOWER than the other two!! What are your results?

If you haven’t heard about Brainfuck yet, it is a famous esoteric programming language. If you want to know why it has such a name take a look at its hello-world program source code (from wikipedia):

+++ +++ +++ +           initialize counter (cell #0) to 10
[                       use loop to set the next four cells to 70/100/30/10
    > +++ +++ +             add  7 to cell #1
    > +++ +++ +++ +         add 10 to cell #2
    > +++                   add  3 to cell #3
    > +                     add  1 to cell #4
    <<< < -                 decrement counter (cell #0)
]
>++ .                   print 'H'
>+.                     print 'e'
+++ +++ +.              print 'l'
.                       print 'l'
+++ .                   print 'o'
>++ .                   print ' '
<<+ +++ +++ +++ +++ ++. print 'W'
>.                      print 'o'
+++ .                   print 'r'
--- --- .               print 'l'
--- --- --.             print 'd'
>+.                     print '!'
>.                      print '\n'

the above program can be written as:

++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.

So now you should know how lovely the language is and why I need to write a interpreter in Flash: now you can manipulate a ByteArray with BrainFuck code!!! And ya, the name of my interpreter is even more friendly than the language’s name!

Here is the result demo (source code here), type in a program and its input then click run. The default program is to add up two single-digit integers. And the output is correct only if the sum is single-digit too. And again the code is from wikipedia. You may find other BrainFuck source code to test from Panu Kalliokoski’s Brainfuck Archive.

The interpreter is written by only looking at its command description. There are some bugs as I know. For example when inputting multiple lines, the output may have wrong formating. And it can not have dynamic input like having inputs in a infinite loop. Actually any infinite loop will freeze your browser.

I don’t think I will go to improve it anytime soon. So please, don’t use it in production (will anyone??).

When I first saw the Scale2x, scale3x AS3 I am impressed. The algorithm is from scale2x sourceforge project and the as3 port is coded as a class that is very easy to reuse. Surely the AS3 port author nicoptere can make a PB port too as you may find out many PB cool stuff over his blog, but my pixel bending desire force me to do it myself

Here below the video shows my demo. I get a camera capture stream and used Posterizer which is downloaded from Pixel Bender Exchange to convert the image to 4-color-only, and than use the scale2x filter to enlarge the low resolution capture. The top-left corner thumbnail-like image is actually the original 1:1 input(160*120).

Click here to view the embedded video.

It is quite interesting to see for scale2x, PB’s version nearly doubles the performance of AS3’s. But for scale3x, there is not much different between PB and AS3. I think it is because scale3x has too many if-else which PB is not strong at.

BTW, I discovered a bug in PB while coding this. The bug make my code much longer as I work-a-round it… I reported it to the PB forum.

Demo app

Demo app’s Flex project with Pixel Bender source (The shorter but buggy versions are included too.)

Just get back from Software Freedom Day (Hong Kong) 2009. Very glad to be invited by Ben to join the event as a speaker

I am one of the speakers in the session “Open Source developers from Hong Kong”. I presented STK in AS3 (which is started by me) and a few more great open source project related to media/art. Here below is the slide I used during presentation.

There is bilinear resampling by Pixel Bender already, why not bicubic too?

With the very helpful Java implementation, I can get bicubic resampling running in Pixel Bender in hours.

Here is my result, along with the resampling results in PhotoShop as a comparison:

Source image (size 4x4, scaled by your browser) Source image enlarged by PS (nearest neighbor) Bicubic resampling by Pixel Bender

There is some difference with PhotoShop’s versions (below), hope it’s not my mistake…

Bicubic resampling by PhotoShop. Bicubic smoother by PhotoShop Bicubic sharper by PhotoShop

My codes can be downloaded below:
Bicubic resampling sample program source (with PB source)

updated output of PB