5. 📖 Procesamiento de imágenes

Introducción

En programación gráfica no todo son formas geométricas. También podemos trabajar con imágenes, modificarlas y entender cómo están construidas por dentro. En este apartado vas a ver dos mundos distintos (vectorial y mapa de bits) y cómo p5.js te permite manipular imágenes de forma programada.

Tipos de Imágenes

Imagen de mapa de bits

Una imagen de mapa de bits está formada por una matriz de píxeles (fotos, PNG, JPG…). Esta característica hace que al ampliar demasiado, se aprecien los píxeles y por lo tanto pierda calidad.

Gráficos vectoriales

Los gráficos vectoriales no están formados por píxeles, sino por formas matemáticas (líneas, círculos, polígonos…). Características clave:

No pierden calidad al escalar.
Se crean con código.
Son ideales para animaciones y diseños generativos.

Vector vs. Mapa de bits — WikiMedia. *Mapa de Bits Vs. Vectorial*

Ejemplo de Mapa de Bits en p5.js

Bob

En p5.js podemos utilizar imágenes de mapa de bits. A través de la instrucción loadImage("dirección-de-la-imagen") podemos trabajar este tipo de imágenes. la dirección de la imagen puede ser la url de una imagen que se encuentre accesible a través e Internet, o podemos cargar directamente una imagen en nuestro programa a partir del menú correspondiente (Ver imagen más abajo).

let img;

function preload() {
  img = loadImage("bob.jpg");  // Aquí podemos usar una imagen online o subir una propia
}

function setup() {
  createCanvas(400, 300);
  image(img, 0, 0, width, height);
}

Bob

Ejemplo de gráfico vectorial en p5.js

En este caso no existen imágenes de mapa de bits, sino que se dibujan figuras y todo se calcula matemáticamente. Tal y como hemos estado realizando hasta ahora.

function setup() {
  createCanvas(400, 300);
  background(220);

  fill(0, 150, 255);
  noStroke();
  ellipse(200, 150, 120, 120);
}

Imagen Vectorial

📌 Aquí no hay imagen: todo se calcula matemáticamente.

Procesamiento de imágenes píxel a píxel

Las imágenes de tipo mapa de bits nos permiten realizar una acción avanzada: modificar píxeles uno a uno. Cada píxel de la imagen tiene unas propiedades, entre otras el color y la transparencia:

Rojo
Verde
Azul
Alfa (transparencia)

Esas propiedades podríamos modificarlas para cada píxel. Una forma eficaz sería recorrer la imagen con bucles y realizar las modificaciones píxel a píxel. Ejemplo básico:

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

function setup() {
  createCanvas(400, 300);
  image(img, 0, 0);

  loadPixels(); // Carga los píxeles en un vector que podemos recorrer

  let cambioColor = 100; // Incrementamos en 100 unidades cada color, lo que la pondrá con tonos más blancos
  for (let i = 0; i < pixels.length; i += 4) { // Recorremos los píxeles y le modificamos color
    pixels[i] = pixels[i] + cambioColor;     // rojo
    pixels[i + 1] = pixels[i + 1] + cambioColor;   // verde
    pixels[i + 2] = pixels[i + 2] + cambioColor;   // azul
  }

  updatePixels(); // Actualizamos los píxeles
}

📌 Este código “tiñe” la imagen dándole tonallidades más claras (Cercanas al blanco) modificando cada píxel.

Aplicación de filtros

p5.js permite aplicar filtros directamente sobre imágenes o sobre el canvas. Ejemplo: filtro en blanco y negro.

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

function setup() {
  createCanvas(400, 300);
  image(img, 0, 0, width, height);
  filter(GRAY);
}

Otros filtros habituales:

BLUR
INVERT
THRESHOLD

📌 Los filtros modifican la imagen de forma automática, sin tocar píxeles a mano.

Imagen Resultado

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0