Mosaic Conversion Program

(January 2009)

How to turn

this

into

this

?

1. Introduction

In 2003 I bought myself a legal copy of Visual Basic, to write a program to convert images to the colour-palette of LEGO (or ministeck). It was quite an investment, because this new software also required Windows XP Professional. The computer on which I installed the software, was replaced by a laptop in 2007... with Windows Vista as operating system. Unfortunately Vista doesn't support my version of Visual Basic, so everytime I want to do something with mosaics I have to start up that old computer again. That very old and very, very slow computer...
But at the end of 2008 - when I was looking around for another laptop with twinload Vista/XP - I made a great discovery! Microsoft has a Visual Basic 2008 Express Edition for free download available. Yippie!! That was a sign for me to make a new start. I immediately started digging the Visual Basic Help-pages: my first program was a rather unfinished product and desperately needed some modifications. I may be good with mathematical algorythms, I'm certainly not a programmer...

This is what I ended up with (and there's still room for improvement):
(The images used as example on this page are beautiful landscapes of Ravensburger-puzzles)

2. The program

Tabpage 1: Open File


The first tabpage only shows two buttons. By clicking the "Select Image"-button, Windows Explorer pops up. It permits the user to browse the computer searching for a suitable JPEG-image (only .jpg-files, because other file-extensions caused unexpected errors). The "Clear Current Image"-button was added to give the user the possibility to convert other images too, without having to close and reopen the application (I got weird error-messages without this small piece of code). The left picturebox holds the original image, the result of the conversion belongs in the picturebox on the right. In this stage it is also important that the user chooses what type of mosaic will be made: a studs-up mosaic or a studs-out mosaic (and what type of baseplates will be used). This choice is necessary for later data-output.

Tabpage 2: Colour Table

The second tabpage shows the user all the available colours, in different colour-palettes: "standard" LEGO-colours, standard ministeck-colours, greyscale ministeck-colours and sepia ministeck-colours (unfortunately these sepia-colours are no longer produced, I'll have to do it with my current supply by taking apart the mosaic of my children).
Clicking the button on top of each colour-palette results in selecting all the colours in that palette (one exception: the sepia-palette also picks black and white from the greyscale palette). But the user can always check or uncheck one colour at a time.

Tabpage 3: Conversion

The third tabpage shows a lot more buttons. The three buttons on the left are button-styled checkboxes. They can be checked/unchecked at any time (before conversion).

"Floyd-Steinberg Dithering": because the results of all the different dithering methods don't differ a lot, I chose to only incorporate the Floyd-Steinberg algorythm (the best example is of course my Level 42-mosaic). Not clicking this button/checkbox simply results in a straight conversion-method (e.g. Bob the builder).
"Brickwall": check this button if you want to make a brickwall mosaic. No matter what elements you use (only 1x2 plates, only 2x2 bricks, only 1x4 bricks,...), you'll always have a very sturdy mosaic. Or, in case you want to make a studs-out mosaic: you won't need hard-to-find 1x1 plates. This is a good example; new to this program is the possibility of making a brickwall mosaic with dithering.
"Less Grey": have you noticed that an image after conversion always shows more grey pixels than one would expect? Clicking this button/checkbox gives you the possibility to diminish the total amount of grey elements. Pixels should only turn grey if they really are grey! If not, they should turn into the second best matching colour. In the corresponding textbox a number between 1 and 100 can be written: "100" will result in approximately the same as if this checkbox hadn't been checked, "1" will result in extremely few grey pixels. The textbox standard shows "40": this usually leads to very acceptable results (typically 30 to 40% less grey pixels). Do you see much difference between this and this conversion? Well, there is.

There is also a button to minimize the total amount of 1x1-elements, which comes in extremely useful when converting an image to the greyscale or sepia colour-palette without dithering. For every 1x1 element in the resulting image, all the neighbouring pixels are checked: if one of these neighbouring pixels has a colour that is almost the same (only one shade of grey/sepia different), then this 1x1 element can disappear. Or the 1x1 element is removed (turned into the same colour of the best matching neighbouring pixel), or it becomes a 1x2 element (making the best matching neighbouring pixel disappear).

Finally there's a button to maximize the result: a new window pops up showing the converted image fitting to the entire screen. This gives you the possibility to make some changes (check/uncheck colours, check/uncheck dithering,...) until you are satisfied with the result.

Tabpage 4: List of Materials

This tabpage has only two buttons:

Clicking the button "List of Materials" results in a pop-up screen with a list of all the ckecked colours and the total amount of pixels for each colour. This list of materials should also be used as legend: the first column shows an abbreviation or code for every colour used. These abbreviations/codes are used in the printouts. The second column shows the colour-name, the third column the total amount of pixels used per colour, the last column is the total amount of 1x1 elements at least required. Everytime 2 or more adjacent pixels have the same colour, a larger element can be used instead.
If you click the "Generate Code"-button, you'll have to be very patient: this is the part that requires the most calculations (and that's why I included another messagebox to let the user know when it's finished).

Looking back at our previous example of dithering with/without "less grey": the standard dithering required 17121 (=3420+13701) grey pixels (with dark grey being the - totally unexpected - most occuring colour!), dithering with less grey required 9908 (=2834+7074) grey pixels. Thats more than 40% less grey!

Tabpage 5: Save Files

On the final tabpage you find three buttons that give you the possibility to save all the files. Every time Windows Explorer pops up to let you browse through your documents to find the right map to store your data.
The converted image is saved as a .png (that's the only file-format that doesn't change the colour-values).
The list of materials is a simple .txt file, that can be opened (for printing) with any word processor or spreadsheet you like to work with. If your program asks you what character set to use, just don't choose Unicode...
And finally the generated code can be saved as a .doc, that can be reopened with a word processor (I recently installed OpenOffice.org because our legal version of Word/Excel can only be installed on Windows XP and not on Vista anymore...). This time, if your program asks you what character set to use, make sure you choose Unicode.

3. The output

The image on the left shows an excerpt of the output code that was generated from the previous example (with 80x64 ministeck baseplates). The printout pages are in portrait-orientation with 40 columns and 32 rows each, resulting in four pages for one ministeck baseplate.

The image on the right shows one page of a mosaic with dithering and brickwall structure (to avoid the use of 1x1 elements). With 48 columns and 24 rows, you only need to print two pages to cover one 48x48 baseplate.

The black lines between two different colour-areas are special characters from the "Courier new" character-set. It's exactly the generation of these frame-lines that makes the code generation such a time-consuming task: the borderlines on the right and bottom of each page are repeated on the next (adjacent) pages, which makes this type of output very easy to read.
You'll also notice light grey lines: I added a background image to each template, according to the choice of baseplates that was made on tabpage 1. These light grey lines will become very useful if you make a mosaic with large areas in the same colour...

4. The problems

1. The input file

I lack programming skills to cut/crop images. Therefore it is absolutely necessary that the user selects an input file that is already the right size for conversion: for any mosaic you want to create, you need an input file that is exactly 4 pixels extra, both in height and width. I have this very old program Picture Publisher 6 (legal software that costed me approx. €5). It's probably not as good as Photoshop, but I really like to work with it.

2. Colours

I think I have most colours defined, but it might be useful to have the possibility to add more colours to the colour table. Or even better: I may give the user the possibility to change the current RGB-values of a colour. To be able to do that I'll have to study the Help-section of Visual Basic a little bit harder...

3. Scaling

You may have noticed that the maximized result in this image is a bit blurry. I actually wanted to scale the image (as much as possible, depending on the size of the original image), but I discovered that there was something wrong with the scale-property in this version of Visual Basic. I didn't dig any further to find a solution.
If you want to make a studs-up mosaic the input image should also be properly scaled before conversion. To "see" the converted image, it has to be rescaled manually.

4. Reduce 1x1 elements

This works extremely well with greyscale or sepia coloured images generated without dithering: 1x1 element-reduction of up to 90% where you hardly see a difference in image-resolution. It works okay in many other situations (e.g. landscapes). But I'm not always totally satisfied when I try it on a portrait with dithering: then you really see a change in image-resolution...

5. Element count

There is no element count in my program! At least not for bigger elements. Only 1x1 elements are counted (where all four neighbouring pixels are different). This doesn't mean that you won't need more 1x1 elements as displayed. Imagine a T-shaped area with 4 pixels: you'll need a 1x3 element (or a 2x2 corner) + one extra 1x1 element. It's just an indication of the total amount of required 1x1 elements.

6. Templates

I created a template in swriter (OpenOffice.org equivalent of Word) for each type of baseplate not only to minimize the number of pages to be printed, but especially to have different baseplates printed on different pages (very useful if you like to build bigger mosaics with a bunch of friends where everybody can build his own baseplate). The text-size in these templates was always 10, no matter what I tried. With textsize 10 you need a lot more pages (e.g. 4 pages for 1 48x48 baseplate, 8 pages for 1 80x64 baseplate,...). So I added one manual step: select all text, and change textsize to 8...

7. Output type

It may have been a better choice to save output data to a spreadsheet. In this case everybody could setup his own print-margins and page-orientation. Unfortunately being a non-programmer means that I don't know how to handle spreadsheets in Visual Basic. On top of that I couldn't figure out how to automatically add cell-borders between two different pixels to make that nice-looking output I have.

5. Conclusion

I call it a real achievement, compared to the program I had on my old computer. It is much more a finished product... but not entirely. And that's exactly why it still won't be available online.

But: I will go to LEGO-events in the future. I will take my laptop with me. I will be demonstrating my program to the public, giving the people the chance to make their own mosaic. And if you bring an SD-card or USB-stick containing your image, I may even decide to put the output data on it, too...