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

danielhagnoul · 02/10/2010, 09h04

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 · 02/10/2010, 19h22

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 · 02/10/2010, 19h59

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 · 04/10/2010, 17h31

bonjour Daniel,

Intéressant! Je regarde cela.

A+

Mat.M · 05/10/2010, 20h15

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 · 06/10/2010, 09h07

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

danielhagnoul · 06/10/2010, 19h19

SpaceFrog · 08/10/2010, 16h59

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 · 11/10/2010, 00h57

[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 · 13/11/2010, 02h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 · 13/11/2010, 11h13

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 · 14/11/2010, 23h41

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

danielhagnoul · 16/11/2010, 22h40

Bonsoir

255 millisecondes !

Merci Xavier !

Lynix · 09/03/2011, 12h19

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 · 10/03/2011, 00h07

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 !

danielhagnoul · 28/11/2012, 00h49

Bonsoir

Version XXL

MandelbrotXXL, Présentation et codes non compressés

danielhagnoul · 02/12/2012, 22h30

Nouvelle version de MandelbrotXXL : choix des couleurs !

stardavid · 19/12/2012, 23h15

Bonjour, j'ai un petit problème sur ma dendrite de julia, pourriez vous allez faire une petit tour ici ? http://www.developpez.net/forums/d12...ia-javascript/
Merci

danielhagnoul · 20/12/2012, 01h18

Bonsoir

Impossible de me servir de votre code !

J'ai utilisé une version simplifiée de mon code (ci-dessus) pour les ensembles de Julia.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			section { text-align: center; }
			h2 { margin-bottom: 3rem; }
			footer { margin-top: 3rem; }
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>La dendrite de Julia</h2>
		<section>
			<canvas id="canvas" width="900" height="600"></canvas>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="012-12-20T01:00:00.754+01:00" pubdate>012-12-20T01:00:00.754+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$( window ).load( function(){
 
				var width = 900,
				    height = 600,
				    r1 = -1.80,
				    r2 = 1.80,
				    i1 = -1.20,
				    i2 = 1.20,
				    rstep,
				    istep,
				    ctx,
				    nmax,
				    img,
				    pix,
					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 z = -1,
				            thr = Math.floor(nmax / 5),
				            eThr,
				            i,
				            r,
				            e,
				            red,
				            green,
				            blue;
 
				        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 = 0;
				                        green = Math.floor(eThr * 127.5);
				                        blue = Math.floor(eThr * 255);
				                    }
				                } else {
				                    red = green = blue = 0;
				                }
				                pix[z += 1] = red;
				                pix[z += 1] = green;
				                pix[z += 1] = blue;
				                z += 1;
				            }
				        }
				        ctx.putImageData(img, 0, 0);
				    };
 
				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;
				kr = 0;
				ki = 1;
				nmax = 80;
				draw(r1, i1, r2, i2);
 
				/*
				 * Il suffit de changer les coordonnées et le nombre 
				 * d'itération pour voir d'autres ensembles de Julia
				 * 
				 * Exemple :
				 *     kr = 0.3;
				 *     ki = 0.6;
				 *     nmax = 300;
				 */
 
			});
		</script>
	</body>
</html>

stardavid · 24/01/2013, 23h32

Est-il possible que ces quelques lignes me soient expliquées ?
En fait, j'apprends actuellement le JavaScript, donc j'essaie de traduire tout votre code en JavaScript. Mais quelques lignes restent très obscures pour moi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    }
				        ctx.putImageData(img, 0, 0);  //je ne comprends pas la signification de putimagedata
				    };
 
				ctx = $("#canvas")[0].getContext("2d");
				ctx.fillStyle = "#000000";
				ctx.fillRect(0, 0, width-1, height-1); // je ne comprends pas le but de tracer un rectangle qui fait tout le canvas
				img = ctx.getImageData(0, 0, width, height); // je ne comprends pas la signification de getImageData
				pix = img.data; //je ne comprends pas cette ligne aussi
				kr = 0;  //mis à par nmax, kr et ki n'aparraissent nulle part dans le code, donc je me demande ce que j'ai pu rater...
				ki = 1;
				nmax = 80;
				draw(r1, i1, r2, i2);

Désole de vous déranger, et merci beaucoup pour vos précédentes réponses.

02/10/2010, 09h04	#1
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	La fractale de Benoît Mandelbrot en JavaScript ! 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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	20

02/10/2010, 19h59	#3
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

06/10/2010, 09h07	#6
khayyam90 Responsable Portail Ingénieur développement logiciels Inscription : janvier 2004 Messages : 8 876 Détails du profil Informations personnelles : Sexe : Âge : 28 Localisation : France, Saône et Loire (Bourgogne) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : janvier 2004 Messages : 8 876 Points : 57 102 Points : 57 102	Très bon développement, on n'aurait pas pensé voir ça en JavaScript __________________ Responsable du Portail Developpez. Mes tutoriels Algo, Web, C++, PHP - Mon CV
	00

06/10/2010, 19h19	#7
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	__________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

08/10/2010, 16h59	#8
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 812 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 812 Points : 51 388 Points : 51 388	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 __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

02/10/2010, 19h22	#2
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 5 154 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 5 154 Points : 5 593 Points : 5 593	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 ?
	00

04/10/2010, 17h31	#4
jlmag Membre éclairé Inscription : octobre 2006 Messages : 357 Détails du profil Informations personnelles : Âge : 44 Informations forums : Inscription : octobre 2006 Messages : 357 Points : 316 Points : 316	bonjour Daniel, Intéressant! Je regarde cela. A+
	00

05/10/2010, 20h15	#5
Mat.M Expert Confirmé Sénior Développeur informatique Inscription : novembre 2006 Messages : 4 440 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : novembre 2006 Messages : 4 440 Points : 5 858 Points : 5 858	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
	00

11/10/2010, 00h57	#9
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	[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 900600 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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

13/11/2010, 11h13	#11
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	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). __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

14/11/2010, 23h41	#12
pseudocode Rédacteur/Modérateur Xavier Philippeau Architecte système Inscription : décembre 2006 Messages : 9 815 Détails du profil Informations personnelles : Nom : Xavier Philippeau Âge : 40 Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Architecte système Secteur : Industrie Informations forums : Inscription : décembre 2006 Messages : 9 815 Points : 16 457 Points : 16 457	0.255s sous Opera 11 (alpha) et Win7 x64 (Q8200 2.33Ghz) __________________ ALGORITHME (n.m.): Méthode complexe de résolution d'un problème simple.
	00

16/11/2010, 22h40	#13
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	Bonsoir 255 millisecondes ! Merci Xavier ! __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

09/03/2011, 12h19	#14
Lynix Membre régulier Jérôme Leclercq Développeur de jeux vidéo Inscription : février 2009 Messages : 114 Détails du profil Informations personnelles : Nom : Jérôme Leclercq Localisation : Belgique Informations professionnelles : Activité : Développeur de jeux vidéo Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : février 2009 Messages : 114 Points : 72 Points : 72	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)
	00

10/03/2011, 00h07	#15
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	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 ! __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

28/11/2012, 00h49	#16
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	Bonsoir Version XXL MandelbrotXXL, Présentation et codes non compressés __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	10

02/12/2012, 22h30	#17
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	Nouvelle version de MandelbrotXXL : choix des couleurs ! __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

19/12/2012, 23h15	#18
stardavid Invité de passage Dav Développeur informatique Inscription : décembre 2012 Messages : 3 Détails du profil Informations personnelles : Nom : Dav Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : décembre 2012 Messages : 3 Points : 2 Points : 2	dendrite julia Bonjour, j'ai un petit problème sur ma dendrite de julia, pourriez vous allez faire une petit tour ici ? http://www.developpez.net/forums/d12...ia-javascript/ Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email