Startsidan  ▸  Texter  ▸  Teknikblogg

Anders Hesselbom

Programmerare, skeptiker, sekulärhumanist, antirasist.
Författare till bok om C64 och senbliven lantis.
Röstar pirat.

Drawing a HTML5 heart with Monkeybone


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:

Download the Monkeybone Viewer from this page.

Categories: Programs

Tags: Monkeybone

Leave a Reply

Your email address will not be published. Required fields are marked *

En kopp kaffe!

Bjud mig på en kopp kaffe (20:-) som tack för bra innehåll!

Bjud på en kopp kaffe!


Kontaktuppgifter, med mera, finns här.

Följ mig

Twitter Instagram
GitHub RSS

Public Service

Folkbildning om public service.

Hem   |   |   |   |   Filmtips