Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

La fractale de Benoît Mandelbrot en JavaScript !


Sujet :

Contribuez

  1. #1
    Rédacteur

    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.




  2. #2
    Expert éminent sénior
    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 ?

  3. #3
    Rédacteur



    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.


  4. #4
    Invité
    Invité(e)
    bonjour Daniel,

    Intéressant! Je regarde cela.

    A+

  5. #5
    Expert éminent sénior
    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
    La théorie, c'est quand on sait tout et que rien ne fonctionne.
    La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
    ( A Einstein)

  6. #6
    Rédacteur

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

  7. #7

  8. #8
    Rédacteur/Modérateur

    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

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  9. #9
    Rédacteur

    [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.


  10. #10
    Rédacteur

    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));                    
            });
        }
    });

  11. #11
    Rédacteur

    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).


  12. #12
    Rédacteur

    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.

  13. #13

  14. #14
    Membre habitué
    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)

  15. #15
    Rédacteur



    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 !

  16. #16

  17. #17

  18. #18
    Candidat au Club
    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/d1290303/webmasters-developpement-web/javascript/generer-dendrite-julia-javascript/
    Merci

  19. #19
    Rédacteur

    La dendrite de Julia
    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>

  20. #20
    Candidat au Club
    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.