Amazon AWS 3D cubes with Impress.js

Screen Shot 2013-10-07 at 4.39.22 PM

After a while I’m back on my blog to post about my small experience with Impress.js

Some time ago I was involved in a hiring process with Amazon AWS and a part of the interview process consists in preparing a 30 minutes presentation on an Amazon service. So what I did is using Impress.js to try to impress them, designing the Amazon AWS logo with impress.js and navigating through it in a cool 3D way.

Sadly this didn’t worked, I didn’t get hired :-), but this post is not about me but is about how cool is Impress.js and all the nice things you can do with it.

The funny part in my presentation was to create some 3D cubes using Impress.js, that part was quite easy and I got some inspiration by this presentation from Le Zhang.

The only difference is that my first cube face is built around the 0 coordinate. This makes creating the other faces and additional cubes way simpler, as they are just simple math operations around the 3 axis.

Another trick to have a good look to how the cube is coming out is to use the first step of the presentation as a “Camera” on your draw. This means that this first slide needs to be moved of almost 30 degrees and put on an higher position compared to your cube front face.

I think that by looking at the simple HTML source of the presentation you will immediately get the idea especially if  you already put your hands on Impress.js.

The down side when creating a lot of Cubes is that, as they are marked as “step”, Impress.js will navigate through all the cube faces.
To go over it I then wrote a simple JS script that will override the keyboard press event allowing me to navigate over an array of DIV marked as “real-step” using the anchor navigation already offered by Impress.js.

Following you can see the script I wrote and off course fill free to use/improve/don’t care.

var slideNavigator={
    steps: [],
    index: 0,

    init:function(){
        var realSteps = $('.real-step');
        $('.real-step').each(function(index, el) {
            slideNavigator.steps.push(el.id);
        });
        slideNavigator.index = Math.max(0, slideNavigator.steps.indexOf(document.location.hash.replace('#/','')));
        slideNavigator.overrideNavigation();
    },
    moveToNext:function() {
            slideNavigator.index++;
            if(slideNavigator.index >= slideNavigator.steps.length) slideNavigator.index = 0;
            document.location.href = '#/' + slideNavigator.steps[slideNavigator.index];
    },

    moveToPrevious:function(){
            slideNavigator.index--;
            if(slideNavigator.index < 0) {
                slideNavigator.index = slideNavigator.steps.length-1;
            }
            document.location.href = '#/' + slideNavigator.steps[slideNavigator.index];
    },
    overrideNavigation: function () {
        $(document).keyup(function(e) {
            if(e.which == 39 || e.which == 32) {
                e.preventDefault();
                slideNavigator.moveToNext();
            }

            if(e.which == 8 || e.which == 37 ) {
                e.preventDefault();
                slideNavigator.moveToPrevious();
            }
        });
    }
}

For make it works than is enough to mark the step you want to include in your custom navigation list with a class called real-step. Of course you must call the init function in your page and include JQuery too.

Here an example of usage

<html lang="en">
  <head>
    <title>Custom Navigation Example | by Mauro Rocco</title>
    <meta charset="utf-8" />
    <link href="css/main.css" rel="stylesheet" />
  </head>

  <body>
    <div id="impress">

        <div id="start" class="step real-step" data-x="0" data-y="-1000" data-z="4000" data-scale="5" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="10">
            Sample step
        </div>

        <div id="definition" class="step" data-x="-1550" data-y="700" data-z="1450" data-rotate-x="15" data-rotate-y="-110" data-rotate-z="15" data-scale="1">
            This step will be jumped as is not marked with the class real-step
        </div>

        <div id="definition" class="step real-step" data-x="-1550" data-y="700" data-z="1450" data-rotate-x="15" data-rotate-y="-110" data-rotate-z="15" data-scale="1">
            Sample step 2
        </div>

    </div>
    <script src="js/impress.js"></script>
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/navigator.js"></script>
    <script type="text/javascript">
      impress().init();
      //Custom navigation init
      slideNavigator.init();
    </script>

  </body>
</html>

If you are curious how the Amazon AWS Logo looks with impress you can take a look at an extract of my presentation HERE, please note this code was tested only on Firefox, Safari and Chrome.

The full source code of this example is also available on my GitHub account: https://github.com/fireantology/impressjs-amazonaws-cubes.

Many thanks to my friend @lucidstack to help me speed up on the presentation in a rainy Sunday afternoon.