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[…]
The Monkeybone Viewer (1.4) has improved HTML5 export support and a new slideshow feature. The slideshow can display png, mob and jpg images in a specific folder. Download link on this page.
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.
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[…]
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 290×200 #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[…]
The Monkeybone file format is frozen and a description of the format is added to the Help menu. Direct download.
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 200×200 #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[…]
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 400×300 #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) Blur //Outline it. Line #000000 Region //Type out what filters[…]
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 400×300 #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[…]
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 70×70 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()[…]