Fractales, courbe du dragon

Soyez le premier à donner votre avis sur cette source.

Vue 4 596 fois - Téléchargée 181 fois

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.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

HACKANDROID
Messages postés
103
Date d'inscription
mardi 12 juillet 2011
Statut
Membre
Dernière intervention
3 janvier 2013

Perso j'aime pas donc préféré pas noter sinon je sens que je vais me réveiller avec une balle dans ma tête.

Sinon bon boulot! Continue!
Anirniq
Messages postés
2
Date d'inscription
lundi 29 août 2011
Statut
Membre
Dernière intervention
29 août 2011

En tant qu'artiste 3D, les fractals m'intéressent beaucoup, particulièrement les L-Systems.
Ça fait du bien de tomber sur un code compréhensible, même si je pense, tu pourrais commenter bien plus.

Pour que ton code soit pro et réutilisable, tu devrais isoler une classe commune à tous les L-Systems avec les outils pour afficher les graphismes et la fonction de calcul, à laquelle tu associes à une deuxième fonction spécifique pour les courbes de Dragon, les courbes de Hilbert, systèmes de Fibonacci, Cantor, Koch, etc.

Je propose ça, mais je n'ai pas vraiment analysé les façons d'afficher des fractales encore, et ça se peut que je dise que des conneries.

En tout cas, si ton code était un peu plus commenté, ça m'intéresserait vraiment pour développer des classes MEL et Python pour la modé dynamique de plantes sous Maya.

Donc en conclusion : code intéressant, mais pas encore super utile comme il offre juste une introduction aux fractales. A l'état où il est je mettrais 7/10.

Bye !

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.