Maths (2) dessiner la fleur du tournesol

En utilisant l’angle dit « angle d’or » (environ 137.5 degrés ou 2.3999 radians), on peut dessiner une spirale de Fermat selon un modèle inventé par H. Vogel, à la manière des étamines des tournesols, des écailles des pommes de pin ou de diverses organisations naturelles.

rayon = c * √n
θ = n * φ

c est une constante (si on change c, l’espacement qui sépare les éléments de la spirale change), φ est l’angle d’or et n dénombre chaque élément de la spirale. Dans l’exemple qui suit (langage processing), n prend les valeurs successives de n sont 0, 1, 2, 3, 4, et ainsi de suite jusqu’à 1000 ; Le constante c a la valeur de 10 :

float angledor=radians(137.5);

void setup(){
size(400,400);background(255);strokeWeight(7);smooth();
float x=200;float y=200;float constante=10;
for(int a=0;a<1000;a++){
float r=constante*sqrt(a);
x+=cos(angledor*a)*r;y+=sin(angledor*a)*r;
point(x,y);
}
}

On pourrait être encore plus précis en calculant l’angle d’or à la volée. Sa valeur est égale à (2*Π)/φ+1. La valeur de φ, le nombre d’or, est (1+√5)/2.
À la place de float angledor=radians(137.5); on pourra donc écrire :

float nombredor = (1+sqrt(5))/2;
float angledor = TWO_PI/(1+nombredor);

  1. Jean-no’s avatar

    Julien Quint m’a envoyé une version HTML de la même formule, à laquelle il ajoute de la couleur. Son code repose sur l’objet Canvas :

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Tournesol</title>
    <script type="text/javascript">//<![CDATA[
    function hsl_to_rgb(h_, s, l)
    {
    var c = s * (l <= 0.5 ? 2 * l : 2 - 2 * l);
    var h = h_ / 60;
    var x = c * (1 - Math.abs(h % 2 - 1));
    var m = l - c / 2;
    h = Math.floor(h);
    var r = Math.round(([c, x, 0, 0, x ,c][h] + m) * 255);
    var g = Math.round(([x, c, c, x, 0, 0][h] + m) * 255);
    var b = Math.round(([0, 0, x, c, c, x][h] + m) * 255);
    return "rgb(" + [r, g, b].join(", ") + ")";
    }

    function draw()
    {
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    var angle = 2 * Math.PI / (1 + (1 + Math.sqrt(5)) / 2)
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var c = 10;
    for (var a = 0; a < 1000; ++a) {
    var r = c * Math.sqrt(a);
    x += Math.cos(angle * a) * r;
    y += Math.sin(angle * a) * r;
    context.fillStyle = hsl_to_rgb((angle * a / Math.PI * 180) % 360, 1, .5);
    context.beginPath();
    context.arc(x, y, 3.5, 0, Math.PI * 2, true);
    context.fill();
    }
    }
    //]]>
    </script>
    </head>
    <body onload="draw();" style="margin:200px auto 0 auto; width: 400px">
    <canvas width="400" height="400"/>
    </body>
    </html>

    Répondre

Reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *