Práctica 5: Procesamiento Básico de Imágenes

Duración:: 00:30
Agrupamiento:: En parejas

Crea un programa en p5.js que:

Cargue una imagen.
Recorra la imagen píxel a píxel y la modifique (por ejemplo: más oscura, más clara, tonalidades más rojas, más verde o más azules...).
Muestre en el canvas la imagen original y, trasladada a otra zona, la imagen modificada para verlas a la vez.
Aplique un filtro (el que quieras) a la imagen original.

1) Carga la imagen en `preload()`

Así te aseguras de que está lista antes de dibujar.

2) Crea una copia para modificar píxel a píxel

No modifiques la original: crea mod = img.get().

3) Recorre `pixels[]` y cambia canales

Recuerda: pixels va de 4 en 4 → R, G, B, A.

4) Muestra ambas imágenes

Dibuja la original en (0,0) y la modificada con translate() o directamente en otra coordenada.

5) Aplica un filtro

Puedes usar mod.filter(GRAY), mod.filter(INVERT), mod.filter(THRESHOLD), etc.

✅ Código de ejemplo completo

let img;
let mod;

function preload() {
  img = loadImage("bob.jpg");
}

function setup() {
  createCanvas(img.width * 2 + 20, img.height);
  background(220);

  // Copia para no tocar la imagen original
  mod = img.get();

  // --- Modificación píxel a píxel (ejemplo: más rojiza) ---
  mod.loadPixels();

  for (let i = 0; i < mod.pixels.length; i += 4) {
    // Limitar a 0..255
    mod.pixels[i]     = mod.pixels[i] +100; // Incrementamos el tono R (Rojo) en todos
    mod.pixels[i + 1] = mod.pixels[i + 1];  // El tono G (Verde) se deja igual
    mod.pixels[i + 2] = mod.pixels[i + 2];  // El tono B (Azul) se deja igual
    // Alpha (i+3) se deja igual
  }

  mod.updatePixels();

  // --- Filtro sobre la imagen original (elige uno) ---
  img.filter(GRAY); // prueba también INVERT, THRESHOLD, BLUR(2)...
}

function draw() {
  background(220);

  // Imagen original
  image(img, 0, 0);

  // Imagen modificada desplazada
  push();
  translate(img.width + 20, 0);
  image(mod, 0, 0);
  pop();
}

1) Carga la imagen en preload()