Philae Lander Animation on HTML5 canvas and JavaScript

I congratulate the entire team on this historic event for landing a spacecraft on a comet. It is a proud moment for everyone involved in this mission, especially the programmers. You have worked day and night to make this a success. I can feel it too. This article is a tribute to your achievements.

Animation using HTML5 canvas

Here, in this article, we will create an animation using HTML5 canvas and JavaScript. This is not something very big we will see here. All we are going to do is, create an HTML5 canvas, add couple of images on the canvas and animate or scroll the canvas.

See this demo

The first image on the canvas is the spacecraft Philae, slowly descending (animated) on the comet. In the background, we will animate the night sky. Later, we will make the sky roll on the canvas from right to left.

The Markup

We will add the HTML5 <canvas> element in the Markup section of our demo. The <canvas> element allows web designers to design graphics on browsers. For designing breath taking graphics and animation, will require more than just a <canvas>. We need scripts (JavaScript of JQuery), which will make it more dynamic and attractive. In fact, you will find more activities in the script section of this demo.

<!doctype html>
<html>
<head>
    <title>Animation on HTML5 canvas and JavaScript</title>
</head>

<body>
    <canvas id="canvas" width="700" height="400">
        Sorry. Your browser does not support HTML5 <canvas> element. (encodedna.com)
    </canvas>
</body>

<script>
    // DEFINE CANVAS AND ITS CONTEXT.
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var canvas_W = canvas.width,
        canvas_H = canvas.height;

    // START DRAWING WHEN THE PAGE LOADS.
    window.onload = function () {
        drawSpace();
    }

    function drawSpace() {
        ctx.beginPath();
        ctx.fillStyle = '#000';                         // NIGHT SKY (ADD COLOR BLACK).
        ctx.fillRect(0, 0, canvas_W, canvas_H);         // FILL THE CANVAS.

        // ADD NIGHT STARS.
        for (var i = 0; i < 100; i++) {
            ctx.fillStyle = '#FFF';                     // COLOR IT BRIGHT.

            ctx.fillRect(Math.floor(Math.random() * canvas_W),
                Math.floor(Math.random() * canvas_H), 2, 1);
        }

        drawImage(ctx);

    }     // drawSpace() END.

    function drawImage(ctx) {

        // ADD AN IMAGE OF THE SATELLITE (PHILAE) AND A COMET.
        // THIS REMAINS STATIC ON THE CANVAS.

        var imgPhilae = new Image();
        imgPhilae.src = 'https://www.encodedna.com/html5/canvas/Philae.png';

        var imgComet = new Image();
        imgComet.src = 'https://www.encodedna.com/html5/canvas/comet.png';

        // CONVERT THE WHOLE CANVAS INTO AN IMAGE.
        var imgSpace = new Image();
        imgSpace.src = ctx.canvas.toDataURL();

        // NOW, LET US ANIMATE THE SPACE WE HAVE CREATED.
        var ve = 1;

        imgSpace.onload = function () { animateSpace(); }

        function animateSpace() {
            rollit();
        }

        function rollit() {             // SCROLL IT FROM RIGHT TO LEFT.

            if (ve >= canvas_W) {       // REACHED THE END OF OUR CANVAS, RE-SET.
                ve = 0;
            }
            ve += 1;

            ctx.drawImage(imgSpace, -ve, 0, canvas_W, canvas_H);
            ctx.drawImage(imgSpace, canvas_W - ve, 0, canvas_W, canvas_H);

            // DRAW THE STATELLITE AND COMET.
            ctx.drawImage(imgComet, 0, 360);
            if (ve >= 120) { ctx.drawImage(imgPhilae, 130, 270); }
            else ctx.drawImage(imgPhilae, 10 + ve, 150 + ve);

            window.setTimeout(function () {
                rollit();
            }, 60);
        }
    }
</script>
</html>

Try it

We will define the canvas (by its ID) in the initial part of the script. A single page may have more than one <canvas>. Therefore, the ID is important for reference in the script. Along with the ID, we have defined the width and height attribute of the <canvas>.

The next thing we have done, is call the getContext() method, using a string called 2d. The method provides us with many properties, which will help us with our graphics and animation scripts. We can now draw an image, create boxes, shapes etc. However, we are not covering every property in this article.

Function "drawSpace()"

This is not a predefined function, but we have defined it. We will simulate the space (the final frontier). No, we are not going deep inside it. It is not my subject. It is just a theme. A space and a few shining stars, to replicate the spacecrafts handing on a comet.

Function "drawImage()"

Here in this function we will add two images on the canvas, the spacecraft Philae and the image of a comet (not the real comet I guess). The animation happens inside the rollit() function. It is an infinite loop, set by window.setTimeout() method.

Inside the loop, we are re-drawing the elements repeatedly using drawImage() method. The real animation is the stars, the space and Philae. We have converted the space and star context into an image, and scrolled it from right to left. Finally, the spacecraft slowly descends on the comet.

That is it.

See this demo

← PreviousNext →