Curated by Carsonified

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Feature 45

Meet Brickify, the new Carsonified App

By @ryancarson

21 January 2011 | Category: Asides

We'd like to announce the latest random fun project from Carsonified: Brickify!

Brickify.com logo

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.

Carsonified team holding the LEGO Carsonified sign

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.

Carsonified, Twitter and the old Apple logos made out of LEGO

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! :)

I’m proud of our team who threw this together in a couple days :) @allison_house @nickrp @commondrea @jimrhoskins – well done guys!

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

Comments

  • http://twitter.com/Renniks Mark Skinner

    This looks amazing!
    well done :)
    I bet it was great fun too, in the new offices I assume?

  • Anonymous

    This is awesome! Congrat to the team

  • http://carsonified.com Ryan Carson

    Thanks Mark! Yup, done in our new Orlando office :)

  • http://twitter.com/ibrahack ibrahack

    omg love the app, love the video! well done guys!

  • Mammakerri

    VERY VERY cool! LOVE it!!

  • http://carsonified.com Ryan Carson

    Thanks Ker! Love you girl :)

  • http://twitter.com/ZachDowd ZachDowd

    That’s awesome! I was hoping it was in tables, Stweetfightr style!

  • http://twitter.com/rteslya Roman (Wolf) Teslya

    Great work! :)

  • http://carsonified.com Ryan Carson

    Thanks Roman :)

  • http://carsonified.com Ryan Carson

    Thanks Roman :)

  • http://carsonified.com Ryan Carson

    Gracias! ;)

  • http://carsonified.com Ryan Carson

    Gracias! ;)

  • http://carsonified.com Ryan Carson

    Cheers :) We had a blast creating it.

  • http://carsonified.com Ryan Carson

    Cheers :) We had a blast creating it.

  • http://twitter.com/MrBen_A mrben

    Great app guys…im going to dig out some images to Brickify.
    like the gif too :)

  • https://www.xeoscript.com Muhammed K K

    Great work guys, I just made a brickified logo of xoescript. looks cool

  • Bruno Passos

    Brilliant app! Brilliant team and the way you guys interact with eachother! good work.

  • http://carsonified.com Ryan Carson

    Cheers Bruno :)

  • http://carsonified.com Ryan Carson

    Awesome – would love to see it!

  • https://www.xeoscript.com Muhammed K K
  • Dan

    i chanted minecraft as i read this.

  • http://carsonified.com Ryan Carson

    LOL

  • http://carsonified.com Ryan Carson

    AWESOME :)

  • http://www.dribbble.com/players/allison Allison House

    I chanted Minecraft as I made this!

  • http://twitter.com/sebastiangreen Sebastian Green

    Again, blown away by you guys. Is there anything you won’t try? Prob not. Is there anything you won’t succeed in. Prob not.

    Great app.

  • http://carsonified.com Ryan Carson

    Oh, wow, that’s very kind. Humbled by that. We’re just trying to have fun :)

  • http://doctype.tv/ Nick Pettit

    Woohoo! Love me some Minecraft. :)

  • http://doctype.tv/ Nick Pettit

    Thanks Sebastian! Glad you like it. :D

  • http://doctype.tv/ Nick Pettit

    Animated gifs are so much fun!

  • http://www.facebook.com/victoraldabalde Victor Aldabalde

    excellent work guys! very cool

  • http://carsonified.com Ryan Carson

    Cheers :)

  • http://twitter.com/ryan_kenward Ryan Kenward

    awesome!! really cool! next step….combine it with this http://www.wired.com/gadgetlab/2010/10/legobot/

  • http://twitter.com/rarescosma Rares Cosma

    Hope you don’t mind if I reverse engineer this awesome app to run on PHP. URL not publicly available, of course. #china

  • http://carsonified.com Ryan Carson

    Do it! :)

  • Daniel Von Fange

    You prefer Sammy’s routing to Backbone.js’s?

  • Anonymous

    I prefer Sammy.js routing to backbone’s (right now). I do like backbone overall a litlle bit better. They are both developing rapidly, but it’s great to have a few great choices now for structuring JS apps.

  • Anonymous

    Wow, that would be awesome! Although it is a lot of fun constructing a big sign by hand with sone friends. We had a blast putting this one together.

  • http://twitter.com/joshbutner Josh Butner

    Egads, I’m a total fanboy for everything Carsonified is/does (and this is no exception), but this article and video leaves me with one thought: did you just invent ‘brixels?’

  • http://carsonified.com Ryan Carson

    Bonus points for you, my friend :)

  • http://twitter.com/joshbutner Josh Butner

    There’s more brainsplosions and awesomalgamations where that came from if you’re into hiring bearded gents such as myself.

    :hint:hint: :-)

  • http://carsonified.com Ryan Carson

    Got it! ;)

  • Andy

    This is very cool. Have just made a mockup of our company logo and priced it out at Lego.com – parts are going to come to just under £100 including shipping. Now I just have to convince the boss to pay for the bricks!

  • Williams Tootototot Rob

    That’s the trick :)

  • Andy

    Just a quick update – the boss approved the purchase and the Lego has arrived. We’re building it as we speak and should have some pictures up really soon!

  • http://carsonified.com Ryan Carson

    Nice! :)

Learn Web Design!

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.