A Mandelbrot Set Viewer - Pushing the Envelope with Blob Storage
As we've been developing the Pageforest service, we've been developing sample applications in parallel. We think the best way to motivate features to support in our service, is to actually build applications that utilize those services. In fact, we explicitly stated that we won't implement any feature that we don't have an imminent need from a JavaScript application developer (including ourselves!).
If you've seen our simple Scratch application sample, you'll see that a simple Pageforest application can be written in just a few lines of code. And your application can save and load data from a cloud data-store on behalf of your users.
What you may not have realized, is that documents can contain much more than a single JSON blob storage. In fact, each "document" in our system, can also have associated with it, any number of child "Blobs". The permissions for reading and writing these blobs are controlled by their parent document. Blobs can contain any Internet data-type, including images, sounds, pdf's, html documents, javascript files, or JSON persistence.
With this feature in mind, we decided to push the envelope with a Mandelbrot set viewer application with the following goals:
- Use the Canvas element to draw the Mandelbrot set using JavaScript only (no flash, no plug-ins).
- Cache images rendered in the client, into Blobs in the data store - so that once any user has viewed a region of the set, it would be available to any other user without having to recompute it.
- Use HTML 5's Web Workers to compute image tiles in the background - keeping the UI responsive even when the CPU is busy with intensive image processing.
- Use Google's Map (v3) API to provide a famiilar navigation interface to the Mandelbrot set, making it as easy to pan and zoom over the Mandelbrot set as it is to view maps and satellite imagery of the Earth.
- Use the spare CPU cycles of concurrent connected browsers, to create a peer-to-peer compute cloud to further speed up calculation of desired image tiles.
We started the project over the Memorial Day weekend, and today we have a working prototype that meets all but the last goal.
If you would like to play with the Mandelbrot Set Viewer, be aware that you must be signed in to Pageforest in order to generate tiles (you should be able to view existing image tiles without signing in).
The way the Mandelbrot Viewer works, is that whenever the map UI generates a request for an image tile (all of the tiles at all of the magnifications have been assigned names according to their position - even if the tile hasn't been generated yet), we simultaneously query the Blob store to see if the tile exists. If it doesn't, we queue up a tile creation task and send it to a Worker. Because workers don't have direct access to Canvas elements for drawing, we compute the data for the bitmap in the Worker, and send that back to the parent window when the Worker is done. It can then be quickly saved into a Canvas element, converted to a PNG file, and then uploaded to the server.
We had some difficulty getting compatability across browsers to support raw binary upload's via AJAX, so we instead just send a base64 (text) encoded version of the file, and decode the data on the server before storing it.
Once the tile is generated, we update the url in the map image, so the browser attempts to download the tile again.
As is all of Pageforest's code, this example has been made open source. You're welcome to make a copy to make your own variations.

