So Raven

Stranger in a familiar land

Follow publication

Why I made Image to Brick

A few weeks ago, I was cruising the Reddit procrastination superhighway when I stumbled upon Legoizer, a web application to convert uploaded images to a mosaic constructed out of LEGO bricks. It’s such a simple and beautiful idea that I was surprised to find out that it took some long for someone to finally build it. After playing around with it, I decided that I really wanted to recreate the Great Wave off Kanagawa in LEGO. But before I do that, there were a few limitations of Legoizer I had to overcome.

Therefore, I set out to create my own LEGO mosaic generator with the options I need. The result, Image to Brick, can be seen at www.tobrick.com.

Missing Features

There are five major reasons why I found it necessary to build my own tool as the first step to recreating the Great Wave instead of working with Legoizer.

Feature 1: Color Selection

The first reason is the lack of color selection. Legoizer uses any available LEGO colors it deems necessary to match the given image as closely as possible, which means that it often uses bricks with colors that do not exist in the source picture in order to achieve dithering effects. While this is a reasonable thing to do when the source image is a photo or painting with obvious gradients, this can lead to weird results when the source image has distinct solid colors, such as in the case of a logo. For example, we can see this in a comparison using the LEGO logo:

lego_legoizer
lego_brick
lego_zoom_legoizer
lego_zoom_brick

We see the Legoizer result on the left and the Image to Brick result on the right. Legoizer did a better job of preserving the smooth edges and the overall shape but it has to to aggressive anti-aliasing performed using bricks with odd colors such as Bright Yellowish Green. Image to Brick on the other hand allows the user to predefine five colors for the image: White, Black, Bright Red, Bright Yellow and Dark Stone Grey. This leads to much more intuitive results and the increased aliasing can be compensated by adjusting the mosaic size.

Color palette
Color palette

I felt that reducing/limiting the number of colors use both decreases the complexity of the build process and also results in more LEGO-y results and therefore implemented a selectable color palette in Image to Brick.

Feature 2: Brick Selection

The second missing feature is brick selection. This is less mission critical than color selection, but it proved to be really handy in dealing with situations where it may be difficult to acquire bricks of certain lengths. This is important if you actually want to build the mosaic.

Brick counts required, given selected brick types
Brick counts required, given selected brick types

Feature 3: Dimensions

Another feature that proved to be really useful when planning a LEGO mosaic is to have control over the exact size of the output in number of bricks. Legoizer did not provide this option and appears to consistently produce results of a fixed size for images above a certain resolution. I added this to Image to Brick and it is really nice to be able to adjust the height of the output incrementally to get the right balance between size (i.e. cost) and image fidelity.

Different output sizes for the same input image
Different output heights (in number of blocks) for the same input image

Feature 4: Orientiation

Legoizer produces fix-sized results meant for bricks stacked on top of each other. This is not desirable for me because I prefer to have the studs of the bricks/plates facing the viewer in order to create a more interesting texture. You cannot just take instructions meant by a stacking build and use it for a top-down build because the a single unit of LEGO is square on the top and rectangular on the side and this needs to be taken into account when the algorithm generates the instruction.

Stack vs Top-down

For example, a square image converted to a mosaic of height 20 bricks will, in order to preserve its existing square shape, have a width of 20 bricks in top-down mode but 24 bricks in stacking mode because the width of a stacked brick is smaller than its height.

Feature 5: High-level instruction view

The last feature I need is a good high level view of the entire instruction output. Image to Brick’s generated instruction gives both line-by-line details while simultaneously achieving a good overview of the final mosaic. From having previously helped out on a similar project, I realized that having neighboring lines visualized next to each other was really essential to the building process. It is easy to get lost in the middle of a line and looking at the previous line helps to provide a point of reference.

Instruction view for Great Wave
Instruction view for Great Wave

Conclusion

Coding up Image to Brick was not too bad thanks to DitherJS and the React framework. With the above five features, I now have the tool I need to build The Great Wave off Kanagawa just the way I want it. If you are interested in helping me make that happen, check out my Kickstarter campaign.

Try the tool out for yourself!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Written by Raven Jiang

Cofounder at Arc. Formerly Affinity, Tesla, Facebook, Ubiqutiy6. Grew up in Singapore and based in SF Bay Area.

Responses (1)

Write a response