Tractament i publicaci

d'Imatge i Vdeo

Practica #1

Nom:
Cognoms:
Data lliurament:

Aitor Javier
Santaeugenia Mar
15/11/2016

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

INDEX

Exercicis
Pregunta 1
Pregunta 1_a
Pregunta 1_b
Pregunta 2
Pregunta 2_a
Pregunta 2_b
Pregunta 3
Pregunta 4
Pregunta 4_a
Pregunta 4_b
Pregunta 5
Pregunta 5_a
Pregunta 5_b
Pregunta 5_c
Pregunta 6
Pregunta 6_a
Pregunta 6_b
Pregunta 7
Bibliografia
Recursos multimdia

Universitat Oberta de Catalunya

Pgina 3
Pgina 3
Pgina 3
Pgina 3
Pgina 4
Pgina 4
Pgina 4
Pgina 5
Pgina 6
Pgina 6
Pgina 7
Pgina 8
Pgina 8
Pgina 9
Pgina 10
Pgina 11
Pgina 11
Pgina 11
Pgina 14
Pgina 15
Pgina 15

CC BY-NC-SA

Pg. 2 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

EXERCICIS
Pregunta 1
a) Escriu un programa en Processing que mostri la imatge que tens al teu perfil del campus de la UOC en
color (si la teva imatge est en escala de grisos, fes servir una altra). La finestra de l'aplicaci s'haur d'ajustar
a les dimensions de la imatge. s a dir, si les dimensions de la imatge sn 300x200 pxels, la mida de la
finestra tamb haur de tenir 300x200 pxels ( exercici_1a.pde).

Tenim l'exercici baix el nom de exercici_1a.pde i el codi s el de a continuaci.

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

Tenim l'exercici baix el nom de exercici_1b.pde i el codi s el de a continuaci.

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 3 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Pregunta 2
a) Escriu un programa en Processing que mostri la imatge grid.png per pantalla.
Aquest programa haur de reduir la imatge un 81% i mostrar-la a la finestra de l'aplicaci 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.pde).

Tenim l'exercici baix el nom de exercici_2a.pde i el codi s el de a continuaci.

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

Tenim l'exercici baix el nom de exercici_2b.pde i el codi s el de a continuaci.

El que hem realitzat ha estat un resize de la pantalla i afegit un save(imatge_2b.png) per a la
ruta de la imatge.
Ara la pantalla es tornar petita al realitzar l'exercici.
La imatge guardada es la de a continuaci.

"imatge_2b.png
Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 4 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Pregunta 3
Utilitzant la funci filter () de Processing, escriu un programa que realitzi les segents transformacions sobre
la teva imatge en color:
a) Posteritzaci de la imatge original, en prmer la tecla [q],
b) Dilataci de la imatge original, en prmer la tecla [w],
c) Erosi de la imatge original, en prmer la tecla [e],
d) Inversi de la imatge original, en prmer la tecla [r]
El programa tamb haur de tornar a mostrar la imatge original en prmer la tecla [z] ( exercici_3.pde).
(Nota: els filtres s'han d'aplicar sempre sobre la imatge original. s a dir, encara que l'usuari vagi prement
tecles, els filtres sempre s'aplicaran sobre la imatge original, no sobre una imatge prviament filtrada).

Tenim l'exercici baix el nom de exercici_3.pde) i el codi s el de a continuaci.

Clicant q)
Universitat Oberta de Catalunya

Clicant w)

Clicant e)
CC BY-NC-SA

Clicant z)
Pg. 5 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

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

Podem veure com els valors RGB que ens dona al punt [10,10] s de 249, 252, 249.

L'exercici el tenim baix el nom de exercici_4a.pde i el codi es el de a continuaci.

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 6 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

b) Calcula aquests mateixos valors fent servir l'histograma de Photoshop. Compara i raona els resultats. Fes
captura de pantalles dels processos de forma anloga a com vas fer a la PAC 1, i inclou les imatges i els
raonaments al PDF de la prctica.

Primer de tot, obrim la fotografia del campus, anomenada foto_carnet en el nostre cas, amb els
Photoshop, fent Archivo > Abrir > foto_carnet.
Un cop hem obert la imatge, obrirem la finestra del histograma. Per fer-ho, anem a ventana >
histograma.
Ara seleccionarem el punt [10,10] i mirem amb l'histograma obert els valors.

Cal dir que la meva imatge, s una foto de carnet, aix doncs en el punt [10, 10] s de color blanc. Tot
sigui dit, que si comparem amb el programa creat en el exercici_4b.pde podem veure com els
valors son els mateixos, ja que la mitjana dona 250 (249, 252, 249)
Al mateix temps, podem veure el nivell si clicam amb el ratol, i podem obtenir aquests resultats si ho
feim:

Podem veure el nivell 249 amb un percentatge de 66,6 i en la segona imatge podem veure el
nivell 252 amb un percentatge de 33,3, fent coincidir el programa amb Processing amb el
Photoshop.

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 7 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Pregunta 5
a) Sobre la teva imatge en color, realitza les segents transformacions lineals a Photoshop (pots fer servir les
matrius de convoluci que consideris oport) :
Reala els contorns (exercici_5a1.png)
Detecta els contorns (exercici_5a2.png)
Suavitza la imatge (exercici_5a3.png)
Guarda les imatges al teu disc dur. Fes tamb captura de pantalles dels processos i inclou les imatges i els
raonaments al PDF de la prctica.

Reala els contorns (exercici_5a1.png)

Obrim imatge foto_carnet (fotografia original).
Anem a Filtro > Otro > A medida i apliquem la segent matriu

Detecta els contorns (exercici_5a2.png)

Obrim imatge foto_carnet (fotografia original).
Anem a Filtro > Otro > A medida i apliquem la segent matriu

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 8 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Suavitza la imatge (exercici_5a3.png)

Obrim imatge foto_carnet (fotografia original).
Anem a Filtro > Otro > A medida i apliquem la segent matriu

b) Realitza un programa a Processing que apliqui les mateixes transformacions lineals a la teva imatge en
color i guardi els resultats al teu disc dur ( exercici_5b1.png, exercici_5b2.png i exercici_5b3.png).
(Nota: es dna llibertat a l'alumne sobre com l'usuari interactuar amb el programa. Incls, el programa pot
generar automticament les 3 imatges, sense que l'usuari hagi de prmer cap tecla o realitzar cap acci).

Hem creat el exercici amb un men i els tres filtres, on podem veure la diferncia amb la imatge
original i les mscares aplicades, el exercici s'anomena exercici_5b_pde

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 9 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

c) A Photoshop, analitza i compara els resultats. Fes servir captures de pantalla per complementar els teus
raonaments.

Un cop tenim totes les imatges, podem veure com tant en Photoshop com en Processing, si
apliquem les imatges ens apareixen idntiques. Per veure la diferncia, posarem totes les imatges
generades classificant-les per la mscara emprada:
Mscara de realament de contorns

exercici_5b1.png
Processing

exercici_5a1.png
Photoshop

Mscara de detecci de contorns

exercici_5b1.png
Processing

Universitat Oberta de Catalunya

exercici_5a1.png
Photoshop

CC BY-NC-SA

Pg. 10 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Mscara de suavitzaci

exercici_5b1.png
Processing

exercici_5a1.png
Photoshop

Podem veure com totes les imatges son idntiques a excepte de la de la detecci de contorns, que a
processing apareix un poc ms blanquera, suposant que ha sigut per un fall en el codi o per alguna
capa externa del photoshop que crea les imatges ms fosques (pot ser si apliqussim un
background al processing, seria ms similar).

Pregunta 6
a) Sobre una versi en escala de grisos de la teva imatge (pots fer servir Photoshop per generar-la), escriu un
programa en Processing que apliqui a la teva imatge una transformaci d'aclariment o enfosquiment per
parts que millori el seu contrast. El programa haur de mostrar a la finestra de l'aplicaci les dues imatges
alhora, per poder comparar els resultats (exercici_6a.pde).

L'exercici s'anomena exercici_6a_pde.

b) A Photoshop, realitzar els mateixos clculs i compara i raona els resultats. Fes captura de pantalles dels
processos, i inclou les imatges i els raonaments al PDF de la prctica.

Per fer-ho amb el Photoshop, el que tenim que fer s:

Obrim la imatge a escala de grisos i la guardem baix el nom exercici_6b_png, la qual ser la
que apliquem la mscara amb Photoshop.
Cliquem sobra la icona de Curvas.

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 11 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Sens obrir una finestra amb les corbes i dos punts els quals podem clicar i donar valors
d'entrada i sortida.

Entenem que, en teoria entrada seran X i sortida seran Y, llavors en el primer punt tindrem que
posar els valors de (x1, y1) i en el punt dos (x2,y2).
Tenim que afegir valors majors de 100, aix doncs tindrem que clicar les opcions i anar a
Opciones de visualizacin de curvas...

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 12 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Aqu dins, tindrem que seleccionar l'opci de Luz (0-255) per poder donar valors superiors a
100.

Ara donarem els valors seleccionats. Al primer punt (23, 65) i al segon punt (250, 240).

Obtenim la imatge resultant i comparam amb la creada en Processing.

Processing
Universitat Oberta de Catalunya

Photoshop
CC BY-NC-SA

Pg. 13 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Podem veure com els resultats en ambos processos son idntics. Adjuntem les dues imatges per
a la seva correcta visualitzaci (exercici_6a_png i exercici_6b_png).

Pregunta 7
Publica en una plataforma de publicaci dimatges en lnia les imatges generades als exercicis 2 i 5. Quina s
la ra o raons than portat a escollir aquesta plataforma i no una altra? En particular, analitza com gestiona
aquesta plataforma els drets d'autor.

Entenc que tindrem que emprar alguna plataforma com Picasa o FlicKR, per en el meu cas he
preferit un lloc d'allotjament d'imatges com s Imgur.
He elegit aquesta opci ja que, des de l'inici de la carrera, sempre que he tingut que pujar alguna
imatge a Internet per tal de que sigui visualitzada, he emprat aquesta aplicaci i s on tinc la majoria
de treballs. A ms a ms, la seva comoditat i facilitat s un dels principals motius.
Podem llegir la poltica de privacitat en el segent enlla: http://imgur.com/tos
Aqu, podem deduir que prcticament totes les imatges son pujades sense una protecci suficient,
tal com podem llegir a continuaci:

(2) you created the file or other content you are uploading, or otherwise have sufficient intellectual
property rights to upload the material consistent with these terms. With regard to any file or content
you upload to the public portions of our site, you grant Imgur a non-exclusive, royalty-free,
perpetual, irrevocable worldwide license (with sublicense and assignment rights) to use, to display
online and in any present or future media, to create derivative works of, to allow downloads of,
and/or distribute any such file or content.

A ms a ms, tamb podem llegir els UGC o user-generated content on ens diu que podem i que
no podem realitzar amb el contingut que ens descarregam de imgur.
You may use UGC for personal, non-commercial purposes.
You may use UGC for anything that qualifies as fair use under copyright law, for example journalism
(news, comment, criticism, etc.), but please include an attribute ("Imgur" or "courtesy of Imgur") next
to where it is displayed.
You may not use UGC for non-journalistic commercial purposes.
Your use of UGC is at your own risk. IMGUR MAKES NO WARRANTIES OF NON-INFRINGEMENT,
and you will indemnify and hold Imgur harmless from any copyright infringement claims arising out
of your use of the UGC. (See our general disclaimers below.)

Els enllaos de les imatges que ens demana l'exercici els podem veure a continuaci, amb la creaci
de diversos lbums:
Imatge exercici 2
http://imgur.com/a/h2KpF
Imatge exercici 5
http://imgur.com/a/eiTt3

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 14 ~ 15

PR #1
Tractament i publicaci d'imatge i vdeo

Aitor J. Santaeugenia Mar

25/10/2016

Bibliografia
PUJALTE PIN, SLVIA. Histogrames i transformacions puntuals . Barcelona: Universitat Oberta de
Catalunya, Estudis d'Informtica i Multimdia.
DE FUENMAYOR LPEZ, DANIEL. GONZLEZ SANCHO, MARCOS. Transformacions espacials lineals. Barcelona:
Universitat Oberta de Catalunya, Estudis d'Informtica i Multimdia.
PUJALTE PIN, SLVIA. Transformacions espacials no lineals. Barcelona: Universitat Oberta de
Catalunya, Estudis d'Informtica i Multimdia.
PUJALTE PIN, SLVIA. Transformacions geomtriques. Barcelona: Universitat Oberta de Catalunya,
Estudis d'Informtica i Multimdia.
MART PREZ, FRANCESC. Programaci d'efectes en imatges en Processing . Barcelona: Universitat
Oberta de Catalunya, Estudis d'Informtica i Multimdia.
Recursos Multimdia
Imatge corporativa de la Universitat Oberta de Catalunya. UOC logotipo azul papel. [Imatge].
http://www.uoc.edu/portal/es/universitat/coneix/marca/logotip-paper/index.html
La resta d'imatges sn de creaci prpia.

Universitat Oberta de Catalunya

CC BY-NC-SA

Pg. 15 ~ 15