Reinterpretazione colori: esempio pixels[]

Quando si devono leggere o scrivere molti pixel è meglio usare l'array pixels[]:

// height=400 lines=auto
var photo;

function preload() {
    photo = loadImage("../assets/blue-eyes.jpg");
}

function setup() {
    createCanvas(670, 400);
    photo.loadPixels();
    noFill();
}

function draw() {
    for (var i=0; i<1000; ++i) {
        var x = int(random(photo.width));
        var y = int(random(photo.height));
        var iPix = (x + y*photo.width) * 4;
        var col = photo.pixels.slice( iPix, iPix+3 );
        stroke( col[0], col[1], col[2] );
        ellipse( x,y, 11,11 );
    }
}
photo.loadPixels();

Carica i pixel dell'immagine photo nel suo array pixels[].

var iPix = (x + y*photo.width) * 4;

Calcola l'indice dell'elemento di pixels[] corrispondente al valore di rosso del pixel x,y. I valori delle altre componenti cromatiche si trovano negli elementi successivi perché ogni pixel è rappresentato da 4 elementi dell'array pixels[] (rosso, verde, blu e alfa, in successione).

var col = photo.pixels.slice( iPix, iPix+3 );

Ricava i 3 elementi dell'array pixels[] (solo rosso, verde e blu) a partire dall'indice ricavato (iPix).

Provare a usare in modo diverso le coordinate e il colore ricavati, ad esempio con:
stroke( col[0],col[1],col[2], 64 );
line( x-5,y-15, x+5,y+15 );

 


Strutturazione dei file: