Reinterpretazione colori: esempio pixels[]

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

    let photo;

function preload() {
    photo = loadImage("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 );
    }
}

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

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

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.

Provare a usare in modo diverso le coordinate e il colore ricavati, ad esempio così:

Strutturazione dei file:

Crediti: