{"id":369,"date":"2019-02-04T20:56:03","date_gmt":"2019-02-04T20:56:03","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/?post_type=chapter&#038;p=369"},"modified":"2019-04-08T16:24:53","modified_gmt":"2019-04-08T16:24:53","slug":"silmaring-arvutigraafika","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/chapter\/silmaring-arvutigraafika\/","title":{"raw":"Silmaring: Arvutigraafika","rendered":"Silmaring: Arvutigraafika"},"content":{"raw":"<p class=\"vspace\">Autor: Raimond Tunnel, illustratsioonid: <a class=\"urllink\" href=\"https:\/\/www.facebook.com\/olevusArt\/\" target=\"_blank\" rel=\"noopener\">Kristel Sergo<\/a>. (Kursuse autorid on materjali l\u00fchendanud.)<\/p>\r\n<p class=\"vspace\">Informaatikas on arvutigraafika v\u00e4ga lai valdkond, millel on omakorda palju spetsialiseerumisv\u00f5imalusi. R\u00e4\u00e4kides arvutigraafikast, m\u00f5tleme me valdkonda, mis tegeleb arvutis n\u00e4ha soovitava pildi genereerimisega. Selleks v\u00f5ib olla n\u00e4iteks nupp v\u00f5i tekst, kuid samas ka erinevad efektid filmides ning loomulikult kogu 3D m\u00e4ngude visuaalne pool.<\/p>\r\n<p class=\"vspace\">Vastavalt olukorrale tuleb arvutis graafika joonistamiseks m\u00f5elda erinevatele asjadele. N\u00e4iteks <strong>nupu<\/strong> korral on oluline:<\/p>\r\n\r\n<ul>\r\n \t<li>Kuhu me nupu ekraanil joonistame?<\/li>\r\n \t<li>Kas nupul on piirjoon? Kui lai? Kuidas see joonistatakse?<\/li>\r\n \t<li>Kuidas nupu sees olev tekst joonistada?<\/li>\r\n \t<li>Kas nupp on l\u00e4bipaistev? Kas nupu taga on veel midagi?<\/li>\r\n<\/ul>\r\n<p class=\"vspace\">Kaks k\u00fcsimust nendest k\u00fcsivad \"kuidas\" ja see ongi p\u00f5hiline arvutigraafika eesm\u00e4rk:<\/p>\r\n\r\n<ul>\r\n \t<li>Defineerida, <strong>kuidas<\/strong> midagi j\u00f5uab meie programmist ekraanile.<\/li>\r\n<\/ul>\r\n<p class=\"vspace\">Lahendus sellele k\u00fcsimusele peab olema ka \u00fcpriski <strong>kiire<\/strong>. Ainu\u00fcksi k\u00e4esoleval lehel on meil tuhandeid t\u00e4hem\u00e4rke, igal t\u00e4hem\u00e4rgil on mitmeid jooni ning vastavalt teksti suurusele t\u00e4idavad need jooned mingi arvu piksleid.<\/p>\r\n\r\n<ul>\r\n \t<li><strong>Piksel<\/strong> - ekraanipunkt, minimaalne v\u00e4rvitav element ekraanil (v\u00f5i digitaalsel pildil).<\/li>\r\n<\/ul>\r\n<p class=\"vspace\">Arvutigraafikas peab vastama k\u00fcsimusele, kuidas leitakse \u00fcles ning v\u00e4rvitakse sobiva v\u00e4rviga \u00f5iged pikslid ja seda n\u00e4iteks 30 korda sekundi jooksul, kui kasutaja lehek\u00fclge vertikaalselt liigutab.<\/p>\r\n<p class=\"vspace\">Arvutigraafika valdkonnal on \u00fchisosa ka n\u00e4iteks <strong>digitaalse pildit\u00f6\u00f6tluse<\/strong> valdkonnaga. Viimane nimelt uurib, kuidas muuta olemasolevaid pilte (n\u00e4iteks fotosid) paremini n\u00e4htavateks (nii inimese kui ka arvuti jaoks). Digitaalse pildit\u00f6\u00f6tluse valdkonda j\u00e4\u00e4b ka olemasolevate piltide pealt kujundite tuvastus. N\u00e4iteks v\u00f5ib arvuti programmeerida satelliitpildi pealt \u00fcles leidma autosid.<\/p>\r\n<p class=\"vspace\">\u00dchisosa arvutigraafika valdkonnaga tekib olukorras, kus tahame \u00fche korra joonistatud pildi peale lisada mingit efekti, et l\u00f5pptulemus oleks veelgi parem. Selliseid olukordi juhtub p\u00e4ris palju, k\u00f5ige lihtsam n\u00e4ide oleks 3D m\u00e4ngust, kus me soovime k\u00f5iki v\u00e4rve muuta n\u00e4iteks natukene kollasemaks, sest m\u00e4ngul peab olema just s\u00e4\u00e4rane stiil. Selleks leiame, kuidas meie 3D m\u00e4ngu kaader n\u00e4eks v\u00e4lja tavaliselt ja seej\u00e4rel muudame pikslite v\u00e4rve vastavalt.<\/p>\r\n\r\n<h2 class=\"vspace\">Raster- ja vektorgraafika<\/h2>\r\n<div class=\"vspace\">\r\n\r\n[caption id=\"attachment_370\" align=\"aligncenter\" width=\"300\"]<img class=\"size-medium wp-image-370\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/01ruudustik-300x294.png\" alt=\"\" width=\"300\" height=\"294\" \/> Pikslite koordinaadid 5 x 5 ruudustikus[\/caption]\r\n\r\n<\/div>\r\n<p class=\"vspace\">Sissejuhatuses kirjeldatud pikslite v\u00e4rvi j\u00e4rgi millegi joonistamine on <strong>rastergraafika<\/strong>. M\u00f5iste \"<strong>raster<\/strong>\" t\u00e4hendab selles kontekstis <strong>pikslite ruudustikku<\/strong>.<\/p>\r\n<p class=\"vspace\">T\u00e4nap\u00e4eval oleme harjunud, et arvutimonitoril olev pilt koosneb pikslitest ning sellest l\u00e4htuvalt v\u00f5ime kutsuda monitori ka <strong>rastermonitoriks<\/strong>.<\/p>\r\n<p class=\"vspace\">V\u00f5ib ette kujutada ruudulise vihiku lehte, kus v\u00e4rvime erinevad ruudud erinevat v\u00e4rvi. Igal pikslil on ka selles ruudustikus oma <strong>koordinaat<\/strong>.<\/p>\r\n<p class=\"vspace\">N\u00e4iteks, kui alustame lehe \u00fclevalt vasakult nurgast, siis allapoole j\u00e4\u00e4vad pikslite read ja paremale pikslite tulbad. V\u00f5ime read ja tulbad nummerdada ja kui me alustame m\u00f5lema nummerdusega 0-st, siis esimese ruudu koordinaat on (0, 0). Sellest paremal asub (0, 1) ja all asub (1, 0). Seega esimene arv t\u00e4histab rea numbrit ja teine tulba oma.<\/p>\r\n\r\n<div class=\"vspace\"><\/div>\r\n<div class=\"img imgcaption\"><span class=\"rfloat\"><span class=\"rfloat\">\r\n<\/span><\/span>\r\n\r\n[caption id=\"attachment_371\" align=\"aligncenter\" width=\"300\"]<img class=\"size-medium wp-image-371\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster-300x250.png\" alt=\"\" width=\"300\" height=\"250\" \/> Ruut raster- ja vektorgraafikas[\/caption]\r\n\r\n<\/div>\r\n<p class=\"vspace\">Tihtipeale aga me tahame defineerida konkreetseid <strong>geomeetrilisi kujundeid<\/strong>. N\u00e4iteks <strong>ruutu<\/strong> on rastergraafikas v\u00f5imalik k\u00fcll joonistada nii, et defineerime 5 pikslit paremale, 4 alla, 4 vasakule ja 4 \u00fclesse tagasi. See on aga p\u00e4ris t\u00fc\u00fctu ja pigem tahaksime ruudu defineerida n\u00e4iteks ainult tema <strong>k\u00fcljepikkuse ja keskpunkti koordinaadiga<\/strong>. N\u00e4iteks olgu ruudu k\u00fcljepikkus 5 ja keskpunkt koordinaadil (3, 3). Niimoodi saame k\u00fcljepikkust muuta ja lihtsasti defineerida <strong>erineva suurusega ruute<\/strong>. V\u00f5ime muuta ka ruudu keskpunkti koordinaati ja selle l\u00e4bi <strong>kujundit liigutada<\/strong>. Selliselt joonistatava geomeetria defineerimist nimetatakse <strong>vektorgraafikaks<\/strong>.<\/p>\r\n<p class=\"vspace\">Ajalooliselt olid \u00fched esimesed monitorid vektormonitorid, mis joonistasid ekraanile ainult jooni ja neil puudus pikslite ruudustik.<\/p>\r\n<p class=\"vspace\">Vektorgraafika on t\u00e4nap\u00e4eval v\u00e4ga <strong>oluline<\/strong>, sest<\/p>\r\n\r\n<ul>\r\n \t<li>ekraanide m\u00f5\u00f5tmed on erinevad ja<\/li>\r\n \t<li>see v\u00f5imaldab lihtsasti objektide suurust muuta.<\/li>\r\n<\/ul>\r\n<div class=\"vspace\"><\/div>\r\n<div class=\"img imgcaption\">\r\n\r\n[caption id=\"attachment_372\" align=\"aligncenter\" width=\"300\"]<img class=\"size-medium wp-image-372\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/a-300x152.png\" alt=\"\" width=\"300\" height=\"152\" \/> T\u00e4ht \"a\" raster- ja vektorgraafikas[\/caption]\r\n\r\n<\/div>\r\n<p class=\"vspace\">Hea n\u00e4ide sellest on kirjastiilid ehk fondid. Ilmselt tahame teksti joonistada erineva suurusega. Seda saab n\u00e4ha ka siis, kui me n\u00e4iteks k\u00e4esolevat veebilehte suurendame v\u00f5i v\u00e4hendame (Ctrl klahv + hiire rullik edasi \/ tagasi). Selle tegevuse tulemusena t\u00e4hed muutuvad suuremaks ja v\u00e4iksemaks, kuid on iga kord samasuguse ja sujuva kujuga. Kui me oleksime teinud t\u00e4he \u201ca\u201d rastergraafikaga, siis suurendamise korral see t\u00e4ht kaotaks oma kuju.<\/p>\r\n<p class=\"vspace\">Eelneval pildil vasakul on n\u00e4ha t\u00e4ht \"a\", millest tegime ekraanipildi ja suurendasime seda 100 korda. Selle tulemusena n\u00e4eme suurendatud piksleid, kusjuures k\u00f5ik pikslid ei ole mustad. Sellel on ka v\u00e4ga hea p\u00f5hjendus arvutigraafika valdkonnast. Paremal on aga sama t\u00e4ht \"a\", millel oleme kirjasuuruse muutnud 100 korda suuremaks ja siis teinud pildi. On n\u00e4ha, et t\u00e4hte suurendades ootaksime pigem parempoolset tulemust. K\u00f5ik t\u00e4hed on aga defineeritud erinevate <strong>geomeetriliste valemitega<\/strong> ja seega on arvutil neid v\u00e4ga lihtne vastavalt vajadusele suurendada ja v\u00e4hendada.<\/p>\r\n\r\n<h2 class=\"vspace\">Rasteriseerimine<\/h2>\r\n<div class=\"vspace\">\r\n\r\n[caption id=\"attachment_373\" align=\"aligncenter\" width=\"196\"]<img class=\"size-medium wp-image-373\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine-196x300.png\" alt=\"\" width=\"196\" height=\"300\" \/> Rasteriseerimine[\/caption]\r\n\r\n<\/div>\r\n<p class=\"vspace\">Kui me defineerime kujundid vektorgraafikas, kuid monitorid on rastergraafikas (koosnevad pikslite ruudustikust), siis kuidas me saame \u00fchest teise?<\/p>\r\n<p class=\"vspace\">Sellise tegevuse nimi on <strong>rasteriseerimine<\/strong> ja ka see on \u00fcks arvutigraafika eesm\u00e4rke.<\/p>\r\n<p class=\"vspace\">\u00dcks lihtne viis selleks on <strong>panna enda geomeetriline ruum ja ruudustik kohakuti<\/strong> ning seej\u00e4rel iga ruudu korral vaadata, kas selle alla j\u00e4\u00e4b piisavalt suur osa geomeetrilisest kujundist. Kui j\u00e4\u00e4b, siis saab vastava ruudu v\u00e4rvida n\u00e4iteks mustaks. Vaata ka ingliskeelset videoselgitust kolmnurga rasteriseerimise kohta: <a class=\"urllink\" href=\"https:\/\/www.youtube.com\/watch?v=aweqeMxDnu4&amp;feature=youtu.be&amp;t=5m34s\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/watch?v=aweqeMxDnu4&amp;feature=youtu.be&amp;t=5m34s<\/a><\/p>\r\n<p class=\"vspace\">Tihti ongi vaja defineerida asju ka rastergraafikas. N\u00e4iteks fotod (n. JPG formaadis) sageli just sellisel kujul ongi. Kui me digimaalime pildi m\u00f5nes pildit\u00f6\u00f6tlusprogrammis (nt Photoshop), siis ka see on salvestatud raster-kujul. Nimelt fotodes ja digimaalides on tihti v\u00e4ga keerulised kujundid, mida geomeetriliselt hoida ei ole m\u00f5tet v\u00f5i on isegi v\u00f5imatu. Kui me teeme foto enda kassist, siis me ei leia kassi t\u00e4ielikku geomeetriat ning ei saa p\u00e4rast arvutis pilti l\u00f5pmatuseni detailselt suurendada. Ainus parameeter selle pildifaili juures on see, kui suure ruudustiku peale me kassi j\u00e4\u00e4dvustasime.<\/p>\r\n<p class=\"vspace\">Juhul kui on soov teha firmale logo, siis tuleks see teha vektorgraafikas- suuremalt ja v\u00e4iksemalt s\u00e4rkidele ja reklaamlplakatitele tr\u00fckkides j\u00e4\u00e4b see alati terav. K\u00fcll aga kui on soov n\u00e4iteks printida t-s\u00e4rgile fotot, siis on ainsaks v\u00f5imaluseks kasutada pilti rastergraafikas.<\/p>\r\n\r\n<h2 class=\"vspace\">3D arvutigraafika<\/h2>\r\n<p class=\"vspace\">Suur osa arvutigraafikast tegeleb justnimelt <strong>3D graafikaga<\/strong>, millega paljud on tuttavad nii filmidest kui arvutim\u00e4ngudest. See on v\u00e4ga suur valdkond, mille jaoks on \u00fclikoolides tihti eraldi erialad. Samuti on see ka valdkond, kus tehakse palju koost\u00f6\u00f6d <strong>3D kunstnikega<\/strong>. Erinevad kolmem\u00f5\u00f5tmelised kujudid nagu kuup ja silinder on k\u00fcll toredad, kuid filmis v\u00f5i m\u00e4ngus oodatakse pigem p\u00e4ris maailma meenutavaid ruume, esemeid ja tegelasi. Nende keerulisemate <strong>objektide geomeetriat<\/strong>, <strong>v\u00e4rve<\/strong> ja ka <strong>liikumisanimatsioone<\/strong> valmistavadki 3D kunstnikud.<\/p>\r\n<p class=\"vspace\">Informaatika seisukohast on oluline, et defineeritud geomeetria j\u00f5uaks <strong>kiiresti ja \u00f5igesti<\/strong> ekraanile, objektid peegeldaksid valgust vastavalt enda v\u00e4rvile ja materjali omadustele. N\u00e4iteks metallid ja dielektrik materjalid peegeldavad valgust v\u00e4ga erinevalt. Samuti tegelevad informaatikud sellega, et joonistada erinevaid efekte nagu tuli, suits, vihm v\u00f5i udu.<\/p>\r\n<p class=\"vspace\">Kogu selle t\u00f6\u00f6 k\u00e4igus kasutatakse programmeerimises palju matemaatilisi objekte ja funktsioone: vektoreid, maatrikseid, nurga koosinust, vektorite skalaar- ja vektorkorrutist, tuletist ja integraali.<\/p>\r\n<p class=\"vspace\">Selle kursuse raames me v\u00e4ga s\u00fcgavuti arvutigraafika matemaatikasse ei l\u00e4he. K\u00fcll aga on huvilistel v\u00f5imalus selle kohta lugeda ingliskeelseid materjale keskkonnas <a class=\"urllink\" href=\"https:\/\/cglearn.codelight.eu\/pub\/computer-graphics\" target=\"_blank\" rel=\"noopener\">CGLearn<\/a>.<\/p>\r\n\r\n<h2>V\u00e4rviruumid ja -mudelid<\/h2>\r\n<p class=\"vspace\">Oleme avastanud, et ekraani peal olevad pikslid on ruudustikus ning iga\u00fchel nendest on oma v\u00e4rv. Kuidas aga seda v\u00e4rvi arvutis hoitakse?<\/p>\r\n<p class=\"vspace\">Optikast teame, et valgusel on olemas <strong>lainepikkus<\/strong>. Bioloogiast teame, et inimese silmas on <strong>kolm erinevat retseptorit<\/strong> (kolvikesed), mis reageerivad k\u00f5ige rohkem <strong>punasele<\/strong>, <strong>rohelisele<\/strong> ja <strong>sinisele<\/strong> valgusele. Erinev kombinatsioon nende kolme retseptori impulssidest v\u00f5imaldab meil tajuda erineva lainepikkusega footoneid ja v\u00e4rve.<\/p>\r\n\r\n<div class=\"vspace\"><\/div>\r\n<div class=\"img imgcaption\"><\/div>\r\n<p class=\"vspace\">Sellest inimeste bioloogilisest omap\u00e4rast (n\u00e4iteks on lindudel neli erinevat t\u00fc\u00fcpi kolvikest) l\u00e4htuvalt on disainitud ka meie ekraanid. Monitor kiirgab iga piksli kohta nii punast, rohelist kui sinist valgust. Kombinatsioon nendest kolmest erineva v\u00e4rvusega valgusest v\u00f5imaldab meil n\u00e4ha erinevaid v\u00e4rve.<\/p>\r\n\r\n\r\n[caption id=\"attachment_374\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-374\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/04silmamuna-1024x639.png\" alt=\"\" width=\"500\" height=\"312\" \/> Kepikesed ja kolvikesed inimese silmas ja reageerimisgraafik[\/caption]\r\n<p class=\"vspace\">Tasub t\u00e4hele panna, et erineva v\u00e4rvusega valguste koos kiirgamine t\u00f6\u00f6tab teistmoodi kui n\u00e4iteks erinevate gua\u0161\u0161v\u00e4rvide segamine.<\/p>\r\n<p class=\"vspace\">Kui meie silm tuvastab korraga punast, rohelist kui ka sinist valgust, siis k\u00f5ik kolvikesed saadavad impulsi edasi ja n\u00e4eme <strong>valget v\u00e4rvi<\/strong>. Samas, kui me punase, rohelise ja sinise gua\u0161\u0161v\u00e4rvi kokku segame, siis saame tumepruuni v\u00e4rvi. Gua\u0161\u0161v\u00e4rvide segamisel paneme kokku erinevad materjalid, milles neelduvad erinevad lainepikkused. Mida rohkem me selliseid materjale kokku segame, seda rohkem lainepikkusi segu neelab ja l\u00f5puks neeldub seal enamus n\u00e4htavast valgusest. Samas erineva v\u00e4rvusega valguste kiirgamisel j\u00f5uab meie silma rohkem erinevaid lainepikkusi.<\/p>\r\n\r\n<div class=\"vspace\"><\/div>\r\n<div class=\"img imgcaption\">\r\n\r\n[caption id=\"attachment_375\" align=\"aligncenter\" width=\"500\"]<img class=\"wp-image-375\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/05varviringid-1024x615.png\" alt=\"\" width=\"500\" height=\"300\" \/> Valguse (n\u00e4iteks monitori pikslite) ja materjalide v\u00e4rvide (n\u00e4iteks gua\u0161\u0161v\u00e4rvide) segunemine[\/caption]\r\n\r\n<\/div>\r\n<p class=\"vspace\">Siinkohal olekski oluline teada kahte m\u00f5istet:\r\n<strong>V\u00e4rvimudel<\/strong> \u2013 kuidas me t\u00e4histame arvutis erinevaid v\u00e4rve.\r\n<strong>V\u00e4rviruum<\/strong> \u2013 millistele reaalsetele v\u00e4rvidele meie arvutis t\u00e4histatud v\u00e4rvid vastavad.<\/p>\r\n\r\n<h2>RGB v\u00e4rvimudel ja sRGB v\u00e4rviruum<\/h2>\r\nKuna monitorid kiirgavad iga piksli kohta eraldi punast (<strong>red<\/strong>), rohelist (<strong>green<\/strong>) ja sinist (<strong>blue<\/strong>) v\u00e4rvi, siis k\u00f5ige loogilisem variant arvutis v\u00e4rvi hoida olekski arvude kolmikuna, kus on kirjas nende kolme v\u00e4rvi intensiivsus. Sellist v\u00e4rvimudelit kutsutakse v\u00e4rvide ingliskeelsete nimetuste esit\u00e4htede j\u00e4rgi <strong>RGB v\u00e4rvimudeliks<\/strong>.\r\n<p class=\"vspace\">Vastavalt olukorrale v\u00f5ime v\u00f5tta neid arve<\/p>\r\n\r\n<ol>\r\n \t<li>ujukomaarvudena vahemikust [0, 1] v\u00f5i<\/li>\r\n \t<li>t\u00e4isarvudena vahemikust [0, 255].<\/li>\r\n<\/ol>\r\n<h2>V\u00e4rvide esitamine ujukomaarvudena<\/h2>\r\n<p class=\"vspace\">Esimesel juhul v\u00f5ime m\u00f5elda igast komponendist kui protsendist, kui palju maksimaalsest peab vastavat v\u00e4rvi kiirgama konkreetse piksli sees. N\u00e4iteks kolmik (1, 0, 0) t\u00e4hendaks, et piksel peab olema maksimaalselt punane ja rohelist ning sinist v\u00e4rvi ei kiirga \u00fcldse. Kolmik (0.5, 0.5, 0) t\u00e4hendaks sellisel juhul, et punast ja rohelist on vaja kiirata 50% ning sinist \u00fcldse mitte. Selline kolmik annaks meile tumekollase v\u00e4rvi. Tegelikkuses aga, kui me saadame sellise kolmiku monitorile, siis on meie piksel tumedam kui \u00f5ige 50% kollane, mida monitor n\u00e4idata suudaks. See on nii selle p\u00e4rast, et nii ajaloolistel kui ka praktilistel p\u00f5hjustel saadab monitor k\u00f5ik v\u00e4rvid l\u00e4bi funktsiooni <em>tulemus = v\u00e4rv<sup>\u03b3<\/sup><\/em> (v\u00e4rv astmel \u03b3), kus kreeka t\u00e4ht \u03b3 (<strong>gamma<\/strong>) v\u00f5ib olla erinevatel monitoridel erineva v\u00e4\u00e4rtusega.<\/p>\r\n<p class=\"vspace\">\u00dcldiselt on hea arvestada \u03b3 v\u00e4\u00e4rtuseks umbes 2,2 (vaata ka n\u00e4iteks: <a class=\"urllink\" href=\"http:\/\/epaperpress.com\/monitorcal\/gamma.html\" target=\"_blank\" rel=\"noopener\">http:\/\/epaperpress.com\/monitorcal\/gamma.html<\/a>). See funktsioon astendab k\u00f5ik arvud meie kolmikus astendajaga \u03b3 ja kuna arvud on vahemikust [0, 1], siis nende v\u00e4\u00e4rtused muutuvad v\u00e4iksemaks. Probleemi lahendamiseks tuleks otse monitorile saadetav v\u00e4\u00e4rtus enne ise astendada \u03b3 p\u00f6\u00f6rdv\u00e4\u00e4rtusega 1\/\u03b3.<\/p>\r\n\r\n<h2>V\u00e4rvide esitamine t\u00e4isarvudena<\/h2>\r\n<p class=\"vspace\">Vaatame korraks ka eelnevalt mainitud vahemikku [0, 255] v\u00e4rvikanalite v\u00e4\u00e4rtuste jaoks. Sellel vahemikul on mitu p\u00f5hjust. Esiteks, kuna arvutid hoiavad erinevaid v\u00e4\u00e4rtusi binaar- ehk kahends\u00fcsteemis, siis on v\u00e4\u00e4rtuste hoidmiseks vahemikust [0, 255] vaja v\u00e4hem m\u00e4lu. Nimelt kahends\u00fcsteemis hoitakse k\u00f5iki v\u00e4\u00e4rtusi 0 ja 1 kombinatsioonidena ja kui meil on kaheksa kohta arvude 0 v\u00f5i 1 jaoks, siis on v\u00f5imalik kujutada k\u00f5iki v\u00e4\u00e4rtusi [0, 255], kuid mitte midagi rohkemat (vaata ka videot <a class=\"urllink\" href=\"https:\/\/www.youtube.com\/watch?v=UBX2QQHlQ_I\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/watch?v=UBX2QQHlQ_I<\/a>).<\/p>\r\n<p class=\"vspace\">Teine p\u00f5hjus on, et inimesele on loetavam (100, 140, 0) kui (0.3922, 0.5490, 0). Kusjuures paljudes kohtades kasutatakse ka heksadetsimaal- ehk kuueteistk\u00fcmnends\u00fcsteemi. Tolles s\u00fcsteemis on meil lisaks tavalistele numbritele 0, 1, 2, 3, 4, 5, 6, 7, 8 ja 9 ka veel juures numbrid A, B, C, D, E ja F. \u00dclaltoodud n\u00e4ide oleks kuueteistk\u00fcmnends\u00fcsteemis (64, 8C, 0). K\u00f5ige suurem arv, mida me kahe s\u00fcmboliga kuueteistk\u00fcmnends\u00fcsteemis kujutada saame, ongi k\u00fcmnends\u00fcsteemi 255, mis kirjutatakse FF. Veebilehtede arenduses kasutatakse justnimelt seda s\u00fcsteemi v\u00e4rvide defineerimiseks ning seal kirjutatakse meie kolmik trellide s\u00fcmboli j\u00e4rele j\u00e4rjest: #648C00.<\/p>\r\n\r\n<div class=\"vspace\"><\/div>\r\n<div class=\"img imgcaption\">\r\n\r\n[caption id=\"attachment_376\" align=\"aligncenter\" width=\"600\"]<img class=\"wp-image-376\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/12systeemid-1024x672.png\" alt=\"\" width=\"600\" height=\"394\" \/> Arvud kahend-, k\u00fcmnend- ja kuueteistk\u00fcmnends\u00fcsteemis[\/caption]\r\n\r\n<\/div>\r\n<div class=\"vspace\"><\/div>\r\n<div class=\"img imgcaption\">\r\n\r\n[caption id=\"attachment_377\" align=\"alignright\" width=\"268\"]<img class=\"size-medium wp-image-377\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/sRGB-268x300.png\" alt=\"\" width=\"268\" height=\"300\" \/> sRGB vs inimese v\u00e4rvide n\u00e4gemisulatus[\/caption]\r\n\r\n<\/div>\r\n<p class=\"vspace\">Laiem k\u00fcsimus on see, mis v\u00e4rve ikkagi meie RGB v\u00f5i ka m\u00f5ni teine v\u00e4rvimudel kujutab ehk millisele v\u00e4rviruumile ta vastab. V\u00e4rvide n\u00e4gemise ulatus inimestel on suurem kui see, mida monitorid suudavad v\u00e4ljastada. Ei ole pragmaatiline teha sellist monitori, mis suudaks n\u00e4idata k\u00f5iki n\u00e4htava spektri (valguse lainepikkuste) v\u00e4rve. Parempoolsel joonisel kolmnurga sees on k\u00f5ik v\u00e4rvid, mis on kujutatud enimlevinud sRGB v\u00e4rviruumis. Terve suurem kujund on kogu v\u00e4rvide n\u00e4gemisulatus inimestel.<\/p>\r\n&nbsp;\r\n\r\n&nbsp;","rendered":"<p class=\"vspace\">Autor: Raimond Tunnel, illustratsioonid: <a class=\"urllink\" href=\"https:\/\/www.facebook.com\/olevusArt\/\" target=\"_blank\" rel=\"noopener\">Kristel Sergo<\/a>. (Kursuse autorid on materjali l\u00fchendanud.)<\/p>\n<p class=\"vspace\">Informaatikas on arvutigraafika v\u00e4ga lai valdkond, millel on omakorda palju spetsialiseerumisv\u00f5imalusi. R\u00e4\u00e4kides arvutigraafikast, m\u00f5tleme me valdkonda, mis tegeleb arvutis n\u00e4ha soovitava pildi genereerimisega. Selleks v\u00f5ib olla n\u00e4iteks nupp v\u00f5i tekst, kuid samas ka erinevad efektid filmides ning loomulikult kogu 3D m\u00e4ngude visuaalne pool.<\/p>\n<p class=\"vspace\">Vastavalt olukorrale tuleb arvutis graafika joonistamiseks m\u00f5elda erinevatele asjadele. N\u00e4iteks <strong>nupu<\/strong> korral on oluline:<\/p>\n<ul>\n<li>Kuhu me nupu ekraanil joonistame?<\/li>\n<li>Kas nupul on piirjoon? Kui lai? Kuidas see joonistatakse?<\/li>\n<li>Kuidas nupu sees olev tekst joonistada?<\/li>\n<li>Kas nupp on l\u00e4bipaistev? Kas nupu taga on veel midagi?<\/li>\n<\/ul>\n<p class=\"vspace\">Kaks k\u00fcsimust nendest k\u00fcsivad &#8220;kuidas&#8221; ja see ongi p\u00f5hiline arvutigraafika eesm\u00e4rk:<\/p>\n<ul>\n<li>Defineerida, <strong>kuidas<\/strong> midagi j\u00f5uab meie programmist ekraanile.<\/li>\n<\/ul>\n<p class=\"vspace\">Lahendus sellele k\u00fcsimusele peab olema ka \u00fcpriski <strong>kiire<\/strong>. Ainu\u00fcksi k\u00e4esoleval lehel on meil tuhandeid t\u00e4hem\u00e4rke, igal t\u00e4hem\u00e4rgil on mitmeid jooni ning vastavalt teksti suurusele t\u00e4idavad need jooned mingi arvu piksleid.<\/p>\n<ul>\n<li><strong>Piksel<\/strong> &#8211; ekraanipunkt, minimaalne v\u00e4rvitav element ekraanil (v\u00f5i digitaalsel pildil).<\/li>\n<\/ul>\n<p class=\"vspace\">Arvutigraafikas peab vastama k\u00fcsimusele, kuidas leitakse \u00fcles ning v\u00e4rvitakse sobiva v\u00e4rviga \u00f5iged pikslid ja seda n\u00e4iteks 30 korda sekundi jooksul, kui kasutaja lehek\u00fclge vertikaalselt liigutab.<\/p>\n<p class=\"vspace\">Arvutigraafika valdkonnal on \u00fchisosa ka n\u00e4iteks <strong>digitaalse pildit\u00f6\u00f6tluse<\/strong> valdkonnaga. Viimane nimelt uurib, kuidas muuta olemasolevaid pilte (n\u00e4iteks fotosid) paremini n\u00e4htavateks (nii inimese kui ka arvuti jaoks). Digitaalse pildit\u00f6\u00f6tluse valdkonda j\u00e4\u00e4b ka olemasolevate piltide pealt kujundite tuvastus. N\u00e4iteks v\u00f5ib arvuti programmeerida satelliitpildi pealt \u00fcles leidma autosid.<\/p>\n<p class=\"vspace\">\u00dchisosa arvutigraafika valdkonnaga tekib olukorras, kus tahame \u00fche korra joonistatud pildi peale lisada mingit efekti, et l\u00f5pptulemus oleks veelgi parem. Selliseid olukordi juhtub p\u00e4ris palju, k\u00f5ige lihtsam n\u00e4ide oleks 3D m\u00e4ngust, kus me soovime k\u00f5iki v\u00e4rve muuta n\u00e4iteks natukene kollasemaks, sest m\u00e4ngul peab olema just s\u00e4\u00e4rane stiil. Selleks leiame, kuidas meie 3D m\u00e4ngu kaader n\u00e4eks v\u00e4lja tavaliselt ja seej\u00e4rel muudame pikslite v\u00e4rve vastavalt.<\/p>\n<h2 class=\"vspace\">Raster- ja vektorgraafika<\/h2>\n<div class=\"vspace\">\n<figure id=\"attachment_370\" aria-describedby=\"caption-attachment-370\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-370\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/01ruudustik-300x294.png\" alt=\"\" width=\"300\" height=\"294\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/01ruudustik-300x294.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/01ruudustik-768x753.png 768w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/01ruudustik-65x64.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/01ruudustik-225x221.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/01ruudustik-350x343.png 350w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/01ruudustik.png 777w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-370\" class=\"wp-caption-text\">Pikslite koordinaadid 5 x 5 ruudustikus<\/figcaption><\/figure>\n<\/div>\n<p class=\"vspace\">Sissejuhatuses kirjeldatud pikslite v\u00e4rvi j\u00e4rgi millegi joonistamine on <strong>rastergraafika<\/strong>. M\u00f5iste &#8220;<strong>raster<\/strong>&#8221; t\u00e4hendab selles kontekstis <strong>pikslite ruudustikku<\/strong>.<\/p>\n<p class=\"vspace\">T\u00e4nap\u00e4eval oleme harjunud, et arvutimonitoril olev pilt koosneb pikslitest ning sellest l\u00e4htuvalt v\u00f5ime kutsuda monitori ka <strong>rastermonitoriks<\/strong>.<\/p>\n<p class=\"vspace\">V\u00f5ib ette kujutada ruudulise vihiku lehte, kus v\u00e4rvime erinevad ruudud erinevat v\u00e4rvi. Igal pikslil on ka selles ruudustikus oma <strong>koordinaat<\/strong>.<\/p>\n<p class=\"vspace\">N\u00e4iteks, kui alustame lehe \u00fclevalt vasakult nurgast, siis allapoole j\u00e4\u00e4vad pikslite read ja paremale pikslite tulbad. V\u00f5ime read ja tulbad nummerdada ja kui me alustame m\u00f5lema nummerdusega 0-st, siis esimese ruudu koordinaat on (0, 0). Sellest paremal asub (0, 1) ja all asub (1, 0). Seega esimene arv t\u00e4histab rea numbrit ja teine tulba oma.<\/p>\n<div class=\"vspace\"><\/div>\n<div class=\"img imgcaption\"><span class=\"rfloat\"><span class=\"rfloat\"><br \/>\n<\/span><\/span><\/p>\n<figure id=\"attachment_371\" aria-describedby=\"caption-attachment-371\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-371\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster-300x250.png\" alt=\"\" width=\"300\" height=\"250\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster-300x250.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster-768x640.png 768w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster-1024x853.png 1024w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster-65x54.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster-225x187.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster-350x292.png 350w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/02vektorraster.png 1403w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-371\" class=\"wp-caption-text\">Ruut raster- ja vektorgraafikas<\/figcaption><\/figure>\n<\/div>\n<p class=\"vspace\">Tihtipeale aga me tahame defineerida konkreetseid <strong>geomeetrilisi kujundeid<\/strong>. N\u00e4iteks <strong>ruutu<\/strong> on rastergraafikas v\u00f5imalik k\u00fcll joonistada nii, et defineerime 5 pikslit paremale, 4 alla, 4 vasakule ja 4 \u00fclesse tagasi. See on aga p\u00e4ris t\u00fc\u00fctu ja pigem tahaksime ruudu defineerida n\u00e4iteks ainult tema <strong>k\u00fcljepikkuse ja keskpunkti koordinaadiga<\/strong>. N\u00e4iteks olgu ruudu k\u00fcljepikkus 5 ja keskpunkt koordinaadil (3, 3). Niimoodi saame k\u00fcljepikkust muuta ja lihtsasti defineerida <strong>erineva suurusega ruute<\/strong>. V\u00f5ime muuta ka ruudu keskpunkti koordinaati ja selle l\u00e4bi <strong>kujundit liigutada<\/strong>. Selliselt joonistatava geomeetria defineerimist nimetatakse <strong>vektorgraafikaks<\/strong>.<\/p>\n<p class=\"vspace\">Ajalooliselt olid \u00fched esimesed monitorid vektormonitorid, mis joonistasid ekraanile ainult jooni ja neil puudus pikslite ruudustik.<\/p>\n<p class=\"vspace\">Vektorgraafika on t\u00e4nap\u00e4eval v\u00e4ga <strong>oluline<\/strong>, sest<\/p>\n<ul>\n<li>ekraanide m\u00f5\u00f5tmed on erinevad ja<\/li>\n<li>see v\u00f5imaldab lihtsasti objektide suurust muuta.<\/li>\n<\/ul>\n<div class=\"vspace\"><\/div>\n<div class=\"img imgcaption\">\n<figure id=\"attachment_372\" aria-describedby=\"caption-attachment-372\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-372\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/a-300x152.png\" alt=\"\" width=\"300\" height=\"152\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/a-300x152.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/a-65x33.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/a-225x114.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/a-350x177.png 350w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/a.png 354w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-372\" class=\"wp-caption-text\">T\u00e4ht &#8220;a&#8221; raster- ja vektorgraafikas<\/figcaption><\/figure>\n<\/div>\n<p class=\"vspace\">Hea n\u00e4ide sellest on kirjastiilid ehk fondid. Ilmselt tahame teksti joonistada erineva suurusega. Seda saab n\u00e4ha ka siis, kui me n\u00e4iteks k\u00e4esolevat veebilehte suurendame v\u00f5i v\u00e4hendame (Ctrl klahv + hiire rullik edasi \/ tagasi). Selle tegevuse tulemusena t\u00e4hed muutuvad suuremaks ja v\u00e4iksemaks, kuid on iga kord samasuguse ja sujuva kujuga. Kui me oleksime teinud t\u00e4he \u201ca\u201d rastergraafikaga, siis suurendamise korral see t\u00e4ht kaotaks oma kuju.<\/p>\n<p class=\"vspace\">Eelneval pildil vasakul on n\u00e4ha t\u00e4ht &#8220;a&#8221;, millest tegime ekraanipildi ja suurendasime seda 100 korda. Selle tulemusena n\u00e4eme suurendatud piksleid, kusjuures k\u00f5ik pikslid ei ole mustad. Sellel on ka v\u00e4ga hea p\u00f5hjendus arvutigraafika valdkonnast. Paremal on aga sama t\u00e4ht &#8220;a&#8221;, millel oleme kirjasuuruse muutnud 100 korda suuremaks ja siis teinud pildi. On n\u00e4ha, et t\u00e4hte suurendades ootaksime pigem parempoolset tulemust. K\u00f5ik t\u00e4hed on aga defineeritud erinevate <strong>geomeetriliste valemitega<\/strong> ja seega on arvutil neid v\u00e4ga lihtne vastavalt vajadusele suurendada ja v\u00e4hendada.<\/p>\n<h2 class=\"vspace\">Rasteriseerimine<\/h2>\n<div class=\"vspace\">\n<figure id=\"attachment_373\" aria-describedby=\"caption-attachment-373\" style=\"width: 196px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-373\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine-196x300.png\" alt=\"\" width=\"196\" height=\"300\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine-196x300.png 196w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine-768x1178.png 768w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine-667x1024.png 667w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine-65x100.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine-225x345.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine-350x537.png 350w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/03rasteriseerimine.png 816w\" sizes=\"auto, (max-width: 196px) 100vw, 196px\" \/><figcaption id=\"caption-attachment-373\" class=\"wp-caption-text\">Rasteriseerimine<\/figcaption><\/figure>\n<\/div>\n<p class=\"vspace\">Kui me defineerime kujundid vektorgraafikas, kuid monitorid on rastergraafikas (koosnevad pikslite ruudustikust), siis kuidas me saame \u00fchest teise?<\/p>\n<p class=\"vspace\">Sellise tegevuse nimi on <strong>rasteriseerimine<\/strong> ja ka see on \u00fcks arvutigraafika eesm\u00e4rke.<\/p>\n<p class=\"vspace\">\u00dcks lihtne viis selleks on <strong>panna enda geomeetriline ruum ja ruudustik kohakuti<\/strong> ning seej\u00e4rel iga ruudu korral vaadata, kas selle alla j\u00e4\u00e4b piisavalt suur osa geomeetrilisest kujundist. Kui j\u00e4\u00e4b, siis saab vastava ruudu v\u00e4rvida n\u00e4iteks mustaks. Vaata ka ingliskeelset videoselgitust kolmnurga rasteriseerimise kohta: <a class=\"urllink\" href=\"https:\/\/www.youtube.com\/watch?v=aweqeMxDnu4&amp;feature=youtu.be&amp;t=5m34s\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/watch?v=aweqeMxDnu4&amp;feature=youtu.be&amp;t=5m34s<\/a><\/p>\n<p class=\"vspace\">Tihti ongi vaja defineerida asju ka rastergraafikas. N\u00e4iteks fotod (n. JPG formaadis) sageli just sellisel kujul ongi. Kui me digimaalime pildi m\u00f5nes pildit\u00f6\u00f6tlusprogrammis (nt Photoshop), siis ka see on salvestatud raster-kujul. Nimelt fotodes ja digimaalides on tihti v\u00e4ga keerulised kujundid, mida geomeetriliselt hoida ei ole m\u00f5tet v\u00f5i on isegi v\u00f5imatu. Kui me teeme foto enda kassist, siis me ei leia kassi t\u00e4ielikku geomeetriat ning ei saa p\u00e4rast arvutis pilti l\u00f5pmatuseni detailselt suurendada. Ainus parameeter selle pildifaili juures on see, kui suure ruudustiku peale me kassi j\u00e4\u00e4dvustasime.<\/p>\n<p class=\"vspace\">Juhul kui on soov teha firmale logo, siis tuleks see teha vektorgraafikas- suuremalt ja v\u00e4iksemalt s\u00e4rkidele ja reklaamlplakatitele tr\u00fckkides j\u00e4\u00e4b see alati terav. K\u00fcll aga kui on soov n\u00e4iteks printida t-s\u00e4rgile fotot, siis on ainsaks v\u00f5imaluseks kasutada pilti rastergraafikas.<\/p>\n<h2 class=\"vspace\">3D arvutigraafika<\/h2>\n<p class=\"vspace\">Suur osa arvutigraafikast tegeleb justnimelt <strong>3D graafikaga<\/strong>, millega paljud on tuttavad nii filmidest kui arvutim\u00e4ngudest. See on v\u00e4ga suur valdkond, mille jaoks on \u00fclikoolides tihti eraldi erialad. Samuti on see ka valdkond, kus tehakse palju koost\u00f6\u00f6d <strong>3D kunstnikega<\/strong>. Erinevad kolmem\u00f5\u00f5tmelised kujudid nagu kuup ja silinder on k\u00fcll toredad, kuid filmis v\u00f5i m\u00e4ngus oodatakse pigem p\u00e4ris maailma meenutavaid ruume, esemeid ja tegelasi. Nende keerulisemate <strong>objektide geomeetriat<\/strong>, <strong>v\u00e4rve<\/strong> ja ka <strong>liikumisanimatsioone<\/strong> valmistavadki 3D kunstnikud.<\/p>\n<p class=\"vspace\">Informaatika seisukohast on oluline, et defineeritud geomeetria j\u00f5uaks <strong>kiiresti ja \u00f5igesti<\/strong> ekraanile, objektid peegeldaksid valgust vastavalt enda v\u00e4rvile ja materjali omadustele. N\u00e4iteks metallid ja dielektrik materjalid peegeldavad valgust v\u00e4ga erinevalt. Samuti tegelevad informaatikud sellega, et joonistada erinevaid efekte nagu tuli, suits, vihm v\u00f5i udu.<\/p>\n<p class=\"vspace\">Kogu selle t\u00f6\u00f6 k\u00e4igus kasutatakse programmeerimises palju matemaatilisi objekte ja funktsioone: vektoreid, maatrikseid, nurga koosinust, vektorite skalaar- ja vektorkorrutist, tuletist ja integraali.<\/p>\n<p class=\"vspace\">Selle kursuse raames me v\u00e4ga s\u00fcgavuti arvutigraafika matemaatikasse ei l\u00e4he. K\u00fcll aga on huvilistel v\u00f5imalus selle kohta lugeda ingliskeelseid materjale keskkonnas <a class=\"urllink\" href=\"https:\/\/cglearn.codelight.eu\/pub\/computer-graphics\" target=\"_blank\" rel=\"noopener\">CGLearn<\/a>.<\/p>\n<h2>V\u00e4rviruumid ja -mudelid<\/h2>\n<p class=\"vspace\">Oleme avastanud, et ekraani peal olevad pikslid on ruudustikus ning iga\u00fchel nendest on oma v\u00e4rv. Kuidas aga seda v\u00e4rvi arvutis hoitakse?<\/p>\n<p class=\"vspace\">Optikast teame, et valgusel on olemas <strong>lainepikkus<\/strong>. Bioloogiast teame, et inimese silmas on <strong>kolm erinevat retseptorit<\/strong> (kolvikesed), mis reageerivad k\u00f5ige rohkem <strong>punasele<\/strong>, <strong>rohelisele<\/strong> ja <strong>sinisele<\/strong> valgusele. Erinev kombinatsioon nende kolme retseptori impulssidest v\u00f5imaldab meil tajuda erineva lainepikkusega footoneid ja v\u00e4rve.<\/p>\n<div class=\"vspace\"><\/div>\n<div class=\"img imgcaption\"><\/div>\n<p class=\"vspace\">Sellest inimeste bioloogilisest omap\u00e4rast (n\u00e4iteks on lindudel neli erinevat t\u00fc\u00fcpi kolvikest) l\u00e4htuvalt on disainitud ka meie ekraanid. Monitor kiirgab iga piksli kohta nii punast, rohelist kui sinist valgust. Kombinatsioon nendest kolmest erineva v\u00e4rvusega valgusest v\u00f5imaldab meil n\u00e4ha erinevaid v\u00e4rve.<\/p>\n<figure id=\"attachment_374\" aria-describedby=\"caption-attachment-374\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-374\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/04silmamuna-1024x639.png\" alt=\"\" width=\"500\" height=\"312\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/04silmamuna-1024x639.png 1024w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/04silmamuna-300x187.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/04silmamuna-768x479.png 768w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/04silmamuna-65x41.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/04silmamuna-225x140.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/04silmamuna-350x218.png 350w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption id=\"caption-attachment-374\" class=\"wp-caption-text\">Kepikesed ja kolvikesed inimese silmas ja reageerimisgraafik<\/figcaption><\/figure>\n<p class=\"vspace\">Tasub t\u00e4hele panna, et erineva v\u00e4rvusega valguste koos kiirgamine t\u00f6\u00f6tab teistmoodi kui n\u00e4iteks erinevate gua\u0161\u0161v\u00e4rvide segamine.<\/p>\n<p class=\"vspace\">Kui meie silm tuvastab korraga punast, rohelist kui ka sinist valgust, siis k\u00f5ik kolvikesed saadavad impulsi edasi ja n\u00e4eme <strong>valget v\u00e4rvi<\/strong>. Samas, kui me punase, rohelise ja sinise gua\u0161\u0161v\u00e4rvi kokku segame, siis saame tumepruuni v\u00e4rvi. Gua\u0161\u0161v\u00e4rvide segamisel paneme kokku erinevad materjalid, milles neelduvad erinevad lainepikkused. Mida rohkem me selliseid materjale kokku segame, seda rohkem lainepikkusi segu neelab ja l\u00f5puks neeldub seal enamus n\u00e4htavast valgusest. Samas erineva v\u00e4rvusega valguste kiirgamisel j\u00f5uab meie silma rohkem erinevaid lainepikkusi.<\/p>\n<div class=\"vspace\"><\/div>\n<div class=\"img imgcaption\">\n<figure id=\"attachment_375\" aria-describedby=\"caption-attachment-375\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-375\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/05varviringid-1024x615.png\" alt=\"\" width=\"500\" height=\"300\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/05varviringid-1024x615.png 1024w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/05varviringid-300x180.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/05varviringid-768x462.png 768w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/05varviringid-65x39.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/05varviringid-225x135.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/05varviringid-350x210.png 350w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption id=\"caption-attachment-375\" class=\"wp-caption-text\">Valguse (n\u00e4iteks monitori pikslite) ja materjalide v\u00e4rvide (n\u00e4iteks gua\u0161\u0161v\u00e4rvide) segunemine<\/figcaption><\/figure>\n<\/div>\n<p class=\"vspace\">Siinkohal olekski oluline teada kahte m\u00f5istet:<br \/>\n<strong>V\u00e4rvimudel<\/strong> \u2013 kuidas me t\u00e4histame arvutis erinevaid v\u00e4rve.<br \/>\n<strong>V\u00e4rviruum<\/strong> \u2013 millistele reaalsetele v\u00e4rvidele meie arvutis t\u00e4histatud v\u00e4rvid vastavad.<\/p>\n<h2>RGB v\u00e4rvimudel ja sRGB v\u00e4rviruum<\/h2>\n<p>Kuna monitorid kiirgavad iga piksli kohta eraldi punast (<strong>red<\/strong>), rohelist (<strong>green<\/strong>) ja sinist (<strong>blue<\/strong>) v\u00e4rvi, siis k\u00f5ige loogilisem variant arvutis v\u00e4rvi hoida olekski arvude kolmikuna, kus on kirjas nende kolme v\u00e4rvi intensiivsus. Sellist v\u00e4rvimudelit kutsutakse v\u00e4rvide ingliskeelsete nimetuste esit\u00e4htede j\u00e4rgi <strong>RGB v\u00e4rvimudeliks<\/strong>.<\/p>\n<p class=\"vspace\">Vastavalt olukorrale v\u00f5ime v\u00f5tta neid arve<\/p>\n<ol>\n<li>ujukomaarvudena vahemikust [0, 1] v\u00f5i<\/li>\n<li>t\u00e4isarvudena vahemikust [0, 255].<\/li>\n<\/ol>\n<h2>V\u00e4rvide esitamine ujukomaarvudena<\/h2>\n<p class=\"vspace\">Esimesel juhul v\u00f5ime m\u00f5elda igast komponendist kui protsendist, kui palju maksimaalsest peab vastavat v\u00e4rvi kiirgama konkreetse piksli sees. N\u00e4iteks kolmik (1, 0, 0) t\u00e4hendaks, et piksel peab olema maksimaalselt punane ja rohelist ning sinist v\u00e4rvi ei kiirga \u00fcldse. Kolmik (0.5, 0.5, 0) t\u00e4hendaks sellisel juhul, et punast ja rohelist on vaja kiirata 50% ning sinist \u00fcldse mitte. Selline kolmik annaks meile tumekollase v\u00e4rvi. Tegelikkuses aga, kui me saadame sellise kolmiku monitorile, siis on meie piksel tumedam kui \u00f5ige 50% kollane, mida monitor n\u00e4idata suudaks. See on nii selle p\u00e4rast, et nii ajaloolistel kui ka praktilistel p\u00f5hjustel saadab monitor k\u00f5ik v\u00e4rvid l\u00e4bi funktsiooni <em>tulemus = v\u00e4rv<sup>\u03b3<\/sup><\/em> (v\u00e4rv astmel \u03b3), kus kreeka t\u00e4ht \u03b3 (<strong>gamma<\/strong>) v\u00f5ib olla erinevatel monitoridel erineva v\u00e4\u00e4rtusega.<\/p>\n<p class=\"vspace\">\u00dcldiselt on hea arvestada \u03b3 v\u00e4\u00e4rtuseks umbes 2,2 (vaata ka n\u00e4iteks: <a class=\"urllink\" href=\"http:\/\/epaperpress.com\/monitorcal\/gamma.html\" target=\"_blank\" rel=\"noopener\">http:\/\/epaperpress.com\/monitorcal\/gamma.html<\/a>). See funktsioon astendab k\u00f5ik arvud meie kolmikus astendajaga \u03b3 ja kuna arvud on vahemikust [0, 1], siis nende v\u00e4\u00e4rtused muutuvad v\u00e4iksemaks. Probleemi lahendamiseks tuleks otse monitorile saadetav v\u00e4\u00e4rtus enne ise astendada \u03b3 p\u00f6\u00f6rdv\u00e4\u00e4rtusega 1\/\u03b3.<\/p>\n<h2>V\u00e4rvide esitamine t\u00e4isarvudena<\/h2>\n<p class=\"vspace\">Vaatame korraks ka eelnevalt mainitud vahemikku [0, 255] v\u00e4rvikanalite v\u00e4\u00e4rtuste jaoks. Sellel vahemikul on mitu p\u00f5hjust. Esiteks, kuna arvutid hoiavad erinevaid v\u00e4\u00e4rtusi binaar- ehk kahends\u00fcsteemis, siis on v\u00e4\u00e4rtuste hoidmiseks vahemikust [0, 255] vaja v\u00e4hem m\u00e4lu. Nimelt kahends\u00fcsteemis hoitakse k\u00f5iki v\u00e4\u00e4rtusi 0 ja 1 kombinatsioonidena ja kui meil on kaheksa kohta arvude 0 v\u00f5i 1 jaoks, siis on v\u00f5imalik kujutada k\u00f5iki v\u00e4\u00e4rtusi [0, 255], kuid mitte midagi rohkemat (vaata ka videot <a class=\"urllink\" href=\"https:\/\/www.youtube.com\/watch?v=UBX2QQHlQ_I\" target=\"_blank\" rel=\"noopener\">https:\/\/www.youtube.com\/watch?v=UBX2QQHlQ_I<\/a>).<\/p>\n<p class=\"vspace\">Teine p\u00f5hjus on, et inimesele on loetavam (100, 140, 0) kui (0.3922, 0.5490, 0). Kusjuures paljudes kohtades kasutatakse ka heksadetsimaal- ehk kuueteistk\u00fcmnends\u00fcsteemi. Tolles s\u00fcsteemis on meil lisaks tavalistele numbritele 0, 1, 2, 3, 4, 5, 6, 7, 8 ja 9 ka veel juures numbrid A, B, C, D, E ja F. \u00dclaltoodud n\u00e4ide oleks kuueteistk\u00fcmnends\u00fcsteemis (64, 8C, 0). K\u00f5ige suurem arv, mida me kahe s\u00fcmboliga kuueteistk\u00fcmnends\u00fcsteemis kujutada saame, ongi k\u00fcmnends\u00fcsteemi 255, mis kirjutatakse FF. Veebilehtede arenduses kasutatakse justnimelt seda s\u00fcsteemi v\u00e4rvide defineerimiseks ning seal kirjutatakse meie kolmik trellide s\u00fcmboli j\u00e4rele j\u00e4rjest: #648C00.<\/p>\n<div class=\"vspace\"><\/div>\n<div class=\"img imgcaption\">\n<figure id=\"attachment_376\" aria-describedby=\"caption-attachment-376\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-376\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/12systeemid-1024x672.png\" alt=\"\" width=\"600\" height=\"394\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/12systeemid-1024x672.png 1024w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/12systeemid-300x197.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/12systeemid-768x504.png 768w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/12systeemid-65x43.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/12systeemid-225x148.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/12systeemid-350x230.png 350w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-376\" class=\"wp-caption-text\">Arvud kahend-, k\u00fcmnend- ja kuueteistk\u00fcmnends\u00fcsteemis<\/figcaption><\/figure>\n<\/div>\n<div class=\"vspace\"><\/div>\n<div class=\"img imgcaption\">\n<figure id=\"attachment_377\" aria-describedby=\"caption-attachment-377\" style=\"width: 268px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-377\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/sRGB-268x300.png\" alt=\"\" width=\"268\" height=\"300\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/sRGB-268x300.png 268w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/sRGB-768x858.png 768w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/sRGB-65x73.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/sRGB-225x251.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/sRGB-350x391.png 350w, https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-content\/uploads\/sites\/6\/2019\/02\/sRGB.png 800w\" sizes=\"auto, (max-width: 268px) 100vw, 268px\" \/><figcaption id=\"caption-attachment-377\" class=\"wp-caption-text\">sRGB vs inimese v\u00e4rvide n\u00e4gemisulatus<\/figcaption><\/figure>\n<\/div>\n<p class=\"vspace\">Laiem k\u00fcsimus on see, mis v\u00e4rve ikkagi meie RGB v\u00f5i ka m\u00f5ni teine v\u00e4rvimudel kujutab ehk millisele v\u00e4rviruumile ta vastab. V\u00e4rvide n\u00e4gemise ulatus inimestel on suurem kui see, mida monitorid suudavad v\u00e4ljastada. Ei ole pragmaatiline teha sellist monitori, mis suudaks n\u00e4idata k\u00f5iki n\u00e4htava spektri (valguse lainepikkuste) v\u00e4rve. Parempoolsel joonisel kolmnurga sees on k\u00f5ik v\u00e4rvid, mis on kujutatud enimlevinud sRGB v\u00e4rviruumis. Terve suurem kujund on kogu v\u00e4rvide n\u00e4gemisulatus inimestel.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":12,"menu_order":7,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-369","chapter","type-chapter","status-publish","hentry"],"part":97,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters\/369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":6,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters\/369\/revisions"}],"predecessor-version":[{"id":422,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters\/369\/revisions\/422"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/parts\/97"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapters\/369\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/media?parent=369"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/pressbooks\/v2\/chapter-type?post=369"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/contributor?post=369"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/programmeerimine\/wp-json\/wp\/v2\/license?post=369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}