Spostamento di pixel del canvas

// height=300 lines=auto
let vertici = [];  // vertici del poligono

function setup() {
    createCanvas(670,300);
    // crea 20 vertici a caso per il poligono
    for (let i=0; i<20; ++i) {
        vertici[i] = createVector(random(width),random(height));
    }
}

function draw() {
    background( 200, 4 );

    // trasformazione geometrica
    shearX( sin(frameCount/40) / 3 );

    // impostazioni di fusione
    blendMode( DIFFERENCE );

    // disegna il poligono
    beginShape();
    for (let i=0; i<vertici.length; ++i) {
        // trasformazione dei vertici
        let vert = vertici[i].copy();
        vert.add( random(-5,5), random(-5,5) );
        vertex( vert.x, vert.y );
    }
    endShape(CLOSE);

    blendMode( BLEND );

    // modifica dei colori dei pixel del canvas
    filter( DILATE );

    // SPOSTAMENTO DI BLOCCHI DI PIXEL //////////////////////////
    let img = get( random(width),random(height),       
                   random(1,width),random(1,height) );
    image( img, random(width),random(height) );
}
let img = get( random(width),random(height),       // posizione
               random(1,width),random(1,height) ); // dimensioni

Legge e memorizza (in img) una porzione rettangolare del contenuto del canvas. La posizione della porzione viene ricavata a caso fra quelle valide nel canvas. Le dimensioni andranno da 1x1 pixel alla dimensione massima del canvas.

image( img, random(width),random(height) );

Disegna in una posizione a caso la porzione di canvas ricavata (img).

Al posto di usare le istruzioni get() è image() si potrebbe usare la sola istruzione copy():

    let imgW = random(1,width);     
    let imgH = random(1,height);     
    copy( random(width),random(height),imgW,imgH,       
          random(width),random(height),imgW,imgH );

Con alcune versioni della libreria p5.js l'uso di molte istruzioni copy() sembra essere meno efficiente dell'uso delle istruzioni get() e image().