Fractales, éponge 3d de sierpinski-menger

Soyez le premier à donner votre avis sur cette source.

Vue 6 021 fois - Téléchargée 319 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).

Dernièrement, j'ai redécouvert quelques sources de programmes que j'avais développé pendant ces années héroïques de l'informatique.

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 l'éponge de Sierpinski-Menger, la fonction de subdivision Cube(...) divise chaque cube en 20 petits cubes (voir sous Wikipédia).

Après avoir atteint le niveau (profondeur) de division voulue, on arrête la subdivision et on dessine les faces visibles du cube.

Les points 3D des cubes sont projetés avec une 'vraie' perspective, mais sans faire appel à un 'moteur 3D'.

Pour ne pas voir les facettes qui se trouvent "derrière" d'autres, on utilise "l'algorithme du peintre", c'est-à-dire qu'on commence par dessiner les éléments les plus éloignés, qui seront simplement recouverts par ceux qui sont plus proches.

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

Source / Exemple :


<!DOCTYPE html>
<html>
<head>
   <title>HTML5  Fractales: Éponge de Sierpinski-Menger en évolution</title>
   <script type="text/javascript">
   //<![CDATA[
      var cnv,ctx,niv=0,lim=5,width=700,height=630; // nombre de niveaux et dimension du canvas
      var UX=-646.2198,UY=861.6264,VX=-320,VY=-240,VZ=1000 // perspective
         ,WX=-0.7427814,WY=-0.5570860,WZ=-0.37139068,Z=1077.033;
      var u,v,u0=u0=350,v0=280; // centrage
      var tmr,iD,nD,D=new Array(14*8000);
      
      function Psp(x,y,z) { // (x,y,z) --> (u,v)
         var w=WX*x+WY*y+WZ*z+Z;
         if ((-1.0e-12<w)&&(w<1.0e-12)) w=1.0e-12;
         u=(UX*x+UY*y)/w; v=(VX*x+VY*y+VZ*z)/w;
      }
      function Cube(x,y,z,d,n) {
         if (--n>0) { // subdivision
            d/=3;
            var xa=x+d,ya=y+d,za=z+d,xb=x+d+d,yb=y+d+d,zb=z+d+d;
            Cube(x,y ,z ,d,n); Cube(xa,y ,z ,d,n); Cube(x ,ya,z ,d,n); Cube(xb,y ,z ,d,n);
            Cube(x,yb,z ,d,n); Cube(xb,ya,z ,d,n); Cube(xa,yb,z ,d,n); Cube(xb,yb,z ,d,n);
            Cube(x,y ,za,d,n); Cube(xb,y ,za,d,n); Cube(x ,yb,za,d,n); Cube(xb,yb,za,d,n);
            Cube(x,y ,zb,d,n); Cube(xa,y ,zb,d,n); Cube(x ,ya,zb,d,n); Cube(xb,y ,zb,d,n);
            Cube(x,yb,zb,d,n); Cube(xb,ya,zb,d,n); Cube(xa,yb,zb,d,n); Cube(xb,yb,zb,d,n);
         } else { // enregistrement
            Psp(x+d,y  ,z  ); D[nD++]=u; D[nD++]=v;
            Psp(x  ,y+d,z  ); D[nD++]=u; D[nD++]=v;
            Psp(x  ,y  ,z+d); D[nD++]=u; D[nD++]=v;
            Psp(x+d,y+d,z  ); D[nD++]=u; D[nD++]=v;
            Psp(x  ,y+d,z+d); D[nD++]=u; D[nD++]=v;
            Psp(x+d,y  ,z+d); D[nD++]=u; D[nD++]=v;
            Psp(x+d,y+d,z+d); D[nD++]=u; D[nD++]=v;       
         }
      }
      function Eponge() {
         if (++niv>lim) niv=1;
         ctx.setTransform(1,0,0,1,0,0); ctx.clearRect(0,0,width,height);
         ctx.translate(u0,v0); ctx.scale(1.2,-1.2);
         nD=0; Cube(-160,-160,-160,320,niv);
         iD=0; tmr=setInterval('Evo()',512>>(2*niv));
         if (iD>=nD) clearInterval(tmr);
      }
      function Evo() {
         var ux=D[iD++],vx=D[iD++],uy=D[iD++],vy=D[iD++],uz=D[iD++],vz=D[iD++],uxy=D[iD++]
            ,vxy=D[iD++],uyz=D[iD++],vyz=D[iD++],uzx=D[iD++],vzx=D[iD++],uxyz=D[iD++],vxyz=D[iD++];
         ctx.beginPath(); ctx.fillStyle='#00BB55'; // face X
         ctx.moveTo(ux,vx); ctx.lineTo(uxy,vxy); ctx.lineTo(uxyz,vxyz); ctx.lineTo(uzx,vzx);
         ctx.fill(); ctx.closePath();          
         ctx.beginPath(); ctx.fillStyle='#0055BB'; // face Y
         ctx.moveTo(uy,vy); ctx.lineTo(uyz,vyz); ctx.lineTo(uxyz,vxyz); ctx.lineTo(uxy,vxy);
         ctx.fill(); ctx.closePath();          
         ctx.beginPath(); ctx.fillStyle='#FFFF77'; // face Z
         ctx.moveTo(uz,vz); ctx.lineTo(uzx,vzx); ctx.lineTo(uxyz,vxyz); ctx.lineTo(uyz,vyz);
         ctx.fill(); ctx.closePath();          
         if (iD>=nD) clearInterval(tmr);
      }
      function Ini() {
         cnv=document.getElementById('cv'); cnv.width=width; cnv.height=height;
         ctx=cnv.getContext("2d"); Eponge();
      }
   //]]>
   </script>
</head>
<body style='background-color:#BBBBBB;' onload='Ini()'>
   <canvas id='cv' onclick='clearInterval(tmr); Eponge()' style='background-color:#DDDDDD; cursor:pointer;'
      title="Cliquez pour passer à l'objet suivant">Your browser does not support HTML5 canvas
   </canvas>
   <div>
      <br/><br/>Wikipédia: &nbsp;
      <a href='http://fr.wikipedia.org/wiki/%C3%89ponge_de_Menger'>Éponge de Sierpinski-Menger</a>
      <br/><br/><a href='http://www.william-voirol.ch/Prog/Fractales/Eponge.zip'>Zip des codes<br/></a>
   </div>
</body>
</html>

Conclusion :


Faites directement un test: (observez la remarque ci-dessous)
http://www.william-voirol.ch/Prog/Fractales/Eponge
http://www.william-voirol.ch/Prog/Fractales/Eponge/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.

Dites-moi si la manière de définir d'autres projections 3D->2D (axonométries ou perspectives) vous intéressent ?

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Bonjour,
Je vais utiliser votre programme pour visualiser la construction à 400 cubes qui sera réalisée par des enfants de primaire (8-10 ans) pour le Möbius Festival en Belgique.
Messages postés
1
Date d'inscription
lundi 18 janvier 2010
Statut
Membre
Dernière intervention
2 octobre 2011

Bonjour William,

html5 et canevas sont des termes que je ne connais pas et ne semblent pas fonctionner avec mes versions de navigateurs, soit IE8 et Firefox 7 sous XP. Suis-je hors-jeux au niveau logiciel et matériel ?
Messages postés
37
Date d'inscription
vendredi 20 février 2004
Statut
Membre
Dernière intervention
29 juin 2011

Superbe, mais y a t il des applications à cela ?
Dans quel domaine, cela pourrait il être utilisé ?
Merci, Pierre.
Messages postés
7
Date d'inscription
dimanche 14 mars 2004
Statut
Membre
Dernière intervention
29 mai 2013

Génial !

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.