Pixels

Painting Image with pixels

  • 2 Oct

Antes realizar el analisis de procesamiento de imágenes se hace necesaria una introducción previa a los conceptos básicos de las matrices de pixeles, con el propósito de saber cómo cargar los pixeles a un lienzo y acceder al valor de cada pixel de manera individual para manipular su valor.

El siguiente estudio está basado en la documentación obtenida del tutorial de YouTube '11.3: The Pixel Array' y el sitio web P5js.
Para tener una mejor comprension acerca de como funciona una matriz de pixeles, esta debe de pensarse en una cuadricula como representación de un lienzo o una imagen, por ejemplo, una cuadricula de 8x8 estaría compuesta por 64 cuadrados más pequeños los cuales representan los pixeles. Entonces Cuando se carga una imagen esta es representada internamente en p5.js mediante una arreglo llamado pixels[], en el cual los valores oscilan entre 0 y 255, correspondientes a cada color del lienzo. este difiere un poco a como se maneja en Processing, dado que en p5.js un pixel toma 4 puntos de una matriz para un solo pixel, dado que el pixel se representa mediante los valores R, G, B, A (Rojo,Verde,Azul Alpha).

Ahora, esto significa que si el primer píxel en la pantalla es el de la esquina superior izquierda, este comenzaría en el índice 0 de la matriz y el segundo pixel en el índice 4 y asi sucesivamente hasta completar la longitud de la matriz. Antes de acceder a esta matriz, los datos deben cargarse con la función loadPixels() y después de que se hayan modificado los datos de la matriz, se debe ejecutar la función updatePixels() para actualizar los cambios. para modificar estos valores es necesario ubicar el índice del componente mediante la siguiente ecuacion (x + y * width)*4.

El siguiente programa tiene como propósito observar el comportamiento de cada uno de los pixeles del lienzo al modificar su valor accediendo a los componentes R, G, B de la matriz de pixeles.

Comandos por teclado


Maximizar Componente
  • Rojo ->>
  • Verde ->>
  • Azul ->>
  • Reiniciar Imagen ->>

Image of Großer Panda. Source: Wikipedia, the free encyclopedia.