Fractales, fougère, triangle, carré

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.

Pour les exemples (Fougère, Triangle, Carré), on utilise la methode de fonctions itérées.

Pour simplifier, j'utilise la fonction fillRect(x,y,1,1) pour dessiner un seul pixel !

La construction de ces objets se fait dans Ini().
Essayez de créer d'autres objets !

Source / Exemple : 


<!DOCTYPE html>
<html>
<head>
   <title>HTML5  Fractales: Fougère, Triangle, Carré</title>
   <script type="text/javascript">
   //<![CDATA[
      var iObj=0,obj=new Array(3),cnv,ctx,sizX=620,sizY=560; // dimension du canvas
      var mii=10,rd=0.01745329252; // minimum d'itérations, rad/degré
      
      function Taf(dilX,dilY,rot,x,y) { // transformation afine (rot en degrés)
         var cr=Math.cos(rd*rot),sr=Math.sin(rd*rot);
         this.xx=dilX*cr; this.xy=-dilX*sr;
         this.yx=dilY*sr; this.yy= dilY*cr; this.x=x; this.y=y;
      }
      function Obj(iterations,x0,y0,col) {
         this.sum=0; this.cum=new Array(); this.taf=new Array();
         this.it=iterations; this.x0=x0; this.y0=y0; this.col=col;
         this.Add=function(taf,proba) {this.cum.push(this.sum+=proba); this.taf.push(taf);}
         this.Des=function() {
            var i=0,j,n=this.it,r,t,x=0,y=0,xn;
            ctx.fillStyle=this.col;
            do {
               r=Math.random()*this.sum;
               j=-1; do ++j; while (this.cum[j]<r); // choix de la transformation
               xn=x; x=(t=this.taf[j]).xx*xn+t.xy*y+t.x; y=t.yx*xn+t.yy*y+t.y;
               if (i>=mii) ctx.fillRect(this.x0+x,this.y0-y,1,1);  //dessine 1 pixel !!!
            } while (++i<n);
         }
      }
      function Ini() {
         cnv=document.getElementById('cv'); cnv.width=sizX; cnv.height=sizY;
         ctx=cnv.getContext("2d");
         obj[0]=new Obj(4000,300,500,'#77FF77'); // fougère
         obj[0].Add(new Taf( 0.005,0.180, 0,0, 0), 20);
         obj[0].Add(new Taf( 0.307,0.354,65,0,35),115);
         obj[0].Add(new Taf(-0.326,0.318,60,0,70),115);
         obj[0].Add(new Taf( 0.851,0.851,-3,0,75),750);
         obj[1]=new Obj(2500,10,470,'#7777FF'); // triangle
         obj[1].Add(new Taf(0.5,0.5,0,  0,  0),333);
         obj[1].Add(new Taf(0.5,0.5,0,300,  0),333);
         obj[1].Add(new Taf(0.5,0.5,0,150,220),333);
         obj[2]=new Obj(8000,36,550,'#FF7777'); // carré
         for (var i=0;i<9;i++)
           if (i!=4) obj[2].Add(new Taf(1/3,1/3,0,180*(i%3),180*Math.floor(i/3)),125);
         Clk(0);
      }
      function Clk(i) {
        if (i) {iObj=(iObj+1)%3; ctx.clearRect(0,0,sizX,sizY);}
        obj[iObj].Des();
      }
   //]]>
   </script>
</head>
<body style='background-color:#BBBBBB;' onload='Ini()'>
   <canvas id='cv' onclick='Clk(0)' ondblclick='Clk(1)' style='background-color:black; cursor:pointer;'
      title="Cliquez pour passer à l'image suivante; doublecliquez pour passer à l'objet suivant.">
      Your browser does not support HTML5 canvas
   </canvas>
   <div>
      Cliquez pour passer à l'image suivante; doublecliquez pour passer à l'objet suivant
      <br/><br/>Wikipédia: &nbsp;
      <a href='http://fr.wikipedia.org/wiki/Fractale'>Fractale</a> &nbsp; &nbsp;
      <a href='http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_fonctions_it%C3%A9r%C3%A9es'>
         Système de fonctions itérées
      </a><br/><br/>
      <a href='http://www.william-voirol.ch/Prog/Fractales/Fougere.zip'>Zip du code</a>
   </div>
</body>
</html>

Conclusion :


Faites directement un test:
www.william-voirol.ch/Prog/Fractales/Fougere

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 l'adresse Web ci-dessus.

L'exemple complet se trouve 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)