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