Software As She’s Developed

Mahemoff’s Podcast/Blog – Web, Programming, Usability from the Author of ‘Ajax Design Patterns’ (AjaxPatterns.org)

Software As She’s Developed header image 2

Announcing Bitjuice: Ajax Bitmap API

May 27th, 2007 · 6 Comments · Links, SoftwareDev

Welcome to Mahemoff's blog on web development, UX, and software development. I most recently worked in developer relations at Google, focusing on Chrome and HTML5, and am now busy baking a few apps independently.

Bitjuice is a little library I made to do bitmap/raster graphics in the browser. The aim is to make it easy to write “Ajax graphics” – graphics you can update real-time in the browser. And at the same time, maintain compatibility with all major browsers and old browsers too. That’s why it doesn’t use any new-fangled SVG/Canvas APIs. Just a plain-old HTML table, where we manipulate the CSS cell background style.

Here’s an interactive Scratchpad, where you can play around with programming against the API. I think it’s neat that Ajax lets us make it this easy to get your hands dirty with a new API – no download, no install, no fuss!

How to use it? The API is like any typical drawing-on-a-canvas-type APi you’ve ever used.

 *** BASIC USAGE ***
 var bitmap = new Bitmap(10,20); // width, height
 containerElement.appendChild(bitmap);
 bitmap.drawPoint(5,5,"pink"); // x,y,html colour

*** ADVANCED USAGE *** var bitmap = new Bitmap(10,20, {container:containerElement, blankColor:"gray"}); bitmap.drawLine(1,2,5,5,"pink"); bitmap.drawRect(1,2,5,5,"pink"); bitmap.drawFilledRect(1,2,5,5,"pink"); bitmap.destroy(); // Same as containerElement.removeChild(bitmap);

There’s various work to be done, mainly in optimising performance because I would like to make it possible to plot fairly quickly.

I can envision a a number of potential uses. Interactive bitmap editor, tool for learning Javascript or programming in general (the scratchpad), simulations such as Game Of Life (which I really want to implement), mathematical graphing, process monitoring.

It’s licensed under the liberal, non-viral, MIT License. Ships as a single JS file.

Tags: ····