by envis precisely

23. & 24. Nov. 2012 — Munich, Germany
Share on Twitter Share on Facebook

The Avatar-Generator

push.conference is all about bringing together design and technology to create great experiences. As a preview of what awaits you, we composed the push.generator for you to play with.

Simply enter your name and see how your very own personalized push.avatar comes to life. If you like your push.avatar, share it!
By the way: it’ll be waiting for you when you come to push.conference in November...

How it was done

Being Interaction Design enthusiasts ourselves, we coded the generator using Three.js and CoffeeScript. The live 3D rendering takes place in a canvas element which makes it compatible with all modern browsers.
The 3x3x3 cubes are displaced by each letter you enter. The amount of rows affected is based on the letter frequency in the German alphabet. The position of a letter in the text influences the direction of the movement that is caused by it.