CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 10:17:51

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Graphique

> FRACTALES, ÉPONGE 3D DE SIERPINSKI-MENGER

FRACTALES, ÉPONGE 3D DE SIERPINSKI-MENGER

Information sur la source

Note :

10,00 / 10

Catégorie :Graphique Classé sous :Fractales, éponge Sierpinski-Menger, perspective 3D-2D, HTML5 canvas, Javascript Niveau :Initié Date de création :24/08/2011 Vu / téléchargé :2 104 / 132

Auteur : william voirol

Ecrire un message privé

Site perso

Commentaire sur cette source (3)

Ajouter un commentaire et/ou une note

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

<!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:  
<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>

<!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 ?

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Eponge
- Description.txt 2 577 octets
- evol.html 7 424 octets
- index.html 6 520 octets

Télécharger le zip

Sources du même auteur

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES

DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE

ROTATION D'UNE IMAGE, ANIMATION

Toutes les sources de william voirol

Sources de la même categorie

JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator

SPHERE 3D DÉFORMABLE par phm

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

ROTATION D'UNE IMAGE, ANIMATION par william voirol

FRACTALES, FOUGÈRE, TRIANGLE, CARRÉ par william voirol

FRACTALES, COURBE DE HILBERT par william voirol

FRACTALES, COURBE DU DRAGON par william voirol

FRACTALES, FLOCON DE KOCH par william voirol

Commentaires et avis

Commentaire de dardelphi le 25/08/2011 10:26:54 10/10

Génial !

Commentaire de plarts le 29/08/2011 14:15:47

Superbe, mais y a t il des applications à cela ?
Dans quel domaine, cela pourrait il être utilisé ?
Merci, Pierre.

Commentaire de rotomtom le 02/10/2011 16:46:35

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 ?

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

lien javascript [ par ilimo ] bonjour....peut-on rendre un lien actif et inactif avec javascript ?ex : a et b sont deux liens html...quand je clique sur a, la page liée à a s'af select case en javascript [ par Juju ] je cherche une sorte un select case mais en javascript, pouvez vous me donner la syntaxe MerciJuju javascript dans formulaire acrobat [ par domi ] "Envoie par mèl du contenu du formulaire"j'ai écrit deux lignes simple en javascript dans un formulaire acrobat, il fonctionne bien avec Acrobat "prog Lien javascript [ par yoyo ] Salut tout le monde,g un petit pb,g un lien qui est une image et quand je clique dessus, je lance une fonction javascript.Sur IE, pas de probleme mais Colle pour les pros du javascript [ par Manu ] Bonjour,je propose aux passionnés de javascript de relever un défi. J'ai téléchargé les fichiers pour un menu en DHTML/JavaScript (fichiers .css et Javascript & unload ?????????? [ par Léa ] Hello Utilisant javascript, la fonction onUnload me permet correctement de capturer l'evenement de fermeture de ma fenetre... sauf que la touche F5 ou fonction javascript [ par phil ] Bonjourvoici mon pb: function changeFrame(frame1,frame2){ top.nomdeframe1.location=frame1 top.nomdeframe2.location=frame2 comment doit-on écrire ce sc Besoin urgent d'une fonction Javascript [ par David ] Bonjour,Voici le context:J'utilise des JSP dans lesquelles j'insert des tags avec des listes déroulantes en import Java.J'ai un champ text dans lequel versions javascript [ par arthur ] je cherche une récapitulatif contenant les fonctionnalités de chaque version de javascript de 1.0 à 1.3 ou 1.4.merci

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP