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.

Export HTML5 Canvas images

The latest addition to the Monkeybone Viewer (1.3) is the ability to save images as HTML5 Canvas images. This feature is not working perfect yet – there are still features that the Monkeybone image format can render, but not export correct. This feature should be correct in the next release.

Download link on this page.

Monkeybone: The Spline instruction

Using notepad
The Spline instruction has syntax similar to the Line instruction when named arguments are used, but each value has a magnet attached to it. The line will bend to the magnet. This will draw a red line on a black image, from the upper left to the lower right:

Line #ff0000 X1:0 Y1:0 X2:200 Y2:200

This will draw a green line, also from the upper left to the lower right, but it will be bent, like an S (but mirrored).

Spline #00ff00 X1:0+100 Y1:0+0 X2:200-100 Y2:200+0

Not how X1 has its value set to 0 and its magnet set to +100. This means that the curve will bend off 100 pixels to the left. Note that I don’t want to use the magnet on Y1, so I just add +0. I want X2 to bend 100 pixels to the left, so -100 is added.

This is a working example:

//Create a black picture.
Clear 200x200 #000000

//Set line thikness.
Set Line Thikness To 3

//Draw a red line.
Line #ff0000 X1:0 Y1:0 X2:200 Y2:200

//Draw a green spline.
Spline #00ff00 X1:0+100 Y1:0+0 X2:200-100 Y2:200+0

And this is the result:

Using the .NET library
If you are using the .NET library, this Visual Basic code below, the output will be a .MOB file with exactly the same image. This requires a reference to Monkeybone.dll.

Dim OutputPath As String = System.IO.Path.Combine( _
   System.Environment.GetFolderPath(Environment.SpecialFolder.Desktop), _
Using Sw As New Monkeybone.MonkeyboneWriter(OutputPath, 200, 200, _

   'Set line thikness to 3.

   'Draw a red line across the picture.
   Dim Line As New Monkeybone.Instructions.Line(0, 0, 200, 200)
   Line.Color = System.Drawing.Color.FromArgb(255, 0, 0)

   'Draw a green spline
   Dim Spline As New Monkeybone.Instructions.Spline(0, 100, 0, 0, 200, _
      -100, 200, 0)
   Spline.Color = System.Drawing.Color.FromArgb(0, 255, 0)

End Using

Using the Monkeybox control
The Monkeybox control (resides in Monkeybox.dll) is capable of displaying the image on screen and exporting the image to a .MOB file. Given that you are writing a Windows Forms application in Visual Basic, and you have a Monkeybox control named MBox1 on your form, this code will produce the exact same image as shown above:

Private Sub Form1_Shown(ByVal sender As Object, ByVal e As System.EventArgs) _
   Handles Me.Shown
   'Size is normaly set in the designer, but here I set it manually.
   MBox1.Width = 200
   MBox1.Height = 200

   'Set the background color and the line thikness.
   MBox1.BackColor = Color.Black

   'Draw a red line.
   MBox1.AddLine(Color.FromArgb(255, 0, 0), 0, 0, 200, 200)

   'Draw a green spline.
   MBox1.AddSpline(Color.FromArgb(0, 255, 0), 0, 100, 0, 0, 200, -100, 200, 0)

   'Redraw is not trigged by adding and instruction.
End Sub

Monkeybone: The Line instruction

There are two alternative ways to use the Line instruction in a Monkeybone image (a text file with .mob ending). You can either use named arguments or a list of coordinates. This example demonstrates both alternatives. The first V symbol is drawn using named arguments, the rest of the symbols are drawn using coordinate lists.

Clear 290x200 #a0a0a0
//Draw a V symbol using named arguments.
Line #000000 X1:10 Y1:10 X2:40 Y2:190
Line #000000 X1:40 Y1:190 X2:70 Y2:10
//Draw a V symbol using a polyline.
Line #000000 (80,10) (110,190) (140,10)
//A closed triangle.
Line #000000 (150,10) (180,190) (210,10) AutoClose
//A filled triangle.
Line #000000 (220,10) (250,190) (280,10) Filled

If you are using the Monkeybone .NET library, this code is used to produce a .mob file that contains one simple line and a polyline. To view the picture, open the output file in Monkeybone Viewer. The code requires a reference to the Monkeybone.dll.

Using Sw As New Monkeybone.MonkeyboneWriter("C:\Lines.mob", 200, 200, Drawing.Color.White)

   'Create a line by passing X1, Y1, X2 and Y2 to the constructor of the Line class.
   Dim SimpleLine As New Monkeybone.Instructions.Line(10, 190, 190, 190)
   SimpleLine.Color = Drawing.Color.Black

   'Create a line by passing an array of coordinates to the constructor.
   Dim Points() As System.Drawing.Point = {New System.Drawing.Point(20, 20), _
      New System.Drawing.Point(180, 20), _
      New System.Drawing.Point(180, 180)}
   Dim PolyLine As New Monkeybone.Instructions.Line(Points)
   PolyLine.Color = Drawing.Color.Red

End Using

Finally, if you are using the Monkeybox control (named MBox1 in the example below) to display graphics directly on the screen, the following code displays one simple line on screen, together with the Monkeybone source code in a message box.

'Set the background color.
MBox1.BackColor = Color.White

'Add a red line to the monkeybox.
MBox1.AddLine(Color.Red, 10, 10, 90, 90)

'Redraw is not trigged by adding and instruction.

'Display the source code.

Monkeybone: The Bar instruction

The Bar instruction, as it appears in a Monkeybone Image (a text file with .mob ending) is a line with at least five parameters. The color of the bar, the X and Y position of the bar, the width and height of the bar. The following lines in a .mob file creates a green rectangular image with a centered yellow box in it:

Clear 200x200 #337733
Bar #ffff00 X:50 Y:50 W:100 H:100

Optionally, you can set the percentage of the fill in either horizontal or vertical direction using HFill or VFill, followed by a percent value. The following code will give a 50 pixel high box. The specified height is 100 (pixels) but VFill:50% tells Monkeybone Viewer to only display half height of the box:

Clear 200x200 #337733
Bar #ffff00 X:50 Y:50 W:100 H:100 VFill:50%

One way of producing an image like this, is to use Notepad to create a text file that ends with .mob instead of .txt. Using Notepad is not the easiest way, and rather impossible if you want to generate dynamic images. For dynamically generate Monkeybone Images, the Monkeybone .NET library or the Monkeybone .NET control can be used.

The Monkeybone .NET library is a class library that contains a writer with the capability of streaming Monkeybone instructions to a file. The following Visual Basic code requires a reference to Monkeybone.dll, and produces a file called “Bars.mob” that can be opened using the Monkeybone Viewer.

Using Sw As New Monkeybone.MonkeyboneWriter("C:\Bars.mob", 200, 200, _
      System.Drawing.Color.FromArgb(51, 119, 51))
   Dim Bar As New Monkeybone.Instructions.Bar(50, 50, 100, 100)
   Bar.BarFillPercent = 50
   Bar.Color = System.Drawing.Color.FromArgb(255, 255, 0)
   Bar.Orientation = Monkeybone.Instructions.Bar.BarOrientation.Vertical
End Using

If you want your image to display on a form, you can use the Monkeybox control. The Monkeybox control displays your image directly on screen, with an option to save it as a .mob file that can be opened in Monkeybone Viewer. The following code is written in the Shown event of a form that has a Monkeybox control on it, called MBox1. Here, I do not actually save the image, just displays the source in a messagebox. The messagebox will contain exactly the same two instructions as the last example produces. Also, on the screen, you will see a green Monkeybone image with a yellow box in it.

Public Class Form1

    Private Sub Form1_Shown(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Shown
        'Size is normaly set in the designer, but here I set it manually.
        MBox1.Width = 200
        MBox1.Height = 200

        'Set the background color.
        MBox1.BackColor = System.Drawing.Color.FromArgb(51, 119, 51)

        'Add a bar.
        MBox1.AddBar(Color.FromArgb(255, 255, 0), 50, 50, 100, 100, 50, _

        'Redraw is not trigged by adding and instruction.

    End Sub

End Class

Tint, Noise and Blur

This image simply demonstrates the filters that are available in Monkeybone. Tint overlays a color, Noise adds noise to the image and Blur decreases focus. This is the content of the .mob file:

//Initialize the image.
Clear 400x300 #707070

//Draw a background.
Bar #4477ff X:0 Y:150 W:400 H:150
Set Line Thikness To 3
Line #ffff00 (0,0) (400,300)
Set Line Thikness To 2
Line #000000 (0,150) (400,150)

//Show off the filters tint, noise and blur.

//Show tint.
Region (10,10) (30,10) (30,290) (10,290)
Tint O:50% #00ffff
//Outline it.
Line #000000 Region

//Show noise.
Region (40,10) (60,10) (60,290) (40,290)
Noise O:20%
//Outline it.
Line #000000 Region

//Show blur.
Region (70,10) (90,10) (90,290) (70,290)
//Outline it.
Line #000000 Region

//Type out what filters are used.
Text X:14 Y:272 #ffffff "A"
Text X:44 Y:272 #ffffff "B"
Text X:74 Y:272 #ffffff "C"
Text X:140 Y:40 #ffffff "A: Tint cyan 50%"
Text X:140 Y:60 #ffffff "B: Noise monochrome 20%"
Text X:140 Y:80 #ffffff "C: Blur"

This is the result:

Doing filters in Monkeybone

The filters in Monkeybone rely on regions to know what area on the image they apply to. The following lines define a picture 400 pixels wide and 300 pixels with black background. Also, it defines an invisible region.

Clear 400x300 #000000
Region (10,10) (200,10) (200,200) (250,250) (60,250) (10,200)

The Tint filter takes only arguments: The color and the opacity. Opacity can be given as an integer between 0 and 255 where 0 is completely transparent and 255 is completely solid, but it can also be given as a percent value. This adds some purple color to the region with opacity of 100:

Tint #ff00ff O:100

These two lines move the region 10 pixels to the right, and fill the region with solid purple color. O:100% gives a solid fill, but O:100 gives an opacity that is less than 50%.

Region (20,10) (210,10) (210,200) (260,250) (70,250) (20,200)
Tint #ff00ff O:100%

Finally, these two lines move the region another 10 pixels to the right, and fill the region with blue color, with 50% opacity. An opacity of 50% can be written as O:127 or O:50%.

Region (30,10) (220,10) (220,200) (270,250) (80,250) (30,200)
Tint #0000ff O:50%

To try this out, create a text file, change the file ending to .mob, and insert these lines:

Clear 400x300 #000000
Region (10,10) (200,10) (200,200) (250,250) (60,250) (10,200)
Tint #ff00ff O:100
Region (20,10) (210,10) (210,200) (260,250) (70,250) (20,200)
Tint #ff00ff O:100%
Region (30,10) (220,10) (220,200) (270,250) (80,250) (30,200)
Tint #0000ff O:50%

When you open the file in the Monkeybone viewer, this is the result:

The Monkeybone viewer is available for download on this page.

Using regions

Regions are used to define a path or an area for later use. The Region instruction takes any number of coordinates (3 or more), and stores them in memory. The region can then be used for drawing. The following example is done in Notepad. I have created a text-file, changed the file ending from .txt to .mob. In the file, I have added these three lines of text:

Clear #ffffff 70x70
Region (10,10) (60,10) (60,60) (10,60)
Line Region #ff00ff

When loaded in the Monkeybone viewer, this is the result:

When regions are created using the MonkeyboneWriter class, they are much easier to manipulate. This example defines a shape, writes it, manipulates it, and writes it again.

Module Module1

    Sub Main()

        'Create a Monkeybone stream.
        Using W As New Monkeybone.MonkeyboneWriter("C:\regions.mob", 130, 130,

            'Define a region.
            Dim R As New Monkeybone.Instructions.Region()
            R.AddPoint(10, 110)
            R.AddPoint(60, 10)
            R.AddPoint(110, 110)

            'Write the region to the stream.

            'Write an instruction to draw the region outline in green.
            Dim L As New Monkeybone.Instructions.Line()
            L.Color = Drawing.Color.Lime
            L.UseRegion = True

            'Modify the region (move it 10 pixels to the
               left and 10 pixels down) and write it again.
            R.Move(10, 10)

            'Write an instruction to draw the region outline in yellow.
            L.Color = Drawing.Color.Yellow

            'Flush and close the stream.
        End Using

    End Sub

End Module

The code produces the following mob file:

Clear #000000 130x130
Region (10,110) (60,10) (110,110)
Line Region #00FF00
Region (20,120) (70,20) (120,120)
Line Region #FFFF00

This is the result when it is loaded into the Monkeybone viewer: