Fractals: Mandelbrot tout simplement (A)

Télécharger le projet
Commenter

Description

Bonjour,

Voici un série évolutive d'articles sur l'affichage de l'ensemble de Mandelbrot.
Les logiciels proposés se trouvent chacun dans un unique petit fichier html et n'utilisent aucune "librairie extérieure".
Je me suis efforcé d'y limiter la programmation aux instruction nécessaires.
Le lecteur pourra utiliser l'une ou l'autre partie des ces codes pour réaliser son propre logiciel.

Ce code initial (A) est assez simple et sert principalement à déceler les améliorations qu'il serait bon d'ajouter: 
<!DOCTYPE html>
<html><head>
  <title>Fractal: Mandelbrot-A</title>
  <meta name='author' content='William Voirol, Switzerland, Août 2016'>
  <script>  // xInf , yInf,incrément/pixel, r , g , b
    var vue=[[ -2.02, -1.2,      0.0040066,255,255,255],
             [  -1.5, -0.5,      0.0016666,255,255, 0 ],
             [  -0.4,  0.7,      0.0007362, 0 ,255, 0 ],
             [-0.195,  0.8,      0.0003000,225, 0 ,255],
             [ -0.18,1.017,      0.0000550, 0 ,127,255]];
    var cnv,ctx,imd,geo,w,h,rr=4,ima=0,nbC=64,R=[],G=[],B=[];
    function Colors(m,r,g,b) { // couleur du bord
      for (var n=0,q; n<m; ++n) {q=n/(m-1); R[n]=q*r; G[n]=q*g; B[n]=q*b;}
      R[m]=0; G[m]=0; B[m]=0;
    }
    function Draw() {
      var m=nbC-1,z=vue[ima],d=imd.data,xI=z[0],yI=z[1],p=z[2],yS=yI+h*p-p;
      Colors(m,z[3],z[4],z[5]);
      var t=new Date().getTime()
      for (var j=0,k=0,y=yS; j<h; ++j,y-=p)
        for (var i=0,x=xI; i<w; ++i,x+=p,k+=4) {
          var n=-1,u=x,v=y,uu=u*u,vv=v*v;
          while ((++n<m)&&(uu+vv<rr)) {v=2*u*v+y; u=uu-vv+x; uu=u*u; vv=v*v;}
          d[k]=R[n]; d[k+1]=G[n]; d[k+2]=B[n]; d[k+3]=255;
        }
      t=new Date().getTime()-t;
      ctx.putImageData(imd,0,0);
      geo.innerHTML='['+xI+', '+yI+' ; '+(xI+w*p-p).toPrecision(7)+', '
        +yS.toPrecision(7)+'], inc/pix='+p.toPrecision(7)
        +', couleurs='+nbC+', width='+w+', height='+h+': '+t+' ms.';
    }
    function Init() {
      cnv=document.getElementById('Cnv'); ctx=cnv.getContext('2d');
      geo=document.getElementById('Geo');
      w=cnv.width; h=cnv.height; imd=ctx.createImageData(w,h);
      Draw();
    }
  </script>
</head><body style='font-size:15px; cursor: not-allowed' onload='Init()''>
  <div style='position:fixed; left:4px; top:0; background-color:yellow;
    cursor:default' onclick='ima=(ima+1)%vue.length, Draw()'> ► </div>
  <div id='Geo' style='position:fixed; left:44px; top:0'> </div>
  <canvas id='Cnv' width=800 height=600
    style='position:fixed; left:0; top:20px'>
  </canvas>
 </body>
Cliquez sur ► (fond jaune) pour passer à l'image suivante.

Faites quelques essais en modifiant les variables vue, nbC et les dimensions du canvas.

Les temps de calcul ont l'air d'être "raisonnables" et sont quasiment proportionnels aux dimension de la fenêtre ainsi qu'au nombre de couleurs utilisées.

Les "évolutions" apportées dans les prochains articles concerneront principalement l'interactivité:
- Adaptation des dimensions de l'affichage.
- Exploration de zones intéressantes.
- Zooms et translations.
- Choix des couleurs.

En voyez-vous d'autres ?


Quelques liens:
Wikipédia: Ensemble de Mandelbrot
Wikipedia: Mandelbrot set
Tutoriel : Dessiner la fractale de Mandelbrot
Mandelbrot Set in HTML5
Mandelbrot Set Generator


Bonne lecture ...
Télécharger le projet

Codes Sources

S'inscrire maintenant

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.

Du même auteur (William VOIROL)