1.
Slike in animacije Urban Sedlar Marec 2006

2.
Digitalna slika <ul><li>Predstavitev neke podobe v digitalni obliki </li></ul><ul><li>Izvor digitalne slike </li></ul><ul><ul><li>digitalizacija obstoječih </li></ul></ul><ul><ul><ul><li>digitalni fotoaparat </li></ul></ul></ul><ul><ul><ul><li>skener </li></ul></ul></ul><ul><ul><li>sintetične slike </li></ul></ul><ul><li>Predstavitev je lahko </li></ul><ul><ul><li>rastrska </li></ul></ul><ul><ul><li>vektorska </li></ul></ul>

3.
Rastrska predstavitev <ul><li>Slika je opisana kot množica točk </li></ul><ul><ul><li>“ picture element” ali pixel </li></ul></ul><ul><li>Vsaka točka nosi informacije o barvi </li></ul><ul><ul><li>npr. intenziteto rdeče, zelene, modre </li></ul></ul><ul><li>Takšne so vse “naravne” slike </li></ul><ul><ul><li>skenirane ali iz digitalnih fotoaparatov </li></ul></ul>2000 pixlov 1500 pixlov 2.000 * 1.500 = 3.000.000 px ali 3 megapiksli 3 MP

4.
Spreminjanje velikosti / ločljivosti <ul><li>Velikost slike </li></ul><ul><ul><li>Povezana s količino informacije (ter velikostjo datoteke) </li></ul></ul><ul><ul><li>širina 2000 pikslov </li></ul></ul><ul><ul><li>višina 1500 pikslov </li></ul></ul><ul><ul><li>skupaj 2000*1500 = 3 Megapiksli </li></ul></ul><ul><li>Ločljivost slike (resolucija) </li></ul><ul><ul><li>Povezana z “natančnostjo” tiskalnika </li></ul></ul><ul><ul><li>gostota pikslov na določeni površini </li></ul></ul><ul><ul><li>običajno v dpi = dots per inch </li></ul></ul><ul><ul><ul><li>število pikslov na kvadraten palec </li></ul></ul></ul>Velika ločljivost papir papir Majhna ločljivost fizična velikost obeh slik je enaka (3 MP)

5.
Spreminjanje ločljivosti <ul><li>Nima vpliva na količino informacije v sliki, temveč le na velikost iztisa </li></ul><ul><li>Večanje in manjšanje ločljivosti je brezizgubno. </li></ul><ul><li>Photoshop: </li></ul>dimenzije slike (št. pisklov) so enake velikost za tisk je različna

6.
Spreminjanje velikosti <ul><li>Spremenimo fizično velikost slike (št. pikslov) </li></ul><ul><li>Pri manjšanju se informacije nepovratno izgubijo </li></ul><ul><ul><li>Manjša datoteka </li></ul></ul><ul><li>Pri večanju se manjkajoči piksli interpolirajo </li></ul><ul><ul><li>interpolirani piksli ne dodajajo informacije </li></ul></ul>200 px 200 px 20 px 20 px 20 px 20 px 200 px

7.
Povečevanje bolj podrobno <ul><li>Povečevanje predstavlja glavno omejitev pri manipulaciji slik </li></ul><ul><li>Interpolacija pikslov: </li></ul><ul><li>Različni postopki interpolacije dajo različne rezultate </li></ul><ul><ul><li>metoda najbljižjega soseda </li></ul></ul><ul><ul><li>bilinearna interpolacija </li></ul></ul><ul><ul><li>bikubična interpolacija </li></ul></ul>20 px 20 px Iz vsakega pixla jih nastane 10*10=100

8.
Barve <ul><li>Barvni prostor RGB </li></ul><ul><ul><li>tri osnovne barve: rdeča, zelena, modra </li></ul></ul><ul><ul><li>ta model ustreza človeškemu zaznavanju </li></ul></ul><ul><ul><ul><li>receptorji za rdečo, zeleno, modro </li></ul></ul></ul><ul><ul><li>najpogosteje se uporablja za prikaz na zaslonih </li></ul></ul><ul><ul><li>barve se mešajo aditivno (s seštevanjem) </li></ul></ul><ul><ul><ul><li>barve posameznih svetlobnih žarkov se seštevajo </li></ul></ul></ul><ul><li>Barvni prostor CMY </li></ul><ul><ul><li>osnovne barve so cian, magenta in rumena </li></ul></ul><ul><ul><li>namenjen je predvsem tisku </li></ul></ul><ul><ul><li>subtraktivno mešanje </li></ul></ul><ul><ul><ul><li>barve se odštejejo od bele (vsaka barva odšteje nekaj od bele barve papirja in na koncu dobimo črno) </li></ul></ul></ul><ul><ul><li>CMYK je razširitev prostora CMY s črno (blacK), kar olajša tisk </li></ul></ul>Aditivno mešanje barv Subtraktivno mešanje barv

9.
Drugi barvni prostori <ul><li>Barvni prostor HSV </li></ul><ul><ul><li>Vrednosti hue, saturation, value (odtenek, nasičenost, svetlost) </li></ul></ul><ul><ul><li>Podobne barve imajo vrednosti H, S, V blizu skupaj </li></ul></ul><ul><li>Barvni prostor YUV </li></ul><ul><ul><li>ločena komponenta za svetlost Y </li></ul></ul><ul><ul><li>dve komponenti za barve </li></ul></ul><ul><ul><li>uporaba predvsem pri televiziji, ker je omogočal kompatibilnost barvnih in ČB sprejemnikov </li></ul></ul><ul><li>In drugi: </li></ul><ul><ul><li>Lab, HSL, YIQ, CIE XYZ </li></ul></ul>

10.
Kontrast in svetlost <ul><li>Kontrast je razmerje med najsvetlejšo in najtemnejšo točko </li></ul><ul><ul><li>slab kontrast: </li></ul></ul><ul><li>Svetlost pomeni stopnjo barve na intenzitetni lestvici med črno (intenzivnost 0) in belo (intenzivnost 1) </li></ul><ul><ul><li>pretemna in presvetla slika </li></ul></ul>

11.
Histogram <ul><li>Histogram je graf, ki prikazuje zastopanost barv po svetlostih </li></ul>presvetla pretemna slab kontrast

12.
Izravnava histograma <ul><li>Če histogram raztegnemo, dobimo maksimalen kontrast ter optimalno svetlost (ukaz Auto Levels v Photoshopu) </li></ul>slab kontrast izboljšan kontrast izravnava histograma

13.
Drugi načini obdelave rastrskih slik <ul><li>Izrezovanje objektov </li></ul><ul><ul><li>laso, čarobna palica, ekstrakcija </li></ul></ul><ul><li>Odstranjevanje šuma </li></ul><ul><ul><li>filter Median </li></ul></ul><ul><li>Transformacije </li></ul><ul><ul><li>skaliranje, rotiranje </li></ul></ul><ul><li>Popačenje </li></ul><ul><ul><li>Distort, Liquify </li></ul></ul><ul><li>Sprememba barv </li></ul><ul><li>Odpravljanje rdečih oči </li></ul><ul><li>Iskanje robov </li></ul><ul><li>Kvantizacija sivinskih nivojev </li></ul>

14.
Shranjevanje rastrskih slik <ul><li>Najpogostejši formati </li></ul><ul><ul><li>JPEG </li></ul></ul><ul><ul><ul><li>Pri kodiranju upošteva lastnosti človeškega očesa in s slike odstrani detajle, ki niso dobro vidni. </li></ul></ul></ul><ul><ul><ul><li>Algoritem JPEG uporablja diskretno kosinusno transformacijo (DCT). </li></ul></ul></ul><ul><ul><li>GIF </li></ul></ul><ul><ul><ul><li>Podpira do 256 barv, vključno s prosojnostjo. </li></ul></ul></ul><ul><ul><ul><li>Podpira prepletanje in animacije. </li></ul></ul></ul><ul><ul><ul><li>Uporablja LZW kompresijo, zato je posebej učinkovit pri slikah, na katerih so večja področja iste barve. </li></ul></ul></ul><ul><ul><li>PNG </li></ul></ul><ul><ul><ul><li>Omogoča boljšo kompresijo kot GIF in podpira do 16.7 milijona barv (24 bitov). </li></ul></ul></ul><ul><ul><ul><li>Omogoča 254 stopenj prosojnosti ter podpira prepletanje. </li></ul></ul></ul><ul><ul><ul><li>Ima vgrajeno podporo gama korekciji. </li></ul></ul></ul><ul><ul><ul><li>Ne podpira animacij. </li></ul></ul></ul><ul><ul><li>TIFF </li></ul></ul><ul><ul><ul><li>Je format za visokokvalitetno shranjevanje slik s poljubno bitno globino. </li></ul></ul></ul><ul><ul><ul><li>Podpira več kompresijskih algoritmov </li></ul></ul></ul><ul><ul><ul><li>Široko podprt na vseh sistemih. </li></ul></ul></ul>

15.
Vektorska predstavitev <ul><li>Matematičen opis elementov na sliki </li></ul><ul><ul><li>Linije, poligoni, bézierove krivulje </li></ul></ul><ul><ul><li>Pogosto je potrebnih manj podatkov za zapis slike kot pri rastrski predstavitvi </li></ul></ul><ul><ul><li>Mogoče je povečevanje brez izgube kvalitete </li></ul></ul><ul><ul><li>Vektorska predstavitev omogoča lažje delo in manipulacijo z elementi na sliki </li></ul></ul><ul><ul><li>Za tisk in prikaz na monitorju je potrebno sliko rasterizirati </li></ul></ul><ul><ul><ul><li>avtomatsko ali ročno (monitor in tiskalnik delujeta na rastrskem principu) </li></ul></ul></ul>S (x, y) r shranimo le koordinati središča, polmer in barvo

16.
Bézierove krivulje <ul><li>Parametrično podana krivulja </li></ul><ul><li>Poimenovana po Pierru Bézieru, ki jih je populariziral </li></ul><ul><ul><li>Uporaba najprej v avtomobilski industriji za modeliranje oblike </li></ul></ul><ul><li>Z lepljenjem več takšnih krivulj lahko dobimo praktično vsako obliko </li></ul><ul><li>Lahko jih posplošimo na Bézierove ploskve v 3D modeliranju </li></ul>Kontrolni poligon označuje tir, po katerem se giblje daljica smer potovanja zveznice

17.
Formati in uporaba vektorskih slik <ul><li>Znani formati: </li></ul><ul><ul><li>PostScript – PS </li></ul></ul><ul><ul><li>Encapsulated PostScript – EPS </li></ul></ul><ul><ul><li>Scalable Vector Graphics – SVG </li></ul></ul><ul><ul><li>Windows Metafile – WMF , Enhanced Metafile – EMF (Microsoft) </li></ul></ul><ul><ul><li>CDR (CorelDraw) </li></ul></ul><ul><ul><li>AI (Adobe Illustrator) </li></ul></ul><ul><ul><li>Drawing exchange format – DXF (AutoCAD) </li></ul></ul><ul><li>Uporaba na različnih področjih: </li></ul><ul><ul><li>grafično oblikovanje </li></ul></ul><ul><ul><li>računalniško podprto načrtovanje (CAD) </li></ul></ul><ul><ul><li>TrueType pisave (obrisi črk so iz Bézierovih krivulj) </li></ul></ul>

18.
Animacije <ul><li>Animacija je sekvenca statičnih slik, ki si sledijo dovolj hitro, da človeški možgani zaznavajo gibanje </li></ul><ul><li>Da je gibanje tekoče je potrebno od 12 do 25 slik na sekundo </li></ul><ul><ul><li>12 je tipična hitrost za preproste računalniške animacije </li></ul></ul><ul><ul><li>25 je dovolj za kvalitetne animirane filme </li></ul></ul>2 sliki / s 10 slik / s

19.
Izdelava animacij <ul><li>Klasične animacije </li></ul><ul><ul><li>risanje sličic na papir in snemanje na film </li></ul></ul><ul><ul><li>snemanje prizorov (npr. figur iz plastelina) sliko po sliko: </li></ul></ul><ul><li>Računalniške animacije </li></ul><ul><ul><li>risanje vsake sličice posebej </li></ul></ul><ul><ul><li>naprednejši načini  avtomatsko generiranje prehodov med stanji </li></ul></ul>

20.
Risanje vsake slike posebej <ul><li>Animated GIF </li></ul><ul><ul><li>Je sekvenca GIF slik, ki si sledijo z določeno hitrostjo </li></ul></ul><ul><ul><li>Več slik v eni datoteki </li></ul></ul><ul><ul><li>Eden prvih načinov animacije na spletu </li></ul></ul><ul><ul><li>Mučna izdelava animacij </li></ul></ul>

21.
Naprednejši načini izdelave <ul><li>Omogočajo preprostejšo izdelavo animacije </li></ul><ul><ul><li>določimo stanja v ključnih trenutkih </li></ul></ul><ul><ul><li>prehod med temi stanji se izvrši avtomatsko </li></ul></ul><ul><li>2D animacije </li></ul><ul><ul><li>Flash (Macromedia) </li></ul></ul><ul><li>3D (in 2D) animacije </li></ul><ul><ul><li>3D studio Max (Autodesk Media & Entertainment) </li></ul></ul><ul><ul><li>Maya (Autodesk Media & Entertainment) </li></ul></ul><ul><ul><li>Bryce (DAZ Productions) </li></ul></ul><ul><ul><li>Blender (open source) </li></ul></ul>

22.
Macromedia Flash <ul><li>Predvajalnik “Flash Player” </li></ul><ul><ul><li>na voljo kot samostojen program ali kot dodatek za spletne brskalnike </li></ul></ul><ul><ul><li>omogoča predvajanje animacij prek spleta in s tem bogatejše spletne strani </li></ul></ul><ul><ul><li>podpira predvajanje videa, kar izkoriščajo različni ponudniki vsebin (Google Video, YouTube) </li></ul></ul><ul><li>Razvojno okolje Macromedia Flash </li></ul><ul><ul><li>Omogoča izdelavo 2D vektorskih in rastrskih animacij </li></ul></ul><ul><ul><li>omogoča programiranje in izdelavo interaktivnih animacij z jezikom ActionScript </li></ul></ul>

23.
Osnovni pojmi 3D modeliranja <ul><li>Večina programov za 3D modeliranje sledi analogiji s filmskim svetom in vsebuje: </li></ul><ul><ul><li>objekte </li></ul></ul><ul><ul><ul><li>vektorski 3D modeli iz geometrijskih primitivov in bezierovih ploskev </li></ul></ul></ul><ul><ul><ul><li>objekti imajo lastnosti, ki določajo interakcijo s svetlobnimi žarki </li></ul></ul></ul><ul><ul><ul><li>površino objektov prekrivajo teksture (npr. slike materialov) </li></ul></ul></ul><ul><ul><ul><li>objekti imajo določeno pot gibanja </li></ul></ul></ul><ul><ul><li>luči </li></ul></ul><ul><ul><ul><li>luči so viri svetlobe </li></ul></ul></ul><ul><ul><ul><li>različni tipi luči na različnih položajih za ustrezne namene (npr. sonce) </li></ul></ul></ul><ul><ul><li>kamere </li></ul></ul><ul><ul><ul><li>simulacije različnih leč za različne namene </li></ul></ul></ul><ul><ul><ul><li>pot gibanja kamere </li></ul></ul></ul>

24.
3D model človeka <ul><li>Model človeka je lahko </li></ul><ul><ul><li>tog (iz enega kosa) </li></ul></ul><ul><ul><li>iz posameznih delov (potrebno upravljanje vsakega posebej) </li></ul></ul><ul><ul><li>inverzno kinematski </li></ul></ul><ul><li>Inverzna kinematika olajša izvajanje gibov </li></ul><ul><ul><li>posamezni deli telesa so spojeni s sklepi </li></ul></ul><ul><ul><li>vsak del telesa prek sklepov vpliva na celoto </li></ul></ul><ul><ul><li>določene so omejitve človeškega telesa (maksimalni koti pregibanja) </li></ul></ul>

25.
Izrisovanje (rendering) <ul><li>Med izrisovanjem se upoštevajo vse spremenljivke </li></ul><ul><ul><li>gibanje objektov, kamer in luči </li></ul></ul><ul><ul><li>preračunava se pot vsakega svetlobnega žarka iz luči (ray-tracing): </li></ul></ul><ul><ul><ul><li>upoštevajo se odboji od objektov in </li></ul></ul></ul><ul><ul><ul><li>lom svetlobe na prozornih objektih </li></ul></ul></ul><ul><li>Rezultati izrisovanja so zaradi tehnike sledenja žarkom </li></ul><ul><ul><li>videti realni praktično brez truda in posebnih trikov </li></ul></ul><ul><ul><li>vendar pa je tehnika procesorsko zelo zahtevna </li></ul></ul><ul><ul><ul><li>tudi več ur izrisovanja za eno samo kompleksno sliko </li></ul></ul></ul><ul><ul><li>zato se pogosto uporablja različne trike, ki za enak učinek ne potrebujejo veliko procesorske moči </li></ul></ul>