Chapitre 12 Développement Web et fractales

Chapitre 12 Développement Web et fractales

Extrait

Le flocon de Von Koch

Nous partons d'un segment.
Nous aplliquons un groupe de quatre transformations:
- une homothétie de rapport 1/3 
- l'homothétie suivi d'une rotation de -60 degrés et une translation pour amener ce segment à la suite du précédent
- l'homothétie suivi d'une rotation de 60 degrés et une translation pour amener ce segment à la suite du précédent
- l'homothétie suivi d'une translation pour amener ce segment à la suite du précédent

Figure 12-7. Von Koch étapes 0 et 1

( voir ce SVG )

Une petite remarque, vous savez sans doute que dans la transformation 'scale', la largeur du tracé est également affectée, aussi nous modifions 'stroke-width' pour garder la même épaisseur. Nous réitérons cette opération et nous avons la courbe de Von Koch.

Figure 12-8. Etapes 2 3 4 et 5 de la courbe de Von Koch

Voici le code pour cette figure:

<svg width="650" height="220">
   <defs>
     <path id="level_0" fill="none" stroke="black" d="M0 0h300" />
     <g id="level_1">
         <use xlink:href="#level_0" transform="scale(0.333)" />
         <use xlink:href="#level_0" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_0" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_0" transform="translate(200 0) scale(0.333)" />
     </g>
     <g id="level_2">
         <use xlink:href="#level_1" transform="scale(0.333)" />
         <use xlink:href="#level_1" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_1" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_1" transform="translate(200 0) scale(0.333)" />
     </g>
     <g id="level_3">
         <use xlink:href="#level_2" transform="scale(0.333)" />
         <use xlink:href="#level_2" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_2" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_2" transform="translate(200 0) scale(0.333)" />
     </g>
     <g id="level_4">
         <use xlink:href="#level_3" transform="scale(0.333)" />
         <use xlink:href="#level_3" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_3" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_3" transform="translate(200 0) scale(0.333)" />
     </g>
     <g id="level_5">
         <use xlink:href="#level_4" transform="scale(0.333)" />
         <use xlink:href="#level_4" transform="translate(100 0) rotate(-60) scale(0.333)" />
         <use xlink:href="#level_4" transform="translate(150 -86.6) rotate(60) scale(0.333)" />
         <use xlink:href="#level_4" transform="translate(200 0) scale(0.333)" />
     </g>
   </defs>
   <use xlink:href="#level_2" stroke-width="9" transform="translate(20,100)" />
   <use xlink:href="#level_3" stroke-width="27" transform="translate(340,100)" />
   <use xlink:href="#level_4" stroke-width="81" transform="translate(20,200)" />
   <use xlink:href="#level_5" stroke-width="243" transform="translate(340,200)" />
</svg>

( voir comme SVG ) 

Nous constatons au passage que l'utilisation des groupes et des éléments <use> supportent la récursivité.

Et le flocon de neige?
Nous utilisons trois lignes de niveau 5 pour former un triangle.
Avec la même section <defs> que dans notre code précédent, nous écrivons:




Figure 12-9.  Le flocon de neige de Von Koch

( voir comme SVG )

Vous pouvez zoomer, augmenter le niveau de récursivité en construisant les groupes suivants, mettre quelques couleurs … Vous pouvez surtout utiliser d'autres transformations pour obtenir toute une série de fractales. Il n'est pas difficile de créer ce code en utilisant un script exécuté au chargement du document.