Information, tools, and thoughts on tabletop games, video games, and their worlds

Mosaic Maker

Recently, I have been working on a mosaic image maker. It was part of a challenge test, but I have since decided to clean up the code a little and share it. As per the initial requirements, it does not make use of any JavaScript libraries — it’s just pure JavaScript.

What it does

First of all, you browse for and upload an image to it. It then converts that image into a mosaic image of circular tiles. Finally, you can right click on the resulting mosaic image to save a copy of it to your computer. Simple, right?

Features and restrictions

The mosaic maker will accept almost any type of image file. Furthermore, each of the circular mosaic tiles has a customisable width and height. However, the application won’t let the tiles be larger than the original image in either their width or height and it only works with images (naturally).


There is an example shown below — the original image to the left and the mosaic image to the right. Also, there is a screenshot of the web application itself with a generated mosaic image. (The awesome Diebbie drew both of the images shown in the examples.Thank you! )

Mosaic Maker: Sha
Mosaic Maker screenshot

My mosaic maker is not entirely finished as there are a couple more things I would like to improve. For instance, there is little error checking and it only works on more modern browsers — two things that are quite easy to fix. Nevertheless, you can still try it out yourself . Additionally, you can view and download the source code on github .

Monday, 15 August, 2016

Leave a Reply