PRACTICA1Tractament i Publicació d'imatge i Vídeo

Marcos Baldoví Martínez

INDEX

Exercici 1 .............................................. Pàgina 3Exercici 2 .............................................. Pàgina 3 i 4Exercici 3 ............................................... Pàgina 4Exercici 4 ............................................... Pàgina 5Exercici 5................................................ Pàgina 5 i 6Exercici 6................................................ Pàgina 6Bibliografia............................................. Pàgina 8

Exercici 1

a) Escriu un programa en Processing que mostri la imatge que tens al teu perfil del campus de la UOC encolor (si la teva imatge està en escala de grisos, fes servir una altra). La finestra de l'aplicacio s'hauràd'ajustar a les dimensions de la imatge. Es a dir, si les dimensions de la imatge son 300x200 pixels, la midade la finestra tambe haurà de tenir 300x200 pixels (exercici_1a.pde).

Declarem un objecte de tipus PImage, carreguem la imatge amb el comando loadImage que ens permetcarregar una imatge . Per poder mostrar a la finestra de treball les mateixes mides que la imatge s'utilitzen elsatributs width, height precedit del comando surface.setSize, si la imatge es del tipusPImatge → surface.setSize(img.width, img.height).Finalment la funcio image()permet visualitzar la imatge a la finestra de l'aplicacio.

b) Amplia el programa anterior de forma que en premer la tecla [a] del teclat de l'ordinador, es mostri la tevaimatge a la finestra de l'aplicacio en escala de grisos. Si l'usuari prem la tecla [s], el programa ha de tornar amostrar la imatge original a color (exercici_1b.pde).

En aquest apartat s'han creat 2 funcions que permeten aplicar un filtre en escala de gris i l'altra tornar acarregar la imatge original (RGB).Aquestes funcions les apliquem a un switch que hem creat i que a traves de la la funcio key permet:

- En premer la tecla s activar el filtre d'escala de gris- En premer la tecla a mostrar la imatge inicial

Exercici 2

a) Escriu un programa en Processing que mostri la imatge “grid.png” per pantalla. Aquest programa haurà dereduir la imatge un 81% i mostrar-la a la finestra de l'aplicacio si l'usuari prem la tecla [m]. (Nota: les midesde la finestra de l'aplicacio han de ser suficientment grans perque la imatge sempre es mostri sencera)(exercici_2a.pde).

Per poder mostrar les grandàries d'imatge en la mateixa finestra. Hem creat un array del tipus floatamb dues posicions que inicialment mostrarà la grandària original. Per al canvi de dimensions en la finestrade la imatge s'ha generat una funcio que en premer una tecla activa la segona posicio del array.

Quan s'activa la nova dimensio de finestra per no superposar les 2 imatges, netejarem la finestra amb elcomando background i aplicarem la funcio scale amb els valors de la posicio de l'array, que enspermet mostrar la imatge amb les noves dimensions.

b) Fes que el programa anterior guardi la imatge al disc dur. Amb l'ajuda de Photoshop analitza el resultat, iraona quin metode creus que ha utilitzat Processing per reduir la grandària de la imatge. (PDF,exercici_2b.pde i imatge_2b.png)

El funcionament del programa en processing es similar però s'ha inclòs l'opcio de poder guardar el resultat (al'exercici en la carperta data) de l'operacio en una ubicacio determinada s'escriu la següent sintaxi. :

img.save(dataPath("imatge_2b.png"));

Hem creat un tercer arxiu en processing per poder comprovar tant les diferencies visuals com adimensionals a l'hora de generar un arxiu.

Quan visualitzem la imatge pel sketch del programa exercici2b, visualitzem una reduccio en lesdimensions de la imatge. Una vegada hem aplicat la funcio scale amb un valor 0,81 del valor real dela imatge. No obstant això quan visualitzem en el sketch la imatge en el fitxerexercici2Resize no mostra una nitidesa com en l'exercici anterior.

Quan analitzem en Photoshop els dos fitxers obtinguts, observem que el fitxer que ha generat elexercici2b te les mateixes dimensions que l'original. No obstant això l'arxiu generat pelexercici2bResize te unes dimensions inferiors exactament l'equivalent a una delmacion del 81%.

img_2b img_Resize

Exercici 3- Utilitzant la funcio filter () de Processing, escriu un programa que realitzi les següents transformacionssobre la teva imatge en color:

• a) Posteritzacio de la imatge original, en premer la tecla [q], • b) Dilatacio de la imatge original, en premer la tecla [w],• c) Erosio de la imatge original, en premer la tecla [e],• d) Inversio de la imatge original, en premer la tecla [r]

El programa tambe haurà de tornar a mostrar la imatge original en premer la tecla [z] (exercici_3.pde).(Nota: els filtres s'han d'aplicar sempre sobre la imatge original. Es a dir, encara que l'usuari vagiprement tecles, els filtres sempre s'aplicaran sobre la imatge original, no sobre una imatge previamentfiltrada).

Per poder assegurar que estem al principi del programa hem utilitzat un condicional que imprimeix la imatgeoriginal per tal d'assegurar que tots els esdeveniments s'executen al primer frame del programa i nos'imprimeixen uns al damunt dels altres

Els filtres anirem executant-los des d'un switch amb una funcio de teclat que ens permet poder polsar lestecles assignades a cada filtre. El filtres que disposa el programa no son paratmetrizables excepte laposteritzacio que disposa d'un rang des de 0 fins a 255 s'ha col·locat un valor de 6.

Exercici 4

a) Escriu un programa en Processing que calculi i mostri per pantalla els valors RGB del punt (10, 10) de lateva imatge en color. El programa haurà de mostrar la imatge i els valors que es demanen a la finestra del'aplicacio. (exercici_4a.pde).

Per poder obtenir en processing el valor del punt 10,10 de la imatge, s'obte mitjançant la funcioget(), quepermet l'obtencio del valor tonal del pixel.

Per obtenir els valors en RGB deka imatge que s'està analitzant. S'ha creat una variable que conte la funcioget() i s'ha aplicat a cada canal de color obtenint el valor tonal en cada canal de color.

b) Calcula aquests mateixos valors fent servir l'histograma de Photoshop. Compara i raona els resultats. Fescaptura de pantalles dels processos de forma anàloga a com vas fer a la PAC 1, i inclou les imatges i elsraonaments al PDF de la pràctica. (PDF).

Els valors proporcionats tant per l'histograma de Photoshop com pel programa de Processing son exactamentels mateixos, adjunt a aquest document s'adjunten captures de pantalla dels histogrames. Al ser uns càlculsmatemàtics i obtenir exactament els mateixos resultats en tots dos programes. Es dedueix que el tractamentles imatges tant en un programa com en un altre es identic.

Exercici 5

a) Realitza un programa a Processing que apliqui les mateixes transformacions lineals a la teva imatge encolor i guardi els resultats al teu disc dur (exercici_5a1.png, exercici_5a2.png i exercici_5a3.png). (Nota: esdona llibertat a l'alumne sobre com l'usuari interactuarà amb el programa. Inclus, el programa pot generarautomàticament les 3 imatges, sense que l'usuari hagi de premer cap tecla o realitzar cap accio).

En l'exercici_5a1 tenim una màscara que detecta Contorns expressada com a matriu

−1 −1 −1−1 8 −1−1 −1 −1

En l'exercici_ 5a2 tenim una màscara de convolucio Contorns (realçament) expressada com a matriu

−1 −1 −1−1 9 −1−1 −1 −1

La diferencia entre aquesta mascara i la utilitzada amb l'exercici_5b1 es troba en la forma per a mostrar elscontorns, ja que la resta de la imatge ens queda molt plana. Es a dir no disposem d'una ampla gamacromàtica, a diferencia de la mascara d'aquest exercici que presenta un perfilat millor esteticament.

Amb la qual cosa permet una millor visualitzacio de la imatge, al no ser una imatge tan plana. La matriud'aquest tipus de mascara es tambe laplaciana variant sols un valor del pixel central de la primera.

En l'exercici_5a3 tenim una màscara de convolucio Suavitzacio, expressada com a matriu.

19

19

19

19

19

19

19

19

19

Aquest tipus de mascara s'utilitza per a suavitzar la imatge i poder eliminar ruido la gran diferencia amb lesaltres dues mascares es que els contorns no es mostren tan perfilats, es a dir no es una mascara adequada pera realçar els perfils.

b) Sobre la teva imatge en color, realitza les següents transformacions lineals a Photoshop (pots fer servir lesmatrius de convolucio que consideris oportu) : Guarda les imatges al teu disc dur. Fes tambe captura depantalles dels processos i inclou les imatges i els raonaments al PDF de la pràctica. (PDF)

c) A Photoshop, analitza i compara els resultats. Fes servir captures de pantalla per complementar els teusraonaments. (PDF)

Els resultats obtinguts en els fitxers son identics tant en processing com en Photoshop com es pot veure a lesimatges de les captures. L'unic problema es que hi ha un xicotet desplaçament en les mascares obtingudes.Aquesta diferencia agafant com a referencia Photoshop es d'un pixel en l'eix de les y.

Per exemple la imatge exercici 5b1, te un valor tonal de blau a les coordenades (43,51) de 64. Aquest mateixvalor de blau a l'arxiu de processing es troba a les coordenades (43,50). Aquesta petita diferencia, es troba entots els 3 arxius comparats. Tal com es mostra en les captures realitzades en les comparatives.

Exercici 6a) Sobre una versio en escala de grisos de la teva imatge (pots fer servir Photoshop per generar-la), escriu unprograma en Processing que apliqui a la teva imatge una transformacio d'aclariment o enfosquiment per partsque millori el seu contrast. El programa haurà de mostrar a la finestra de l'aplicacio les dues imatges alhora,per poder comparar els resultats (exercici_6a.pde).

b) A Photoshop, realitzar els mateixos càlculs i compara i raona els resultats. Fes captura de pantalles delsprocessos, i inclou les imatges i els raonaments al PDF de la pràctica. (PDF)

M'he basat en l'exercici proposat en mòdul 5 del temari, per realitzar aquest exercici no se que càlculs esticrealitzant malament. No aconsegueixo que em coincideixin els valors introduïts al programa de processingamb els valors d'entrada i sortida inserits en Photoshop. La imatge mostrada en Photoshop està una mica mescontrastada que la imatge generada en Processing.

He realitzat diferents mesures en diferents pixels amb tonalitats entre alts i baixos tons amb l'unica conclusioque les diferencies obtingudes eren multiples de 5 però no conclou en cap cas que hi hagi aquesta diferenciaentre un programa i un altre. ( veure captures de pantalla)

Exercici 77.- Publica en una plataforma de publicacio d’imatges en linia les imatges generades als exercicis 2i 5. Quina es la rao o raons t’han portat a escollir aquesta plataforma i no una altra? En particular,analitza com gestiona aquesta plataforma els drets d'autor. (PDF)

exercici 2: https://www.flickr.com/photos/149244585@N07/30889774272/in/dateposted-public/exercici 5: https://www.flickr.com/photos/149244585@N07/22827766128/in/dateposted-public/

Flickr es una plataforma gratuïta d'allotjament web que pertany a la companyia Yahoo.El contingut que apareix en el compte de Flickr de l'autor es de la seva propietat. El que si que es pot esatribuir-li diferents llicencies de Creative Commons o drets d'autor a les nostres imatges.

El que tambe es important tenir en compte es quan pugem contingut, concedim una llicencia a Yahoo! perpoder distribuir les nostres fotos o videos. Flickr pot estar molt be per trobar imatges per usar-les en treballso compartir-les amb amics.

Tambe devem tenir en compte que les dades de Flickr estan a la disposicio de tercers com a entitats, governso empreses. Es pot parametritzar la nostra privadesa impedint que tothom pugui utlizar o compartir lesnostres imagenes sense el nostre permis.

Hi ha altres alternatives per evitar tot aquest tipus de problemes, com allotjar les nostres images en unservidor de pagament. En un servei de pagament disposem del nostre propi espai web per poder allotjar lesnostres imagens i poder gestionar-les com desitgem.

BIBLIOGRAFIA:

Processing.org “Convolution by Daniel Shiffman.” [Data de consulta 11 Novembre del 2016 ] Disponible: < https://processing.org/examples/convolution.html >.

Jordi Llinares Pellicer. Escola Politecnica Superior d'Alcoi ( Dep. de Sistemes Informàtics iComputació) “Gràficos por computador“ [Data de consulta 8 Novembre del 2016 ] [en linia] Disponible: < http://users.dsic.upv.es/~jlinares/ >

Juan Maria Sarrió Garcia. MUA_Workshop “Manual de ayuda de Processing “ [Data de consulta 12 Novembre del 2016 ] [en linia] < https://issuu.com/xixkoo/docs/processing_juanma_sarrio_garcia >

Francesc Marti Perez. Universitat Oberta de Catalunya “Programacio d'efectes en imatges en Processing“[Data de consulta 5 Novembre del 2016 ] [en linia]

< http://cvapp.uoc.edu/autors/MostraPDFMaterialAction.do?id=239710 >

Marcis Gasuns es l'autor de la tipografia utilitzada a l'exercici 4 font: GetVoIP Grotesque.otf License CC-BY adreça https://fontlibrary.org/en/font/free-grotesque-web-font#GetVoIP Grotesque-Italic