Tractament i Publicació d’imatge i vídeo

Pràctica 1

PRA 1Pere Amengual GomilaNovembre 2015

2

Tractament i publicació d’imatge i vídeo - PRA 1

Exercici 1 .................................... 3Exercici 2 .................................... 3Exercici 3 .................................... 4Exercici 4 .................................... 5Exercici 5 .................................... 6Exercici 6 .................................... 7Exercici 7 .................................... 7Bibliografia ................................ 8

Índex

3

Tractament i publicació d’imatge i vídeo - PRA 1

1. a) Escriu un programa en Processing que mostri la imatge “city.png”. La finestra de l’aplicació s’haurà d’ajustar a les dimensions de les imatges. És a dir, si les dimensions de la imatge són 300x200 píxels, la mida de la finestra també haurà de ser 300x200 píxels (exercici_1a).

Per mostrar una imatge en pantalla cal declarar una variable del tipus PImage, que és una tipus pre-definit de variable que Processing fa servir per emmagatzemar imatges(1). Per carregar una imatge dins la variable fem servir la funció loadImage() que llegeix una imatge del directori “data”.

Per adaptar la mida de la pantalla a valors continguts dins variables no es pot fer directament i a Processing 3.0 ja no es fa servir la variable frame que permitia accedir a l’objecte JFrame de PApplet(2). Ara hem de fer servir els mètodes de surface surface.setResizable() i surface.setSize() i les propietats width i height de la imatge.

Finalment, image() ens posiciona la imatge a pantalla en les coordenades indicades.

b) Amplia el programa anterior de forma que el «background» de la finestra de l’aplicació sigui completament blau i, en clicar sobre la imatge, se li apliqui un valor de transparència del 50% (exer-cici_1b).?

El codi contingut dins draw() s’executa repetidament, així només cal dibuixar a cada frame primer el fons fent servir background(r,g,b)

i després la imatge. Processing comprova constantment si hem fet clicat el ratolí fent servir la funció mouseclicked() i, en aquest cas, canvia la opacitat de la imatge fent servir la funció tint() indicant el color blanc i un valor d’opacitat.

2.- a) Escriu un programa en Processing que mostri la imatge “bars.png” per pantalla. Amb ajuda de la funció scale(), aquest programa haurà d’ampliar un 33% aquesta imatge si l’usuari prem la tecla [m]. (Nota: les mides de la finestra de l’aplicació han de ser suficientment grans perquè la imatge sempre es mostri sencera) (exercici_2a).

El codi és semblant al dels exercicis anteriors, però per reservar l’espai per ampliar la imatge multipliquem els valors de les mides de la imatge per 1.33 a surface.setSize().

Després, dins la funció keyPressed() farem servir el mètode resize de la imatge si es compleixen les condicions de que s’ha premut la tecla ‘m’ i la imatge encara té les mides originals.

b) Fes que el programa anterior guardi la imatge al disc dur i analitza el resultat. Quin mètode creus que utilitza la funció scale() de Processing per ampliar la grandària d’una imatge? Seria aquest el millor mètode per una imatge com “bars.png”? (imatge_2b.png)

Per guardar la imatge al disc dur es fa servir la funció save() que emmagatzema en un fitxer el contingut de la pantalla.Si analitzem el codi font de Processing, podem veure que a PImage.

4

Tractament i publicació d’imatge i vídeo - PRA 1

java es fa servir el RenderingHint “VALUE_INTERPOLATION_BILINEAR”. Una observació visual dels resultats ens pot confirmar aquest punt.La interpolacio bilinear és adeqüada per imatges realistes, però per bandes rectilínies de colors llisos seria més adeqüat fer servir el mètode del veí més proper i evitar l’aparició de colors intermitjos en les zones de transició.

3.- Utilitzant la funció filter () de Processing, escriu un programa que realitzi les següents transformacions sobre la imatge “coast.png”:

a) Binarització, en prémer la tecla [1], b) Dilatació, en prémer la tecla [2],c) Erosió, en prémer la tecla [3],d) Inversió, en prémer la tecla [4]El programa també haurà de mostrar la imatge original en prémer la tecla [q] (exercici_3).

Cal destacar en el codi la manera d’imprimir un cop la imatge original en pantalla però evitar la seva sobreimpresió sobre les imatges processades fent servir una condició que només es compleix una vegada, al primer frame.Després, amb un switch sobre la variable key (que emmagatzema la última tecla premuda) apliquem selectivament els filtres indicats a l’enunciat fent servir la funció filter() o tornem imprimir la imatge original amb la tecla ‘q’.

zona de transició

5

Tractament i publicació d’imatge i vídeo - PRA 1

4.- a) Escriu un programa en Processing que calculi i mostri per pantalla els valors RGB del punt (100, 25) de la imatge “rosa.png”. El programa haurà de mostrar la imatge i els valors que es demanen alhora (exercici_4a).b) Calcula aquests mateixos valors fent servir l’histograma de Photoshop i compara els resultats.c) Amplia el programa «exercici_4a» de manera que el programa pugui detectar els valors RGB de qualsevol punt de la imatge sobre el que l’usuari hagi clicat. En aquest cas, la finestra del programa haurà de mostrar alhora la imatge, les coordenades del punt i els seus valors RGB (exercici_4c).

Declarem la variable del tipus color i la de tipus String que ens servirà per composar el text en pantalla.

En aquesta ocasió he fet servir la funció noLoop() per evitar que es repeteixi el codi dins draw() ja que no és necessari. Amb la funció get() podem obtenir el color d’una imatge (o de la pantalla) en un punt determinat.

Per augmentar la visibilitat del text he creat un efecte d’ombrejat repetint l’impressió del text en pantalla en posicions una mica distants i amb color gris sota el negre.

L’histograma de Photoshop ens proporciona 152, exactament el mateix valor, només que en processing l’hem indicat en format (r,g,b).

Respecte de l’exercici 4c, per obtenir el valor en qualsevol punt sobre el que es faci click només cal fer servir la funció mousePressed() i passar el valor de la posicio en prémer el ratolí a dues variables globals que farem servir amb la funció get().

6

Tractament i publicació d’imatge i vídeo - PRA 1

5.- a) Suposem que volem realçar els contorns de la imatge “35.png” amb una transformació espacial lineal. Escriu un programa en Processing que realitzi aquesta acció i guardi el resultat al disc dur (exercici_5a).b) Realitza la mateixa transformació espacial lineal amb Photoshop i compara els resultats (imatge_5a.png i imatge_5b.png).

Per confeccionar aquest programa he adaptat el codi de l’exemple de la pàgina https://processing.org/examples/convolution.html, modificant la part relativa a l’aplicació de l’efecte a tota la imatge.

La transformació espacial lineal aplicada és una màscara laplaciana de realçament.

Aquesta transformació s’aplica multiplicant cada un dels punts per una matriu que rep el nom de ‘màscara’.

En el codi destaca la simplificació en l’obtenció dels valors en els píxels dels extrems de la imatge, creant unes línies amb els valors equivocats.

Encara que l’anàlisi visual ens indica que el realç s’ha aplicat en tots els casos, podem observar que la gamma dels grisos no coincideix en els dos casos, ja que la imatge feta amb Processing té un valor promig de 93,07 i la feta amb Photoshop un valor de 118,08 (en els dos casos, els valors de desviació típica són semblants).

He intentat establir el motiu fent proves amb figures molt simples i, sense poder confirmar-ho sembla haver-hi una relació en la manera com Processing i Photoshop ponderen de forma diferent els valors R,G,B en el moment de realitzar càlculs de processament.

original

photoshop

processing

7

Tractament i publicació d’imatge i vídeo - PRA 1

6.- a) Escriu un programa en Processing que converteixi la imatge en RGB “flower.png” a escala de grisos fent servir els tres mètodes descrits a http://www.rapidtables.com/convert/image/rgb-to-grayscale.htm. El programa haurà de mostrar les quatre imatges (original i en escala de grisos) alhora a la finestra de treball, per poder comparar les diferències.b) En Photoshop, canvia la imatge original “flower.png” a mode escala de grisos amb “Imagen > Modo > Escala de grises” i compara el resultat amb els resultats de l’apartat “a)”. Quin mètode creus que fa servir Photoshop per defecte per realitzar aquesta operació?

Per realitzar aquest programa hem definit quatre variables del tipus PImage (corresponents a la imatge original i les tres processades) i tres variables de tipus color per poder assignar els valors a les tres imatges fent servir només una combinació de dos bucles que llegeix els valors r, g i b de cada píxel de la imatge original i aplica la fórmula necessària per calcular cada nivell de gris.

Comparant les imatges i consultant la bibliografia he pogut comprovar que el mètode que fa servir Photoshop per defecte és el conegut com BT.601, amb les mateixes proporcions del tercer mètode de l’exercici, que és la recomanació del ITU-R per codificar vídeo analògic entrellaçat en un format digital(3).

7.- Publica en una plataforma de publicació d’imatges en línia les imatges generades als exercicis 2 i 5. Quina és la raó o raons t’han portat a escollir aquesta plataforma i no una altra?

L’enllaç per accedir a les imatges és:

http://graumultimedia.com/treballs/tipiiv/pra1/

Els motius per escollir aquesta plataforma han estat els següents:a) Possibilitat de personalitzar la presentació, escollint plantilles de tercer o modificant el codi html+cssb) Absència de publicitat o contingut de tercers que puguin distreure de l’objectiu principalc) Organització senzilla en mode local fent servir la llibreria del programa Lightroom, que és el programa que faig servir per importar, classificar i editar les meves fotografiesd) Poder de decisió sobre la presència en els motors de cerca fent servir recursos com el fitxer robots.txt per protegir de ser indexats o eines SEO si, per contrari, volem màxima exposició.e) Màxima privacitat mitjançant la possibilitat de posar contrasenya al directori fent servir l’arxiu .htaccessf) Possibilitat d’estadístiques avançades fent servir Google Analyticsg) Personalització mitjançant codi html de les connexions amb les xarxes socialsh) Llibertat absoluta per triar la llicència que volguemi) No existeix cap cessió de drets a tercers.

8

Tractament i publicació d’imatge i vídeo - PRA 1

Bibliografia i fonts consultades

Referències bibliogràfiques i en línia

(1) Toby Donaldson. Using images in Processing [en línia]. http://www.cs.sfu.ca/CourseCentral/166/tjd/using_images.html

(2) Ben Fry, Wither “frame” in 3.0 [en línia]. https://github.com/processing/processing/issues/3388

(3) Wikipedia contributors. Rec. 601 [Internet]. Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/w/index.php?title=Rec._601&ol-did=688134984.

mkyong. How to resize an image in Java. [en línia] http://www.mkyong.com/java/how-to-resize-an-image-in-java/

Ben Fry and Casey Reas. Codi font de Processing [en línia] https://github.com/processing/processing/blob/master/core/src/processing/core/PImage.java

Chet Haase - Romain Guy. Filthy Rich Clients. Developing Animated and Graphical Effects for Desktop Java Applications. Sun Systems

Wikipedia contributors. Bilinear interpolation [Internet]. Wikipedia, The Free Encyclopedia. https://en.wikipedia.org/w/index.php?title=Biline-ar_interpolation&oldid=687816846.

Daniel Shiffman. Learning Processing. Morgan & Kaufmann (c) 2008 Elsevier

Daniel Shiffman. Convolution. [en línia] https://processing.org/examples/convolution.html

Óscar García Pañella. Operaciones con imágenes en programación Processing. [en línia] http://mosaic.uoc.edu/2013/04/24/operaciones-con-ima-genes-en-programacion-processing/