begin process at 2012 05 28 10:18:19
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > FRACTALES, FLOCON DE KOCH

FRACTALES, FLOCON DE KOCH


 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 du flocon de Koch, la fonction Seg(..) montre comment chaque segment est subdivisé (en fonction de sa

direction).
Après avoir atteint le niveau (profondeur) de division voulue, on arrête la subdivision et on dessine le segment.

Source

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>HTML5 Fractales: Flocon de Koch</title>
  • <script type="text/javascript">
  • //<![CDATA[ // consultez
  • var niv=0,lim=6,sizX=600,sizY=512; // nombre de niveaux et dimension du canvas
  • var cnv,ctx,dir,pas,x,y,spp=false; // spp: superposition des courbes
  • function Seg(x1,y1,x2,y2) {
  • var dx,dy;
  • if (--niv>0) { // subdivision
  • dy=(y2-y1)/3;
  • if (x1==x2) {
  • dx=(dy*8+4)/9;
  • Seg(x1,y1,x1,y1+dy); Seg(x1,y1+dy,x1-dx,y1+((y2-y1)>>1));
  • Seg(x1-dx,y1+((y2-y1)>>1),x1,y2-dy); Seg(x1,y2-dy,x1,y2);
  • } else if (x2>x1) {
  • if (y2>y1) {
  • dx=(dy*16+4)/9;
  • Seg(x1,y1,x1+dx,y1+dy); Seg(x1+dx,y1+dy,x1+dx,y2);
  • Seg(x1+dx,y2,x2-dx,y2-dy); Seg(x2-dx,y2-dy,x2,y2);
  • } else {
  • dx=(-dy*16+4)/9;
  • Seg(x1,y1,x1+dx,y1+dy); Seg(x1+dx,y1+dy,x2-dx,y1);
  • Seg(x2-dx,y1,x2-dx,y2-dy); Seg(x2-dx,y2-dy,x2,y2);
  • }
  • } else { // (x2<x1)
  • if (y2>y1) {
  • dx=(dy*16+4)/9;
  • Seg(x1,y1,x1-dx,y1+dy); Seg(x1-dx,y1+dy,x2+dx,y1);
  • Seg(x2+dx,y1,x2+dx,y2-dy); Seg(x2+dx,y2-dy,x2,y2);
  • } else {
  • dx=(-dy*16+4)/9;
  • Seg(x1,y1,x1-dx,y1+dy); Seg(x1-dx,y1+dy,x1-dx,y2);
  • Seg(x1-dx,y2,x2+dx,y2-dy); Seg(x2+dx,y2-dy,x2,y2);
  • }
  • }
  • } else { // Line(x1,y1,x2,y2);
  • ctx.moveTo(x1,y1); ctx.lineTo(x2,y2);
  • }
  • niv++;
  • }
  • function Flocon() {
  • if (++niv>lim) niv=1;
  • ctx.clearRect(0,0,sizX,sizY); ctx.beginPath();
  • Seg(432,472,432,40); Seg(432,40,48,256); Seg(48,256,432,472);
  • ctx.stroke(); ctx.closePath();
  • }
  • function Ini() {
  • cnv=document.getElementById('cv'); cnv.width=sizX; cnv.height=sizY;
  • ctx=cnv.getContext("2d"); Flocon();
  • }
  • //]]>
  • </script>
  • </head>
  • <body style='background-color:#BBBBBB;' onload='Ini()'>
  • <canvas id='cv' onclick='Flocon()' 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/Flocon%20de%20Koch'>Flocon de Koch</a>
  • <br/><br/>
  • <a href='http://www.william-voirol.ch/Prog/Fractales/Flocon.zip'>Zip du code</a>
  • </div>
  • </body>
  • </html>
<!DOCTYPE html>
<html>
<head>
   <title>HTML5  Fractales: Flocon de Koch</title>
   <script type="text/javascript">
   //<![CDATA[ // consultez 
      var niv=0,lim=6,sizX=600,sizY=512; // nombre de niveaux et dimension du canvas
      var cnv,ctx,dir,pas,x,y,spp=false; // spp: superposition des courbes
      
      function Seg(x1,y1,x2,y2) {
         var dx,dy;
         if (--niv>0) { // subdivision
            dy=(y2-y1)/3;
            if (x1==x2) {
               dx=(dy*8+4)/9;
               Seg(x1,y1,x1,y1+dy); Seg(x1,y1+dy,x1-dx,y1+((y2-y1)>>1));
               Seg(x1-dx,y1+((y2-y1)>>1),x1,y2-dy); Seg(x1,y2-dy,x1,y2);
            } else if (x2>x1) {
               if (y2>y1) {
                  dx=(dy*16+4)/9;
                  Seg(x1,y1,x1+dx,y1+dy); Seg(x1+dx,y1+dy,x1+dx,y2);
                  Seg(x1+dx,y2,x2-dx,y2-dy); Seg(x2-dx,y2-dy,x2,y2);
               } else {
                  dx=(-dy*16+4)/9;
                  Seg(x1,y1,x1+dx,y1+dy); Seg(x1+dx,y1+dy,x2-dx,y1);
                  Seg(x2-dx,y1,x2-dx,y2-dy); Seg(x2-dx,y2-dy,x2,y2);
               }
            } else { // (x2<x1)
               if (y2>y1) {
                  dx=(dy*16+4)/9;
                  Seg(x1,y1,x1-dx,y1+dy); Seg(x1-dx,y1+dy,x2+dx,y1);
                  Seg(x2+dx,y1,x2+dx,y2-dy); Seg(x2+dx,y2-dy,x2,y2);
               } else {
                  dx=(-dy*16+4)/9;
                  Seg(x1,y1,x1-dx,y1+dy); Seg(x1-dx,y1+dy,x1-dx,y2);
                  Seg(x1-dx,y2,x2+dx,y2-dy); Seg(x2+dx,y2-dy,x2,y2);
               }
            }
         } else { // Line(x1,y1,x2,y2);
           ctx.moveTo(x1,y1); ctx.lineTo(x2,y2);
         }
         niv++;
      }
      function Flocon() {
         if (++niv>lim) niv=1;
         ctx.clearRect(0,0,sizX,sizY); ctx.beginPath();
         Seg(432,472,432,40); Seg(432,40,48,256); Seg(48,256,432,472);   
         ctx.stroke(); ctx.closePath();   
      }
      function Ini() {
         cnv=document.getElementById('cv'); cnv.width=sizX; cnv.height=sizY;
         ctx=cnv.getContext("2d"); Flocon();
      }
   //]]>
   </script>
</head>
<body style='background-color:#BBBBBB;' onload='Ini()'>
   <canvas id='cv' onclick='Flocon()' 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/Flocon%20de%20Koch'>Flocon de Koch</a>
      <br/><br/>
      <a href='http://www.william-voirol.ch/Prog/Fractales/Flocon.zip'>Zip du code</a>
   </div>
</body>
</html>

 Conclusion

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

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.

 Fichier Zip

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

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION
Toutes les sources de william voirol

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip FRACTALES, FOUGÈRE, TRIANGLE, CARRÉ par william voirol
Source avec Zip FRACTALES, ÉPONGE 3D DE SIERPINSKI-MENGER par william voirol
Source avec Zip FRACTALES, COURBE DE HILBERT par william voirol
Source avec Zip FRACTALES, COURBE DU DRAGON par william voirol

Commentaires et avis

Aucun commentaire pour le moment.

 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


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,655 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)