Fractals: Mandelbrot tout simplement (B)

Télécharger le projet
Commenter

Description

Bonjour,

Cette première amélioration (B) de "Fractals: Mandelbrot tout simplement" concerne le choix des couleurs.
Dans la version initiale (A), vous avez peut-être remarqué que l'attribution de la couleur à chaque pixel se fait plus simplement que ce qui est habituellement proposé.
Cela est possible grâce à un arrangement adéquat des tableaux de couleurs R[],G[],B[].

Voir: Fractals: Mandelbrot tout simplement (A).

Dans les arrays R[n],G[n],B[n] (de longueur nbC-1), on définit trois couleurs:
- n=0: couleur de l'intérieur de l'ensemble de Mandelbrot.
- n=1: couleur de la frontière immédiate de l'ensemble de Mandelbrot.
- n=nbC-1: couleur de l'extérieur au rayon > 2.

Entre n=1 et nbC-1, les couleurs sont interpolées linéairement: 
<!DOCTYPE html>
<html><head>
  <title>Fractal: Mandelbrot-B</title>
  <meta name='author' content='William Voirol, Switzerland, Août 2016'>
  <script>
    var cnv,ctx,imd,geo,w,h,ima=0,nbC=32,R=[0],G=[0],B=[0];
    var xInf=[-2.02,-1.8,-0.4,-0.195,-0.18 ];
    var yInf=[-1.26,-0.5, 0.7, 0.8  , 1.017];
    var zoom=[  250, 600,1358,  3333, 18000]; // pixels/unité

    function NbrCol(inp) {
      if (isNaN(inp.value)) {inp.value=nbC; return;}
      var n=Number(inp.value);
      if (n<4) n=4; else if (n>256) n=256;
      if (n!=nbC) {
        R[n-1]=R[nbC-1]; G[n-1]=G[nbC-1]; B[n-1]=B[nbC-1];
        nbC=n; CalCol();
      }
    }
    function SetCol(k,hex) {
      var m=nbC-1,c=parseInt(hex,16),r=(c>>16)&255,g=(c>>8)&255,b=c&255;
      if (k<=1) {R[k]=r; G[k]=g; B[k]=b;} else {R[m]=r; G[m]=g; B[m]=b;}
      CalCol();
    }
    function CalCol() {
      var n,m=nbC-1,dr=(R[m]-R[1])/nbC,dg=(G[m]-G[1])/nbC,db=(B[m]-B[1])/nbC;
      for (n=1; n<m; ++n) {R[n]=R[1]+n*dr; G[n]=G[1]+n*dg; B[n]=B[1]+n*db;}
      Draw();
    }
    function Draw() {
      var t=new Date().getTime()
      var d=imd.data,xI=xInf[ima],yI=yInf[ima],f=1/zoom[ima],yS=yI+h*f-f;
      for (var j=0,k=0,y=yS; j<h; ++j,y-=f)
        for (var i=0,x=xI; i<w; ++i,x+=f,k+=4) {
          var n=nbC,u=x,v=y,uu=u*u,vv=v*v;
          while ((--n>0)&&(uu+vv<4)) {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;
        }
      ctx.putImageData(imd,0,0);
      t=new Date().getTime()-t;
      geo.innerHTML='['+xI.toPrecision(5)+', '+yI.toPrecision(5)+' ; '+
        (xI+w*f-f).toPrecision(5)+', '+yS.toPrecision(5)+'], zoom='+
        zoom[ima]+', colors='+nbC+', w='+w+', h='+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);
      R[nbC-1]=G[nbC-1]=B[nbC-1]=0; SetCol(1,'FFFFFF');
    }
  </script>
</head><body style='font-size:14px' onload='Init()''>
  <input type='text' style='position:fixed; left:0; top:0; text-align:right'
    size='1' value='32' onchange='NbrCol(this)'>
  <input type='color' style='position:fixed; left:56px; top:0' size='5'
    value='#000000' onchange='SetCol(0,this.value.substr(1),16)'>
  <input type='color' style='position:fixed; left:120px; top:0'size='5'
    value='#FFFFFF' onchange='SetCol(1,this.value.substr(1),16)'>
  <input type='color' style='position:fixed; left:184px; top:0'size='5'
    value='#000000' onchange='SetCol(2,this.value.substr(1),16)'>
  <div style='position:fixed; left:250px; top:0; background-color:yellow;
    cursor:default' onclick='ima=(ima+1)%zoom.length, Draw()'> ► </div>
  <div id='Geo' style='position:fixed; left:290px; top:0; color:blue'> </div>
  <canvas id='Cnv' width=840 height=630
    style='position:fixed; left:0; top:24px'>
  </canvas>
</body></html>
Le tag HTML5 input de type color est actuellement interprété de manière rudimentaire avec Edge, IE et Safari.
Par contre Firefox, Chrome et Opera offrent des solutions intéressantes.

Remarque: Les images Mandelbrot-16.jpg et Mandelbrot-128.jpg, obtenues avec 16 et 128 couleurs, montrent qu'il est nécessaire d'augmenter le nombre de couleurs lorsque le facteur zoom augmente.

Faudrait-il choisir une autre interpolation (non linéaire) pour un grand nombre de couleurs ?

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)