Tractament i Publicació d imatge i vídeo - Grau...

Tractament i Publicació d’imatge i vídeo

Pràctica 2

PRA 2Pere Amengual GomilaDesembre 2015

2

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

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

Índex

3


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ícu-la. L’exercici es divideix en tres parts:

a) En Photoshop, genera una imatge d’un cartell publicitari ficti-ci d’una pel•lícula. Aquest cartell obligatòriament 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 resul-tat estètic final. (0.5 punts)

Per confeccionar el cartell he fet servir una fo-tografia que he tractat amb un efecte de textu-ra de pintura a l’oli i també amb una simulació de vinyetejat amb un focus de llum mitjançant una màscara amb un degradat. També he mod-ificat la brillantor i el contrast mitjançant les corbes RGB.

Pel que fa a la tipografia, he fet servir una com-posició habitual en els cartells de cinema, amb un joc tipogràfic entre majúscules i minúscules per donar un poc d’originalitat i variacions tant en l’interletrat com en l’escala vertical per aconseguir les variacions necessàries.

b) Fes servir After Effects (i el plug-in Mocha AE si ho consideres necessari), per substituir en el vídeo “cartell_cine.mp4” (*) el car-tell publicitari “Big Buck Bunny” pel cartell que has generat en el primer pas, de forma que aquest quedi integrat i “segueixi” el mov-iment de la càmera. (3.5 punts)

He fet servir el plugin Mocha AE realitzant un seguiment i exportant les dades a AE per aplicar-les a la precomposició amb el cartell. També he creat una composició amb una mica de reflex del carrer i la he afegit jugant amb la seva opacitat i el mode de fusió amb sobre-exposició lineal.

c) Finalment, exporta el resultat en un fitxer de vídeo amb nom “cognom_nom_B_1” (Nota: consulta a l’apartat “Condicions de lli-urament“ el format que han de tenir els vídeos que has d’entregar amb la pràctica. És possible que sigui necessari exportar els vídeo en dos formats diferents: un format més comprimit per entregar amb la Pràctica i un altre format, amb la màxima qualitat possi-ble, per continuar realitzant la pràctica i publicar el resultat a la plataforma de publicació de vídeo escollida. En ambdós casos, es valorarà la qualitat dels vídeos). (1 punt)

https://vimeo.com/149967571

4


Pregunta 2 (1 punt)

En After Effects, genera un fitxer de vídeo que superposi els clips de vídeo “cartell_cine.mp4” i “cognom_nom_B_1” tal com es mostra a la següent imatge. El vídeo generat a la pregunta 1 serà el vídeo principal de la composició, i el vídeo situat a la part dreta superior de la imatge serà el clip de vídeo original “cartell_cine.mp4”.

Exporta el resultat en un fitxer de vídeo amb el nom “cognom_nom_B_2”.

Per superposar el vídeo he creat una nova capa amb el vídeo original modificant la seva escala i posició. Addicionalment, i seguint l’exemple, he afegit a aquesta capa l’efecte “Dimensión - bisel y sombra” per re-saltar la imatge petita sobre el fons.


Pregunta 3 (1 punt)

En After Effects, sobre el vídeo creat a la pregunta 2 (“cognom_nom_B_2”), 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-se al inici clip de vídeo (entre el segon 0 i 2), 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_B_3”.


En el procés de confecció dels títols he creat una composició amb els seguents elements:

- Sòlid blanc de fons amb degradat i animació del traçat de la màscara a l’inici

5


- Textos amb el nom de l’alumne, el de la pràctica i la data de la pràctica que entren amb una animació d’entrada per paraules.

- Sòlid blau de fons que entra amb animació de canvi d’escala horit-zontal

- Nom de l’assignatura que entra emb efecte de desenfocament de caixa (box blur)

- Tots els textes tenen una caixa de fons per augmentar la legibilitat i també un efecte d’ombra paral·lela.

- Els títols desapareixen amb un canvi gradual d’opacitat.

6


Pregunta 4 (2 punts)

Escriu un programa en Processing que apliqui una màscara de convolució de tipus Sobel sobre el clip de vídeo generat a la pregunta 1, “cognom_nom_B_1”. Genera un clip de vídeo amb aquest efecte aplicat de nom “cognom_nom_B_4”.

Nota: Penseu el clip de vídeo es pot exportar i importar com a seqüencia d’imatges. Aquestes imatges no les heu d’entregar amb la pràctica.


PImage img; // declaració objecte tipus PImageString nomImatge; // declaració objecte tipus Stringint matrixsize = 3; // de la matriu de convoluciófloat[][] matrix = { { -1, 0, 1 }, // matriu anidada amb els valors de convolució { -2, 0, 2 }, { -1, 0, 1 } };

void setup() { size(1280, 720); // mides de la pantalla iguals que les de la imatge noLoop(); // el codi a draw() només s'executarà un cop}

void draw() { for (int i=0; i<= 637 ; i++) { // 638 imatges nomImatge = “cartell_cine_modificat_master”+nf(i,3)+”.png”; // composició del string amb el nom de la imatge img = loadImage(nomImatge); // assignació i càrrega imatge a varaible img image(img, 0, 0); // mostrar imatge a pantalla loadPixels(); // carregar a matriu pixels[] els pixels a pantalla for (int x = 0; x < img.width; x++) { // bucles anidats en recorregut pels pixels for (int y = 0; y < img.height; y++ ) {

color c = convolution(x, y, matrix, matrixsize, img); // crida a funció convolution i assigna retorn a c int loc = x + y*img.width; // càlcul de pixel afectat en funció de coordinades x i y pixels[loc] = c; // assignació de color de píxel modificat } } updatePixels(); // mostrar els pixels modificats a pantalla save(nomImatge); // guardar la pantalla actual a un fitxer de imatge }}

color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img){ float rtotal = 0.0; // variables per emmagatzemar resultats r, g i b float gtotal = 0.0; float btotal = 0.0; int offset = matrixsize / 2; // per evitar sortir dels límits de la imatge for (int i = 0; i < matrixsize; i++) { // bucles anidats per la matriu de convolució for (int j= 0; j < matrixsize; j++) { int xloc = x+i-offset; int yloc = y+j-offset; int loc = xloc + img.width*yloc; // posició del pixel a calcular loc = constrain(loc, 0, img.pixels.length-1); // restricció dels valors dins la imatge rtotal += (red(img.pixels[loc]) * matrix[i][j]); // càlcul de la convolució per r, g i b gtotal += (green(img.pixels[loc]) * matrix[i][j]); btotal += (blue(img.pixels[loc]) * matrix[i][j]); } } rtotal = constrain(rtotal, 0, 255); // restricció dels valors de color entre 0 i 255 gtotal = constrain(gtotal, 0, 255); btotal = constrain(btotal, 0, 255); return color(rtotal, gtotal, btotal); // el resultat torna una variable de tipus color

}

7


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, 3 i 4 amb la màxima qualitat possible. Raona quin és el motiu o motius que t’han portat a escollir aquesta plataforma i no una altra. Fes una taula comparant les característiques més importants de la plataforma escollida amb altres dues plataformes.





He escollit la plataforma vimeo ja que em permet formar part d’una comunitat de creadors més exclu-siva que la existent a youtube, on normalment es barregen tot tipus de continguts més enfocats a l’en-treteniment. Això no implica que a altres plataformes, com Youtube, no existeixi també contingut de qualitat.

També considero important la manera com es mostra la publicitat (amb ‘bànners’ al costat) és molt menys intrussiva que com es mostra a You-tube on es poden mostrar vídeos sencers abans del meu, o capes amb text i imatges sobre el vídeo en el moment de la reproducció).

D’altra banda, ja vaig començar a pujar el contingut en vídeo que he anat confeccionant durant tot el grau, i així he creat una col·lecció amb

el treball de totes les assignatures.

Malgrat les restriccions del compte gratuit (només permet pujat 500 MB a la setmana) fins ara mai he superat els límits d’aquest tipus de compte.

En resum, la funcionalitat oferta per vimeo cobreix les meves expectatives en quant a disposició gràfica dels el-ements en pantalla, comunitat de creadors i públic, absència de publici-tat intrusiva i facilitat per pujar, orde-nar i compartir el contingut.

8


Vimeo Youtube Instagramtipus usuari proveïdor de continguts professionals i creatius interes-

sants en contigut de qualitatmolt variat, creadors tant profes-sionals com amateurs

usuaris ocasionals i marques comercials

pujada continguts totalment gratuïta? no (disposa d’opció premium) sí síreproduccions il·limitades per contin-guts pujats?

- no- premium: sí

sí sí

durada màxima - 500MB- premium 5GB

-15 minuts-usuaris verificats: 2GB-partner: il·limitat

15 segons

resolució 4k? - descàrrega: sí- streaming: no

sí (fins 60 fps) no

contingut de pagament? sí sí noinclou publicitat? - sí

- premium: no- sí- Youtube Red: no

-sí, missatges esponsoritzats

remuneració als creadors per publicitat? - no, però inclou opció Tip Jar per donatius

sí no

publicitat invasiva? no (bànners al costat) sí (videos abans del contingut, capes de text sobre la imatge, etc.)

no (contingut recomanat)

permet embedding? sí sí síperment comentaris? sí sí sípermet tags? sí sí sípermet playlists? sí sí noconnexió amb xarxes socials? sí sí sícontingut fotogràfic? no no sínombre d’usuaris >100.000.000 >1.000.000.000 >400.000.000

9


Bibliografia i fonts consultades

Referències bibliogràfiques i en línia

Silvia Pujalte Piñán i Xavier Bonet. Tractament i publicació d’imatge i vídeo. (c) FUOC 2011. Barcelona. Setembre 2011.

Kevin King. Vimeo vs Youtube: which is best for business? (c) Sprout Social Inc 2015 [en línia] http://sproutsocial.com/insights/youtube-vs-vi-meo-business/

Vimeo vs Youtube: which Videoplatform is right for you? (c) Maventus Group Inc 2015 [en línia] http://mavsocial.com/vimeo-vs-youtube-on-line-video-platform/

Lisa Richwine. Youtube offers US subscribers paid otion with no ads (c) Thomson Reuters 2015 [en línia] http://www.reuters.com/article/us-alphabet-youtube-subcription-idUSKCN0SF2KO20151021

Arjun Kharpal. Facebook’s instagram hits 400M users, beats Twitter (c) CNBC LLC 2015 [en línia] http://www.cnbc.com/2015/09/23/insta-gram-hits-400-million-users-beating-twitter.html

Creating High Quality Instagram Videos using Adobe Premiere CC. (c) WhoisMatt.com [en línia] http://whoismatt.com/instagramexportset-tings/

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/

Vimeo. Imatge icona portada Flat icon. flaticon.com (cc by) http://cdn.flaticon.com/png/512/5.png

Tractament i Publicació d imatge i vídeo - Grau...

Documents

Transcript of Tractament i Publicació d imatge i vídeo - Grau...