Introducing Pictish, an image-processing library for web browsers

Boy, between RaphaëlTS, SHA-1, and Haeckel, I've been releasing an awful lot of TypeScript/JavaScript libraries lately, haven't I? Anyway, here's another!

Pictish

A Library for Processing Binary Image Data

Pictish takes advantage of canvas elements and Typed Arrays to provide fast routines for processing raster image data. Here is a rundown of the currently available functions:

• createImageData()
• fromFile()
• fromHTMLImage()
• crop()
• flipX()
• flipY()
• scaleDown()
• quarter()
• silhouettize()

All of these functions have been tested and optimized. More information is available in the documentation at the BitBucket site. Note that since canvas elements and Typed Arrays are based on more recent specifications, not all browsers support it. (For what it's worth, I've been testing in Chrome.)

(The sharp-eyed may notice that last function and wonder if it might have something to do with another project of mine. The answer is yes.)

Next planned step is to create a PNG file encoder — that could take a while, though.

SHA-1 with Typed Arrays

There are already SHA-1 implementations for JavaScript, but all the ones I found use strings as input. This is fine for generating hashes from small amounts of data, but not so great for large binary files. So I've created a SHA-1 library that optionally accepts ArrayBuffer objects.

SHA-1 TypeScript/JavaScript Library

Note that this will not work on browsers that do not support Typed Arrays.

I ran some tests and found that in Chrome it takes less than half a second to hash 10Mb of data.

Hope someone finds this useful! (At the very least, I will.)

PhyloPic Is Back!

Last year, I launched a project called PhyloPic. The goal of this project was to create an open database of freely reuseable silhouette images of organisms. Furthermore, it featured a phylogenetic taxonomy so that, if a taxon wasn't illustrated, an approximation could be found.

Pleurosiga minima

This image is in the public domain.

I launched it as a "public alpha", meaning that it wasn't complete and still had some bugs. The year turned out to be very busy for me: an awful thing happened, and a wonderful thing happened. And I didn't really have time to push PhyloPic to the next level.

Unfortunately, I hadn't built it well enough in the first place. The architecture was not optimized, and the site became extremely slow and buggy. I took it offline, hoping to release a new version in short order, but it turned out to need a lot more work than I first thought.

Happily, it is now ready again!

To Flash or not to Flash

I love building stuff with Flash technologies. I think ActionScript 3.0 is an excellent language and Flex 4 is a very good framework. I'm not particularly enamored of the alternatives. I find JavaScript to be a mediocre language (albeit with some excellent libraries). I don't like wrangling CSS more than I have to (although Less makes it much nicer). I find HTML 5 to be a pretty immature technology so far. SilverLight's days are probably numbered. (I haven't yet delved into mobile operating systems, like Android and iOS, so I can't speak for those. And those aren't complete alternatives, anyway.)


Because I love Flash, I have a tendency to want to build everything in it. But over the years I've learned that this tendency must be curbed whenever possible. There are definite downsides to Flash, and especially to doing entire websites in Flash. (The now-defunct March of Man website and some abandoned versions of the Dinosauricon are testaments to this.)


For PhyloPic, it was pretty clear to me that there would be no significant advantage to building it in Flash. Load times would be increased without any functionality enhancement. I wouldn't be able to use it on my iPhone. And all the functionality I needed was easily available in plain old HTML/JavaScript/CSS.


With one exception.


The Submission Tool is built as a Flex app. There is one primary reason for this: image processing. Processing the silhouettes on the server side was an option, but one that could have potentially bogged the server down. (It's already starting to buckle a bit as is, pending some optimizations.) But, by using Flash's BitmapData class, I can do that bit of work on the client side before the silhouettes are shipped off to the database.


Of course there are some other benefits as well. In descending order of importance:

• Flash allows for a more unified experience for the submitter. No page reloads and no cross-browser differences.
• SPAM bots are much more capable of cracking HTML forms than cracking custom AMF web services. SWF files are generally opaque to them.
• It was easier for me to build and test.

Had it just been those three reasons, there might still have been a good argument to do it as HTML/AJAX. The image processing requirement is what really tipped the scales. One hundred submitters contrasting, cropping, and rescaling bitmaps is much nicer if they're doing it on their own machines than if they're all doing it on the server. (Okay, I've barely had even two simultaneous submitters so far, but I can dream....)

There may be other Flash tools in PhyloPic's future. For example, I think it is the best technology for the Cladogram Generator. But for the rest of the site, plain old HTML/JavaScript/CSS is certainly sufficient—better, even.

UPDATE (2012 Jan 26): The Submission Page still uses Flash but is not a Flex app.

Why HTML 5 Canvas Will Not Be Replacing Flash That Soon

Previously I mentioned a tool, PhyloPainter, which uses the HTML 5 <canvas> element to draw a phylogenetic graph. Here's what it looks like on my iPhone:

Not only are the arrowheads missing (as they are on Safari on all platforms, not just the iPhone), but the labels have bizarrely been placed outside the canvas, flipped upside-down! The tool works fine on Firefox and Chrome. (Internet Explorer has not implemented <canvas> yet, and I haven't played enough with the interim solution, ExplorerCanvas, to get it working.)

I think the <canvas> element is a cool idea, and I'll continue to play with it. But it has a long way to go to compete with a cross-platform tool like Flash. HTML 5 may be "open"—but it also needs to "work".

PhyloPainter: Happy Little Trees

The whole Flash/Apple fracas has been rather distasteful to me. But I'm not going to dwell on that right now. Instead, I am trying to keep an open mind by trying out some of the technologies that are competing with my favored development tools. First up: HTML 5.

I'll probably write more on the topic later, but suffice to say for now that working HTML 5 feels like I've traveled in time back to 2001, the days of ActionScript 1.0. JavaScript is a poor language for anything complicated. Canvas has covered the basics of vector drawing well, but little else. That said, I see potential and I'm pretty certain the tools will improve.

For my first HTML 5 app, I ported some basic functionality from Names on Nodes, namely, the ability to read Newick tree strings and the ability to draw graphs. I give you:

PhyloPainter

It's a bit rough right now. For one thing, it doesn't work in Internet Explorer (despite the inclusion of a workaround JavaScript tool—the current version of IE doesn't support HTML 5 Canvas). But it's a start.

Give it a try—paint some happy little trees!