Reinterpretazione colori: esempio pixels[]

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

// height=400 lines=auto
let photo;

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

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

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

photo.loadPixels();

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

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

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

Ricava i 3 elementi dell'array pixels[] a partire dall'indice ricavato (iPix). I dati restituiti saranno un array con i valori di rosso (col[0]), verde (col[1]) e blu (col[2]). Il valore di opacità non viene preso in considerazione perché l'immagine non ha un canale alfa.

        stroke( col[0],col[1],col[2], 64 );
        line( x-5,y-15, x+5,y+15 );

Strutturazione dei file: