Fractales, courbe du dragon

Télécharger le projet
Commenter

Description

En 1974 (environ), Benoît Mandelbrot a inventé (découvert ?) les objets fractals (ou fractales).
Ce sont ces objets qui présentent une 'même' structure à n'importe quelle échelle.

A la même période, l'informatique commençait à permettre de calculer et de représenter graphiquement certains de ces
objets.

De plus, les fonctions (de programmation) commençaient à pouvoir s'appeler elle-même (ou récursivement).

Depuis quelques années, HTML5 a introduit l'élément "canvas" qui convient pour la représentation graphique.
Mais il faut donc utiliser un navigateur "à jour" pour tester ce programme.

Dans cet exemple de la courbe du dragon, les fonctions de subdivision suivent simplement la définition du L-système (voir sous Courbe_du_dragon de Wikipédia). La fonction F() distingue aussi les niveaux pairs et impairs.

Après avoir atteint le niveau (profondeur) de division voulue, on arrête la subdivision et on dessine le segment.

"Malheureusement", les ordinateurs d'aujourd'hui sont trop rapides pour pouvoir suivre l'évolution de la courbe qui se dessine. Comme Javascript ne comporte pas de vraie routine de pause (ou sleep, delay), j'ai fait une deuxième version qui 'enregistre' les segments et qui les dessine ensuite plus lentement à l'aide de setInterval(…)

Source / Exemple : 


<!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 &#8594; X+YF+ &nbsp; &nbsp; Y &#8594; -FX-Y</p>
      <a href='http://www.william-voirol.ch/Prog/Fractales/Dragon.zip'>Zip des codes</a>
   </div>
</body>
</html>

Conclusion :


Faites directement un test:
http://www.william-voirol.ch/Prog/Fractales/Dragon
http://www.william-voirol.ch/Prog/Fractales/Dragon/evol.html

Remarque: de temps en temps, des espaces (caractères blancs) s'immiscent
dans certains textes. (CodeS-SourceS est au courant du problème).
Si c'était le cas ici, enlevez les espaces avant d'utiliser les adresses Web ci-dessus.

Les deux exemples se trouvent sur le fichier zip.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (William VOIROL)