We’d like to announce the latest random fun project from Carsonified: Brickify!
Give Brickify a URL for an image and it converts the image into a LEGO brick schematic diagram and gives you an inventory of how many bricks (and what colors) you need to buy to construct it.
Turning a picture into a brick pattern isn’t the kind of problem we solve every day, but HTML5 technologies made it relatively easy. We use the canvas to load the user’s image and process the pixels in the image into bricks. We also use the canvas to tile brick images together to form an isometric view of the final production. jQuery helps out with basic manipulation in the UI, and we use Sammy.js and Underscore.js to glue everything together.
We also put together a showreel explaining the ideas and process behind building it, along with a little timelapse of us constructing the Carsonified logo. Hope you enjoy it! 🙂