Multimedia

lect. dr. Cristian Ioni

Structura curs
Obiectiv
nsuirea elementelor teoretice i practice care s permit dezvoltarea de aplicaii
multimedia
Cuprins
1.
2.
3.
4.

Noiuni generale
Imagine i animaie
Sunet
Video

Evaluare: proiect i lucrare scris

Contact
Cristian Ioni cristian.ionita@softmentor.ro
Materiale: http://ase.softmentor.ro

1. Conceptul de multimedia
I. Noiuni
generale

2. Clase de aplicaii
multimedia
3. Condiii hardware /
software
4. Multimedia n context
WEB

1. Conceptul de multimedia
Multimedia din punct de vedere informatic este:
o combinaie de text, imagine, sunet, animaie, video
accesibil utilizatorului prin intermediul sistemului de calcul

Tehnologii care au stat la baza dezvoltrii conceptului

de multimedia:
conversia analog digital
compresia datelor

Conversia analog - digital

Resursele utilizate trebuie convertite n format digital
pentru:
stocare
procesare
includere n aplicaii

Resursele sunt convertite n format analog la redare

Compresia
oapariia algoritmilor specifici (cu pierdere de
informaie)
oexemple: JPEG, MPEG Audio / Video
opierdere de informaie controlat
oexploateaz limitrile percepiei umane

oproces asimetric

Tehnologii
- periferice specializate pentru captur imagine /
sunet / video
- medii de stocare de mare capacitate
- tehnologii de comunicare la distan cu band larg
- procesoare specializate pentru compresie /
decompresie la nivel hardware

Aplicaie multimedia
- componentele sunt accesibile prin intermediul unui
sistem de calcul
- datele utilizate sunt n format digital (NU analogic)
- elementele sistmeului sunt integrate ntr-o interfa
unitar
- grad ridicat de interaciune cu utilizatorul

Modaliti de dezvoltare
Multimedia authoring
includ componenete preprogramate ce permit recunoaterea
mai multor formate de resurse multimedia, instrumente pentru
generarea animaiilor, pentru implementarea conceptelor de
hypertext, hypermedia
accentul cade pe scenariul de derulare a aplicaiei i pe
sincronizarea resurselor
Exemple: Flash, PowerPoint

Multimedia programming:
accentul se pune pe procesarea direct a resurselor prin
intermediul unui limbaj de programare i a unor biblioteci
specializate

2. Clase de aplicaii
multimedia
Criterii multiple de clasificare
Cele mai importante criterii
domeniu de utilizare
grad de interaciune
localizarea componentelor

Clasificare n funcie de domeniu

Economie vizualizarea datelor
Educaie aplicaii de e-learning, enciclopedii
Publicitate aplicaii de prezentare
Medicin procesarea i vizualizarea interactiv a datelor medicale
Industrial instrumente de proiectare asistat
Entertainment jocuri, realitate virtuala
Sisteme informatice geografice GIS sisteme pentru vizualizarea datelor
geo-spaiale
Comunicaii aplicaii de tip videoconferin

Alte criterii
Grad de interaciune
aplicaii interactive
prezentri statice

Localizarea componentelor
locale
la distan

3. Condiii hardware /
software
Echipamente hardware pentru achiziie /
procesare:
imagine
sunet
video

Componente software necesare pentru redarea

coninutului multimedia

Hardware specializat
Dispozitive periferice pentru achiziia de imagini fixe:
Scanner
transform informaia luminoas n informaie electric, iar
ulterior aceasta este convertita i salvat sub form digital
tipuri: flatbed / rotativ

Aparat foto digital

folosete lentile asemntoare aparatului foto clasic i un
senzor digital pentru transformarea informaiei luminoase n
informaie electric

Hardware specializat
Dispozitive periferice pentru achiziia de sunet:
placa de sunet: convertor analog digital i digital analog

Dispozitive periferice pentru achiziia de imagini

video:
placa de achiziie i numerizare video: preluare i numerizare
fluxuri audio - video
camera video digital: captur direct n format digital (similar
aparat foto digital)
placa TV tunner: preia semnal TV, decodific i numerizeaz
semnalul

Software specializat
Drivere
Asigur controlul i comunicarea cu perifericele specializate
Specifice pentru dispozitivul i sistemul de operare
Permit sistemului de operare s ofere aplicaiilor o interfa
uniform

Extensii ale sistemului de operare

Biblioteci specializate pentru controlul resurselor multimedia
Instrumente de baz pentru redarea coninutului multimedia

Software specializat
Produse software specializate pe medii de comunicare
Achiziie i prelucrare de imagini
Permit prelucrarea imaginilor n format raster sau vectorial
Exemple: Adobe PhotoShop, Corel Draw

Achiziie i prelucrare de sunet

Exemple: Adobe Audition, Sony Sound Forge

Achiziie i editare video

Exemple: Adobe Premiere, Sony Vegas

Software specializat
Produse software pentru creaie de aplicaii
multimedia
Clasificare bazat pe filozofia de organizare:
principiul crii - Microsoft PowerPoint
axa timpului - Adobe Flash
diagrame de flux - Adobe Authorware

4. Multimedia n context
WEB
Se dezvolt odat cu apariia standardului HTML5
Elemente multimedia suportate
Text
Imagini
Animaie
Grafic raster elementul canvas
Grafic vectorial SVG
Sunet elementul audio
Video elementul video
Grafic 3D WebGL

Avantaje

Arhitectur client-server
Client Web Browser
Trimite cererile ctre server
Gestioneaz afiarea coninutului multimedia i interaciunea cu utilizatorul

Server Web Server

Preia cererile de la Web Browser
Trimite coninutul (static sau generat dinamic) ctre browser

Comunicare protocolul Hypertext Transfer Protocol

Protocol text
Mesaje de tip request i response
Mesajele sunt trimise prin intermediul protocolului TCP/IP

HTTP Request
Format: comanda (GET / POST / )/ parametri / eventual
coninut
Cereri iniiate de ctre browser:
Introducere adres de ctre utilizator
Navigare ctre pagin nou
Obinere resurse
Solicitat din cod

Exemplu:
GET /index.html HTTP/1.1
Host: www.test.com
User-Agent:Mozilla/5.0

HTTP Response
Format: status (200 / 404 / 500 /)/ parametri / coninut
Rspunsul este generat:
Static (coninutul este preluat din fiier)
Dinamic (coninutul este generat de ctre un program)

Exemplu:
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 131
<html>

</html>

Limbaje utilizate
HTML - HyperText Markup Language
Structura documentului
Coninutul (de tip text)
Referine la alte resurse

CSS - Cascading Style Sheets

Descrie modalitatea de prezentare a coninutului

JavaScript
Manipularea dinamic a coninutului i a modalitii de
prezentare
Gestioneaz interaciunea cu utilizatorul

DOM Document Object Model

Aplicaia este reprezentat intern sub form de arbore
Tipuri de noduri
Elemente
Text

Nodurile - create din HTML sau JavaScript

Conin:
atribute
parametri de stil
funcii JavaScript

Limbajul HTML
Tag
Instruciunea de creare a unui nod
Format: <test>coninut</test>
Coninutul poate fi:
Text
Alte tag-uri

Atribut
Perechi denumire valoare ataate nodurilor
<test nume1=valoare1
nume2=valoare2>coninut</test>

Structura unui document HTML

<!DOCTYPE html>
<html>

HTML

<head>
<title>titlu</title>
referine i parametri

</head>
<body>

HEAD

BODY

coninut

</body>

</html>

TITLE

Referine
i
paramet
ri

Coninut

Tipuri de elemente
Elemente de tip block i inline
Text
Formatare: p, em, strong, div, span, h1 h6, br, a
Liste: ul, ol, li
Tabele: table, thead, tbody, tfoot, tr, th, td

Formulare: form, input

Imagine raster
img, canvas

Imagine vectorial: svg

Audio i video: audio, video

Cascading Style Sheets

Modificarea modului de afiare a elementelor din DOM
Format dintr-o serie de reguli de forma:
selector
{
proprietate 1 : valoare 1;
proprietate 1 : valoare 1;
.
}

Selectori
Identific nodurile din arbore asupra crora se vor opera modificrile
Selectori simpli:
Element: NUME_ELEMENT
Identificator: #ID
Clas: .NUME_CLAS

Ali selectori:
Universal: *
Atribut: selector[atribut=valoare]
Nod copil sau descendent: selector > selector sau selector selector

Grupare: selector, selector

Combinare selectori

Reguli de aplicare
Motenire
Propagarea valorilor de la un nod printe la nodurile copil
Nu toate proprietile sunt motenibile

Cascadare
Mecanismul de alegere aplicat n cazul n care avem mai multe
valori n conflict
Reguli de cascadare
Importan
Specificitate
Ordinea n fiierul surs

Formatare text
Proprieti:
font-family
font-size
font-weight
font-style
Color

Uniti de msur: %, em, px

Exemplu
body {
font-family: tahoma;
font-size: 11pt;
}

Setare margini

Alte proprieti
Setare dimensiuni:
width,
height,
min/max-width/height,
overflow

Control layout:
display
float

Poziionare n cadrul paginii

position: static / relative / absolute / fixed
z-index

Limbajul JavaScript
Caracteristici
Dinamic
Limbaj funcional
Bazat pe obiecte

Utilizare
Manipulare noduri DOM
Evenimente
Comunicare la distan

Tipuri de date
Tipuri de date de baz
Number: -3.14, 6, 2
Boolean: true, false
String: test
null, undefined
Object: { nume: Ana, varsta:7 } referin

Obiecte speciale
Function: function f() {}
Array: [1, 2, trei]

Variabile i expresii
Declarare
Prin atribuire valoare: a = 8; a =false;
Folosind var: var a = 3; var b;

Scope
Global sau local
Function vs block based

Evaluare expresii
Operatori similari cu C# (n plus === - egalitate
strict)

Funcii
Declarare:
function suma(a,b) { return a + b; }
var suma = function(a,b) { return a + b; }

Parametri:
Transmii prin valoare
Accesibili prin arguments

Apel - nume_funcie / expresie(parametri):

var rezultat = suma(7,3);
var test = function(val) { return val + 1;}();

Closure

Obiecte
Obiect = colecie de proprieti (perechi nume = valoare)
Declarare obiecte
Literali: var ob = { nume: Ana, varsta:7 }
new: var ob = new Object();

Accesare proprieti
Citire: var v = ob.varsta; sau var v = ob[varsta]; for (v in ob) {...}
Modificare / adugare: ob.varsta = 8; ob[varsta] = 8; ob.clasa = 2;

Metode
adugare: ob.test = function() { console.log(test);}
this: ob.afisare = function() { console.log(Nume: + this.nume); }
Apel: ob.afisare();

Constructori i motenire
Funciile JavaScript pot fi utilizate pentru construirea de obiecte
Exemplu: function Persoana(nume) { this.nume = nume; this.varsta = 1; }
Apel: var ob2 = new Persoana(Maria);

prototype
Proprietate a funciei constructor
Definete proprietile disponibile n toate obiectele (instanele create)
Exemplu: Persoana.prototype.afisare = function() { console.log("Nume: " +
this.nume); };
Folosit i pentru implementarea motenirii:
function Student() { this.facultate = CSIE; }
Student.prototype = new Persoana(-);
var s = new Student(); s.afisare();

DOM - Structura
Arbore construit din obiecte
JavaScript
Fiecare nod:
Este un obiect derivat din Node
Conine o colecie de referine ctre
nodurile copil: childNodes
Conine referine ctre nodul printe
(parentNode) i nodul urmtor
(nextSibling)
Conine metode pentru manipularea
nodurilor copil: appendChild(nod),
removeChild(nod),

Rdcina:
document.documentElement
Nodurile au metode i proprieti

Sursa: http://web.stanford.edu/class/cs98si/slides/the-document-objectmodel.html

Regsire noduri
Pe baz de identificator
elem = document.getElementById(identificator)

Pe baz de selector CSS

elem = element.querySelector(selector CSS);
lista = element.querySelectorAll(selector CSS);

Alte metode
lista = element.getElementsByClassName("clasa CSS");
lista = element.getElementsByTagName("tag HTML");

Manipulare noduri
Construire nod:
elem = document.createElement("tag HTML");

Accesare atribute:
elem.numeAtribut accesare valoare atribut individual
elem.attributes colecia de atribute

Accesare atribute CSS:

elem.style.numeAtributCSS

Exemplu:
var p = document.createElement("p");
p.innerText = "test";
document.querySelector("body").appendChild(p);
p.style.color = "red";

Tratare evenimente
Adugare event handler:
Prin atribute HTML:
<element atributEveniment=nume funcie></element>
Exemplu: <a onclick=test()>test</a>

Prin proprieti nod:

element.proprietateEveniment = funcie;
Exemplu: document.getElementById(test).onclick = function() {console.log(un mesaj);}

Prin metoda addEventListener:

element.addEventListener(tip, funcie[, captur]);
Exemplu: document.getElementById(test). addEventListener("click", function() {console.log(un
mesaj);});

Eliminare event handler:

element.removeEventListener(tip, funcie[, captur]);

Biblioteca jQuery
Colecie de funcii JavaScript pentru:
Regsire elemente din DOM
Manipulare elemente, atribute i
proprieti CSS
nlnuire operaii pe seturi elemente
Animaie
Comunicare HTTP

Funcia jQuery / $
1. Regsire elemente DOM: $(selector CSS)
var leg = $(a.test);

2. Construire obiect jQuery: $(element)

var a = document.getElementById(leg1);
var aJQuery = $(a);

3. Construire elemente noi: $(cod HTML)

var p = $(<p>paragraf nou</p>);

4. Execuie cod dup iniializarea DOM: $(funcie)

$(function(){
// operaii care utilizeaz DOM

})

Exemple de operaii
Citire / modificare atribute HTML
$("#idTest").attr("href", "doc.html");
var url = $("#idTest").attr("href");

Citire / modificare proprieti CSS

$(#idTest).css(color, red);

Manipulare noduri DOM

$(#idTest).append($(<p>test</p>));

Tratare evenimente
$(#idTest).click(function(){})

Comunicare HTTP
$.getJSON(url, funcie); / $.post(url, date)

1. Modele de culoare
II. Imagine

2. Grafic raster
3. Grafic vectorial
4. Animaie

1. Modele de culoare
Model de culoare
Model matematic care descrie modalitatea de reprezentare a culorilor sub form de
tupluri numerice
Exemple: RGB, CMY

Spaiu de culori
Modelul de culoare mpreun cu instruciunile de reprezentare fizic
Exemple: sRGB, AdobeRGB, Pantone

Caracteristici
in seama de modalitatea de percepere a luminii de ctre ochiul uman
Culori de baz albastru (S), verde (M) i rou (L)

Tipuri de modele

Model aditiv

Model substractiv

Modelul RGB
Model aditiv
Bazat pe culorile de baz rou,
verde i albastru
Culoarea variaz n funcie de
dispozitiv
(n lipsa unui spaiu de culoare)
Reprezentare numeric:
Aritmetic (0-1)
Procent (0-100%)
Digital pe 8 / 16 bii (0-255, 065535)

Modelul HSB(L,V)
Reprezentare sub form de
coordonate cilindrice
Bazat pe aceleai culori de
baz:
Red - 00
Green - 1200
Blue - 2400

Axa central tonuri de gri

Utilizat n special pentru
selecie de culoare

Modelul CMY(K)
Model substractiv
Culori utilizate: cyan,
magenta, yellow
Mascheaz culorile pe o
suprafa alb
Utilizare: materiale tiprite

Palete de culori
Tabel de coresponden
index tuplu (R, G, B)
Utilizare
Reducerea cantitii de informaie
necesar pentru reprezentarea
culorilor
Pretabil pentru imagini cu un numr
redus de culori (exemplu: diagrame
fr gradieni)

2. Grafic raster
Tipuri principale de grafic:
raster i vectorial

Grafica raster (bitmap,

matriceal)
Reprezentare sub form de matrice
de puncte
Fiecare punct (denumit pixel)
stocheaz informaia de culoare
Culorile sunt stocate conform unui
model de culoare
direct
prin intermediul unei palete de culori

Sursa: http://commons.wikimedia.org/wiki/File:Rgb-raster-image.svg

Informaii generale
Caracteristici principale imagine raster
Rezoluie (numrul de linii i coloane stocate n matrice, numrul total de pixeli sau
densitate)
Adncime de culoare (cantitatea de informaie stocat de ctre fiecare pixel)

Utilizare
Reprezentare imagine pe monitor
Captare imagini din surse externe

Avantaje i dezavantaje
+Poate reprezenta orice imagine
Codaj srac n informaie (nu ia n considerare semantica imaginii)
Dimensiune mare
Nu se pot adapta unei scri variabile de vizualizare

Formate de stocare
BMP (Microsoft Windows Bitmap)
Formatul standard de stocare pe platforma Microsoft Windows
Suport date necomprimate sau comprimate folosind algoritmul RLE
Monocrom sau n culori pe 4, 8, 16, 24 sau 32 de bii
Suport palete de culori

JPEG (Joint Photographics Experts Group)

Stocare comprimat cu pierdere de informaie conform standardului JPEG
Rate de compresie diferite selectabile de ctre utilizator
Utilizat pentru imagini fotografice (cu gradaii fine de culoare)
Nu este potrivit pentru
text, linii sau alte imagini care prezint un contrast foarte mare
Editri multiple (se pierde calitate la fiecare etap de compresie / decompresie)

Formate de stocare
GIF (Graphics Interchange Format)
Folosit n special pentru transferul imaginilor de maxim maxim 64K x 64K
Pretabil pentru diagrame, text logo-uri (contrast puternic i numr limitat de culori)
Suport maxim 256 culori prin intermediul unei palete de culori
Poate stoca mai multe cadre (pentru animaie)
Algoritm de compresie fr pierdere de informaie Lempel-Ziv-Welch (LZW)

TIFF (Tag Image File Format)

Format portabil i extensibil utilizat n special pentru imagini scanate
Suport stocarea mai multor imagini ntr-un singur fiier
Suport mai muli algoritmi de compresie (RLE, LZW sau JPEG)

Alte formate: ICO - Icon Resource File, PNG - Portable Network Graphics, DIB Device Independent Bitmap, PCX - PC PaintBrush File Format

Compresia Run-length
encoding (RLE)
Secvenele de valori identice consecutive sunt nlocuite cu
perechi de forma
(valoare, numr apariii)
Exemplu:
AAAAAAAAAAAAAABBBBBBBBBBAAAAAAAAAAAAABBBBBBCCC
14A10B13A6B3C
Caracteristici
Rat mic de compresie
Se preteaz pentru imagini cu zone mari de aceeai culoare
Utilizat n special pentru fiiere BMP cu palet de culori

Compresia LempelZivWelch
(LZW)
Algoritm de compresie universal bazat pe dicionar
Descriere compresie:
1.
2.
3.
4.
5.

Se
Se
Se
Se
Se

construiete dicionarul iniial (toate irurile de lungime 1)

caut cel mai lung ir W din dicionar care se potrivete cu irul de la intrare
elimin W din irul de intrare
adaug W urmat de urmtorul caracter n dicionar
continu cu pasul 2

Decompresie: se parcurge irul codificat i se reconstruiete dinamic

dicionarul
Variante: coduri de lungime variabil, cod pentru reiniializare dicionar
Utilizat pentru fiiere de tip GIF

Compresia Huffman
Algoritm universal de
compresie
Codificare optim de lungime
variabil pentru fiecare simbol
n funcie de frecvena de
apariie
Datele salvate:
dicionarul
datele originale recodificate

Decodificare:
translaie simbol cu simbol pe baza
dicionarului salvat

Compresia JPEG
Compresie specializat cu pierdere de informaie pentru imagine
raster
Rezultate foarte bune pentru fotografii (variaii fine de
luminozitate i culoare)
Tipuri de compresie:
secvenial codaj bazat pe transformarea cosinus discret cu blocurile
procesate n ordinea apariiei
progresiv codaj bazat pe transformarea cosinus discret cu blocurile
procesate prin mai multe treceri asupra imaginii
progresiv fr pierdere folosete doar algoritmi de compresie fr
pierdere de informaie
progresiv ierarhic codific imaginea la rezoluii din ce n ce mai mari

Etapele compresiei JPEG

Etapele de compresie JPEG File Interchange Format (JFIF)
1. Translatarea modului de culoare din RGB n Y'C BCR
2. Reducerea rezoluiei pentru componentele CB i CR
3. Imaginea se descompune n blocuri de dimensiune 8x8 pixeli
4. Se aplic transformata cosinus discret pe fiecare bloc n
parte
5. Aplicarea matricei de cuantizare (pierdere de informaie)
6. Blocurile rezultate n urma cuantizrii sunt comprimate
folosind RLE i Huffman
Decodificare: se aplic paii n ordine invers

JPEG -Transformata cosinus

discret

JPEG -Transformata cosinus

discret

JPEG - Cuantizare

Cq(u,v)=round[C(u,v)/N(u,v)]
235.6/16 -> 15
-22.6/12 -> -2

Imaginea raster n context Web

Afiarea imaginilor n HTML: <img alt= src=>
Tipuri raster suportate: JPEG, GIF, BMP, PNG
Utilizare nod DOM (HTMLImageElement)
width, height: dimensiunea obiectului n fereastr
naturalWidth, naturalHeight: dimensiunea matricei raster
src: URL-ul imaginii surs; modificarea determin nceputul procesului de
ncrcare (asincron)
eveniment load

Exemplu:
var image = $("<img>")
.load(function () { $("body").append($(this)); })
.attr("src", "media/Penguins.jpg");

Elementul canvas
HTML includere n document:
<canvas id= "test" width= "250" height="150"></canvas>

JavaScript obinere referin context grafic:

var canvas = document.getElementById('test'); // sau var
canvas = $(test)[0];
var w = canvas.width, h = canvas.height;
var ctx = canvas.getContext('2d');

canvas Modaliti desenare

Desenare direct dreptunghiuri:
fillRect(x, y, width, height) umplere suprafa
strokeRect(x, y, width, height) desenare contur
clearRect(x, y, width, height) tergere suprafa

Desenare folosind ci:

beginPath() deschide o cale nou
instruciuni de desenare / poziionare
closePath() nchide calea (unete cu punctul de nceput)
fill() umple calea sau stroke() deseneaz liniile

canvas Instruciuni desenare

Deplasare:
moveTo(x,y) modific poziia curent
Desenare:
lineTo(x, y) adaug o linie de la poziia curent la punctul specificat
rect(x, y, width, height) adaug un dreptunghi
arc(x, y, radius, startAngle, endAngle, anticlockwise) adaug un arc de cerc
quadraticCurveTo(cp1x, cp1y, x, y) adaug o curb cvadratic (un punct de
control)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) adaug o curb Bzier (dou
puncte de control)
Desenare text: fillText sau strokeText(string, x, y)

canvas Atribute
Salvare i restaurare atribute context folosind stiva: save() i
restore()
Atribute:
fillStyle sau strokeStyle = culoare modific culoarea de desenare
ctx.fillStyle = "#FFA500";
ctx.strokeStyle = "rgba(255,165,0,1)";

lineWidth = dimensiune modific grosimea liniilor

lineCap, lineJoin, miterLimit modific proprietile liniilor (rotunjire capete,
mbinri)
font = specificaie font modific caracteristicile textului (exemplu: "bold
18px Arial")
textAlign, textBaseline aliniere text

canvas Desenare imagini

Desenare fr scalare:
drawImage(image, x, y)
Desenare cu preluare poriune imagine si scalare:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
dHeight)
Surse posibile:
element img
alt element canvas
element video

Tipuri de transformri 2D

Original

Afin
(+deformar
e)

Euclidian
(translaie,
rotaie)

Proiectiv
(+paralelis
m)

Helmert
(+scalar
e)

Polinomial
(+proprieti
geometrice)

canvas Transformri
Operaii de transformare simpl:
translate(x, y) translateaz sistemul de coordonate cu numrul de
pixeli specificai
rotate(angle) rotete sistemul de coordonate cu unghiul specificat
(n radiani)
scale(x, y) scaleaz sistemul de coordonate cu factorii specificai
(n [01])

canvas - Transformri
Forma general pentru transformri afine:

Compunere transformare (prin nmulire):

transform(m11, m12, m21, m22, dx, dy)
nlocuire transformare curent:
setTransform(m11, m12, m21, m22, dx, dy)

canvas - Transformri
Semnificaie parametri:
m11: scalare pentru axa Ox
m12: rotire pentru axa Ox
m21: rotire pentru axa Oy
m22: scalare pentru axa Oy
dx: translatare pentru axa Ox
dy: translatare pentru axa Oy

canvas Acces raster

Stocare raster obiect ImageData:
width, height: dimensiunile matricei
data: vector care conine matricea liniarizat

Operaii:
getImageData(left, top, width, height): extrage o poriune din imagine ca
obiect ImageData
putImageData(imageData, x, y): aplic datele pe imaginea afiat n
canvas

Restricii de origine

canvas Access raster

Parcurgere elemente:
var imageData = context.getImageData(
0, 0, canvas.width, canvas.height);
for (var y = 0; y < canvas.height; y++) {
for (var x = 0; x < canvas.width; x++) {
var i = (y * canvas.width * 4) + x * 4;
var
var
var
var
}
}

rosu = imageData.data[i];
//
verde = imageData.data[i+1];
//
albastru = imageData.data[i+2];
transparenta = imageData.data[i+3];

[0..255]
[0..255]
// [0..255]
// [0..255]

Efecte simple de culoare

Filtrare culoare
Exemplu pentru rou: r = r; g = 0; b = 0

Negativ
r = 255 r; g = 255 g; b = 255 b;

Transformare n tonuri de gri

r = g = b = 0.299 * r + 0.587 * g + 0.114 * b

Modificare strlucire
r = r + valoare; if (r > 255) r = 255 else if (r < 0) r = 0;
similar pentru celelalte dou componente

Modificare contrast
r' = (((r / 255) - 0.5) * valoare + 0.5) * 255; if (r > 255) r = 255 else if (r <
0) r = 0;
similar pentru celelalte dou componente

Transformare RGB HSL

Transformare HSL RGB

Filtre de convoluie
Calculeaz valoarea fiecrui pixel n funcie de valorile pixelilor
alturai

Filtre de convoluie
Algoritm general:
pentru fiecare valoare v(x,y) din matricea
original
acumulator = 0
pentru fiecare valoare k(i,j) din matricea de
convoluie
acumulator = acumulator + v(x,y)*k(i,j)
v'(x,y) = acumulator (trunchiat la 0..255)
Observaii:
se aplic pe fiecare canal de culoare n parte
tratare special pentru pixelii din margine

Filtre de convoluie Exemplu

emboss

Filtre de convoluie Alte

exemple
Gaussian Blur

Sharpen

Edge Detection

3. Grafic vectorial
Bazat pe descrierea matematic a obiectelor componente ale imaginii
Avantaje:
Menine semantica editare la nivel de obiect grafic
Dimensiune redus
Independente de scara de vizualizare

Dezavantaj
Nu poate reprezenta fidel orice fel de informaie

Formate de reprezentare i
stocare
SVG (Scalable Vector Graphics)
Format generic bazat pe XML pentru reprezentri vectoriale 2D
Suport animaie i interactivitate

DXF (Drawing Exchange Format)

formatul vectorial lansat de firma Autodesk pentru produsul software AutoCAD

EPS (Encapsulated Post Script)

formatul firmei Adobe pentru imagini vectoriale
se bazeaz pe un limbaj de descriere numit Post Script

SHP (Shapefile)
formatul firmei ESRI pentru descrierea datelor spaiale de tip: punct, polilinie i
poligon
utilizat la reprezentarea elementelor geografice n sisteme de tip GIS

SVG Scalable Vector Graphics

Poate fi:
inclus direct ntr-o pagin HTML
controlat prin intermediul CSS i JavaScript

Exemplu:
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
</svg>
</body>

SVG Elemente de baz

Linii
<line x1="start-x" y1="start-y" x2="end-x" y2="endy">
Dreptunghiuri
<rect x=start-x" y=start-y" width=width"
height=height rx=radius-x ry=radius-y/>
Cercuri
<circle cx=center-x" cy=center-y" r=radius"/>

SVG Elemente de baz

Elipse
<ellipse cx=center-x" cy=center-y" rx=radius-x
ry=radius-y/>
Poligoane
<polygon points=x1,y1 x2,y2 />
Poli-linii
<polyline points=x1,y1 x2,y2 />
Text
<text x=start-x" y=start-y">coninut</text>

SVG Grupare i reutilizare

Grupare elemente
<g id=id_grup> <! elemente --> </g>
Definire elemente fr afiare
<defs> <! definire grupuri --> </defs>
Reutilizare
<use xlink:href="#id_grup" x=30" y=14"/>

SVG - Atribute
Setate prin intermediul CSS
Atribute de baz
stroke culoare linie
stroke-opacity opacitate linie
stroke-width dimensiune linie
fill culoare suprafa
fill-opacity opacitate suprafa

SVG Manipulare din JavaScript

Similar cu manipularea elementelor HTML
Particulariti
la construirea elementului trebuie specificat namespace-ul pentru SVG:
document.createElementNS("http://www.w3.org/2000/svg", TAG_SVG")

n jQuery se utilizeaz funcia attr pentru modificarea atributelor (n loc de

.width, .height, )

Exemplu:
$(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
.attr({x:160, y:160, width:12, height:12})
.appendTo($("#desen"));

4. Animaie
Modificarea rapid a imaginii vizualizate prin modificarea
poziiei, formei sau dimensiunii unui obiect din imagine
Stocarea numeric a animaiei presupune reinerea elementelor
independente ce compun micarea n raport cu factorul timp.
Crearea iluziei de micare se realizeaz prin afiarea rapid de
imagini statice uor modificate
Tehnici principale:
Tehnica filmului
Cadre cheie
Schimbarea culorii

Animaie - JavaScript
actualizareMode
l()
MODEL

Apelate la un anumit interval de

timp prin intermediul uneia dintre
funciile:
setInterval(funcie, interval_ms)
setTimeout(funcie, interval_ms)
requestAnimationFrame(funcie)

desenare()

BROWSE
R

tratareEvenimen
t()

1. Noiuni generale

III. Sunet

2. Numerizarea sunetului
3. Formate audio
4. Compresia sunetului
5. Sunetul n context Web

1. Noiuni generale
Sunetul este o vibraie propagat printr-un mediu material sub
forma unei unde mecanice.
Din punct de vedere fiziologic: senzaia produs asupra organului auditiv
de ctre vibraiile materiale ale corpurilor i transmise pe calea undelor
acustice;
Urechea uman percepe vibraii n intervalul 20-20000Hz
Zgomot: caz particular de sunet caracterizat prin lipsa ncrcturii
informaionale

Redare / receptare sunet

Prin intermediul difuzorului i microfonului
Ambele fac conversie semnal electric vibraie mecanic
Folosesc principiile induciei electromagnetice

Reprezentare i caracteristici
Reprezentare:
Axa X: timp
Axa Y: presiune (0 presiunea aerului
n repaus)

Amplitudine: msoar dimensiunea

vibraiei / volumul sunetului
Frecven: msoar viteza vibraiei /
tonul sunetului

Compunere / descompunere

2. Numerizarea sunetului
Presupune stocarea i prelucrarea sunetului n format digital
Etape:
Convertirea sunetului n semnal electric
Eantionarea i cuantificarea semnalului
Stocarea informaiei numerice pe un suport de memorie extern conform unui
format

Avantaje
Stocare mai uoar
Permite analiza i procesarea numeric a sunetului
Nu se degradeaz n timp sau la copieri repetate

Eantionare
Prin eantionare se nelege procesul de
segmentare, cu o perioadicitate fix, a
semnalului audio analog.

Frecvena de eantionare rezoluia

orizontal
Se determin pe baza teoremei lui Nyquist
(minim dublul frecvenei maxime a
sunetului)
Rate de eantionare uzuale:

8 kHz semnal telefonic

11 kHz radio AM
22 kHz radio FM
44 kHz audio CD

Cuantificare
Cuantificarea presupune asocierea
unei valori numerice corespunztoare
amplitudinii semnalului pentru fiecare
interval de timp.
Calitatea este influenat de numrul
de bii alocai pentru fiecare eantion
(uzual 8 sau 16 bii pentru stocare i
16 32 pentru procesare)
Redarea sunetului digital:
Se reconstruiete sinusoida original
prin interpolarea valorilor numerice
stocate
Prin intermediul unui convertor digital analog

3. Formate audio
WAVE formatul standard de fiier audio pentru Microsoft i IBM; conine
sunet n reprezentare PCM necomprimat;
AIFF (Audio Interchange File Format) formatul standard pentru audio digital
utilizat pe platformele Apple (variante: necomprimat / comprimat);
MPEG (Moving Picture Experts Group) Audio - format standard pentru sunetul
digital comprimat; parte a standardului MPEG de codificare a semnalului
audio-video; cea mai cunoscut variant a lui este MP3

4. Compresia sunetului
Cel mai utilizat algoritm de compresie: MPEG-1 sau 2
Audio Layer III (MP3)
Folosete codificare perceptual
Elimin din rezultat sunetele care nu pot fi percepute de ctre
urechea uman

Sunetele imperceptibile sunt eliminate pe baza unui

mode psihoacustic care exploateaz fenomenele de:
Mascare a frecvenelor
Mascare temporal

Compresia sunetului - mascarea

Mascarea frecvenelor
Sunt eliminate sunetele cu frecvena mai mare de 16-18 KHz
Sunt eliminate sunetele de intensitate scazut, care apar concomitent cu
sunete de intensitate inalt, dac sunt n benzi de frecven alturate (cele
cu intensitate scazut sunt mascate de cele cu intensitate nalt)

Mascarea temporal
Se elimin sunetele de intensitate mic care urmeaz dup sunete de
intensitate puternic n cadrul unui interval de timp
Sunetele de intensitate mic nu pot fi percepute dup sunete de
intensitate puternica datorit ineriei timpanului

Compresia MP3 - Etape

1. Utilizarea de filtre pentru separarea sunetului n 32
sub-benzi de frecven
2. Aplicarea modelului psiho-acustic pentru eliminarea
sunetelor imperceptibile
3. Determinarea numrului de bii pentru coeficieni
4. Prelucrarea valorilor obinute i compunerea fluxului
final de bii

5. Sunetul n context Web

La nivel de HTML tag <audio>
Exemplu:
<audio controls="controls">
<source src=test.wav" type="audio/wav">
<source src=test.mp3" type="audio/mpeg">
</audio>

Formate suportate:
mp3 type = audio/mpeg
wav type = audio/wav
ogg type = audio/ogg

Audio - atribute
Elementul <audio>:
autoplay (bool) redarea automat a sunetului
controls (string) controalele de redare sunt afiate dac atributul este
prezent
loop (bool) permite redarea continu a sunetului
src (string) permite specificarea sursei fr utilizarea de tag-uri de tip source
volume (numeric) permite modificarea volumului (n intervalul 0 1)
Elementul <source>
src (string) adresa (URL) fiierului audio
type (string) tipul MIME pentru fiierul audio

Audio obiectul
HTMLMediaElement
Proprieti:
currentSrc URL-ul absolut al fiierului redat
currentTime poziia (n secunde) n cadrul fiierului (poate fi modificat)
duration durata total a fiierului audio (n secunde)
ended boolean setat pe true la terminarea redrii
error ultima eroare (obiect MediaError) sau null dac nu a aprut nici o
eroare
paused boolean setat pe false la oprirea redrii
readyState indic starea curent a elementului
volume permite citirea / modificarea volumului

Audio obiectul
HTMLMediaElement
Metode:
canPlayType(type) permite aplicaiei s determine dac browser-ul curent
suport un anumit tip de fiier audio
load() pornete procesul de descrcare a fiierului audio de pe server; este
obligatoriu s fie apelat nainte de nceperea redrii folosind metoda play()
pause() oprete redarea (cu pstrarea poziiei curente)
play() pornete redarea de la poziia curent

Audio obiectul
HTMLMediaElement
Evenimente:
canplay a fost ncrcat o parte din fiier i poate fi pornit redarea
ended redarea s-a terminat
pause redarea a fost oprit
play redarea a nceput
volumechange modificare de volum
waiting operaia curent este suspendat pentru a ncrca date de pe
server

1. Noiuni generale
2. Compresia video
3. Video n context web

IV. Video

1. Noiuni generale
Video digital cuprinde totalitatea tehnicilor de
captur, procesare i stocare a imaginilor n micare
(precum i a sunetului asociat) prin intermediul unui
dispozitiv de calcul.
Avantaje video digital:
Poate fi procesat prin intermediul calculatorului
Pstrare n timp i rezisten la copieri repetate
Poate fi transmis la distan

Caracteristici video
Rezoluia
Spaiul de culoare i numrul de bii per pixel
Numrul de cadre pe secund
Modul de afiare (ntresut sau progresiv)
Calitatea compresiei

Formate video
Container specific structura de stocare a componentelor
video (imagine + audio) i a datelor asociate (metadate,
subtitrri, )
Advanced Systems Format ASF: container dezvoltat de Microsoft care
poate conine fluxuri codate cu orice codec (Extensii: .asf, .wma, .wmv)
Audio Video Interleave AVI: container mai vechi dezvoltat de Microsoft pe
baza Resource Interchange File Format RIFF (stocheaz datele n seciuni
identificate prin markere FourCC)
MP4 MPEG-4 Part 14: dezvoltat de ctre Motion Pictures Expert Group i
utilizat iniial de ctre QuickTime (video H.264, audio AAC)
AVCHD format utilizat n special de ctre camerele video (video H.264
AVC i sunet AC3 sau PCM)
Matroska / OGG: formate deschise; pot conine mai multe fluxuri audio /
video

Formate video
Codec specific modalitatea de compresie / decompresie
pentru un flux video / audio n cadrul unui container
H.264 / MPEG-4 AVC cel mai popular (utilizat pentru Web, BluRay,
camere video)
H.262 / MPEG-2 formatul standard pentru DVD
Windows Media Video format dezvoltat de ctre Microsoft
MJPEG (Motion JPEG) format mai vechi bazat pe compresia JPEG

2. Compresia video
Se bazeaz pe reducerea redundanei din cadrul fluxului video
Redundana spaial (intra-cadru)
tipul de redundan identificat i eliminat de algoritmii de compresie a imaginilor

Redundana temporal (inter-cadru)

redundan identificat ntre dou cadre consecutive (de exemplu, prin compararea
a dou cadre se observ c majoritatea pixelilor i pstreaz valoarea)

Compresia MPEG
Algoritm de compresie video
Hibrid
Transformata Cosinus Discret similar JPEG pentru reducerea redundanei
spaiale
Codaj Huffman pentru comprimarea coeficienilor TCD
Codificarea micrii pentru reducerea redundanei temporale
Codaj RLE

Asimetric
Timpul de codare este mult mai mare dect cel de decodare

Etapele de compresie
mprirea imaginii n blocuri
16x16 luminan
8x8 crominan (culoare)

Compresie pe baza DCT pentru reducere spaial

Aplicarea tehnicilor de compensare a micrii pentru reducere
temporal
Faza final de codare pe dou dimensiuni folosind Run Length
Encoding

Tipuri de cadre
<I> Intra-picture/frame/image
Cadrele cheie
Necesare pentru cutare i poziionare
Compresie moderat

<P> Predicted pictures

Codate cu referin la un cadru anterior
Folosite ca referin pentru cadre ulterioare

<B> Bi-directional prediction (interpolated pictures)

Necesit cadre anterioare i viitoare pentru refacere
Compresie mare

Tipuri de cadre

4. Video n context Web

La nivel de HTML tag <video>
Exemplu:
<video controls="controls">
<source src=test.webm" type="video/webm">
<source src=test.mp4" type="video/mp4">
</audio>

Formate suportate:
webm type = video/webm
mp4 type = video/mp4
.ogg type = video/ogg

Atribute / manipulare din

JavaScript
Similar cu elementul audio
Atribute: autoplay, controls, src, volume, ...

Reprezentat la nivel DOM prin obiecte de tip HTMLMediaElement

Proprieti: currentSrc, currentTime, duration, ended, error, paused,
readyState, volume
Metode: canPlayType, load, pause, play
Evenimente: canplay, ended, pause, play, volumechange, waiting

Exemple: ncrcare dinamic

video
var v = $("<video></video>")
.attr({
"controls": "hidden",
"autoplay": "autoplay",
"src": "media/movie.mp4"
})
.load()
.appendTo($("body"));
// modificare surs
v[0].src = "media/test.mp4";
v[0].load();
v[0].play();

Exemple: Procesare cadru - 1

var video = $("#video")[0];
var canvas = $("#canvasProcesare")[0];
var context = canvas.getContext("2d");
function procesareCadru() {
//
requestAnimationFrame(procesareCadru);
};
requestAnimationFrame(procesareCadru);

Exemple: Procesare cadru - 2

var W = canvas.width = video.clientWidth;
var H = canvas.height = video.clientHeight;
context.drawImage(video, 0, 0, W, H);
var imageData = context.getImageData(0, 0, W, H);
for (var y = 0; y < H; y++) {
for (var x = 0; x < W; x++) {
var i = (y * W * 4) + x * 4;
// modificare valori imageData.data[i+...]
}
}
}
context.putImageData(imageData, 0, 0);
// alte operaii de desenare pe canvas

Exemple: Playlist simplu

$(function () {
var lista = ["movie.mp4", "v2.mp4"];
var index = 0;
var video = $("#myVideo");
video.on("ended", function () {
index = index + 1;
if (index >= lista.length) {
index = 0;
}
video[0].src = lista[index];
video[0].load();
video[0].play();
});
});