<!DOCTYPE html>
<html>
<head>
   <title>HTML5  Fractales: Courbe de Hilbert en évolution</title>
   <script type="text/javascript">
   //<![CDATA[
      var niv=0,lim=7,siz=4<<lim; // nombre de niveaux et dimension du canvas
      var cnv,ctx,dir,pas,tmr,spp=false; // spp: superposition des courbes
      var x,y,iD,nD,D=new Array(1<<(2*lim));
      
      function F() {D[nD++]=3&dir;}
      
      function L(k) { // voir Règles du L-Système
         if (--k >= 0) {dir++; R(k); F(); dir--; L(k); F(); L(k); dir--; F(); R(k); dir++;}
      }
      function R(k) { // voir Règles du L-Système
         if (--k >= 0) {dir--; L(k); F(); dir++; R(k); F(); R(k); dir++; F(); L(k); dir--;}
      }
      function Hil() {
         if (++niv > lim) {niv=1; ctx.clearRect(0,0,siz,siz);}
         if ((!spp)&&(niv>1)) ctx.clearRect(0,0,siz,siz);
         nD=0; dir=3; pas=siz>>niv; L(niv);
         iD=0; x=siz>>(niv+1); y=siz>>(niv+1); tmr=setInterval('Evo()',256>>niv);
      }
      function Evo() {
         var d=D[iD++],x0=x,y0=y;
         if (d&1) {if (d&2) y+=pas; else y-=pas;} else {if (d&2) x-=pas; else x+=pas;}
         ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x,y); ctx.stroke(); ctx.closePath();
         if (iD>=nD) clearInterval(tmr);
      }
      function Ini() {
         cnv=document.getElementById('cv'); cnv.width=siz; cnv.height=siz;
         ctx=cnv.getContext("2d"); Hil();
      }
   //]]>
   </script>
</head>

<body style='background-color:#BBBBBB' onload='Ini()'>
   <canvas id='cv' onclick='clearInterval(tmr); Hil();' style='background-color:yellow; cursor:pointer;'
      title='Cliquez pour passer à la courbe suivante'>Your browser does not support HTML5 canvas
   </canvas>
   <div>
      <br/><br/>Wikipédia: &nbsp;
      <a href='http://fr.wikipedia.org/wiki/Courbe_de_Hilbert'>Courbe de Hilbert</a>
      <p>Règles du L-Système: &nbsp; &nbsp; L → +RF−LFL−FR+ &nbsp; &nbsp; R → −LF+RFR+FL−</p>
      <a href='http://www.william-voirol.ch/Prog/Fractales/Hilbert.zip'>Zip du code<br/></a>
   </div>
</body>
</html>