jQuery e la sequenza di Fibonacci: un modello a cui ispirarsi?

Il mio interesse per il mondo della matematica è cominciato dopo aver frequentato le scuole superiori e aver collezionato negli ultimi anni la significativa media del 4 in questa materia. Il punto è che all'epoca non vedevo un'applicazione pratica in quello che stavo studiando. Solo più tardi, con la programmazione, ho potuto trovare quei significativi riscontri che mi mancavano. Recentemente mi sono reimbattuto nella serie di Fibonacci, che in genere è l'esempio canonico in JavaScript delle funzioni ricorsive o di come si possa effettuare il caching delle chiamate alle funzioni (Crockford, JavaScript. The good parts). La cosa interessante a livello di sviluppo è la percezione di un rapporto armonico esistente tra i numeri della serie. Possiamo ispirarci ad un simile modello?

A livello di codice JavaScript è veramente semplice implementare la serie di Fibonacci:


function fib(n) {

    return (n < 2 ? n : fib(n - 1) + fib(n - 2));
}

Volendo generare una serie di 20 numeri, possiamo scrivere:


var out = document.getElementById('output');
var text = '';

for(i = 0; i < 20; i++) {
    text += fib(i) + ' ';
}

out.appendChild(document.createTextNode(text));

Il codice genera questa sequenza:

0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987 1597 2584 4181

Notate la regolarità matematica (appunto!) della serie? Possiamo ad esempio memorizzare questa serie in un array per riutilizzarla:


var series = [];
for(var i = 0; i < 20; i++) {

	series[i] = fib(i);	

}

Con jQuery possiamo ridurre questo array solo ai valori che ci interessano:


series = $.grep(series, function(n, i) {
    return (n > 5 && n < 600);
});

console.log(series);  // [8, 13, 21, 34, 55, 89, 144, 233, 377]

Quindi possiamo usare questi valori per animare degli elementi in modo armonico:


var time = 0;
$('div.box').each(function(i) {
    var box = $(this);
    box.queue('box', function(next) {
        box.delay(time).animate({
            left: series[i]
        }, 1000, next);
    });
    box.dequeue('box');
    
    time += 500;
});

Visionando l'esempio finale si apprezza la regolarità matematica del risultato.

Torna su