<<

10.12.2014

>>

Saksan- ja venäjänkieliset pienet artikkelit teknisistä aiheista tarvitsevat havainnollista graafista esitystä. Osittain tämä voi olla "staattisia" piirroksia, kuvitusta jonka teen piirtämisohjelmalla.

Tarvitaan kuitenkin myös dynaamista grafiikkaa joka syntyy ja muuttuu ajonaikaisesti. Dynaamista grafiikkaa voi luoda uudemmissa selaimissa JavaScript-ohjelmalla HTML5 Canvas-elementille. Tällainen ratkaisu ei vaadi palvelinyhteyttä jokaisessa uudessa kutsussa koska ohjelma toimii käyttäjän selaimessa eikä palvelimella.

Tarpeen voi jakaa karkeasti 2D- ja 3D-grafiikkaan. Kaksiulotteinen grafiikka voisi olla esim. esitysgrafiikkaa, erilaisia käyriä, diagrammeja ja kaavioita. Kolmiulotteinen perustuisi 3D-malleihin joita voisi katsella valinnan mukaan eri suunnista.

3D-grafiikan synnyttämisessä ajattelin käyttää apuna ja henkisenä tukena ohessa kuvattua Java-kielistä ohjelmointikirjaa, joka tosin ei suoraan käy JavaScriptille, mutta samoja periaatteita voinee soveltaa.

Yksinkertainen "rautalankagrafiikka" on varsin helppo toteuttaa, sillä ei tarvitse välittää siitä mikä viiva on minkäkin edessä tai takana. Kappale on läpinäkyvä, sen ääriviivat näkyvät pintojen läpi. Tällaista olen tehnyt aiemminkin, mutta se ei ole tyydyttävää koska esim. metalliset hammaspyörät ovat täyteisiä ja läpinäkymättömiä kappaleita.

Valaistuskin olisi hyvä olla mukana, mutta en pyri varsinaiseen fotorealismiin. Tavoite on vain 3D-kappaleiden hyvä havainnollistaminen. En yritä tehdä mitään SolidWorks-ohjelmaa JavaScriptillä. 3D-mallien pisteet ja pinnat esitetään JavaScriptin taulukoina.

Havainnollisuuteen pyrkivä 3D-kappaleiden pintojen esittäminen on yksinkertaisinta ns. maalarin algoritmilla. Se ei toimi oikein aivan kaikille tapauksille, mutta yleensä ongelmatapaukset pystynee välttämään. Vaihtoehto (Z-buffer) olisi ehkä liian raskas toteuttaa.

Piiloviivojen poisto (eli pintojen taakse katsojan näkymättömiin jäävien viivojen piirtämättä jättäminen) ääriviivapiirroksessa vaatii omat ratkaisunsa. Seuraavat kuvat havainnollistavat eri algoritmien tuloksia eräässä ongelmallisessa tapauksessa jossa kappaleet osittain peittävät toinen toistaan.

Maalarin algoritmissa piirretään ensin syvyyssuunnassa kauimpana olevat pinnat ja lähempänä olevat pinnat maalataan kylmästi muiden päälle. Näyttö ei ole mikään piirturi, joten se ei välitä. Samaan kohtaan tehdyistä maalauksista vain viimeksi maalattu jää näkyviin. Turhaa työtähän siinä sikäli tehdään, mutta algoritmi on kevyt. Lopputuloksessa pitäisi näkyä ainoastaan ne pinnat jotka näkyvät katsojan suuntaan, mutta jos kappaleilla ei ole yksikäsitteistä etäisyysjärjestystä niin algoritmi ei toimi täysin virheettömästi. Tällä epäkohdalla ei kuitenkaan välttämättä olisi minun käytössäni suurta merkitystä.

Helppokäyttöistä JavaScript-grafiikkaa ehkä kehittelen suomenkielisillä aihe-sivuilla teknisiä juttuja varten, mutta mahdollisesti Esperanto-sivuillekin tulee jotakin sitä sivuavaa, ehkä JavaScript-tiedostojen käyttöohjeet?

Äärimmäistä tehokkuutta ja monipuolisuutta tässä grafiikassa ei tavoitella. Jokin arvo kuitenkin on myös sillä että ilmaiset graafiset menetelmät ovat helposti otettavissa käyttöön ja toimivat tavallisella kotikoneella tuottaen havainnollisia ja hyödyllisiä kuvia. Pienikin voi olla kaunista - ja mikrovaltiossa pienen on pakkokin olla kaunista!

Mikrovaltio Myllynsaaren hallitsija
Sameli IV "Julkea"


Valikko
Pääsivu