1 Multimedijski tipovi objekta: boja i slika

2 Boje dodavanjem – aditivni oduzimanjem - subtraktivniPostoje dva osnovna modela predstavljanja boja dodavanjem – aditivni oduzimanjem - subtraktivni

3 Propuštanje svetlostiIzmeđu izvora bele svetlosti i belog papira postavljamo obojena stakla žuto staklo propušta žutu svetlost crveno propušta crvenu ako žutu svetlost propustimo kroz crveno staklo, prolazi crvena svetlost ako crvenu svetlost propustimo kroz žuto staklo, prolazi crvena svetlost zaključujemo da je crvena svetlost komponenta žute svetlosti

4 Aditivni model boja Uočavaju se tri osnovne obojene komponente bele svetlosti: crvena zelena plava Sve ostale obojene svetlosti mogu se dobiti kombinacijom prethodnih u različitim intenzitetima Model se obično naziva RGB

5 Primene aditivnog modelaAditivni model se prirodno primenjuje kada se boje grade dodavanjem komponenti svetlosti monitori projektori Nije idealan u slučajevima kada se boja dobija na drugi način

6 Oduzimanje boja U eksperimentu staklo neke komponente svetlosti propušta, a ostale zadržava Ako za osnovne boje uzimamo one koje prolaze kada se zadržavaju osnovne komponente svetlosti, dobijaju se: žuta (zadržana je plava) plavozelena (zadržana je crvena) ružičasta (zadržana je zelena) crna (zadržana je bela) Model se obično naziva CMYK

7 Primene subtraktivnog modelaSubtraktivni model se prirodno primenjuje kada se boje grade odbijanjem svetlosti, tj. zadržavanjem komponenti slikanje štampanje uopšte, nanošenje bojenih materija na posmatranu površinu

8 Primer modela RGB

9 Drugi modeli boja Često se primenjuje model HSB H (hue) – tonS (saturation) – zasićenost B (brightness) – osvetljenost

10 Model boja HSB Ton se opisuje na krugu od 360o:0 – crvena, 60 – žuta, 120 – zelena, 180 – plavozelena, 240 – plava, ružičasta Zasićenost se opisuje sa 0-100% 0% – siva boja, 100% - čista boja Osvetljenost se opisuje sa 0-100% 0% - crna, 100% - čista svetla boja

11 Primer modela HSB (1)

12 Primer modela HSB (2)

13 Primer modela HSB (3)

14 HSB i RGB Ton određuje odnos dve najizraženije RGB komponente:otklon = H0 = 60 * (B2-B3) / (B1-B3) H = vrednost za kom.1 + otklon prema vrednosti kom. 2 Zasićenost određuju najintenzivnija i najslabija RGB komponenta: S = B3 / B1 Osvetljenost određuje najintenzivnija komponenta RGB: B = B1 / raspon H = vrednost tona za najizraženiju komponentu + otklon, pri čemu se znak otklona bira na osnovu vrednosti srednje izražene komponente na primer, ako je RGB=(200,100,175), H(R)=0=360, H(B)=240, dakle, otklon od crvene prema plavoj se oduzima od 360, pa je H = 360 – 60*75/100 = 315

15 Primer RGB – HSB RGB = (200,100,175) H0 = 60 * 75 / 100 = 45-> B1 = 200, B2 = 175, B3 = 100 H0 = 60 * 75 / 100 = 45 H(R) = 360, H(B) = 240 H = H(R) – H0 = 315 S = 100 / 200 = 50% B = 200 / 256 = %

16 Predstavljanje slike Slika se u digitalnim sistemima predstavlja matricom tačaka - piksela Parametri predstavljanja su rezolucija dinamički raspon

17 Rezolucija Rezolucija je mera preciznosti predstavljanjarelativna rezolucija je broj piksela po jedinici dužine (obično po inču) apsolutna rezolucija je veličina matrice mereno brojem piksela

18 Dinamički raspon Dinamički raspon određuje preciznost predstavljanja pojedinačnih piksela Izražava se brojem različitih podržanih nijansi svake hromatske komponente svetlosti dinamički raspon monohromatskog piksela meri se brojem nijansi sive dinamički raspon piksela u boji meri se brojem nijansi svake od komponenti

19 Osetljivost ljudskog okaLjudsko oko je u stanju da raspozna oko boja nešto je osetljivije prema nijansama zelene boje Mrežnjača (retina) se sastoji od štapića (receptori crno/belog za noćni vid) i čepića (receptori za boje) Postoje tri vrste čepića, različite osetljivosti na određene delove vidljivog spektra, pojednostavljeno na crveni, zeleni i plavi (RGB model vida) Žuta mrlja (fovea) je centralni deo mrežnjače, koji omogućava vid visoke rezolucije (razlikovanje do 2mm na rastojanju od 10 m)

20 Dinamički raspon – RGB Uobičajeni modeli pri prikazivanju su12 bita (4096 nijansi) – po 4 bita (16 nijansi) za svaku osnovnu komponentu 15 bita (32768) – po 5 bita (32) 16 bita (65536) – po 5 bita (32) za crvenu i plavu i 6 bita (64) za zelenu 24 bita ( ) – po 8 bita (256)

21 Dinamički raspon – RGB (2)Uobičajeni modeli pri obradi su 30 bita – po 10 bita (1024) 36 bita – po 12 bita (4096) 48 bita – po 16 bita (65536)

22 Zapisivanje slike Zapis slike se obično sastoji odzaglavlja – podataka koji opisuju širinu visinu dinamički raspon detalje zapisa sadržaja slike sadržaja slike

23 Veličina zapisa slike Bez kompresije za sliku je potrebno S*V*B bitova, gde je S – širina slike u pikselima V – visina slike u pikselima B – broj bitova kojima se opisuje svaki piksel Na primer 1024 x 768 x 16 = 1.5 MB 1600 x 1200 x 24 = 5.5 MB

24 Veličina zapisa slike (2)Pri pripremi za štampu, veličina slike se procenjuje kao: S*V*R*R*B S – širina slike u cm (inch) V – visina slike u cm (inch) B – broj bitova kojima se opisuje svaki piksel R – rezolucija slike u broju piksela/cm (inch) Uobičajene rezolucije slika za prikaz na ekranu: 75 – 150 ppi (piksela po inču), oko 30 – 60 ppcm za štampu 100 – 600 ppi, oko 40 – 240 ppcm

25 Veličina zapisa slike (3)Na primer 13cm * 10cm * 30ppcm * 30ppcm * 24b = 343 KB 28cm * 20cm * 120ppcm * 120ppcm *24b = 23 MB

26 Kompresija slike Kompresiji slika se pristupa iz više razloga, a pre svega zbog smanjenja zauzeća prostora olakšavanja komunikacije smanjenja opterećenja komunikacionih linija skraćenja trajanja prenosa podataka

27 Metodi kompresije Metodi kompresije se dele na dve osnovne kategorijemetodi kompresije bez gubitka informacija metodi kompresije sa gubitkom informacija

28 Kompresija bez gubitkaObično počivaju na opštim algoritmima za kompresiju podataka najbolje rezultate daju ako slike imaju veće površine koje su jednobojne ili popunjene nekim jednostavnim uzorcima linijski crteži, ilustracije, stripovi, uzorci ekrana, ... nisu efikasni u slučaju slika sa puno prelaza tonova: fotografije, intenzivno šarene slike

29 Kompresija bez gubitka (2)Neki od formata za zapisivanje slika: BMP GIF TIF PNG Primeri...

30 Kompresija sa gubitkomPočivaju na specifičnim algoritmima koji su projektovani upravo za rad sa slikama Opisuju delove slike nekim matematičkim modelom sa izabranom preciznošću aproksimacije Preciznost aproksimacije se obično može konfigurisati veća preciznost – manja kompresija manja preciznost – veća kompresija

31 Model kompresije sa gubitkomKoristi se činjenica da oko raspoznaje oko 128 tonova 16 (žuta) do 23 (crvena) zasićenosti oko 128 nivoa osvetljenosti Pri kompresiji je važnije očuvati ton i osvetljenost nego zasićenost Zato se često primenjuje model boja čije komponente kvalitativno opisuju svetlost: HSB, YUV, HLS,...

32 Slika Slika Digitalna slikaravan objekat čija boja (osvetljenje) varira od tačke do tačke Formalno c/b slika f(x,y,t), 0 f(x,y)  M (sjaj, osvetljenje) kolor slika: intenzitet osvetljenja, talasna dužina svetlosti,… Digitalna slika

33 Osvetljenost i kolor slikaobjekat, izvor osvetljenja, senzori(oko) c/b slika predstavlja distribuciju energije izvora osvetljenja C(x,y,t,). Osvetljenje f zavisi i od osetljivosti senzora kolor (multispektralna) slika, zavisi od komponenti

34 Elektromagnetni spektarVidljiva svetlost

35 Teorije o percepciji boje Teorije o percepciji boje Teorija komponenti (component color theory, Young-Helmholtz) - posebni receptori za tri osnovne boje (crvena, zelena, plava) Teorija suprotnih boja (opponent color theory, Ewald Hering) - postoje tri tipa diskriminatora boje (plava/žuta , crvena/zelena, crna/bela) Teorija suprotnih procesa (opponent-process theory) objedinjava uvodeći dve faze: čepići koji odgovaraju različitim trećinama vidljivog spektra, šalju signale ka tri suprotna diskriminatora diskriminatori menjaju frekvenciju signala koji šalju mozgu

36 Modeli predstavljanja bojeRGB (red, green, blue) Poklapa se sa hardverom (katodne cevi sa tri topa - red, green, blue) Ne odgovara uvek umetnicima HSB (hue, saturation, brightness) Odgovara percepciji boje u ljudskom mozgu, sa osvetljenošću (brightness) kao intenzitetom svetla, obojenošću (hue) kao spektralnom bojom i zasićenjem (saturation) kao količinom obojenosti koji se dodaje osvetljenosti Drugi naziv je HLS (hue, lightness, saturation) HSV (hue, saturation, value) Kao HSB, ali pomoću uglova i procentualno - “blue” je 0 i 360 stepeni CMYK (cyan, magenta, yellow, black) koristi se u štampi (subtractive) Svetlost koju oko detektuje može biti emitovana i odbijena od predmeta koji posmatramo. Boja emitovane svetlosti sa ekrana monitora razmatra se kao mešavina tri osnovne boje određenog intenziteta.

37 Boja: RGB model blue magenta cyan white black red green yellowcolour cube

38 Boja: ostali modeli CMY: Cyan - Magenta - Yellow (subtractive), CMYK = CMY + Black (print oriented) HSB: (painting oriented, s. colour wheel) Hue (degree) Saturation(%) Brightness (%)

39 Histogram osvetljenostiVeoma bitan podatak za svaku sliku je raspodela broja piksela te slike po nivoima osvetljenosti

40 DIGITALNI ZAPIS SLIKE

41 Digitalna slika bit-mapa, nalik fotografiji, dobija se postupkom digitalizacije kontinualne slike: vektorski crtana slika: sintetizovana 3D kreacija (rendering): Digitalna slika Digitalne slike su važan sastavni deo multimedije Slike mogu biti bitmape nalik fotografijama, koje se dobijaju postupkom digitalizacije kontinualne slike pomoću nekog uređaja (skener, digitalna kamera) ili “hvatanjem” izgleda ekrana računara vektorske slike (2D kreacije, koje se iscrtavaju posebnim programima) ili sintetizovane 3D kreacije, koje se sintetišu posebnim programima za 3D modeliranje i konačni izgled dobijaju posebnim postupkom (rendering) Alati za rad sa slikama se bave različitim vrstama slika i konverzijom različitih formata, koji su pogodni za pojedine alate i platforme Obrada slika podrazumeva izbor odgovarajućeg hardvera i programskog alata (npr. grafički dizajneri koriste velike monitore visoke rezolucije ili više njih istovremeno, za prikaz efekata u toku izmene objekta)

42 Bit-mapirane (rasterske) slikebit-mapa je matrica koja opisuje individualne tačke – najmanje elemente digitalne slike (point ili picture element/pixel/pel) za prikaz crno-belih slika je dovoljan samo jedan bit po pixel-u (crno/belo) n bita može da posluži za predstavljanje 2n različitih boja pixel- a, na primer 8 bita za 256 boja, 16 bita za 32K i 24 bita za milione različitih boja ( ) Popularni raster formati Pict (Mac), BMP (Win) TIFF (several flavors), JPEG GIF (most popular on Internet), PNG (Portable Network Graphics)

43 Formati zapisa rasterske slikeViše boja daje realističniju sliku, ali traži više memorije i vremena (procesorske snage) za obradu. Formati GIF i PNG koriste 8-bitnu tabelu boja (color table) kojom se definiše paleta od 256 različitih boja Format JPG ima preciznost prikaza boje (color depth) od 16 bita po pixel-u Format PSD (Photoshop Document) čuva 24 ili više bita po jednom pixel-u Softver može izvšiti konverziju zapisa bit-mapirane slike (npr. iz 24-bitnog u 8-bitni zapis)

44 Rezolucija rasterske slikeProstorna frekvencija sampliranja je dobar pokazatelj rezolucije: dots- per-inch (dpi) ili pixels-per-inch (ppi).

45 VIZUELNA PERCEPCIJA Iluzija senke na šahovskoj tabli: kvadrati A i B su iste nijanse (nivoa sivila)

46 Osvetljenost i kontrastapsolutni prag osvetljenosti adaptacija oka - percepcija osvetljenosti se menja u vremenu t lokalna pozadina - percepcija osvetljenosti tačke zavisi od osvetljenosti njene okoline

47 Oštrina i konture oštrina vida zavisi od osvetljaja pozadine i mesta u vidnom polju (brzo opada ka periferiji) postoji adaptacija u percepciji kontura i drugih jednostavnih uzoraka, koja prouzrokuje neke iluzije

48 Boja talasna dužina svetlosti boja – od crvene do ljubičasteneke boje se ne mogu predstaviti jednostavno talasnom dužinom - purpur – obojenost (hue) HSB – hue, saturation, brightness purpur je nezasićena crvena boja RGB – red, green, blue 780 nm 380 nm

49 Uzorci i teksture površina slike nije jednolična ni kontinualnagrupisanje - svojstvo ljudskog vida - teksture ponavljanja sličnih regiona – uzorci

50 Oblik i prostor u obradi slika posmatramo samo 2D

51 Trajanje i pokret tromost oka omogućava stvaranje utiska kretanja izmenom sličnih slika određenog trajanja primer animacije:

52 KOMPRESIJA 50 1 31 1 13 18 1 1 a e d c b

53 Kompresija bit-mapa Kompresija je postupak sažimanja dužine zapisa digitalne slike Postoje metode kompresije bez gubitaka (lossless) i sa gubicima (lossy). Kompresija bez gubitaka se zasniva na uklanjanju redundancije u podacima, bez ikakve njihove izmene Kompresija sa gubicima se koristi prevashodno za slike i video zapis, a zasniva se na uklanjanju redundancije i manje bitnih podataka, koji nisu važni za vizualnu percepciju

54 Primeri metoda kompresije bit-mapaProgram za kompresiju se često naziva codec (compressor/decompressor) GIF codec uklanja ponavljanja sukcesivnih bajtova. JPG standard koristi složeniji pristup: pošto mnogi susedni pixel-i imaju sličnu boju, prvo grupiše pixel-e u grupe od 4 do 16 pixel-a, zatim određuje srednju vrednost za boju bloka. Zatim se vrši kvantizacija blokova, računanjem srednje vrednosti grupe susednih blokova. Standardni format GIF koristi algoritam bez gubitaka, a format JPG dopušta gubitak dela informacije zbog usrednjavanja boje blokova. GIF bolje komprimuje velike jednobojne površine i umereno sitne detalje, a JPG fotografije u punom koloru Primeri metoda kompresije program za kompresiju se često naziva codec (compressor/decompressor) GIF codec uklanja ponavljanja sukcesivnih bajtova. Npr. niz od 100 sukcesivnih pixel-a sa kodom 196, GIF kodira kao 8 bitni broj, kojim se predstavlja boja pixel-a i još dva 8-bitna broja za broj ponavljanja (jednobojna slika of 64K može biti komprimovana na tri bajta). ·  standard JPG koristi složeniji pristup: pošto mnogi susedni pixel-i imaju sličnu boju, prvo grupiše pixel-e u grupe od 4 do 16 pixel-a, zatim oderećuje srednju vrednost za boju bloka. Npr., za pixel-e 459BF0, 459BF2, 459BED and 459BF0, srednja vrednost je 459BF0. Srednja vrednost se kodira normalno, a za individualne pixel-e razlika, kao 4-bitni ili 8-bitni broj. Zatim se vrši kvantizacija blokova, računanjem srednje vrednosti grupe susednih blokova. standard GIF koristi algiritam bez gubitaka, dok se kod JPG deo informacije može izgubiti zbog usrednjavanja. GIF bolje komprimuje velike jednobojne površine i umereno sitne detalje. JPEG je najpogodniji za kompresiju toniranih slika, npr. fotografija u punom koloru

55 Standard GIF Ograničenje na ukupno 256 boja (indeksiranih)Kompresija bez gubitaka Patentirani algoritam LZW (Lempel/Ziv/Welch): prilikom čitanja se formira rečnik sekvenci simbola kodira se prvo najduža sekvenca simbola iz rečnika Pogodan za veštački formirane slike koje imaju veće površine iste boje Mnogo se koristi na Internetu

56 Standard GIF89a Prošireni standard GIF89a omogućava upravljanje providnišću slike, preplitanjem i animacijom. providnost boja se definiše pomoću indeksa providnosti, kroz koji se vidi pozadina preplitanje ubrzava prikaz u niskoj rezoluciji, uz povećanje zapisa 10% Neki stariji programi ne podržavaju ovaj standard, već samo GIF87a (npr. PowerPoint97).

57 Standard JPEG Joint Picture Experts Group - skup standardnih tehnika za kompresiju slike (i formata za skladištenje takođe) Veoma složen standard kompresije sa više različitih režima rada: osnovni: sa gubicima, sekvencijalan, koristi DCT (Discrete Cosine Transformation) Veoma složen skup koraka koji koristi: Discrete Cosine Transform Kvantizaciju Run-length kodiranje Huffman-ov kod Informacije o osvetljenosti su podeljene na 8x8 blokove piksela prošireni režim sa gubicima bez gubitaka (lossless mode) hijerarhijski (hierarchical mode)

58 Standard JPEG Daje prihvatljive performanse sa odnosom 25:1Pogodan je za slike složenije strukture i digitalizovane fotografije Daje loše rezultate za crtane filmove i crteže Važan standard koji je iskoristljiv u hardveru (digitalna obrada signala)

59 Standard JPEG ilustracija režima rada

60 Primeri 100% kvalitet na 52KBThen, 50% quality at 8KB, with little visible degradation 10% quality takes just 4KB, but a distinct distortion pattern is visible (due to the 88 DCT used by JPEG)

61 Vektorski crtana slikaVektorski crtana slika se kreira pomoću geometrijskih objekata, kao što su linije, pravougaonici, poligoni, korišćenjem matematičkih formula u virtuelnom koordinatnom sistemu Sadržaj koji se prikazuje mora da se ponovo izračuna nakon svake promene (zahteva intenzivna izračunavanja za veći broj objekata) Primer: RECT 0,0,300,200,RED,BLUE (koordinate na površini ekrana) CAD - Bezierove krive Zauzima manje memorije nego bit-mape Najpopularniji formati su: DXF (AutoCAD) – standardan za inženjersko korišćenje CDR (Corel) PS/EPS (PostScript) Vektorski crtana slika se kreira pomoću geometrijskih objekata, kao što su linije, pravougaonici, ovali, poligoni, korišćenjem matematičkih formula. Npr., RECT 0,0,300,200,RED,BLUE znači (u Dekatrovom koordinatnom sistemu) “Nacrtaj pravouganik počevši od 0,0 (gornji levi ugao ekrana) idući 300 pixela horizontalno udesno i 200 pixela prema dole, koristeći CRVENU boju za ivice i PLAVU boju za popunu.” Obično zauzima manje memorije nego bit-mape.

62 Konverzija u bit-mapirane slikeEditori rasterskih slika konvertuju vektorske crteže u bitmape postupkom rasterizacije (Photoshop automatski) Editori vektorskih slika konvertuju bit-mape u vektorske slike (formule) postupkom vektorizacije (npr. “praćenja oblika” ili autotracing -Trace BitMap ) Rezultati konverzije se mogu sačuvati u fajlovima odgovarajućeg tipa. Programi za obradu nepokretnih rasterskih slika (bit mapa) vektorske crteže konvertuju u bitmape postupkom rasterizacije (Photoshop to radi automatski) Programi za obradu vektorkih slika (razni draw programi, npr. CorelDRAW i MSDraw) konvertuju bit-mape u vektorske slike (u stvari, formule) postupkom vektorizacije (npr. “praćenje oblika” - autotracing ili Trace BitMap). Rezultati konverzije se čuvaju u fajlovima odgovarajućeg tipa. Najpoznatiji rasterski formati imaju sufikse .GIF (Graphics Interchange Format), .PNG (Portable Network Graphics), .JPG (Joint Photographic Experts Group) , .TIF (Tagged Image File Format), BMP (Windows Bitmap) ,.PCX i .PSD (Photoshop Document). Poznat je i format .PICT na Apple sistemima. Poznatii vektorski formati su .DWG (AutoCad Drawing), .AI (Adobe Illustrator), EPS (Enhanced PostScript), WMF (Windows MetaFile) i .CDR (Corel Draw).

63 Dithering: (applies to savingDithering: (applies to saving .gif files) Dithering is the most common method of reducing the color range of images down to the the (or fewer) colors seen in 8-bit GIF images

64 When should I use .JPG and .GIF???Image Optimization – reduce Download time When should I use .JPG and .GIF??? .GIF .JPG line art, logos, or illustrations (preserves sharp detail) -significantly better on images with only a few distinct colors, such as line drawings and simple cartoons) photos, computer game screenshots, stills from a movie (realistic shots – JPG is superior to GIF for storing full-color or gray-scale images of "realistic" scenes) 8 bit color resolution max 24 bit color resolution (higher compression that .gif) Lossless compression “Lossy” format Supports Dithering Does not support dithering Allows for transparency Does not support transparency Interlace process Progressive jpeg Animation Not for animation

65 Interlacing Technique Downloading Fast