Clipping di porzioni di bitmap

    let volto;

async function setup() {
    createCanvas(670, 400);
    volto = await loadImage("young-woman.jpg")
    translate(width / 2, height / 2);

    imageMode(CENTER);
    image(volto, 0, 0);

    for (let i = 0; i < 10; ++i) {
        let diametroClip = 400 - i * 30; 

        push();
            beginClip();
                circle(0, 0, diametroClip);
            endClip();
            rotate(i * 0.15);
            image(volto, 0, 0);
        pop();
    }
}

Provare a:

  • ridurre il decremento del diametro, ad esempio da 30 a 3
  • aumentare il numero di cicli, ad esempio da 10 a 100
  • ridurre la rotazione, ad esempio da 0.15 a 0.015

Strutturazione dei file:

Con p5.js 1 le immagini si caricano nella funzione preload(), che p5.js 2 non usa più: