Spostamento di pixel del canvas

// height=300 lines=auto
let bitmap;

function preload() {
    bitmap = loadImage("assets/eyes_bn.jpg");
}

function setup() {
    createCanvas(670,300);
}

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

    shearX( sin(frameCount/40) / 6 );

    blendMode( LIGHTEST );
    image( bitmap, 0, 0 );
    blendMode( BLEND );

    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().

Strutturazione dei file:

Approfondimenti:

Crediti: