<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
   <title>HTML5  Fractales: Courbe du dragon</title>
   <script type="text/javascript">
   //<![CDATA[
      var niv=0,lim=14,wid=896,hei=640; // nombre de niveaux et dimension du canvas
      var cnv,ctx,dir,pas,x,y,spp=false; // spp: superposition des courbes
      
      function F() {
         if (niv&1) {
            if (dir&1) {if (dir&2) ctx.lineTo(x+=pas,y+=pas); else ctx.lineTo(x-=pas,y-=pas);} 
            else       {if (dir&2) ctx.lineTo(x-=pas,y+=pas); else ctx.lineTo(x+=pas,y-=pas);}
         } else {
            if (dir&1) {if (dir&2) ctx.lineTo(x,y+=pas); else ctx.lineTo(x,y-=pas);} 
            else       {if (dir&2) ctx.lineTo(x-=pas,y); else ctx.lineTo(x+=pas,y);}
         }
      }
      function X(k) { // voir Règles sous L-Système
         if (--k>=0) {X(k); dir++; Y(k); F(); dir++;}
      }
      function Y(k) { // voir Règles sous L-Système
         if (--k>=0) {dir--; F(); X(k); dir--; Y(k);}
      }
      function Hil() {
         if (++niv>lim) {niv=1; ctx.clearRect(0,0,wid,hei);}
         var k=(niv+1)>>1;
         dir=4-k; pas=1<<(9-k); x=wid>>2; y=(3*hei)>>3;
         if ((!spp)&&(niv>1)) ctx.clearRect(0,0,wid,hei);
         ctx.beginPath(); ctx.moveTo(x,y); F(); X(niv); ctx.stroke(); ctx.closePath();
      }
      function Ini() {
         cnv=document.getElementById('cv'); cnv.width=wid; cnv.height=hei;
         ctx=cnv.getContext("2d"); Hil();
      }
   //]]>
   </script>
</head>

<body style='background-color:#BBBBBB;' onload='Ini()'>
   <canvas id='cv' onclick='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_du_dragon'>Courbe du dragon</a>
      <p>Règles du L-Système: &nbsp; &nbsp; X → X+YF+ &nbsp; &nbsp; Y → -FX-Y</p>
      <a href='../Dragon.zip'>Zip des codes</a>
   </div>
</body>
</html>