UnitZeroOne

Avatar

A blog written by Ralph Hauwert, freelance front-end developer, specialized in rich internet applications, games and visualisation.

OpenSource Image Dithering for AS3. (demo+source).

Intro

As promised in my previous post, here’s a small opensource project from my side. It’s tiny, really, but I hadn’t seen an ActionScript implementation of any form of Image dithering before.

Dithering….what ?

Just a brief explanation what dithering in this context means. From wikipedia :

Dither is an intentionally applied form of noise, used to randomize quantization error, thereby preventing large-scale patterns such as contouring that are more objectionable than uncorrelated noise.”

Words to take note of in that sentence are quantization, and “intentionally applied form of noise”. In our case quantization is the removal or swapping of colors. The form of noise applied differs over the several implementations and in so called “ordered dithering” it’s hardly noise, rather a carefully chosen threshold matrix.

Dithering, why ?

Dithering imagery has been around for some time. Put a close eye to any black and white printed newspaper’s pictures and you’ll see the effect.

It’s basically been around a lot longer then I have in my 28 years of life…that’s for sure. I first learned terms like “ordered dithering” and “Floyd-Steinberg Error Diffusion” in my young and early days on the Amiga hardware. See, in those days computer hardware wasn’t capable of displaying the huge arrays of colours like now-a-days. Since you then had few colours to spare (a typical amiga workbench ran at 16 to 128 colours or so), you needed to be creative to get yourself a nicely pimped desktop image, whilst still sparing colours for your icons.

A better example of a dithering implementation for our industry is probably that checkbox when you want to save for web in Photoshop, using GIF. Or when you print something on a pure black and white printer.

Conclusion; dithering is normally used to create the illusion of tones on a device which is otherwise not capable of displaying it. So why port this to our ARGB/32Bit enabled Flash Player ? Part of the reason why I worked on this is because I just like the aesthetic of the effect. It just brings back wonderful memories of pimping my Amiga desktop.

Dithering in AS3

So, the algorithms for dithering are really quite simple. I was playing around with hydra Pixel Bender and had some ideas on converting some old algorithms to have them run in realtime. Then I thought I could make this run in realtime on Flash 9. So, first I did a version of the Algo in pure AS3. I played around with converting it to something fast enough to run at at least 20 frames per second on an average machine…and painfully failed. The remains are the AS3 version (hydra Pixel Bender version still in progress)….and I decided to clean that up a bit, and have it released as an OS project for anyone to use.

Currently it only contains so-called error-diffusion based ditherers. They make the most sense anyway, since the ordered ditherers really have nasty visual sideeffects, like Bayer’s crosshatches. Check the variants out in this little demo application using the class.

The Demo : try and use “No Dithering” first to see the effects of regular palette conversion.

The Source

Usage :

ImageDithering.dither(bitmapData, type, levels, grayscale);

Where :

BitmapData is the image to be manipulated.

Type is the form of dithering, currently supported :

  1. ImageDitheringType.FLOYD_STEINBERG
  2. ImageDitheringType.FALSE_FLOYD_STEINBERG
  3. ImageDitheringType.STUCK
  4. ImageDitheringType.NO_DITHER

Levels is the amount of colour levels to quantize to per channel.

Grayscale is a boolean indicating whether to convert the image to grayscale before the process is ran.

Right click and viewsource on the example to see how it’s implemented in Flex.

Quick update : Mario Klingemann, working on Aviary’s Peacock did a quick test with it. My effort had some use anyway!

Digg, StumbleUpon, Slash and others: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • DZone
  • StumbleUpon
  • Slashdot
  • Technorati
  • blogmarks
  • BlogMemes
  • Ma.gnolia

WPF vs Apollo/Flex as interpreted by a MS Certified Professional.

Parvez Ansari, Microsoft Certified professional gives his rather straight forward view on Flex, Apollo and Flash vs WPF. I think it is more then interesting what state of mind he is in.

He kicks off with this :
“Now a days people are creating hype about Apollo and Flex. When I had a look at what these two products are, I found that Apollo and Flex is just the replica of .NET Framework. They are talking so loud about Flash and Flex. Guys Flash is just an animation software which was made with the intention of being a preloader.”

Wow…so Flex is a replica of .NET ? Let me see…wasn’t it the Avalon team to hire well-known figures from the Flash industry to work on Sparkle ? That being established; I’m not going to tell you what was there first; mxml or xaml. Basically, I just don’t know. What I do know is that Flex 1 has been around a lot longer then the similar MS tech….

Furthermore Parvez states :
“It cannot take place of programming Language.”

….you obviously havn’t seen what AS3 (yes it’s a scripting language, I know) in the hands of a developer can do….

Next :
‘Apollo people are giving counts of Apollo runtime downloads. Dot NET Framework is downloaded four times more than their Apollo runtime.”

Considering Apollo is in developer ALPHA, that’s actually a compliment! .net has been around alot longer; but the 3 version to implement the WPF technology isn’t that well adopted at all yet.
Ow, and about that download : the installer for .net 3.0 is 2.8Mb, which will then continue to download another 30MB….compare that to Apollo’s current 6Mb footprint. On the bright side, .net’s footprint for Mac actually is 0Mb where Apollo is 8Mb. On the other hand; that 0Mb download comes from the fact that it’s not supported on Mac………

and continues into
“WPF technology and .NET Framework 3.0 brings in the years of experience of Microsoft in programming field. WPF is really a revolution. The combination of WPF/Expression Suite with the programming capabilities of Visual Studio makes it the best Programming Suite ever available.”

I’ll refrain on making any comments on the WPF technology. I haven’t spent enough time looking into WPF to tell you anything about the core technology, or how good it is, or it’s not.
But I will take you up on the “years of experience” :
I’ve always been a Windows user (after having to move away from the then dead AmigaOS). It’s good enough for me; I enjoyed the software, it enabled me to do my job, entertain myself, communicate, and get a fairly easy cleanly installed machine. XP is a stable and usable OS; all I need. Not complaining there. Recently I was lured by the Vista hype and gave it a try….that other product where MS so eagerly wishes to state is “built on top of years of experience”. I was just thinking : what did they actually do the last 5 years ? What really happened ? Couldn’t get halve of my hardware working, got several crashes on otherwise stable machine, and decided to go back to XP. I needed a killer machine to actually run it. Maybe my next-gen os will be X. Please do not use the “years of experience” as a proof of quality, it fails quite badly at this point in time; and as history has proven, years of experience doesn’t necessarily make you the best.

Mr. Ansari concludes :
“Let this year of 2007 come to an end then we will see where this Apollo and Flex stand :D”

Well if all MS Certified professionals have this kind of attitude towards competitive products, I’m willing to take you up on that one ! You’ll never noticed what just hit you, if you don’t know it’s coming.

I’ll leave my personal views on WPF technology and such out of this, but with such an invitation to correct ignorance, I couldn’t resist myself. I would never underestimate another technology, without having a proper look at it.

Found this via Actionscript Hero. who elegantly choose to just link, and not reply to anything….that’s what I should’ve done here ;-)
Just remember the blogs slogan : “Parvez Ansari Told You….”

Digg, StumbleUpon, Slash and others: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • DZone
  • StumbleUpon
  • Slashdot
  • Technorati
  • blogmarks
  • BlogMemes
  • Ma.gnolia

Hey! Adobe! What’s mx.data.utils.TraitsInfo ?

Today while doing normal work (meaning, not pv3d), I made a little typo combined with code completion, and suddenly I had a class name standing there with the name TraitsInfo, along with it’s import, mx.data.utils.TraitsInfo.
At that moment I didn’t have the time to have a good look at what was happening there, but I decided to revisit that tonight. I had a good look now, and although the class is unavailable, the code completion suggests that Adobe actually does have this class….

There’s a couple of errors and small bugs in Flex which reveal things about the Adobe dev environment, like the path from the building machine (something like c:\dev\…\…\, can’t reproduce right now).

This hint of a class which could us info about the Traits got me particularly excited though; I thought it was a reference to the AS3 Object Model. So if we would have more info on what actually happens with our classes in terms of what the Traits look like, this would give some good insights at runtime…seemed interesting to explore to me. But the package where this is in suggests it hasn’t got anything to do with AS3, but it refers to data services. Still these things get me very curious. If anyone of Adobe reads this (I hope the title advertisement worked), and wants to and can share, please do.

For people interested in the Traits; this is probably the best document on it.

Digg, StumbleUpon, Slash and others: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • DZone
  • StumbleUpon
  • Slashdot
  • Technorati
  • blogmarks
  • BlogMemes
  • Ma.gnolia

Next,

Search

Projects & Work

A selection of current work

Advertising