Anders Hesselboms teknikblogg

Drawing a HTML5 heart with Monkeybone

2010-09-17

This demonstration shows how you can create a Monkeybone picture from scratch and to export it as a HTML5 vector image. The required software is Monkeybone Viewer version 1.5 or later.

Step 1: Create the file. To do this in Windows, you must make sure that you can see the file ending of known file types. Right click on an empty area on your desktop, create a text file, change the file ending from .txt to .mob. Start Notepad and drag the file to Notepad.

Another way to accomplish this, is to start Notepad, click File and Save as, change to “All files” in the filter box, and finally, type in a file name with a .mob ending. Click the Save button.

Step 2: Initialize the picture and open it in the Monkeybone Viewer. Enter a Clear instruction as the first line in the text file. The Clear instruction will specify the image background color and the size of the image. I will make it 300 x 300 pixels and pink. This is the source:

Clear 300x300 #ff9999

Save it using Notepad, drag it from the desktop to the Monkeybone Viewer (version 1.5 or later). Now you should see a pink square 300 pixels wide and 300 pixels high in the viewer.

Step 3: Define the heart. Add Spline instructions to your document. You can re-save it in Notepad, switch to the viewer and press Ctrl+Shift+F5 to make the changes appear. Adjust your code and repeat until you are satisfied. This is my code (including the first Clear instruction):

Clear 300x300 #ff9999
Spline #ff0000 X1:150-100 Y1:50-100 X2:10+0 Y2:70-10
Spline #ff0000 X1:10-20 Y1:70+60 X2:150+10 Y2:290+0
Spline #ff0000 X1:150+100 Y1:50-100 X2:290+0 Y2:70-10
Spline #ff0000 X1:290+20 Y1:70+60 X2:150-10 Y2:290+0

Step 4: Export the picture. In Monkeybone Viewer, click File and Save as. Change the format to HTML5. Click the Save button. To view, double click the HTML file to open it in your default browser or drag it to a open web browser. If you are using Internet Explorer, version 9 or later is required. This is the result: