{"id":933,"date":"2014-08-31T22:30:12","date_gmt":"2014-08-31T22:30:12","guid":{"rendered":"http:\/\/etab.cl\/clases\/uchile\/obj-tec\/?page_id=933"},"modified":"2014-10-05T00:25:06","modified_gmt":"2014-10-05T00:25:06","slug":"c4","status":"publish","type":"page","link":"https:\/\/clases.etab.cl\/?page_id=933","title":{"rendered":"C4 – OT 2014"},"content":{"rendered":"

Ejercicio para la pr\u00f3xima semana:<\/strong> Subir al blog un sketch + imagen realizado con todos o algunos de los contenidos que se ver\u00e1n a continuaci\u00f3n. Se pueden combinar con lo visto anteriormente.<\/p>\n

Carga y edici\u00f3n de im\u00e1genes bitmap en Processing<\/strong><\/p>\n

En la primera clase en que usamos Processing, utilizamos la funci\u00f3n loadImage()<\/a><\/strong> que cargaba una imagen jpg dentro de una variable del tipo PImage<\/a><\/strong><\/strong>. PImage es entonces un tipo de dato como lo es int (para almacenar enteros), float (para almacenar decimales), boolean (para almacenar los valores verdadero o falso), char (para almacenar caracteres alfanum\u00e9ricos), etc. PImage<\/strong> es un tipo de dato para almacenar im\u00e1genes.<\/p>\n

En esta sesi\u00f3n, se profundizar\u00e1 un poco m\u00e1s en el uso de este tipo de variable y la manipulaci\u00f3n de im\u00e1genes bitmap (o raster).<\/p>\n

Como ya se sabe, la imagen digital est\u00e1 compuesta por pixeles. Si una imagen es de 1280 x 1024 pixeles, tendr\u00e1 entonces un total de 1.310.720 pixeles, es decir, 1,3 Megapixeles.<\/p>\n

Otro aspecto importante de una imagen digital es la profundidad de color (color depth). Si la profundidad de color de una imagen es de 1bit, cada pixel puede tener el valor de 1 \u00f3 de 0, normalmente esto representa a blanco o negro. Si la profundidad de color es 4, cada pixel puede tener uno de 16 valores. Si la PdC es de 8 bits, entonces el pixel puede tener uno de 256 valores.<\/p>\n

\"test_img2_diffrentBits_good\"<\/a><\/p>\n

Cuando se habla de una imagen de 24 bits, normalmente se est\u00e1 hablando de una imagen que tiene 8 bits en el canal rojo, 8bits en el verde y 8 bits en el azul (imagen RGB). Esto da como resultado 24 bits en total. M\u00e1s informaci\u00f3n acerca de espacios de color y profundidad de color:
\nhttp:\/\/en.wikipedia.org\/wiki\/Color_depth<\/a>
\nhttp:\/\/es.wikipedia.org\/wiki\/Profundidad_de_color<\/a>
\nhttp:\/\/www.cambridgeincolour.com\/tutorials\/bit-depth.htm<\/a>
\nhttp:\/\/www.cambridgeincolour.com\/tutorials\/digital-camera-pixel.htm<\/a>
\nhttp:\/\/en.wikipedia.org\/wiki\/Pixel<\/a>
\nhttp:\/\/es.wikipedia.org\/wiki\/P%C3%ADxel<\/a><\/p>\n

Al trabajar con im\u00e1genes bitmap en Processing, recuerda que el archivo de imagen debe estar localizado en una carpeta con el nombre “data” dentro de la carpeta del Sketch que la est\u00e9 llamando.
\nTambi\u00e9n es importante recordar que el archivo de la imagen puede ser importado a trav\u00e9s del men\u00fa “Sketch” –> “Add File”. De esta manera, el archivo de imagen quedar\u00e1 localizado donde corresponde para ser llamado por la variable del tipo PImage de tu sketch.<\/p>\n

Las extensiones de archivo de imagen aceptados por Processing son:
\n– jpg<\/strong> (profundidad de color soportada: hasta 24bits, no soporta transparencia)<\/span>
\n– gif<\/strong> (profundidad de color soportada: hasta 8bits con transparencia de 1bit)<\/span>
\n– png<\/strong> (profundidad de color soportada: hasta 24bits, con transparencia de 8bits)<\/span>
\nRecuerda optimizar la imagen en cuanto a su tama\u00f1o y resoluci\u00f3n antes de usarla en Processing. De esta forma, no se estar\u00e1 sobre exigiendo al procesador.<\/p>\n

Otra funci\u00f3n que se utiliza al trabajar con im\u00e1genes bitmap, es image()<\/strong><\/a>, gracias a esta, la imagen se visualiza.<\/p>\n

Tenemos entonces, por ahora, tres elementos importantes al momento de usar im\u00e1genes bitmap en Processing:<\/p>\n

PImage:<\/strong> Tipo de dato para cargar im\u00e1genes en el programa
\nloadImage():<\/strong> Funci\u00f3n que carga la imagen en una variable del tipo PImage. El par\u00e1metro que va dentro de loadImage es el nombre del archivo que est\u00e1 cargando. \u00c9ste debe ser ex\u00e1ctamente igual, cuidando las may\u00fasculas, min\u00fasculas y espacios entre caracteres.
\nimage():<\/strong> Funci\u00f3n que expone (display) la imagen, la hace visible. Los par\u00e1metros que van dentro de image(), son el nombre de la variable, la ubicaci\u00f3n x y la ubicaci\u00f3n y. Tambi\u00e9n se puede agregar a continuaci\u00f3n el ancho y el alto, pudiendo modificar las dimensiones de la imagen original.<\/p>\n

Quedar\u00e1 la estructura b\u00e1sica as\u00ed:<\/p>\n