Pixels
Painting Image with pixels
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).
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.