Lettura e modifica dei pixel

    let volto;

function preload() {
  volto = loadImage("young-woman.jpg");
}

function setup() {
  createCanvas(670, 440)

  volto.loadPixels()
  loadPixels()
  for (let i = 0; i < volto.pixels.length; i += 4) {
    let r = volto.pixels[i]
    let g = volto.pixels[i + 1]
    let b = volto.pixels[i + 2]

    r = (r * 1.9) % 255
    g = (g * 2.3) % 255
    b = (b * 2.9) % 255

    pixels[i] = r
    pixels[i+1] = g
    pixels[i+2] = b
    pixels[i+3] = 255
  }
  updatePixels()
}
  

  volto.loadPixels()
loadPixels()

Carica i valori cromatici dei pixel negli array pixels dell’immagine caricata e del canvas.

  updatePixels()

Trasferisce i valori cromatici modificati dall’array pixels del canvas al canvas stesso.

Provare a modificare le formule per ottenere i valori di rosso, verde e blu, ad esempio in questo modo:

  r = map(sin(r/15), -1, 1, 0, 255);
g = map(sin(g/20), -1, 1, 0, 255);
b = map(sin(b/25), -1, 1, 0, 255);

Per far funzionare lo sketch è necessario che la cartella dello sketch contenga l’immagine usata:

• CARTELLA-SKETCH
  • index.html
  • sketch.js
  • style.css
  • young-woman.jpg

• Mario Spencer