Kategoriat
Animointi Koodaus Ohjelmointi Opetus p5.js Processing Visualisointi

Tutustu animointiin p5.js:n avulla…

Processing -ohjelmointikieltä käytetään maailmalla etenkin ohjelmoinnin opettamisessa ja se on helposti lähestyttävä, josta johtuen se on saanut suuren suosion erityisesti visuaalisten prototyyppien tekemisessä. p5.js:n avulla voidaan samoja asioita voidaan tehdä missä tahansa Web-selaimessa. Sillä voidaan esimerkiksi elävöittää Web-sivuja animaatioilla, sekä monilla muilla uusilla tavoilla. Siksi se onkin varsin mielenkiintoinen työkalu myös Web-ohjelmoijille.

p5.js on alunperin Lauren McCarthyn kehittämä JavaScript-kirjasto, joka on käytännössä Processing ja sen ohjelmointirajapinnat JavaScript -kielellä. Processing on avoimen lähdekoodin ajatukseen perustuva ohjelmointikieli, joka on tarkoitettu etenkin elektronisen taiteen luomiseen. Kieli perustuu oliopohjaiseen Javaan ja sen ovat kehittäneet Ben Fry ja Casey Reas 2000-luvun alussa MIT:n medialaboratoriossa.

p5.js-kirjastoa ja Processing -kieltä ylläpitää Processing Foundation.

Mitä tarvitset alkuun pääsemiseksi?

Koodin kirjoittamiseen sopii mikä tahansa tekstieditori (esim. Notepad++, Sublime Text jne.). Samoin koodia voi testata millä tahansa selaimella, joten se ei vaadi mitään erikoistyökaluja. Mikäli et halua ladata mitään omalle koneellesi, voit kokeilla myös verkkopohjaisessa koodieditorissa tästä.

JavaScript-koodi upotetaan HTML-sivuille <head>-tagien väliin. Varsinaisen p5.js-kirjaston voit ladata p5js.org:sta. Kirjasto otetaan käyttöön sijoittamalla p5.js tai p5.min.js tiedoston polku script-tagin src-parametriin.

<script src="js/p5.min.js"></script>

Varsinainen koodi kirjoitetaan script-elementin aloitus- ja lopetus-tagin väliin (<script> ja </script>). Koodia voidaan upottaa periaatteessa mihin kohtaan dokumenttia tahansa, mutta paras paikka on head-osiossa. Tällöin ohjelma ladataan ennen kuin suoritetaan runko eli body-osio.

<script language="javascript" type="text/javascript">
/* p5.js -koodi tänne */
</script>

Kun koodia tulee paljon, on hyödyllistä luoda erillinen sketch.js-tiedosto ja tallentaa koodit siihen. Tiedoston voi ottaa käyttöön script-tagin src-parametrilla.

<script src="sketch.js"></script>

Pääfunktiot

Ohjelman tekeminen aloitetaan luomalla funktio setup(), jossa määritellään käytettävät asetukset, kuten esimerkiksi piirtoalue (createCanvas) ja ruudun päivitysnopeus (frameRate). Näistä piirtoalueen koon määrittäminen on pakollinen.

function setup() {
  createCanvas(100, 100);
  frameRate(60);
}

Kun perusasetukset on määritelty, voidaan aloittaa varsinaisen esityksen tekeminen. Tämä tapahtuu luomalla funktio draw(), joka on ohjelman pääfunktio. Pääfunktion sisälle tuleva koodi suoritetaan kun sivu on ladattu.

Esimerkiksi ympyrän saa piirrettyä seuraavalla koodilla:

Piirtäminen ja koordinaatisto

Varsinainen piirtäminen tehdään esimerkiksi metodeilla ellipse() tai rect(). Metodeilla on parametreja. Näissä kahdessa metodissa parametrit ovat seuraavat: sijainti x-akselilla, sijainti y-akselilla, leveys, korkeus. Piirrettävän elementin väriä voidaan muuttaa komennolla fill(). Sen muuttujana on väriarvo heksadesimaalimuodossa (HTML-värit).

p5js_koordinaatisto

Koordinaatisto lähtee pisteestä nolla (0,0) ja yleensä se nähdään matematiikassa keskellä koordinaatistoa. Sillä on kaksi akselia, x ja y. Perinteisesti x-akseli kulkee vaakasuunnassa (leveys) osoittaen oikealle ja y-akseli osoittaen pystysuunnassa (korkeus) ylöspäin.

Tietokoneen ruudussa koordinaatiosto lähteen myös nollasta, mutta y-akseli kulkee alaspäin. Nollapiste (0,0) on näytön vasemmassa yläkulmassa.

Edellinen kuva koodina:

Animointi

Animointi voidaan määritellä monella tavalla, mutta lyhyesti animaatio on tekniikka, jossa liikkuva kuva toteutetaan kuva kuvalta. Perinteisesti animaatio voidaan on tehty kuvaamalla piirrettyjä pieniä muutoksia sisältäviä kuvia filmille tai tekemällä pieniä muutoksia fyysiseen malliin (esimerkiksi esineeseen, animaationukkeen tai vahaan), ja kuvaamalla nämä muutokset. Ydinajatus on se, että peräkkäin nopeasti vaihtuvat kuvat luovat illuusion liikkeestä. Animaatio voidaan toteuttaa tietokoneen avulla hieman samankaltaisesti.

Processing -kielen draw() -funktio on kuin yksittäinen kuva animaation kuvasarjassa. Funktio toistuu oletusarvoisesti 60 kertaa sekunnissa, jota voidaan muuttaa kutsulla funktiossa setup() metodia frameRate(). Esimerkiksi frameRate(30) päivittää kuvan 30 kertaa sekunnissa. Tämä tieto on tärkeää animaation tekemisessä. Liikettä saadaan aikaiseksi muuttamalla elementtien x- ja y-arvoja joka kerta kun ruutu päivittyy. Nopeus riippuu ruudunpäivityksen nopeudesta ja paljonko arvot muuttuvat.

Esimerkki:

Vinkki: Kokeile mitä tapahtuu kun muutat yllä olevassa editorissa ruundunpäivityksen (frameRate) arvoksi 20. Paina "Play" ja katso mitä pallon liikkeelle tapahtui.

Linkkejä

Kirjoittanut TeroA

Isä, insinööri ja opettaja, joka on erityisen kiinnostunut ihmisten ja teknologian välisestä vuorovaikutuksesta, kommunikoinnista ja visuaalisesta oppimisesta. Ikuinen optimisti ja haaveilija...