Deformazioni di porzioni di bitmap

Muovere il mouse sull’immagine

    let foto;

let cx = 335;  // coordinata x del centro... e larghezza porzione
let cy = 200;  // coordinata y del centro... e altezza porzione

async function setup() {
    createCanvas(670, 400)
    foto = await loadImage("young-woman.jpg")
}

function draw() {
    let mx = mouseX;
    let my = mouseY;
    copy(foto,  0,0,    cx, cy,  0,0,    mx, my);               // alto sx
    copy(foto,  cx,0,   cx, cy,  mx,0,   width-mx, my);         // alto dx
    copy(foto,  0,cy,   cx, cy,  0,my,   mx, height-my);        // basso sx
    copy(foto,  cx,cy,  cx, cy,  mx,my,  width-mx, height-my);  // basso dx
}
  


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