Oletko rakentanut legopalikoilla? Harvassa taitaa olla ne, joilla ei olisi minkäänlaista legokokemusta. Tietokonemaailmassa näytölle piirtyvä kuva on legopikseleiden yhteistyötä. Näyttöruudulle tulevat asiat koostuvat siis pikseleistä. Pikselit ovat erittäin pieniä murusia, valopisteitä, joita vieri viereen latomalla saadaan aikaan hienoa grafiikkaa. Koodauksessa kuvan tuottaminen tapahtuu siis palikka kerrallaan.

Kuva koostuu pikseleistä

Oma sovelluskehityksen opettelu ajoittuu siihen aikaan, jolloin grafiikan eteen täytyi tehdä melkoisen paljon ohjelmakoodia. Kokonaisen käyttöliittymän luominen vaati paljon viivojen, ympyröiden, suorakaiteiden ja yksittäisten pikseleiden asettamista ruudulle.

bittimuseo-mosaiikki-koodausta-palikka-kerrallaan
Tämä mosaiikki havainnollistaa, miten kuva muodostuu palasista.

Voit tarkastella esimerkiksi tätä edessäsi olevaa nettiselaimen näkymää. Ensiksi selain sisältää oman ikkunakehyksensä. Selainikkuna sisältää erilaisia toimintopainikkeita ja valikoita. Valikoista avautuu toimintoja tai sivupalkkeja voidaan aktivoida. Nämä kaikki tulee piirtää jokaisen pikselin osalta. 

Nykyään käyttöliittymän piirtämiseen käytetään valmiimpia ns. komponenttikirjastoja ja myös graafisia suunnittelutyökaluja. Työkalut mahdollistavat käyttöliittymän piirtämisen valmiita ja tutun näköisiä käyttöliittymäosasia käyttäen. Sen vuoksi Microsoftin tai laajemmin Windowsinkin sovelluksissa on usein saman tyyppinen käyttöliittymä, ja Applen eri sovelluksissa taasen omansa.

bittimuseo-varikynat-koodausta-palikka-kerrallaan

Piirustusohjelmakin koostuu pikseleistä

Ajattelepa yksinkertaista piirustusohjelmaa. Kun aikanaan sellaista toteutin, piirsin suorakaiteista näytön yläreunaan työkaluvalikon. Yksi laatikko piirtyi yhdellä komennolla. Samaa komentoa toistettiin eri kohtaan ruudulla. 

Yhteen laatikkoon sijoitin kynää muistuttavan välineen. Se piti piirtää pieniä viivoja yhdistelemällä. Seuraavaan valikkoon lisäsin viivan piirto -toiminnon. Sitten suorakaide, ympyrä, värin valitsin ja niin edelleen. Kun painiketta painoi, työkalu vaihtui mutta välttämättä painike ei näyttänyt mitenkään reagoivan. Jos painike-efektin halusi toteuttaa, piti piirtää jonkinlainen hetkellinen värin vaihtuminen ja mahdollisesti eri kohtaan työkalun kuvan piirtäminen, jotta se näyttäisi liikahtavan hiiren klikkauksen yhteydessä.

Olenkin sanonut, että siihen aikaan kaikki piirrettiin pikseli kerrallaan. Sovelluskehityskieli sisälsi erilaisia valmiita peruskomentoja, ja niitä soveltamalla tehtiin varsinainen näytettävä kokonaisuus. Perustoimintojen avulla piirtämiseen oli hiukan apuja, jolloin esimerkiksi maalatun suorakaiteen piirtäminen oli nopeampaa. Vaihtoehtona olisi toteuttaa toistuva piirtokomento, joka piirtää yhden väripisteen esimerkiksi sata kertaa viereen, ja sata kertaa näiden sadan pisteen alle. Nykyään kehitystyökalut tarjoavat paljon pidemmälle meneviä vaihtoehtoja, ja niihin palaamme toisella kertaa.

bittimuseo-nayttografiikka-koodausta-palikka-kerrallaan

Tietokoneen näytössä on melkoisen paljon tässäkin jutussa mainittuja pienen pieniä pikseleitä. Vielä C64-aikaan grafiikka oli kovin karkeaa. Kun näytön tarkkuus ja koko kasvavat, pikseleitä on entistä enemmän.

Bittimuseo kyselee, montako pikseliä on silloisessa 640 x 480 pikselin näytössä?


Kiitokset kuvista / Thank you for the pictures:


Kiitos kun jaat ystävillesi!