Fractales, fougère, triangle, carré

Soyez le premier à donner votre avis sur cette source.

Vue 5 826 fois - Téléchargée 275 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.

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.

Codes Sources

A voir également

Ajouter un commentaire

Commentaire

Messages postés
49
Date d'inscription
jeudi 17 janvier 2002
Statut
Membre
Dernière intervention
23 avril 2009

Bravo !
C'est épatant.
Merci.

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.