En el tractament i publicació d'imatge i vídeo es deprenen conceptes teòrics sobre la imatge i el vídeo. L'estudi dels processos com l'emmagatzemant o les operacions de modificat i processat a través de matrius i operacions matemàtiques. Els softwares utilitzats al llarg del curs són: Processing (operacions matemàtiques) i After Effects.

1. Tractament i publicació d'imatge i vídeo Pràctica 2
Marcos Baldoví Martínez

2. Pregunta 1 (5 punts)
En aquest exercici farem servir la t%cnica del "motion tracking" o “seguiment" per substituir un
element d’un clip de vídeo. En el nostre cas, aquest element serà el cartell publicitari d’una pel·lícula.
L’exercici es divideix en tres parts:
a) En Photoshop, genera una imatge d’un cartell publicitari fictici d’una pel·lcula. Aquest cartell
obligatriament ha d’incloure la teva foto (pots fer servir la foto de la UOC, per exemple), text i
altres imatges. Es valorar% especialment la quantitat d'elements inclosos en el cartell (tipografia,
altres imatges, etc.) i el seu resultat est'tic final. Detalla breument en el document PDF de la
Pr%ctica, afegint captures de pantalla, com ha estat el proc*s de generaci+ del cartell. (1 punt)
Vaig escollir el cartell de Ant-man, perqu' *s un cartell senzill per poder realitzar un fotomuntatge i
poder obtenir un resultat bastant creïble, ja que no s'ha modificat les parts met%l·liques i únicament
s'ha canviat la foto del personatge sense molta complicaci+ amb un resultat acceptable.
Tamb* s'han modificat els textos en angl's traduït-los al Catal%, la font utilitzada (nfl-chargers-
2007.ttf), *s una lletra de palo molt similar a la utilitzada en el cartell original. En resum el que s'ha
tractar d'aconseguir es una composici+ correcta i que sigui creïble per tant les modificacions
únicament han sigut les exigides per a la confecci+ de l'exercici, ja que un exc*s d'efectes van en
detriment de la qualitat.

3. b) Fes servir After Effects, per substituir en el vdeo “cartell_cine.mp4” (*) el cartell publicitari “Big
Buck Bunny” pel cartell que has generat en el primer pas, de forma que aquest quedi integrat amb el
major realisme possible (pots afegir els efectes que consideris necessaris) i “segueixi” el moviment
de la c%mera. (3 punts)
c) Finalment, exporta el resultat en un fitxer de vdeo amb nom “cognom_nom_P1” (Molt important:
consulta a l’apartat “Condicions de lliurament“ el format que han de tenir els vdeos que has
d'entregar amb la pr%ctica. A tots els exercicis, *s possible que sigui necessari exportar els vdeo en
dos formats diferents: un format m*s comprimit per entregar amb la Pr%ctica i un altre format, amb la
m%xima qualitat possible, per continuar realitzant la pr%ctica i publicar el resultat a la plataforma de
publicaci+ de vdeo escollida. En amb d+s casos, es valorar% la qualitat dels vdeos). (1 punt)

4. Pregunta 2 (1 punt)
En After Effects, sobre el vídeo creat a la pregunta 1 (“cognom_nom_P1”), genera una presentació
amb text animat on s’inclogui el vostre nom, cognoms, nom de l’assignatura, nom de la pràctica i data
de creació de la pràctica.
Aquest text animat s’haurà de superposar a les imatges del vídeo i no podrà tenir una durada superior
als 10 segons. Es valorarà principalment la qualitat i varietat de les animacions inserides.
Detalla breument en el document PDF de la Pràctica, afegint captures de pantalla, els efectes de text
inserits. Exporta el resultat en un fitxer de vídeo de nom “cognom_nom_P2”.
Abans de començar tot el contingut dels textos es generar% en una composici+ anomenada text amb
una durada de 10 seg.
S'ha aplicat una animaci+ tipus com si fos un panell antic de sortides de trens o avions. Primer
crearem una capa de forma i inserirem un rectangle, seguidament es cre*s una capa de tipus text
amb text.
Les dues capes generades les convertirem en manera 3D, s'ha mogut en punt de refer'ncia de la
capa de formes per poder generar la rotaci+ des de l'eix x. Generarem dos fotogrames clau en aquest
eix en el keyframe 0 que tindr% valor de rotaci+ de 90º i en el 12 la rotaci+ igual a 0.
Tamb* en la capa de formes modificarem l'opacitat en el keyframe 0=0% i en el 4 =100%.
Per a generar el rebot en el rectangle inserirem un script en l'eix x. Mantindrem durant 1 segon i
mitj% l'efecte, seguidament repetirem el mateix proc*s per al rev*s per a la retirada del rectangle i
el text.
Per finalitzar la capa de formes la vincularem amb el text i aquest s'adaptar% al moviment. Partint
d'aquest exemple mostrarem tot el text que surt a l'exercici.

5. Pregunta 3 (2 punts)
Escriu un programa en Processing que apliqui una màscara detectora de contorns sobre el clip de
vídeo generat a la pregunta 1, “cognom_nom_P1”. Genera un clip de vídeo amb aquest efecte aplicat
de nom “cognom_nom_P3”.
// Declaració de variables
PImage img;
String imagenes;
//int i; // increment
//Matriu de convolució Contorns (detecció) expressada com a matriu
float[][] matrix = { { -1, -1, -1 },
{ -1, 8, -1 },
{ -1, -1, -1 } };
// Dimensió de la màscara de convolució
int matrixsize = 3;
void setup() {
size (640,360);
noLoop(); //permet no repetir el codi del draw, La funció draw() s'executarà només una
vegada
//i=0;
}
void draw() {
//la variable i s'utilitza d'increment amb la condicio de que quant la i arribe a
l'ultima iamtge es pare
// defecte del condicional no conta l'imatge 0
/* i++;
if(i==637){
exit();
}*/
for (int i=0; i= 637; i++) {
imagenes = Baldovi_Marcos_P3_00+nf(i,3)+.png;
//composició del string amb el nom de la imatge
img = loadImage(imagenes); // assignació i càrrega imatge a varaible img
image(img, 0, 0); // mostrar imatge a pantalla
loadPixels();
// Recorrem tots els píxels de la imatge
for (int x = 0; x img.width; x++) {
for (int y = 0; y img.height; y++ ) {
// la variable color
color c = convolution(x, y, matrix, matrixsize, img);
int loc = x + y*img.width;
pixels[loc] = c;
}
}
// Si fem modificacions sobre els píxels, sempre hem d'actualitzar
// l'array amb la funció updatePixels()
updatePixels();
// Guardem el resultat a la carpeta data del projecte
save(dataPath(imagenes));
}
}

6. // Funció que calcula la convolució espacial
color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img)
{
float rtotal = 0.0;
float gtotal = 0.0;
float btotal = 0.0;
int offset = matrixsize / 2;
// Recorrem la matriu de convolució
for (int i = 0; i matrixsize; i++){
for (int j= 0; j matrixsize; j++){
// Càlcul del píxel sobre el que estem treballant
int xloc = x+i-offset;
int yloc = y+j-offset;
int loc = xloc + img.width*yloc;
// Ens assegurem que agafem un píxel dintre del rang vàlid. En aquest cas estem
aplicant la
// replicació de valors de píxels propers per localitzacions de píxels que surten
de la imatge
loc = constrain(loc,0,img.pixels.length-1);
// Càlcul de l'operació convolució
// Consultem el valor dels canals red, green i blue (RGB)
rtotal += (red(img.pixels[loc]) * matrix[i][j]);
gtotal += (green(img.pixels[loc]) * matrix[i][j]);
btotal += (blue(img.pixels[loc]) * matrix[i][j]);
}
}
// Ens assegurem que els nivells de color estàn en el rang (0, 255)
rtotal = constrain(rtotal, 0, 255);
gtotal = constrain(gtotal, 0, 255);
btotal = constrain(btotal, 0, 255);
// Retornem el nivell de color
return color(rtotal, gtotal, btotal);
}

7. Pregunta 4 (1 punt)
En el document PDF de la pràctica, explica detalladament com has realitzat el proc9s d'exportació dels
vídeos (renderització). En particular, explica breument els paràmetres fonamentals (contenidor, c:dec,
keyframe, bit rate, etc.), quins valors has utilitzat i quina ha estat la raó. Afegeix captures de pantalla.
En totes les conversions s'ha utilitzat el cdec H.264 per a una resoluci+ de 640x360, per a l'%udio
s'ha utilitzat el mateix cdec d'%udio que en el vdeo original que *s el AAC.
Aquest format d'%udio t* perdudes, encara que en el nostre cas mnimes, ja que hem utilitzat una
velocitat de mostreig m%xima 48.000 Hz. i una velocitat de 320 Kbbs.
Respecte al primer exercici hem baixat la resoluci+ al 50% i la velocitat de fotogrames la baixem a
25 fps que es correspon amb PAL que *s l'est%ndard de TV europeu. En els altres 2 exercicis la
resoluci+ ja ha sigut la que demana els exercicis.
Per a obtenir un arxiu de 10 Mb s'han modificat els ajustos de velocitat:
Hem triat el Bitrate variable (VBR) i el nombre de passades 1. És a dir que la velocitat sigui
variable en funci+ del contingut per tant ens donar% una millor compressi+ quant a qualitat de la
imatge, ja que depenent del contingut del frame per tant avançar% m*s r%pid o no. En una velocitat
constant no mira el contingut dels frames, sin+ que treballa sempre a una velocitat constant sense
mirar el contingut.
El nombre de passades determina el nombre de vegades que el codificador analitzar% el nostre vdeo
abans de codificar-ho i com m*s gran sigui el temps de descodificaci+ millor ser% la qualitat i la
compressi+. Per al format d'eixida que anem a treballar la qualitat que s'aconsegueix amb un
nombre major de passades, no s'aprecia.
Tenim altres dos par%metres Velocitat de destinaci+ i Velocitat m%xima (Mbps) que fan refer'ncia al
concepte de Data Rate (bit rate) i que en general determina que com m*s gran sigui la velocitat de
dades millor ser% la qualitat per m*s gran l'arxiu.
Adobe recomana per a resolucions de 1920 x 1080 , podem triar una r%tio de 7-8,Mbps. Per tant
hem ajustat els par%metres entre 3 i 6 Mbps *s una relaci+ correcta per a la resoluci+ d'eixida sense
arribar als lmits que ens proporcionaria un c%lcul matem%tic amb la qual cosa aquestes velocitats
ens concedeixen un cert rang de millora.
Pregunta 5 (1 punt)
Publica en una plataforma de publicació de vídeos en línia els vídeos generats en els exercicis 1, 2, i 3
amb la màxima qualitat possible. Raona quin 9s el motiu o motius que t’han portat a escollir aquesta
plataforma i no una altra.
Fes una taula comparant les característiques m9s importants de la plataforma escollida amb altres
dues plataformes.
Exercici 1 https://vimeo.com/197297072
Exercici 2 https://vimeo.com/197298000
Exercici 3 https://vimeo.com/197298823

8. L'elecci+ de Vimeo *s perqu' considero que *s una plataforma professional. La gran majoria de professionals
del sector audiovisual utilitzen aquest portal com a principal canal de distribuci+ dels seus continguts a trav*s
de la xarxa. Ja sigui tant pel tipus d'audi'ncia, com els continguts que cont* aquesta plataforma veig m*s
apropia, la publicaci+ de contingut a trav*s d'aquest portal.
Una de les principals difer'ncies *s que si ets usuari pr'mium, no inclou publicitat enmig dels continguts que
es publiciten. És un problema bastant greu, ja que elimina el focus d'atenci+ sobre el contingut que s'est%
mostrant. Aquest problema existeix utilitzant quan utilitzem com a plataforma per a la distribuci+ dels
nostres continguts en Youtube.
Si el contingut a mostrar *s un portfoli, un treball professional amb una qualitat de vdeo determinada en la
qual l'usuari vol mostrar la seva faceta creativa o artstica. Vimeo ofereix poder aconseguir un feedback m*s
professional sobre el contingut que es mostri. A la vegada *s un canal de distribuci+ de contingut que permet
portar el nostre contingut m*s r%pid a altres professionals del sector.
En canvi si el que volem *s publicitar una beguda, menjar o qualsevol producte o servei, que no tingui a
veure amb un vessant m*s artstica del contingut en si mateix, sin+ que el contingut del vdeo tingui com a
objectiu vendre o donar un servei. La millor plataforma ser% YouTube perqu' t* molts m*s usuaris i l'acc*s a
un major nombre de possibles consumidors del producte o servei.
Depenent del contingut ha mostrat i els objectius que es desitgin aconseguir amb el contingut publicat ser%
millor una plataforma o una altra. Fins i tot es pot dir que les dues plataformes es complementen, ja que en
una hi ha una gran quantitat tant de públic com de contingut (YouTube) i en l'altra hi ha m*s qualitat pel que
fa a continguts i el tipus d'audi'ncia que *s m*s selecta ( Vimeo).
PARAMENTRES VIMEO YOUTUBE
nombre d'usuaris En 2016 m*s de 170.000.000
usuaris
En 2016 m*s de 1.000.000.000
usuaris
Qualitat reproduccio admet tots aquest formats (.MOV,
MPEG4, AVI, WMV, MPEG, PS,
FLV, 3GP...)amb una resoluci+ fins
a 1080.
admet tots aquest formats (.MOV,
MPEG4, AVI, WMV, MPEG, PS,
FLV, 3GP...)amb una resoluci+ fins
a 4K i 360º
Perfil Contiguts Artstic, Creatius, mostra de
continguts professionals
Gen'rics (totes les tem%tiques
menys sexe).
Popularitat / Efecte viral
Publicitat Unicament usuaris si
Servei de pagament si no
Llímit de pujada - Si → sin+ eres usuari pr'mium
fins hasta 500Mb. A la setmana
- Depenent del tipus de pagament
escollit tens una determinada
limitaci+. Hi ha una opci+ que
permet pujar material sense
restriccions.
- Il·limitada per vdeos amb una
durada de fins a 15 min.
- Si el conter de YouTube est%
verificat fins a 2 Gb / video
Comentaris Si Si
tipus de negoci amb el contigut - Es pot vendre el teu contingut a
trav*s de la plataforma si eres
usuari PRO.
Pots generar capital depenent de
l'audi'ncia dels vdeos si permets
la inclusi+ de publicitat.

9. BIBLIOGRAFIA
Adobe. “Ajustes de exportaci+n de vdeo” [Data de consulta 27 Decembre del 2016 ] [en lnia]
Disponible: http://help.adobe.com/es_ES/PremierePro/4.0/WS81733643-B4A6-45c5-ABD7-
D5A90EB388FC.html
Adobe. “Ayuda de Encore / Planificaci+n de proyectos” [Data de consulta 27 Decembre del 2016 ]
[en lnia] Disponible: https://helpx.adobe.com/es/encore/using/project-
planning.html#average_asset_size
Wikipedia “CODEC H.264/MPEG-4 AVC” [Data de consulta 27 Decembre del 2016 ] [en lnia]
Disponible: https://es.wikipedia.org/wiki/H.264/MPEG-4_AVC
Vimeo “Ayuda Vimeo” [Data de consulta 28 Decembre del 2016 ] [en lnia] Disponible:
https://help.vimeo.com/hc/es
Youtube. “Ayuda Youtube” [Data de consulta 28 Decembre del 2016 ] [en lnia] Disponible:
https://support.google.com/youtube#topic=4355266
Francesc Martí Perez. Universitat Oberta de Catalunya “Programaci+ d'efectes en imatges en
Processing“ [Data de consulta 22 Decembre del 2016 ] [en lnia] Disponible:
http://cvapp.uoc.edu/autors/MostraPDFMaterialAction.do?id=239710
Processing.org “Convolution by Daniel Shiffman.” [Data de consulta 22 Decembre del 2016 ]
Disponible: https://processing.org/examples/convolution.html .