Almacenamiento: ejercicio de imagen y sus puntos
April 1, 2008 – 3:02 amEn este ejercicio practicaremos el uso de imágenes y como acceder a sus puntos (pixels). También recordaremos el uso del bucle for. Finalmente introduciremos el uso de una función muy conveniente, la función map().
Comenzaremos con como cargar y simplemente renderizar en pantalla un archivo JPEG que podemos bajar desde aquÃ. Por supuesto no estáis obligados a utilizar esta. Pero para simplificar el código he cortado la imagen a una talla de 500×500. Medidas que vamos a suponer de aquà en adelante para nuestro ejercicio.
Seguidamente intentaremos algo distinto a pintarla en pantalla. En este segundo ejercicio vamos a iterar sobre la anchura y la altura de la imagen para acceder a sus puntos. En lugar de ir de uno en uno, iremos saltando de 10 en 10. Para cada punto tomaremos su color y pintaremos un rectángulo del color del punto en su posición y de talla 10×10. A continuación tenemos un ejemplo:
carga imagen y pinta sus puntos grandes
Finalmente haremos los saltos y las tallas de los rectángulos variables, y los mapearemos al valor del ratón. En esta versión usaremos el renderer P3D para que sea mas rápido. Esto se consigue mediante un para parámetro adicional del comando size(). Por ejemplo utilizando la lÃnea:
size(500, 500, P3D);
También se puede utilizar OpenGL que es un renderer aún más rápido y riguroso que P3D. Esto se consigue mediante la lÃnea siguiente:
size(500, 500, OPENGL);
para utilizar este renderer se requiere elegir la opción del menú Sketch > Import library… > opengl. Eligir esta opción del menú añadira la lÃnea siguiente a nuestro código:
import processing.opengl.*;
Esto es necesario porque el renderer OpenGL es una librerÃa de Processing. Esto es necesario con todas las librerias de Processing.
En el ejercicio siguiente utilizaremos el renderer P3D porque es más apropiado para las “applets” (publicar en la web):
carga imagen y pinta sus puntos variables
Para los más atrevidos se puede intentar de dibujar rectángulos negros y mapear la talla de los rectangulos al brillo de cada punto en lugar de al ratón. En esta versión también se ha limitado la altura y anchura de los pixeles, a un décimo de la altura y de la anchura de la pantalla respectivamente.
carga imagen y pinta sus puntos mapeando el brillo a su talla
Finalmente en esta última version haremos uso de la función dist(x1, y1, x2, y2).  Para calcular la distancia de cada pixel al ratón y después hacer una rotación de este.
carga imagen y pinta sus puntos mapeando la posición del ratón al angulo del rectangulo
2 Responses to “Almacenamiento: ejercicio de imagen y sus puntos”
Hola!!Tengo un problemilla,he comenzado ha hacer una práctica usando diferentes imágenes, en las que vario su escalado y filtros, pues bien, el programa se me colgaba cada poco. Asà que me acordé de lo del OPenGl, lo he importado, tal y como mencionas arriba, y sin yo decirle nada de repente aparece un background() sobre la imagen amarillo de modo intermitente…creo que es debido al OpenGl, pero no sé muy bien que le ocurre.
No sé, si me puedes dar alguna pista, sino te muestro en la próxima clase, Charo.
Gracias
By Charo on Apr 13, 2008
Hola,
Lo más fácil para descubrir el fallo, es subir el ejemplo en tu página personal y dar un link aquÃ.
Para archivar un sketch de Processing, podemos ir al menú:
Tools > Archive Sketch
Esto nos crea un comprimido (nombre_sketch.zip) en nuestro directorio de sketches que contiene todo lo necesario para ejecutar y manipular el código del ejemplo en otro ordenador (esto incluye también las imagenes y demás archivos de datos).
ricard
By admin on Apr 15, 2008