[JavaScript] La fractale de Benoît Mandelbrot en JavaScript ! [Sources]

[danielhagnoul]

Bonjour

La fractale de Benoît Mandelbrot en JavaScript ! ? Non !
----------------------------------------------
[Edit 2010-11-13 01:20] Bonsoir

C'était beau, mais encore trop lent, alors j'ai remis l'ouvrage sur le métier. Je pense avoir diminué les temps de calcul d'un facteur 6 à 10 suivant les cas et être maintenant incapable de faire mieux.

La fractale de Mandelbrot en JavaScript en 900*600 pixels en 0,5s sous Firefox 3.6.10 (Chrome est plus lent) je crois que je peux être satisfait.

Pour un nombre d'itérations inférieur à 1000, on peut maintenant explorer la fractale beaucoup plus agréablement. Idem pour les ensembles de Julia.

Comme j'ai accru les performances, j'ai porté la limite du nombre d'itérations à 8000. Mais là aussi on atteint une limite, un tel nombre d'itérations n'est utile que pour voir d'infimes détails.

[Edit 2010-11-13 11:25] À force de mise à jour, je me retrouvais avec une contribution sans une ligne de code !

C'est ici !
-----------------------------------------------

Avec Firefox, le plus rapide chez moi, il est possible de sauvegarder l'image au format PNG d'un simple clic droit.

[Auteur]

comment tu fais pour avoir des images différentes
J'obtiens toujours la même chose

Sinon tu fais comme Spacefrog : tu rêves à ces codes délirants avant de les écrire ?

[danielhagnoul]

Bonsoir

Comme indiqué sur la page web !

Cliquer sur l'image en bordure d'une zone noire et d'une zone colorée puis attendre 2 à 4s. Mais suivant les paramètres et le niveau de zoom on peut dépasser la minute de calcul.

Il faut bien viser sinon on obtient une couleur uniforme et il faut recommencer en réinitialisant la page.

Après plusieurs zooms, augmenté le nombre d'itérations pour augmenter la justesse du calcul.

Les coordonnées permettent de se repérer par rapport à des cartes de la fractale.

[jlmag]

bonjour Daniel,

Intéressant! Je regarde cela.

A+

[Mat.M]

Salut Daniel c'est du bon boulot bravo !

je vais m'en inspirer je vais essayer de porter le code en C++ et GDI sous Windows win32

[khayyam90]

Très bon développement, on n'aurait pas pensé voir ça en JavaScript

[danielhagnoul]

[SpaceFrog]

Oui moi aussi j'ai cette tête là quand je me lève le matin ...


Des vieux souvenirs; je l'avais fait à l'epoque en turbo pascal

[danielhagnoul]

[Edit 2010-11-13 01:20] Bonsoir

C'était beau, mais encore trop lent, alors j'ai remis l'ouvrage sur le métier. Je pense avoir diminué les temps de calcul d'un facteur 6 à 10 suivant les cas et être maintenant incapable de faire mieux.

La fractale de Mandelbrot en JavaScript en 900*600 pixels en 0,5s sous Firefox 3.6.10 (Chrome est plus lent) je crois que je peux être satisfait.

Pour un nombre d'itérations inférieur à 1000, on peut maintenant explorer la fractale beaucoup plus agréablement. Idem pour les ensembles de Julia.

Comme j'ai accru les performances, j'ai porté la limite du nombre d'itérations à 8000. Mais là aussi on atteint une limite, un tel nombre d'itérations n'est utile que pour voir d'infimes détails.

----------------------------

[Edit 2010-10-15 22:00]

Abandon de JSMin au profit de Closure Compiler avec l'option "Optimization Simple" car jQuery ne supporte pas l'option "Optimization Advanced".
----------------------------



J'ai amélioré la coloration (mais c'est une question de goût personnel), j'ai optimisé le code et je l'ai compressé. Le résultat est une nette amélioration de la vitesse des calculs pour un même nombre d'itérations.

Dans l'éternel jeu "j'améliore les performances, donc j'augmente mes exigences", si vous poussez le nombre d'itérations entre 2000 et 4000 il faut faire preuve de patience, j'ai mesuré un délai de 6 minutes pour 4000 itérations avec Firefox 3.6.10.

Mais on peut obtenir de très belles images avec un nombre d'itérations de 400 à 600 en quelques secondes.

Conseils d'utilisation

L'interface est minimaliste, sans garde-fou, vous devez donc faire preuve de discipline et attendre l'apparition de l'image avant de lancer un nouveau calcul.

Commencez avec un nombre d'itérations raisonnables, 200 par exemple. Pour un facteur de zoom de 5, multipliez le nombre d'itérations par 1.5 à chaque étape. Lorsque vous obtenez une image qui vous plaît (sur Firefox vous pouvez la sauvegarder d'un simple clic droit) réglez le zoom sur 1, multipliez le nombre d'itérations par 3 à chaque étape (maximum 4000) et cliquez au centre de l'image pour conserver le même point de vue.

[danielhagnoul]

Bonsoir

C'était beau, mais encore trop lent, alors j'ai remis l'ouvrage sur le métier. Je pense avoir diminué les temps de calcul d'un facteur 6 à 10 suivant les cas et être maintenant incapable de faire mieux.

La fractale de Mandelbrot en JavaScript en 900*600 pixels en 0,5s sous Firefox 3.6.10 (Chrome est plus lent) je crois que je peux être satisfait.

Pour un nombre d'itérations inférieur à 1000, on peut maintenant explorer la fractale beaucoup plus agréablement. Idem pour les ensembles de Julia.

Comme j'ai accru les performances, j'ai porté la limite du nombre d'itérations à 8000. Mais là aussi on atteint une limite, un tel nombre d'itérations n'est utile que pour voir d'infimes détails.

[Edit 2010-11-13 11:25] À force de mise à jour, je me retrouvais avec une contribution sans une ligne de code !

Pour le HTML 5, je vous laisse le soin d'examiner le code dans votre navigateur favori.

La version non compressée de mandelbrot.js

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
var width = 900,
    height = 600,
    r1 = -2.30,
    r2 = 1.30,
    i1 = -1.20,
    i2 = 1.20,
    rstep,
    istep,
    ctx,
    nmax,
    img,
    pix,
    complexe = function(cr, ci){
        var zr = 0,
            zi = 0,
            zr_next,
            zi_next;
 
        for (var n = 1; n <= nmax; n++){
            zr_next = zr*zr - zi*zi + cr;
            zi_next = 2*zr*zi + ci;
 
            if ((zr_next*zr_next + zi_next*zi_next) > 4){
                return n;
            }
 
            zr = zr_next;
            zi = zi_next;
        }
 
        return 0;
    },
    draw = function(rmin, imin, rmax, imax){
        rstep = (rmax - rmin) / width;
        istep = (imax - imin) / height;
 
        var t1 = new Date().getTime(),
            t2,
            z = -1,
            thr = Math.floor(nmax / 5),
            eThr,
            i,
            r,
            e;
 
        for(var y = 0; y < height; y++) {
            i = imin + y * istep;
            for(var x = 0; x < width; x++) {
                r = rmin + x * rstep;
                e = complexe(r, i);
                eThr = e/thr;
                if(e > 0) {
                    if(e <= thr) {
                        red = Math.floor(eThr * 255);
                        green = blue = 0;
                    } else {
                        e -= thr;
                        eThr = e/thr;
                        red = 255 - Math.floor(eThr * 25);
                        green = Math.floor(eThr * 255);
                        blue = Math.floor(eThr * 127.5);
                    }
                } else {
                    red = green = blue = 0;
                }
                pix[z += 1] = red;
                pix[z += 1] = green;
                pix[z += 1] = blue;
                z += 1;
            }
        }
        ctx.putImageData(img, 0, 0);
        t2 = new Date().getTime();
        return t2 - t1;
    };
 
$(function(){
    var thisLeft = $("#canvas").offset().left,
        thisTop = $("#canvas").offset().top,
        affiche = function(r1, r2, i1, i2, ms){
            $("#coords").html("r1 = " + r1.toExponential(16) +
                              " | r2 = " + r2.toExponential(16) +
                              "<br>i1 = " + i1.toExponential(16) +
                              " | i2 = " + i2.toExponential(16) +
                              " | ms = " + ms);
        },
        nbIter = function(){
            var n = parseInt($("#maxIter").val(), 10);
 
            if (isNaN(n)){
                $("#maxIter").val(50);
                n = 50;
            } else if (n > 8000) {
                n = 8000;
            } else if (n < 20){
                n = 20;
            }
 
            return n;
        },
        zoom = function(){
            var z = parseInt($("#zoom").val(), 10);
 
            if (isNaN(z)) {
                $("#zoom").val(5);
                z = 5;
            } else if (z > 20) {
                z = 20;
            } else if (z < 1){
                z = 1;
            }
 
            return z;
        };
 
    if ($("#canvas")[0].getContext){
        ctx = $("#canvas")[0].getContext("2d");
        ctx.fillStyle = "#000000";
        ctx.fillRect(0, 0, width-1, height-1);
        img = ctx.getImageData(0, 0, width, height);
        pix = img.data;
        nmax = nbIter();
        affiche(r1, r2, i1, i2, draw(r1, i1, r2, i2));
 
        $("#canvas").click(function(event){                    
            var x = event.pageX - thisLeft,
                y = event.pageY - thisTop,
                z = zoom(),
                w = width/(2*z),
                h = height/(2*z),
                r = r1,
                i = i1;
 
            r1 = r + (x - w) * rstep;
            i1 = i + (y - h) * istep;
            r2 = r + (x + w) * rstep;
            i2 = i + (y + h) * istep;
            nmax = nbIter();
            affiche(r1, r2, i1, i2, draw(r1, i1, r2, i2));                    
        });
    }
});

La version non compressée de julia.js

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
var width = 900,
    height = 600,
    r1 = -1.80,
    r2 = 1.80,
    i1 = -1.20,
    i2 = 1.20,
    rstep,
    istep,
    ctx,
    nmax,
    img,
    pix,
	julias = [
		[-0.726895347709114071439, 0.188887129043845954792, 1000],
		[-0.156844471694257101941, -0.649707745759247905171, 1000],
		[0.285, 0.013, 1000],
		[0.285, 0.01, 500],
		[0.3, 0.5, 200],
		[-0.414, -0.612, 500],
		[0.382, 0.147, 200],
		[0.284, -0.0122, 1000],
		[-0.0519, 0.688, 200],
		[-0.577, 0.478, 1000]
	],
	kr,
	ki,
    complexe = function(cr, ci){
        var zr = 0,
            zi = 0,
            zr_next,
            zi_next;
 
        for (var n = 1; n <= nmax; n++){
			if (n == 1){
				zr_next = cr;
				zi_next = ci;
			} else {
				zr_next = zr*zr - zi*zi + kr;
				zi_next = 2*zr*zi + ki;
			}
 
            if ((zr_next*zr_next + zi_next*zi_next) > 4){
                return n;
            }
 
            zr = zr_next;
            zi = zi_next;
        }
 
        return 0;
    },
    draw = function(rmin, imin, rmax, imax){
        rstep = (rmax - rmin) / width;
        istep = (imax - imin) / height;
 
        var t1 = new Date().getTime(),
            t2,
            z = -1,
            thr = Math.floor(nmax / 5),
            eThr,
            i,
            r,
            e;
 
        for(var y = 0; y < height; y++) {
            i = imin + y * istep;
            for(var x = 0; x < width; x++) {
                r = rmin + x * rstep;
                e = complexe(r, i);
                eThr = e/thr;
                if(e > 0) {
                    if(e <= thr) {
                        red = Math.floor(eThr * 255);
                        green = blue = 0;
                    } else {
                        e -= thr;
                        eThr = e/thr;
                        red = 255 - Math.floor(eThr * 25);
                        green = Math.floor(eThr * 255);
                        blue = Math.floor(eThr * 127.5);
                    }
                } else {
                    red = green = blue = 0;
                }
                pix[z += 1] = red;
                pix[z += 1] = green;
                pix[z += 1] = blue;
                z += 1;
            }
        }
        ctx.putImageData(img, 0, 0);
        t2 = new Date().getTime();
        return t2 - t1;
    };
 
$(function(){
    var thisLeft = $("#canvas").offset().left,
        thisTop = $("#canvas").offset().top,
        affiche = function(r1, r2, i1, i2, ms){
            $("#coords").html("r1 = " + r1.toExponential(16) +
                              " | r2 = " + r2.toExponential(16) +
                              "<br>i1 = " + i1.toExponential(16) +
                              " | i2 = " + i2.toExponential(16) +
                              " | ms = " + ms);
        },
        nbIter = function(){
            var n = parseInt($("#maxIter").val(), 10);
 
            if (isNaN(n)){
                $("#maxIter").val(50);
                n = 50;
            } else if (n > 8000) {
                n = 8000;
            } else if (n < 20){
                n = 20;
            }
 
            return n;
        },
        zoom = function(){
            var z = parseInt($("#zoom").val(), 10);
 
            if (isNaN(z)) {
                $("#zoom").val(5);
                z = 5;
            } else if (z > 20) {
                z = 20;
            } else if (z < 1){
                z = 1;
            }
 
            return z;
        },
		coefs = function(){
			var kn = $("#coefs").val();
			kr = julias[kn][0];
			ki = julias[kn][1];
			$("#maxIter").val(julias[kn][2]);
		};
 
 
    if ($("#canvas")[0].getContext){
        ctx = $("#canvas")[0].getContext("2d");
        ctx.fillStyle = "#000000";
        ctx.fillRect(0, 0, width-1, height-1);
        img = ctx.getImageData(0, 0, width, height);
        pix = img.data;
		coefs();
        nmax = nbIter();
        affiche(r1, r2, i1, i2, draw(r1, i1, r2, i2));                    
 
		$("#coefs").change(function(){
			coefs();
			nmax = nbIter();
			$("#zoom").val(5);
			r1 = -1.80;
			r2 = 1.80;
			i1 = -1.20;
			i2 = 1.20;
            affiche(r1, r2, i1, i2, draw(r1, i1, r2, i2));                    
		});
 
        $("#canvas").click(function(event){                    
            var x = event.pageX - thisLeft,
                y = event.pageY - thisTop,
                z = zoom(),
                w = width/(2*z),
                h = height/(2*z),
                r = r1,
                i = i1;
 
            r1 = r + (x - w) * rstep;
            i1 = i + (y - h) * istep;
            r2 = r + (x + w) * rstep;
            i2 = i + (y + h) * istep;
            nmax = nbIter();
            affiche(r1, r2, i1, i2, draw(r1, i1, r2, i2));                    
        });
    }
});

[danielhagnoul]

Bonjour

La fractale en 0.5s, vive XP SP3, le Pentium 4 (3 Ghz, 1 Go Ram) et Firefox 3.6.10 !

Je m'explique !

Toutes mes tentatives pour accélérer la manoeuvre en changeant de matériel ou de logiciel pour voir la fractale plus vite sont couronnées par l'échec.

Sur le même ordinateur, avec Chrome 7 ou 8 ou Firefox 4 beta 7 c'est plus lent. Exemple*: 2.3 à 2.9s avec Firefox 4 (il me semble instable, mais c'est une beta, je sais).

Le seul autre ordinateur dont je dispose est un Netbook W7 64 bits, Celeron 743 (1.3 Ghz 2Go Ram). C'est toujours plus lent que 0.5s, mais 1.4s au lieu de 2.3 à 2.9 avec Firefox 4 beta 7.

Quelqu'un aura-t-il la gentillesse de me dire la vitesse d'affichage de la fractale pour un ordinateur de bureau non obsolète avec Chrome 7 (ou 8) et Firefox 3.6.10 (ou Firefox 4).

[pseudocode]

0.255s sous Opera 11 (alpha) et Win7 x64 (Q8200 2.33Ghz)

[danielhagnoul]

Bonsoir

255 millisecondes ! Merci Xavier !

[Lynix]

Alors, j'ai un processeur Intel Core Duo à 3.4Ghz

Opera 11 : 629 ms
Firefox 3.6.15 : 351 ms
Chrome 11.0.686 (Dev) : 254 ms

(Avec un test lancé trois fois en utilisant la moyenne des scores)

[danielhagnoul]

Bonsoir

J'ai un nouvel ordinateur depuis quelques jours et j'ai pu faire des tests.

Je viens de tester IE9, c'est plus lent (~1200 ms), mais c'est bon.

Core i5, Firefox 3.6.15, 173 ms ! Firefox 4 RC1 267 ms

Chrome 10 !