Haudi.

Olet saapunut portfoliooni, joka on osa Aalto-yliopiston teknillisen korkeakoulun informaatioverkostojen Studio 4 -kurssia. Kurssin tavoitteena on omaksua ohjelmoitavan tietokonegrafiikan peruskäsitteistö luovan ryhmätyöskentelyn avulla. Ohjemointiharjoituksissa on käytetty java-pohjaista Processing-ympäristöä.

Tällä sivulla on esiteltynä kolmen ryhmätyöharjoituksen sekä kahden yksilötehtävän tuotoksia. Kunkin harjoituksen yhteydessä on linkki valmiiseen työhön ja lähdekoodiin.


Harjoitus 0 - Piirto-ohjelma

piirto-ohjelma

Ns. nollaharjoituksen ideana oli tutustua tulevissa harjoituksissa käytettävään Processing-ympäristöön yksinkertaisen piirto-ohjelman avulla. Toteutuksessa tuli huomioida erityisesti piirtotyökalujen monipuolisuus.

Processingin piirtämiseen liittyviä esimerkkejä tutkaillessani ihastuin välittömästi piirtämisnopeuteen reagoivaan kuvioon. Lähdinkin tekemään koko harjoitusta tämän innoittamana. Halusin ehdottomasti myös sisällyttää harjoitukseen jonkinlaisen jujun, joten aloin rakentaa työtä kuplateeman ympärille. Kuplat olivat luonnollinen aihe kuvattavaksi vaihtelevankokoisin ympyröin. Aiheeseen sopivat kaikki ne elementit, joita halusin käyttää. Pääsin hyödyntämään läpinäkyvyyttä, hienoisia sävyeroja sekä luomaan vaihtelua ja perspektiiviä kuviin litteillä soikioilla. Mielestäni oli hauskaa pystyä myös kumittamalla luomaan kuplanmuotoisia jälkiä. Näiden lisäksi piirto-ohjelmassani oli ruudun tyhjentävä clear-toiminto.

Harjoitus tutustutti oivasti etenkin siihen, miten Processingin avulla sijoitellaan elementtejä. Asemointi oli melko työlästä, jos halusi saada nappulat siisteihin, tasaisiin riveihin, mutta toisaalta menetelmä oli hyvin yksinkertainen. Eniten päänvaivaa tuotti se, miten voisin mahdollisimman vähällä tekstillä kuvata työkalujeni toimintoja. Mielestäni onnistuin tässä kuitenkin jokseenkin kohtuullisesti niin, ettei kehno symbolien valinta ainakaan haittaa ohjelman käyttämistä.

Ohjelmaan jäi eräs epäloogisuus. Paljastan sen nyt rehellisesti tässä. Kun kuplia piirtää tarpeeksi nopeasti, halusin, että ne eivät rajaudu poikki piirtoalueen mukaan vaan tulevat kauniisti ikäänkuin ulos kehyksistä. Clear-toiminnon yhteydessä taustakuvaa ja nappeja ei kuitenkaan piirretä uudelleen, jolloin isojen kuplien reunoja saattaa jäädä kummittelemaan uuden kuvan kehysten ulkopuolelle.

Kaiken kaikkiaan piirto-ohjelmani onnistui kuitenkin oikein mukavasti. Sillä on kiva leikkiä ja se myös onnistui opettamaan minulle paljon käyttöliittymän ja toimintologiikan suunnittelusta hyvin lyhyessä ajassa. Se, että harjoitus tehtiin yksittäin, palveli mielestäni oivasti koodausmielialan rakentamista, lähtötason luomista ja perusteiden ymmärtämistä: koodiin syventyminen ja erilaisten toimintojen testailu oli paljon helpompaa kun se tehtiin rauhassa itsenäisesti. Myös harjoituksen aihe oli minulle erittäin mieleinen. Aluksi olin hieman skeptinen sen suhteen saisinko muutamassa päivässä aikaiseksi kunnollisen pienen piirto-ohjelman, jossa olisi lisäksi jokin teema, mutta yllätyksekseni Processingin valmiit esimerkit antoivat hyvän lähtövauhdin ja pohjan jatkokehitysideointiin. Olin hämmästynyt, että aivan kaikkea ei tarvitsekaan pähkäillä alusta asti itse.

Harjoitus 1 - Tietokonetaide

Ensimmäisessä ryhmätyöharjoituksessa tehtiin taidetta tietokoneella. Ideat lähtivät heti hyvin lentoon ja liikkuivat alusta asti fraktaalikuvioiden läheisyydessä. Ajatuksemme jalostui lopulta hiekasta rakentuvaan taideteokseen, jota voisi jollakin tapaa pyörittelemällä ja heiluttelemalla muuttaa. Lopulliseen työhön valittiin norjalaisen Edvard Munchin ekspressionistinen maalaus ”Huuto”, josta ohjelmamme avulla saa muodostettua partikkeleista koostuvaa sävykästä sumua. Työssä kiinnitettiin huomiota siihen, että ohjelmaan voidaan helposti ladata mikä hyvänsä kuva.

huuto-ohjelma

Ensimmäisessä harjoituksessa kohtasimme aihevalinnasta sekä ryhmäläisten erilaisista koodaustaustoista kumpuavia haasteita. Jälkikäteen tarkasteltuna olimme kaikki yhtä mieltä siitä, että aihe olisi pitänyt valita soveltumaan paremmin myös niille, joilla koodaus ei ollut vielä sujuvassa muistissa. Toteutuksen rakentaminen nojasi harjoituksessa valitettavasti hyvin pitkälti yhden ryhmäläisen osaamiseen. Itse keskityin pääasiassa yksittäisten vektorikenttämuutosten mallintamiseen sekä idean jalostamiseen. Vaikka koodaustyö ei jakautunutkaan tasaisesti ryhmäläisten kesken, opin itse paljon partikkelisysteemeistä ja vektorikentistä jo pelkästään syventyessäni aiheesta kertovaan kirjallisuuteen sekä ryhmäläisen esseeseen.

Lopullinen työ onnistui tyydyttävästi ja palautettiin ajoissa. Joitakin ominaisuuksia, kuten kuvien automaattinen generointi ja paikallisempi kuvan manipulointi jouduttiin karsimaan. Tästä huolimatta sanoisin, että ryhmämme oppi tässä harjoituksessa yhteistyöstä enemmän kuin missään myöhemmistä tehtävistä, mikä loi hyvän perustan myöhemmille harjoituksille. Olimme oppineet suunnattomasti erityisesti aihevalinnan tärkeydestä siinä mielessä, että kaikkien ryhmäläisten osaamista pystytään hyödyntämään tasapainoisesti.

Harjoitus 2 - Visualisointi

Visualisointityön ideana oli esittää informaatiota uudessa, havainnollisemmassa muodossa tai nostaa siitä esille jokin muutoin vaikeammin havaittava piirre. Ryhmämme innostui jalkapalloteemasta. Sen sijaan, että olisimme käsitelleet kuitenkaan yksittäistä ottelua, halusimme esityksen kattavan jonkin arvokisaturnauksen kokonaisuudessaan. Tavoitteena oli, että katsoja voisi vaivattomasti seurata yleiskuvaa eri maiden menestyksestä turnauksessa.

Koko harjoitus rakentui vektorimuotoisen kartan päälle, ja tukea aiheeseen saatiin ryhmäläisen esseestä. Kartta laadittiin niin, että yksittäisiä valtioita voitiin korostaa värityksellä. Ideana on, että kunkin maan punaisuuden aste osoittaa kuinka pitkälle joukkue on päässyt. Yhä turnauksessa mukana olevien joukkueiden välillä pomppii palloanimaatio indikoiden, että otteluiden voittajia ratkaistaan näiden maiden kesken parhaillaan.

jalkapalloturnauksen visualisointi

Turnauksen eritasoisten otteluiden tulokset on talletettu yksinkertaiseen tekstitiedostoon. Valmiissa ohjelmassa on kaksi turnausesimerkkiä, jalkapallon MM-kisat 2002 sekä 2006, mutta ohjelma on helposti laajennettavissa koskemaan mitä hyvänsä muutakin vastaavalla logiikalla etenevää turnausta.

Päätös karttapohjaisuudesta syntyi nopeasti. Tällainen toteutustapa oli ryhmälle mielekäs ja ylipäätään selkeä ja visuaalisesti miellyttävä. Animaation tueksi kuitenkin sijoitettiin näkymän alareunaan infopalkki kertomaan tapahtumista tekstin muodossa. Lisäominaisuutena turnausta voi kelata taso kerrallaan eteenpäin. Lohkovaiheen suurta pallojen määrää haluttiin selkeyttää hieman määrittelemällä samassa lohkossa pelaaville samanväriset pallot. Visualisoinnin tarkoituksena nimenomaan ei kuitenkaan ole auttaa hahmottamaan täsmällisesti kuka pelaa ketäkin vastaan ja missä lohkossa, vaan luoda vaikutelma siitä, ketkä turnauksessa ylipäätään ovat mukana. Loppuvaiheessa näkee mielestäni erittäin kuvaavasti, mitkä maat ovat kisoissa pärjänneet ja kuinka pitkälle he ovat päässeet.

Tässä tehtävssä osallistuin varsin monipuolisesti eri tehtäviin. Olin toteuttamassa muun muassa turnaustiedoston lukemista ja ottelun etenemislogiikkaa. Ylläpidin koodin kommentointia ja jäsentelin yhdessä muiden kanssa luokka- ja metodirakenteita. Vaikutin myös ohjelman ulkoasuun paljon. Olin käsittelemässä palloja ja lopetuspokaalia sekä valitsemassa voittofanfaarin. Toteutimme pallon animaatioita ja pehmeän lentokaaren yhteistyönä. Ylipäätään ryhmätyö toteutettiin pääasiassa niin, että yksi tai kaksi ihmistä työskenteli saman asian parissa ja tarvittaessa muut neuvoivat ympärillä. Vaihtelimme työnjakoa tiimin sisällä, jonka seurauksena pääsin itsekin ohjelmalogiikan ja ulkoasun lisäksi esimerkiksi tutustumaan vektorigrafiikan muokkaamiseen suoraan koodiin. Suurin anti oli kuitenkin kokonaisuuden rakentaminen ja eri tehtävien ja palasten yhteensitominen sekä tämän prosessin tuloksen tuominen näkyväksi. Itselleni suuressa roolissa oli myös ryhmän yhteinen ja tasapuolisempi tekeminen.

Mielestäni lopputulos vastasi jopa odotettua paremmin tavoitteitamme. On totta, että visualisointimme ei palvele yhtä hyvin esimerkiksi juuri yksittäisten otteluiden hahmottamista, mutta tehtävänannon mukaisesti onnistuimme mielestäni todella hyvin nostamaan kauniisti esille dataan muutoin tyypillisesti hukkuvan piirteen: valtioiden menestysasteet yksittäisessä jalkapalloturnauksessa alueellisesti ilmaistuna.

Harjoitus 3 - Vuorovaikutus

puuhakirja

Seuraava harjoitus laajensi käsitystämme vuorovaikutustekniikoista. Lähdimme toteuttamaan laajennuskelpoista puuhakirjaa, jonka tehtäviä voisi ratkaista ilmaan piirtämällä. Ohjausmenetelmäksi valikoitui aiemminkin kurssilla käytetty värillinen post-it tai muu esine, jonka liikettä seurataan webkameralla.

Lopputulokseen kuului kahta esilaista puuhastelua tarjoava ohjelma, jota voi käyttää sekä hiiri, että kameraohjauksella. Molempia tehtävätyyppejä (pisteenyhdistys ja labyrintti) oli kaksi eri vaikeustason tehtävää. Lisäksi ohjelmaan sisältyi kalibrointinäkymä, jolla haluttu esineen väri tallennettiin ohjelman tietoon.

Tässä tehtävässä työnjako oli selkeälinjaisempi kuin aiemmin. Itse tein toisen ryhmäläisen kanssa tehtävien toteutusta hiiriohjauksella ja loput ryhmän jäsenet keskittyivät kameraohjaukseen ja sen integroimiseen muuhun ohjelmaan. Lisäksi olin ideoimassa valikkoa ja hoidin myös suuren osan toteutuksesta. Ongelmia kohdattiin laite-ja selaintuen osalta, eikä ohjelmasta tullut täydellisen hiottu, mutta kokonaisuudesta kehkeytyi kuitenkin selkeä ja rakenteeltaan toimiva.

Harjoituksen suurinta antia itselleni oli labyrintin logiikan laatiminen sellaiseksi, että uusia kenttiä voi mahdollisimman vaivattomasti ladata lisää. Pohdin tähän ratkaisua useista eri lähtökohdista, mutta lopulliseen versioon seinien ja maalin tunnistus tehtiin värien perusteella. Oman viehätyksensä tehtävään loi valikon suunnittelu. Puuhavalikko haluttiin mahdollisimman yksinkertaisesti ohjattavaksi, ja mielestäni ideani puumaisesta rakenteesta hyödyntää kivasti erikoista ohjausmenetelmää.

Lopputulos oli mielestämme siinä määrin onnistunut, että halusimme esitellä sen loppuesityksessä muille ryhmille ja kurssin henkilökunnalle. Omasta puolestani voin sanoa, että en kokenut onnistumisen tunnetta pelkästään odotuksia vastaavasta ohjelmasta, vaan suuresti myös ryhmätyöskentelyn sujuvuudesta.

Harjoitus 4 - 3D-grafiikka

essee varjoista 3d-grafiikassa

3D-grafiikkaa koskevalla kierroksella oli vuoroni tehdä essee. Aihe oli mielestäni kerrassaan kiehtova, ja tuolloin oli mielestäni milteipä sääli, että en voinut olla tässä harjoituksessa yhtä konkreettisella tasolla mukana kuin edellisissä. Mieleni kuitenkin muuttui kun pääsin uppoutumaan yhä syvemmälle 3D-mallinnuksen saloihin.

Vaikka aiheeni on melko spesifi osa-alue 3D-grafiikan suunnittelua, sain samassa yhteydessä verrattomasti ymmärrystä 3D-grafiikan perusteista ja miten erilaisilla tavoilla aihetta ylipäätään voidaan lähestyä. Aihevalinta selkisi vasta loppumetreillä tutustuttuani suureen määrän eri aihealueita.

Tarkoituksenani oli kuvata varjojen merkitystä visuaalisuuden kannalta, mutta kuvata myös tunnetuimpia menetelmiä keinotekoisten varjojen mallintamiseen. Lähtökohtana oli käsitellä varjoja erityisesti nykyaikaisella grafiikalla varustettujen pelien näkökulmasta, mutta sisältö ei ole mitenkään rajoitettu vain tähän sovellusalaan. Käytin esseessä paljon kuvia, koska tuntuisi kummalliselta käsitellä näin vahvasti visuaalista aihetta pelkän kuvailun pohjalta. Löysin aiheesta hyviä lähteitä, joista erityisesti mielenkiintoni herätti varjojen suunnittelusta kertova artikkeli.

Olen oikein tyytyväinen esseeseen. 3D-grafiikan suhteen täysin nollatasolta lähteneenä pystyin mielestäni perehtymään riittävän paljon myös varjojen luomisessa käytettäviin teknisiin ratkaisuihin. Erityisesti pääsin kuitenkin tarkastelemaan ja erittelemään varjojen visuaalista merkitystä, mikä oli suurin kiinnostuksen kohteeni tässä työssä.

Suureksi harmikseni palautusversiosta unohtui kanteen valitsemani hämyisä kuva, joka oli mielestäni oiva johdatus erilaisten varjojen maailmaan. Lohdutukseni laitoin oheiseen kuvaan mallin siitä, millainen varsinaisen esseen kansi olisi pitänyt olla.


Loppusanat

Kaiken kaikkiaan kurssin aikana kehityin valtavasti puhtaan koodaamisen lisäksi arkkitehtuurin suunnittelussa ja toimintojen koordinoinnissa. Kaikki toteutuksemme olivat rakenteeltaan mielestäni erittäin onnistuneesti ja tarkoituksenmukaisesti jäsenneltyjä. Oli myös antoisaa päästä yhdessä ideoimaan niin ohjelmien sisältöä ja toimintaa kuin visuaalisia elementtejäkin. Ryhmätyömme parani mielestäni ensimmäisestä harjoituksesta alkaen suurin harppauksin, ja oli ilahduttavaa, että kaikkien taitoja ja panosta pystyttiin hyödyntämään niin hyvin. Aiheiden puolesta kurssi oli harvinaisen onnistunut: jokainen harjoitus toi mukanaan jotain uutta ja kiinnostavaa olematta aivan tarpeettoman mahdoton tehtävä. Jos kurssilla oli tarkoitus herättää kiinnostusta tietokonegrafiikkan ja sen eri puoliin, niin omalla kohdallani se siinä onnistui. Kiitos!

  • Sivut optimoitu Mozilla Firefoxille
  • Päivitetty 16.5.2010
  • - Karoliina Liimatainen