22 avril 2020

P5.js afficher la suite fibonacci

Par ghaliano
P5js
Suite de fibonacci

Présentation de la lib p5.js

p5 est une bibliothèque JavaScript avec pour objectif de rendre le codage accessible et inclusif pour les artistes, les concepteurs, les éducateurs, les débutants et quiconque! p5.js est gratuit et open-source.

p5 dispose d’un ensemble complet de fonctionnalités de dessin. Cependant, vous n’êtes pas limité à votre canevas de dessin.
Vous pouvez considérer l’ensemble de la page de votre navigateur comme votre esquisse, y compris les objets HTML5 pour le texte, la saisie, la vidéo, la webcam et le son.

Utiliser P5.js pour afficher la suite de fibonacci

Dans cet exemple,vous verrez comment utiliser le potentiel de p5.js pour afficher graphiquement la suite fibonnacci, les données sont issue d’une classe php largement expliqué ici

<?php

include('awesome-progression.php');

$data = AwesomeProgression::fibonnaci(20)['y'];
?>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
</head>
<body>
<script>
    var data = <?php echo json_encode($data) ?>;

    var unite = 0.3;
    var canvasW = 1200;
    var canvasH = 700;
    setup();
    drawTile();
    function drawTile()
    {
        stroke(50);
        for (var i=0; i<canvasW; i += 2 * unite) {
            line(i, 0, i, canvasH);
        }

        for (var i=0; i<canvasH ; i += 2 * unite) {
            line(0, i, canvasW , i);
        }
    }

    function setup() {
        createCanvas(canvasW, canvasH);
        background(0);
        drawTile();
        var x0 = canvasW/4;
        var y0 = canvasH/4;
        var x = x0;
        var y = y0;
        j = 0;
        for (n=1; n<data.length; n++) {
            var width = height = data[n] * unite;
            if (n>2) {
                if (j == 4) {
                    p = -data[n-2];
                    k = -data[n];
                    j = 0;
                }
                else if (j == 3) {
                    p = data[n-1];
                    k = -data[n-2];
                }
                else if (j == 2) {
                    p = 0;
                    k = data[n-1];
                }
                else if (j == 1) {
                    p = -data[n];
                    k = 0;
                }
                else if (j == 0) {
                    p = -data[n-2];
                    k = -data[n];
                }

                translate(
                    p * unite,
                    k * unite
                );

                j++;
            } else {
                translate((n * width) - width, 0);
            }

            fill(color((data[n]/n),  120,  30));
            rect(x0, y0, width, height);
            stroke(255);
            var fontsize = 18;
            textSize(fontsize);
            text("" + data[n], x0 + width/2 - fontsize/2, y0 + height/2 + fontsize/2);
        }
    }

</script>
</body>
</html>

Le résultat

Affichage suite fibonacchi à l'aide de p5
Affichage suite fibonacchi à l’aide de p5