<!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: Flocon de Koch</title>
   <script type="text/javascript">
   //<![CDATA[ // consultez 
      var niv=0,lim=6,sizX=600,sizY=512; // nombre de niveaux et dimension du canvas
      var cnv,ctx,dir,pas,x,y,spp=false; // spp: superposition des courbes
      
      function Seg(x1,y1,x2,y2) {
         var dx,dy;
         if (--niv>0) { // subdivision
            dy=(y2-y1)/3;
            if (x1==x2) {
               dx=(dy*8+4)/9;
               Seg(x1,y1,x1,y1+dy); Seg(x1,y1+dy,x1-dx,y1+((y2-y1)>>1));
               Seg(x1-dx,y1+((y2-y1)>>1),x1,y2-dy); Seg(x1,y2-dy,x1,y2);
            } else if (x2>x1) {
               if (y2>y1) {
                  dx=(dy*16+4)/9;
                  Seg(x1,y1,x1+dx,y1+dy); Seg(x1+dx,y1+dy,x1+dx,y2);
                  Seg(x1+dx,y2,x2-dx,y2-dy); Seg(x2-dx,y2-dy,x2,y2);
               } else {
                  dx=(-dy*16+4)/9;
                  Seg(x1,y1,x1+dx,y1+dy); Seg(x1+dx,y1+dy,x2-dx,y1);
                  Seg(x2-dx,y1,x2-dx,y2-dy); Seg(x2-dx,y2-dy,x2,y2);
               }
            } else { // (x2<x1)
               if (y2>y1) {
                  dx=(dy*16+4)/9;
                  Seg(x1,y1,x1-dx,y1+dy); Seg(x1-dx,y1+dy,x2+dx,y1);
                  Seg(x2+dx,y1,x2+dx,y2-dy); Seg(x2+dx,y2-dy,x2,y2);
               } else {
                  dx=(-dy*16+4)/9;
                  Seg(x1,y1,x1-dx,y1+dy); Seg(x1-dx,y1+dy,x1-dx,y2);
                  Seg(x1-dx,y2,x2+dx,y2-dy); Seg(x2+dx,y2-dy,x2,y2);
               }
            }
         } else { // Line(x1,y1,x2,y2);
           ctx.moveTo(x1,y1); ctx.lineTo(x2,y2);
         }
         niv++;
      }
      function Flocon() {
         if (++niv>lim) niv=1;
         ctx.clearRect(0,0,sizX,sizY); ctx.beginPath();
         Seg(432,472,432,40); Seg(432,40,48,256); Seg(48,256,432,472);   
         ctx.stroke(); ctx.closePath();   
      }
      function Ini() {
         cnv=document.getElementById('cv'); cnv.width=sizX; cnv.height=sizY;
         ctx=cnv.getContext("2d"); Flocon();
      }
   //]]>
   </script>
</head>
<body style='background-color:#BBBBBB;' onload='Ini()'>
   <canvas id='cv' onclick='Flocon()' 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/Flocon%20de%20Koch'>Flocon de Koch</a>
      <br/><br/>
      <a href='http://www.william-voirol.ch/Prog/Fractales/Flocon.zip'>Zip du code</a>
   </div>
</body>
</html>