Mr. Doobs Harmony project ported to Flash AS3
Some time ago I ported the great Harmony drawing app by Mr. Doob to Max/Msp. This Max/Msp Version I used for my media installation "Sound drawings". During the development and testing with the musicians I was not so happy with my workflow. Furthermore I felt that the Max/Msp environment causes some certain useless obstacles for me. Especially for the visual part of my work. Now I have time to check how useful Flash can be as a renderer. The first step was to port the drawing functions to ActionScript. Here is the result:
For drawing in full size mode please visit the html File. The code is available on my Google project site. Before using the code in your projects, please check the requirements of the GPL license Version 3 and read Mr. Doobs blog post about using his code. The API is still the same as the orginial JavaScript version. Every brush has to implement the IBrush Interface methods:
1 2 3 4 5 6 7 |
public function init(); // for re-creating the brush (after calling destroy) public function destroy(); //destroy the brush data and free the memory ////////// Drawing functions /////////////// public function strokeStart(mouseX:int, mouseY:int):void; // set first drawing point public function stroke(mouseX:int, mouseY:int):void; // set following drawing points public function strokeEnd():void; // stop drawing |
Brushes are very easy to use, but for performance issues you have to consider, that the drawing commands are expensive for the computer. I already ran into some performance problems after a few seconds. For this reason, I decided to store the drawing result of each frame into a BitmapData object. The Hype Framework is using the same approach. Here you can see the most important code lines for the bitmap storing approach...
1 2 3 4 5 6 7 8 9 10 11 12 |
public fundction handleEnterFrame(e:Event):void { // some code before // draw the stroke for one(!) frame brush.stroke(e.target.mouseX,e.target.mouseY); // save the drawing in a bitmapData Object for performance bmpCanvas.draw(canvas); // clean the canvas again for new drawings. canvas.graphics.clear(); // some code later... } |
Nothing more I can say. Have fun and keep on coding!
cool thx a lot 🙂