Ricostruire una fotografia con forme geometriche

    let passo = 12;   // lato delle celle della griglia

async function setup() {
    createCanvas( 670, 440 );
    let foto = await loadImage( "young-woman.jpg" );

    background( 0 );
    for (let y=-2;  y<height;  y+=passo) {
        for (let x=-1;  x<width;  x+=passo) {
            let colore = foto.get( x+passo/2, y+passo/2 );
            let diametro = map( lightness(colore), 0, 100, passo/8, passo );
            circle( x+passo/2, y+passo/2, diametro );
        }
    }
}
  

  let foto = await loadImage( "young-woman.jpg" );

Carica la fotografia, che non viene mai mostrata. Con async davanti a setup() e await davanti a loadImage(), lo sketch aspetta che il file sia arrivato prima di proseguire.

  let colore = foto.get( x+passo/2, y+passo/2 );

Legge il colore del pixel al centro di ogni cella della griglia.

  let diametro = map( lightness(colore), 0, 100, passo/8, passo );

Le zone scure diventano cerchi piccoli, quelle chiare cerchi grandi.

Provare ad aumentare il valore di passo (per esempio 20, 30, 60) per trovare il punto in cui il volto smette di essere riconoscibile.

Con p5.js 1 l’immagine si carica nella funzione preload(), che p5.js 2 non usa più:

  function preload() {
    foto = loadImage( "young-woman.jpg" );
}