Andy Li's Blog

19/02/2010

Colorblink – An AIR app that simulates how color blind people see Flash and images

Filed under: Uncategorized — Tags: , , , — Andy @ 8:55 pm

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…

10/12/2009

Chroma key and thresholding in Flash (Pixel Bender), revised

Filed under: Uncategorized — Tags: , , — Andy @ 6:12 pm

yellowFiltered

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

28/09/2009

Pixel Bender port of Scale2x and Scale3x

Filed under: Uncategorized — Tags: , — Andy @ 3:35 am

scale2x

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

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

YouTube Preview Image

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

Older Posts »

Powered by WordPress