Ricorsione per generare alberi: codice

    function disegnaRamo(x, y, angolo, livello) {

    let lunghezza = pow( 0.6, livello ) * 130;
    let x2 = x + cos(angolo) * lunghezza;
    let y2 = y + sin(angolo) * lunghezza;
    line(x, y, x2, y2);

    livello++;
    if (livello < 7) {
        let deviazione = 0.75;
        disegnaRamo(x2, y2, angolo+deviazione, livello);
        disegnaRamo(x2, y2, angolo-deviazione, livello);
    }
}

function setup() {
    createCanvas(360, 320);
    background(255);
    disegnaRamo( width/2, height, PI*1.5, 0 );
}

Spiegazione


  function disegnaRamo(x, y, angolo, livello) {

Funzione (ricorsiva) che disegna un segmento a partire dalle coordinate x, y con una direzione indicata da angolo e per una lunghezza ricavata attraverso livello.


  let lunghezza = pow( 0.6, livello ) * 130;

La lunghezza del ramo parte da 130 pixel e si riduce al 60% a ogni livello di ricorsione.


  let x2 = x + cos(angolo) * lunghezza;
let y2 = y + sin(angolo) * lunghezza;

Le coordinate dell’estremità finale del segmento vengono ricavate usando la conversione da coordinate polari (angolo, lunghezza) a coordinate cartesiane.


  let deviazione = 0.75;
disegnaRamo(x2, y2, angolo + deviazione, livello);
disegnaRamo(x2, y2, angolo - deviazione, livello);

La funzione chiama se stessa due volte: una volta con un angolo maggiore e una con un angolo minore a quello di base.


  disegnaRamo( width/2, height, PI*1.5, 0 );

Avvia la ricorsione a partire dal centro del bordo inferiore del canvas procedendo verso l’alto (PI*1.5) e con il livello iniziale impostato a zero.

Angoli casuali

Rompere la simmetria facendo impostare deviazioni casuali dell’angolo dei rami, ad esempio con:
    let deviazione = random(0.1, 1);
Far impostare valori diversi usando il tasto in alto a destra nel codice.

Lunghezze casuali

Rompere la regolarità delle lunghezze dei rami usando un valore di base casuale diverso da 130, ad esempio con:
    let lunghezza = pow( 0.6, livello ) * random( 50, 150 );

Spessori e colori

Prima dell’istruzione line(), impostare gli attributi grafici della linea in base al valore di livello o casualmente, ad esempio usando:
    strokeWeight( (7-livello) / 1.5 );
  stroke( 64, 180-livello*20, 0 );

Fiori

Far disegnare dei cerchi alla fine dei rami più piccoli (quando il livello è uguale a 7) aggiungendo un else all’if della funzione ricorsiva, ad esempio:
    if (livello < 7) {
      ...
  } else {
      fill( 255, random(48,200), random(16,80), 180 );
      noStroke();
      circle( x2, y2, 6 );
  }

Tutti insieme

Seguendo tutti i suggerimenti, i risultati dovrebbero portare a qualcosa di simile:

Metodo con trasformazioni (Daniel Shiffman)
Metodo con classi (Daniel Shiffman)

Ricorsione per generare alberi: codice

Correlati: