Briciole ... tra i numeri

Alcuni dei miei passaggi su blog di natura didattica.
Matematica, scienze, numeri e giochi di logica,
riflessioni, sfide personali e sprazzi di neuroni impazziti.


Questi articoli sono stati ospitati da due dei migliori blog
che trattano matematica e scienze in generale.


Scienze ... giocando o quasi Percorsi di apprendimento scientifico alternativi al manuale scolastico,
favorendo collaborazioni con docenti e alunni di altri contesti
Blog sulla matematica dedicato agli studenti Spazio dedicato alla matematica applicata
con articoli di didattica scientifica e metodologia generale
Visita la sezione DIDATTICA.ndo ed usufrusci delle risorse didattiche a disposizione

Elenco contenuti
Pubblicato il 10/02/2014 su Matem@ticamente
 

Curve di Koch:
come creare merletti, fiocchi di neve,
anti-fiocchi e variazioni


Curva di Koch: pentagono con iterazione pentagonale Come creare e salvare immagini di frattali con l'aiuto di un'applicazione di grafica vettoriale mirata, il cui algoritmo matematico di base è quello della curva di Koch, ma che, tramite specifiche funzionalità, contempla anche possibili variazioni costruttive; il tutto in modo semplice, veloce e (si spera) divertente.

Chiarisco sin da subito:
non leggerete un trattato sui frattali ed in particolare sulla curva di Koch, ma neanche un "normale" articolo informativo o didattico; niente di tutto ciò. Perché? Perché in molti l'hanno fatto prima e sicuramente meglio di come potrei farlo io: chi mettendo in risalto la bellezza di questa particolare geometria, chi evidenziando lo stretto legame con la natura, chi addentrandosi nei meandri delle spiegazioni e verifiche algebriche, chi proponendo tutorial di costruzione geometrica, chi proponendo algoritmi ricorsivi per potenziali programmi, chi raccontandone la storia dalle origini e chi con l'intento di far incuriosire e presentare ai propri studenti un nuovo fantastico "mondo geometrico".

No, qui voglio raccontarvi una storia (una sorta di croni-tutorial), semplice, probabilmente poco interessante, ma necessaria per introdurre la piccola applicazione web che segue, la quale necessita almeno di qualche spiegazione iniziale per poterla utilizzare al meglio.

Applicazione web per la creazione e costruzione delle curve di Koch



Codice da incorporare:



Il merletto di Koch

Prima di presentare le funzionalità dell'applicazione è necessario introdurre il metodo di costruzione della curva più semplice di Koch: "il merletto".

Curva di Koch: merletto di Koch

La costruzione di questa particolare curva è molto semplice ed è ben esplicitata dall'immagine che segue:

Curva di Koch: merletto di Koch

In pratica questi sono i passaggi da seguire:
  1. Iniziando da un segmento di lunghezza assegnata, dividere il segmento in tre segmenti congruenti
  2. Cancellare il segmento centrale, sostituendolo con due segmenti identici che sono i due lati di un triangolo equilatero
  3. Ripetere (reiterare) le fasi 1 e 2 per ciascuno dei nuovi segmenti che si verranno a creare
Bene, memorizziamo questo semplice "algoritmo" perché sarà la base di partenza di tutta l'applicazione.

Il fiocco di neve di Koch

Per passare dal "merletto" al "fiocco di neve" è sufficiente combinare insieme tre copie del merletto/frattale lungo i lati di un triangolo equilatero o più semplicemente partire da un triangolo equilatero e ripetere le fasi 1 e 2 dell'algoritmo sopra spiegato.

Curva di Koch: fiocco di neve di Koch




Croni-tutorial

Non avevo assolutamente in programma la creazione di questa web app.
Come spesso succede, tutto è nato chiacchierando con amici. Si, insomma, Annarita aveva pubblicato un post, questo: "Pythagoras tree fractal" e nei commenti Aldo ha avuto un'idea, provare a vedere che cosa sarebbe venuto fuori dall'iterazione alternata del fiocco di neve di Koch (espansione/contrazione).

In pratica, invece di iterare sempre verso l'esterno (espansione classica di Koch, come nel caso delle animazioni precedenti), provare ad alternare le iterazioni, prima espandendo e poi contraendo (verso l'interno).
Mi son messo di buona lena su GeoGebra ed ho disegnato il "fiocco di neve alternato di Koch".

Curva di Koch: fiocco di neve di Koch alternato

E se invece la prima iterazione fosse stata la compressione, poi l'espansione e così via iterando? Il risultato sarebbe stato sicuramente diverso, ma quale?
Ora, avrò pure una gran buona volontà, ma riprendere GeoGebra (ma qualsiasi altro software vettoriale) e ricominciare a disegnare 81 segmenti e cancellarne 39 (perché questi sono i numeri con 3 iterazioni complete) non era proprio la mia massima aspirazione. Ma la curiosità di vedere cosa sarebbe venuto fuori era tanta che allora ho pensato di far fare il lavoro sporco ad una applicazione.
Così è nata la prima bozza dell'applicazione e questo è il risultato di un "fiocco di neve alternato di Koch" partendo dalla compressione:

Curva di Koch: fiocco di neve di Koch alternato

Perché il codice scritto non rimanesse fine a se stesso, ho così pensato di dargli un'ordinata e creare un minimo di interfaccia utilizzabile anche da altri.

La primissima versione era quella che oggi potete vedere ed utilizzare ma con il solo menu "Modalità" e le voci:
  • Espansione
  • Compressione
  • Espansione → Compressione
  • Compressione → Espansione

In pratica, partendo esclusivamente da un triangolo equilatero, si potevano costruire solo "fiocchi di neve di Koch" o tutti espansi, o tutti compressi ("anti-fiocchi di Koch") o con un'alternanza 1 a 1 con la possibilità di decidere con cosa iniziare.
Il passo successivo è stato quello di permettere un alternanza personalizzata, così è stata aggiunta la voce
  • Personalizza

Tramite un apposito form, "Personalizza" permette di costruire una catena di iterazioni (alternanza personalizzata) semplicemente cliccando sui bottoni "Espansione" e "Compressione". La nuova alternanza creata e salvata viene memorizzata all'interno del menu "Modalità" e può essere utilizzata per creare una nuova curva di Koch semplicemente iterando.
Di seguito un esempio di alternanza personalizzata (C → C → C → E → E)

Curva di Koch: fiocco di neve di Koch alternato variabile

Questo è solo un esempio, ma potete intuire facilmente quanto la voce "Personalizza" possa permettere (soprattutto se combinata con altre funzionalità che vedremo tra un po') di variare la costruzione delle curve.


Siamo in ballo e allora balliamo

Questa prima versione dell'applicazione aveva un grosso limite: le possibili curve di Koch potevano essere create a partire SOLO da un triangolo equilatero.
È vero che le curve di Koch più famose sono il merletto, il fiocco di neve e l'anti-fiocco di neve, ma nulla impediva ed impedisce di impostare "l'algoritmo di Koch" anche su altre figure geometriche ed in particolare sui poligoni regolari.

Mi rimbocco le maniche e riprendo a scrivere del codice:  
prende così forma la seconda versione dell'applicazione.

In pratica ho aggiunto un ulteriore menu "Numero dei lati" che permette di scegliere (oltre al semplice segmento) il poligono di partenza con il quale costruire (sempre iterando) le possibili curve.
Oltre al nuovo menu ho anche implementato la possibilità di scegliere un "Colore" per la curva principale ed una casella di controllo "Mostra opposto" che se spuntata mostra la curva opposta a quella scelta tramite il menu "Modalità". E per finire ho implementato anche un ulteriore menu "Iterazioni precedenti" che semplicemente permette di visualizzare o meno (con uno spessore più fino) i vari passaggi delle iterazioni precedenti.

Non c'è bisogno che mi dilunghi sul funzionamento di queste nuove e semplici funzionalità che potrete provare personalmente sull'applicazione. Mi limito ad includere due animazioni di possibili nuove curve che potrete creare semplicemente "giocando" con le diverse funzionalità fino ad ora menzionate.

Curva di Koch: quadrato con iterazione triangolare


Curva di Koch: esagono con iterazione triangolare

Siamo alla fine, quasi

A questa seconda versione mancava una cosa secondo me fondamentale: poter salvare le immagini delle curve create, così mi sono rimesso a scrivere codice ed è uscita la terza versione in cui è stato aggiunto il pulsante "Salva immagine".

Curva di Koch: salva immagine

Il formato PNG permette di salvare un'immagine statica (quella visualizzata al momento del salvataggio), mentre il formato GIF permette di salvare un'animazione seguendo tre semplici passaggi guidati:
  • impostazione del tempo di visualizzazione per ogni frame
  • generazione della GIF
  • download dell'animazione

Il formato SVG permette di salvare un'immagine vettoriale che può essere successivamente importata in un apposito software (es: Illustrator, InkScape, ecc.) e modificata secondo le proprie esigenze. Non solo, essendo un formato basato sul XML, è possibile interagirci facilmente con il JavaScript ed il CSS, questo significa che è un formato ideale per immagini dinamiche sul Web.

In quest'ultima versione ho voluto implementare anche un minimo di interazione con la curva creata.
Due le interazioni possibili:
  • Pan
  • Zoom
Entrambe eseguibili tramite la rotellina del mouse: tenendola premuta la curva può essere spostata (Pan) mentre ruotandola è possibile scalarla (Zoom).


E se volessimo modificare una parte dell'algoritmo?

Ve lo ricordate "l'algoritmo di base di Koch" menzionato all'inizio?
  1. Iniziando da un segmento di lunghezza assegnata, dividere il segmento in tre segmenti congruenti
  2. Cancellare il segmento centrale, sostituendolo con due segmenti identici che sono i due lati di un triangolo equilatero
  3. Ripetere (reiterare) le fasi 1 e 2 per ciascuno dei nuovi segmenti che si verranno a creare
Si insomma, al punto 2, se invece di triangoli equilateri proviamo a costruire altri poligoni regolari che tipo di curva ne verrebbe fuori? Il punto 2 dell'algoritmo iniziale diventa quindi:

  1. Cancellare il segmento centrale, sostituendolo con un poligono regolare (senza base) il cui lato sarà pari al segmento centrale

Così è nata l'ultima e definitiva versione di questa Web application.
Il nuovo algoritmo è stato implementato ed ora è presente una nuova casella di controllo, "Abilita iterazioni poligonali". Una volta spuntata la casella di controllo compare una casellina in cui è possibile decidere quale poligono regolare far costruire sui vari segmenti durante le iterazioni.

Un esempio è l'immagine all'inizio dell'articolo: su di un pentagono regolare è stata applicata un'iterazione pentagonale invece che la classica costruzione del triangolo equilatero.
Altri due esempi nelle animazioni che seguono:

  • Esagono con iterazione quadrata:
    Curva di Koch: esagono con iterazione quadrata


  • Ettagono con iterazione pentagonale:
    Curva di Koch: ettagono con iterazione pentagonale

Finisce qui il croni-tutorial. Ora non vi rimane che sbizzarrirvi a costruire e salvare tutte le variazioni di curve di Koch che volete.
Avete due soli limiti: la fantasia ed il tempo di elaborazione per costruzioni particolarmente complesse.


Marco Cameriero




Ti consiglio di seguire commenti ed eventuali discussioni
sulla pagina di Matem@ticamente che ha ospitato l'articolo
   
Codice per incorporare l'articolo
     
Non hai trovato quello che cercavi?
Torna alla HomePage, da lì potrai accedere facilmente a tutti i contenuti del sito.
Torna all'inizio
Tutti i webmaster che volessero segnalare, non copiare,
il contenuto di questa pagina sul proprio sito, possono farlo liberamente.
E' gradito un preavviso tramite mail all'autore e l'iserimento,
nella pagina di citazione, di un link verso la pagina corrente.
© Copyright    Marco's Room
Contatti    Privacy    Valid XHTML 1.0 Transitional    CSS Valido!
Marco Cameriero Segui su LinkedInLinkedIn
Segui su Google+Google+
Data di pubblicazione: 15/10/2009    Ultimo aggiornamento: 01/12/2013
 
Porta d'ingresso per Marco's Room, la stanza Marco
  Feed RSS
Google
Web   Marco's Room
 
Effettua il login oppure registrati