Funzione ricorsiva per generare alberi

Un’applicazione tipica delle funzioni ricorsive è quella di disegnare alberi generando un ramo principale (tronco) da cui far generare altri due rami che generano ognuno altri due rami fino al livello di ricorsione scelto. {.continues-below}

L’ordine con cui vengono disegnati i rami conferma che la generazione non avviene in parallelo ma sequenzialmente perché ogni chiamata non si conclude finché non si concludono tutte le chiamate interne. {.continues-prev}

    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);
    frameRate(1);
}

function draw() {
    background(255);
    disegnaRamo( width/2, height, PI*1.5, 0 );
}
  

  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.

Rompere la simmetria facendo impostare deviazioni casuali dell’angolo dei rami, ad esempio con:

    let deviazione = random(0.1, 1);

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 );

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 );

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 );
  }

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