Chinese Handwriting Recognition App

Chinese Handwriting Recognition AppUnlike the iPad, the BlackBerry PlayBook has rather poor international keyboard support, with no method for entering chinese characters. I like the way iOS achieves this, so went about building my own version in ActionScript.

This was mainly an academic exercise and to help me to learn to write chinese. My approach was to sample the strokes drawn into the app as a series of up to 8 directions, including the relative position of a given stroke to the previous stroke, again as one of 8 directions. This pattern, represented as a string of numbers is then put through a smoothing algorithm, to remove some unnecessary noise and then compared with a dictionary of pattern keys, which may contain one or more suggested characters. If there are no hits, an advanced search occurs, by mutating the given pattern in specific ways, in order to find alternative suggestions. I can also find characters based on the next most likely character to the one you’ve just entered, using frequency analysis on given sample text.

The app will eventually be a PlayBook App, but is still unfinished and currently in ‘training mode’, so that character patterns can be trained into the database. It’s currently primed with some simplified sample data, from which it picks the most popular few characters to learn. If you write chinese, give it a go.

Symform – a truly distributed cloud storage service

I recently discovered Symform, a unique type of cloud storage service, which gives you up to 100GB of free cloud storage. What’s special about them is that your data isn’t stored in one Data Centre somewhere, but encrypted and distributed amongst thousands of other Symform users’ harddrives, offering better redundancy than RAID storage. You can contribute space to cloud to receive more storage and there’s the potential to upgrade to unlimited storage.

SmoothBitmap – How to enforce pixel smoothing on a Bitmap

A common oversight when using Bitmaps with loaded content is that Flash will revert a Bitmap’s smoothing parameter to false when you replace its bitmapData. It’s simple enough to fix, but since you may not know if someone is going to replace the bitmapData of a Bitmap you have created – then it’s often better to code defensively around it.

This little SmoothBitmap class is for just such an occassion. Instantiate it like a regular Bitmap and, no matter what another developer does with it, smooth pixels when scaling/rotating will be ensured.

CODING WRONGS – Where do I start with the bad?

It gets scary out there sometimes. During my freelance career I've worked a lot of different companies and have seen such coding horrors as you cannot imagine. So I thought I'd start immortalising some of them - so that we can all learn better coding practices, by looking at the bad.

Starter for 10 - What's wrong with this picture?

public function set someProperty(value:String):void
{
    var newPixels:BitmapData = new BitmapData(someUint, someUint, true, 0);
    someBlitUtil.blitStuffTo(newPixels, value);
    someBitmap.bitmapData = newPixels;
}

If it's not immediately obvious, the fubar here is the potential replacement of a Bitmap's BitmapData, without explictly disposing any existing BitmapData. I see this kind of thing quite often and it's the source of many a memory leak. AVM2 isn't that great and dealing with this kind of situation and there's a crucial difference between GC cleaning up out-of-scope objects for you and things like BitmapData: GC will reclaim the memory associated with objects 'when it feels like it', whereas explicitly calling the 'dispose' method of a BitmapData will immediately give you back that memory. In the case of hardware accelerated setups, the memory associated with the pixel data itself (video memory) will be reclaimed immediately. You shouldn't make more work for GC when you can avoid it - defensive programming is always best!

Object pooling utility updated

Having just got back from an awesome break in Thailand and Taiwan, I just updated my object pooling utility. Thanks to Ostra Ceruzka for raising an issue with its strict mode functionality with me - all fixed now! Serves me right for not writing enough tests, huh?

TextField.getRawText() what it does

I was recently creating an API that required extending TextField and happened across the getRawText() method. I assumed this returned the text from the field without formatting or something - so I looked up the AS3 docs for flash.text.TextField.

Nothing there - gee thanks Adobe. A quick search turned up this which, it turns out, isn't quite accurate.

So, with a tad of testing, it appears that getRawText() returns the text, stripped of any HTML tags (if you had set htmlText). I now wonder if this is faster than using a RegEx to strip the tags and why Adobe didn't document it?

Loan Shark – fast object pooling

Loan Shark AS3 object pooling utilityA couple of years ago, I created an AS3 object pooling utility for a games project I was building. Since then, I've used it quite a few times, in order to speed up apps and improve resource management, easing the load on the garbage collector by reusing objects instead of recreating them.

While object pooling isn't a magic bullet to speed up every use case, it works especially well with custom classes that are heavy to continually contruct and destroy. A good example is my History of the World project, which uses an object pool for item renderers, instead of creating and destroying them as you navigate around - press ALT+CTRL to bring up the resource debugger, which shows a little information on its usage.

I recently updated the utility, improving its performance, adding features and putting loads of unit tests around it. It's now hosted it over at GoogleCode. Using it is a simple as:

import org.kissmyas.utils.loanshark.LoanShark;

var pool:LoanShark = new LoanShark(SomeClass);
var someInstance:SomeClass = pool.borrowObject();
someInstance.doStuff();

// Instead of nullifying an object, check it back into the pool
pool.returnObject(someInstance);

Lurpak Breakfast – how it was done

I thought I'd give a quick insight into how the animation effects in one of my projects were acheived.

Scott Bedford, former Creative Director at Carlson Marketing, posted this video of a project we worked on a while back, for the Lurpak Breakfast campaign. I created all the animation prototypes for the various effects used throughout the site, some of which can be seen here. The site won two DMA awards, but I'm most proud of the crumbs animation and the code-generated interactive steam effect - similar to the one you'll see on my homepage.

Techie Breakdown

  • Crumbs animation. 1000 Bitmaps random position themselves until around the edge of the bread mask shape, animated with simple mouse interactive physics - force, velocity, momentum and friction all tweakable
  • Steam effect. Perlin noise moving through another perlin noise BitmapDisplacementFilter, to which user generated displacement can be applied, then all blurred
  • Egg Timer animation. Particle system with basic physics and just a draggable mask
  • Do Not Disturb tag. Maths-based animation for the swing only, the rest is old-school timeline animated
  • Fry-up triple banner. Three banners synchronise object positions/velocities using LocalConnection to send packets with a TTL applied to avoid a feedback loop
  • Spinning letters. TextMetrics used to break a populated TextField into separate letters, each one animated into a simple 3-D engine I knocked up, with simple physics used to achieve the swirl motion
  • Hang-over breakfast. Just a blurred mask, though I prefer my version from my original - alpha a blurred copy of an image over the original for a proper hazy effect
  • Other animation. Uses a combination TweenMax, maths and frame-by-frame, e.g. pancakes, bedroom door
  • Not mine: Wise-crack banner, breakfast tray messenger banner, down tools drawer, coffee bean counter, flapjacks, emails