JavaScript, Canvas y Marte

Para aquellos de vosotros que querais entender como funciona la demo Mars Canvas de Mathieu 'p01' HENRI aquí os dejo el código 'des-minificado' con algún que otro comentario explicativo.

window.onload = function(){
  var canvas = document.getElementById('lienzo');
  var g = canvas.getContext('2d');
  var z = 9;
  function pasoAnim() {
      //El fotograma anterior se desplaza hacia abajo 1 pixel y su ancho se amplifica en un 5'6%
      g.drawImage(canvas,8,0,300-8,150-2,0,1,300,150);
      //Difuminación del fotograma anterior 
      g.fillStyle='rgba(10,0,39,0.1)';
      g.fillRect(0,0,300,150);
      //Avance del visor
      z+= 88;
      //Nuevo horizonte
      g.fillStyle='#740';
      for(var x=74;x>=0;x--) {
        //Proyección de la altura correspondiente a (x,z) en el mapa
        var y = 75+Math.sin(z+x/27+Math.sin(x/9)*Math.sin(z*2-x/15))*20;
        g.fillRect(x*4,y,6,2);
      }
  }
  setInterval(pasoAnim,10);
}

Descubrí esta curiosa demo gracias a anieto2k.com, uno de los mejores blogs sobre desarrollo web.

Aquí podeis ver en funcionamiento el código anterior con algún añadido: pulsando sobre la imagen podemos parar y reactivar la animación.

Por cierto, como curiosidad, si en Firefox os colocais sobre la animación y mediante el menú contextual vemos la imagen el navegador aplicará por nosotros el método toDataURL() de Canvas con lo que obtenemos un URI data:image/png;base64 que podemos ver en el campo URL del navegador.

Advertencia:
Parece que el Firefox 3.0.1 hay algún problema con la función drawImage cuando los rectangulos inicial y final no tienen las mismas dimensiones. Hay que actualizar el navegador.