Fractales, courbe de hilbert
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 la courbe de Hilbert, les fonctions de subdivision suivent simplement la définition du L-système (voir sous Courbe de Hilbert de Wikipédia). La fonction F() distingue aussi les niveaux pairs et impairs.
Après avoir atteint le niveau (profondeur) de division voulue, on arrête la subdivision et on dessine le segment.
"Malheureusement", les ordinateurs d'aujourd'hui sont trop rapides pour pouvoir suivre l'évolution de la courbe qui se dessine. Comme Javascript ne comporte pas de vraie routine de pause (ou sleep, delay), j'ai fait une deuxième version qui 'enregistre' les segments et qui les dessine ensuite plus lentement à l'aide de setInterval(…)
Faites directement un test:
http://www.william-voirol.ch/Prog/Fractales/Hilbert
http://www.william-voirol.ch/Prog/Fractales/Hilbert/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.
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 la courbe de Hilbert, les fonctions de subdivision suivent simplement la définition du L-système (voir sous Courbe de Hilbert de Wikipédia). La fonction F() distingue aussi les niveaux pairs et impairs.
Après avoir atteint le niveau (profondeur) de division voulue, on arrête la subdivision et on dessine le segment.
"Malheureusement", les ordinateurs d'aujourd'hui sont trop rapides pour pouvoir suivre l'évolution de la courbe qui se dessine. Comme Javascript ne comporte pas de vraie routine de pause (ou sleep, delay), j'ai fait une deuxième version qui 'enregistre' les segments et qui les dessine ensuite plus lentement à l'aide de setInterval(…)
Source / Exemple :
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Fractales: Courbe de Hilbert</title>
<script type="text/javascript">
//<![CDATA[
var niv=0,lim=7,siz=4<<lim; // nombre de niveaux et dimension du canvas
var cnv,ctx,dir,pas,x,y,spp=false; // spp: superposition des courbes
function F() {
if (dir&1) {
if (dir&2) ctx.lineTo(x,y+=pas); else ctx.lineTo(x,y-=pas);
} else {
if (dir&2) ctx.lineTo(x-=pas,y); else ctx.lineTo(x+=pas,y);
}
}
function L(k) { // voir Règles du L-Système
if (--k >= 0) {dir++; R(k); F(); dir--; L(k); F(); L(k); dir--; F(); R(k); dir++;}
}
function R(k) { // voir Règles du L-Système
if (--k >= 0) {dir--; L(k); F(); dir++; R(k); F(); R(k); dir++; F(); L(k); dir--;}
}
function Hil() {
if (++niv > lim) {niv=1; ctx.clearRect(0,0,siz,siz);}
if ((!spp)&&(niv>1)) ctx.clearRect(0,0,siz,siz);
dir=3; pas=siz>>niv; x=siz>>(niv+1); y=siz>>(niv+1);
ctx.beginPath(); ctx.moveTo(x,y); L(niv); ctx.stroke(); ctx.closePath();
}
function Ini() {
cnv=document.getElementById('cv'); cnv.width=siz; cnv.height=siz;
ctx=cnv.getContext("2d"); Hil();
}
//]]>
</script>
</head>
<body style='background-color:#BBBBBB' onload='Ini()'>
<canvas id='cv' onclick='Hil()' 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:
<a href='http://fr.wikipedia.org/wiki/Courbe_de_Hilbert'>Courbe de Hilbert</a>
<p>Règles du L-Système: L → +RF−LFL−FR+ R → −LF+RFR+FL−</p>
<a href='http://www.william-voirol.ch/Prog/Fractales/Hilbert.zip'>Zip du code<br/></a>
</div>
</body>
</html>
Conclusion :
Faites directement un test:
http://www.william-voirol.ch/Prog/Fractales/Hilbert
http://www.william-voirol.ch/Prog/Fractales/Hilbert/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.
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.