Introducing CanvasMaker

Posted on Monday, November 19, 2007 @ 19:13 CET

After writing my copy of Joshua Davis' "base fade loop" I was playing with different property values and how they affect the canvas, and thought it would be cool to have a GUI for that kind of thing.

The other thing was that it would be nice to get the generated image out of the Flash player, and the print to PDF hack isn't really simple enough. So my first thought was to make an AIR app that could export the generated bitmap data to a PNG or JPG on the file system. But after some googling round I found an AS3 and PHP solution - it consists of a JPEG encoder library for AS3 and a PHP library that can receive a ByteArray and save it as a JPEG.

So my Flex app creates some random boxes on the screen within a Sprite. A BitmapData object is created from the sprite contents and then encoded as a JPEG with the aforementioned library. This is then inserted into a ByteArray object and sent off via AMF to the AMF-PHP service that accepts the ByteArray and decompresses it to a file on the server.

This is sweeter than the AIR app since it just works within the browser. No installation necessary.

At first I thought the file saving mechanism would be more complicated than it turned out. Since I have a SWX PHP instance up and running on my server (which uses AMF-PHP) I could just drop the JPGEncoder.php class into the "php/services" folder and it just worked.

You can play with the first version of CanvasMaker here. You can drag around the boxes to reposition them and note that the whole image is not visible until you save it to file, since the dimensions may exceed the size of the browser window. All the generated images you create will end up here.

The next step is maybe integrating the colour palette with the Kuler API.

Thanks to Chris for helping me sort out the masking issue that allows me to grab the BitmapData for the whole image, not only the part that is visible.

- paulo