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 [...]
Monkeybone Viewer 1.4
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.
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 [...]
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. [...]
Monkeybone Viewer improvements, March 2010
The Monkeybone file format is frozen and a description of the format is added to the Help menu. Direct download.
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 [...]
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 400×300 #707070 //Draw a background. Bar #4477ff X:0 Y:150 W:400 H:150 Set Line Thikness To 3 Line #ffff00 [...]
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 400×300 #000000 Region (10,10) (200,10) (200,200) (250,250) (60,250) (10,200) The Tint filter takes only arguments: The [...]
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 [...]
Some changes made to the viewer
Some changes are made to the Monkeybone viewer, that is not related to the Monkeybone format (*.mob files). These changes are made just to make the viewer more decent. Not only Monkeybone images can be opened. Now, you can open PNG and JPG files as well. Features such as viewing the error log, viewing the [...]
The Monkeybone writer
The Monkeybone Viewer takes a mob file and displays its content on screen. The file stores instructions, such as Bar and Line, as Unicode text. These files can be created by hand using any text editor, such as Notepad (shown here, here, here and here). To automate the generation of the Monkeybone file, you can [...]
Dual coordinate systems
This picture illustrates the different coordinate systems that Monkeybone is using. Both lines are drawn from 0, 0 to 30, 30. The yellow line is drawn using the coordinate system of the image itself, and the green line is drawn using the coordinate system of the diagram. The syntax is the same for DiagramLine and [...]
Installation
The installation program can be downloaded from here or from the Monkeybone page. If you have a previous version of Monkeybone Viewer installed, don’t forget to uninstall that (from the Control Panel) before installing a new version. The installation program registers the MOB file ending with the viewer, so if you double click a Monkeybone [...]
Drawing lines
The basic syntax for drawing lines is this: Use the Line instruction, pass a start coordinate (X1 and Y1) and an end coordinate (X2 and Y2) and a color. This example draws a line across the picture: //Set image size and background color. Clear 400×300 #ffffff //Simple line. Line #000000 X1:0 Y1:0 X2:400 Y2:300 The [...]
Monkeybone: Creating a bar diagram using Notepad part 4/4
Continued from here. To finish this, I want to add some effects, and save it as a png file. Adding shadows To add shadows behind each bar, just add the Shadowed argument to each bar. Example: DiagramBar #ff0000 X:25 Y:0 W:20 H:200 Label=”Apples” Value=”1″ Shadowed Adding gradient background To give the image a gradient background, [...]
Monkeybone: Creating a bar diagram using Notepad part 3/4
Continued from here. Text can be added below and above each bar. To add text below, use the Label argument. To add text above, use the Value argument. I show the complete file content below; the latest additions are highlighted with bold font. The text below each bar is a fruit name, and the text [...]
Monkeybone: Creating a bar diagram using Notepad part 2/4
Continued from here. Bars can be added to a diagram using the DiagramBar instruction. DiagramBar differs from the Bar instruction in that it use a virtual coordinate system (from a previous Diagram instruction) with its zero position in the left bottom corner, as opposed to the image itself that has its zero position in the [...]
Monkeybone: Creating a bar diagram using Notepad part 1/4
To make a diagram by hand using Notepad, start Notepad, click File and Save as. Change the filter from txt to All files. Provide a filename that ends with .mob (I will use bardiagram.mob in my example) and change the encoding to UTF-8. Then, click save. Keep Notepad open and write your instructions there. Open [...]
Drawing bars
To do bars, the Bar instruction is used. It takes the color, position and size as arguments. This code… //Set image size and background color. Clear 100×100 #003366 //Draw a dark blue bar that covers most of the image. Bar #225599 X:10 Y:10 W:80 H:80 …produces this blue rectangle: To do a bar that is [...]
Short introduction to Monkeybone
The posts that I am doing on Monkeybone might only be interesting if you are develop programs that do charting or if you want to be able to produce nice looking charts. Monkeybone is a vector image format, mainly designed for producing bar charts and line charts. Monkeybone images are text files (UTF-8) that are [...]
Comments