July 12, 2012 - Comments Off on Making of “Build with Chrome”

Making of “Build with Chrome”

display-lego-google-original-bitar-1
LEGO GOOGLE CHROME REALTIME3D WEBGL DESIGN BUILDER

North Kingdom project — This spring I was involved in a really fun project for a Google Maps and LEGO® as a Art/Design director with focus on the build section. The whole concept is about you building LEGO creations on a map of Australia (LEGO turns 50 years in Australia this year), where you claim your own spot on the map. It´s called “Build with Chrome”. I have always been a huge LEGO fan so it was a great project to be involved in! The result was pretty OK, specially the "builder" that rocks big time with an amazing programming solution, but the limitations of how we could use/hack the Google map pulled down the result a little, I think.

Direct link — Build with Chrome
More information — North Kingdom

build-mode

A rough mock up by Alfredo Aponte, our User Experience Designer. He was the guy solving the seemingly impossible.

not-lego-digital-designer

LEGO Digital Designer is a program you can download for free to build complex LEGO models. A program that became a close reference about what we was going to build. However, this program was in our eyes to complicated and to hard to use, so our focus was to make our "builder" much more easy and playful to use.

lego-iso
klas-lego-wip-2

Klas Kroon, our programmer and the brain behind the builder, made lot of different prototypes and developments. These prototypes helped us to early see what we could do and not. The client described his work as 'like Christmas morning waking up to see what North Kingdom had delivered next'.

"Having recently worked with particles, my mindset was set to that.. So my initial idea was to treat the LEGO bricks as particles or several particles makes up a brick, etc.. The idea is to use a sprite/particle of the smallest brick and so on. 1 vertex = 1 sprite. So this is not “real” 3d, but more isometric/ortographic, no perpective. Here´s the first test, so you can see what I mean:

...

One of the early ideas was to have some sort of terrain variation, here´s a test of that:
(Mousedown and drag left/right to rotate, arrowkeys to pan)

Isometric 5 (flipped)

... So I tried with the more classical approach, that is more on par with the LEGO Digitial Designer, which is really nice, but it’s more advanced and more “cad” than what we were aiming for here.
Builder 2

One that tested autosaving with local storage.
Builder 4

Klas Kroon, North Kingdom

Read more about his explorations around this project at OutsideOfSociety — Build with Chrome

lego-google-_rob-skiss-2
lego-google-_rob-skiss-3

Above are my first mock ups on the same screen. We all wanted a very simple solution regarding "the builder", therefor I thought a clean open design would match that idea when we also had Google to think about. Some big juicy LEGO bricks would make it more playful and interesting, we still want it to feel LEGO right?

lego-screen-2

Final interface design by Jonas Eriksson.

google-chrome-anim

We also did a LEGO version on the Google mnemonic; a 3 seconds 3D animation. Conceptually; very simply idea with a Google logotype explode into LEGO bricks that would go around its core, but it was for sure little tricky to get correct. Above you see my rough direction of how I saw it would work.

lego-build-anim-big
lego-animatic-stills

Mathias Lindgren, our 3D artist, put it alive in 3D Studio Max.

Published by: Robert Lindström in Behind the scene, Interactive
Tags:

Comments are closed.