.Markku Reunanen.

Vanha koira ja P5.js

December 16th, 2020

En ole koskaan erityisemmin kiinnostunut JavaScriptistä — perinteisten tyypitettyjen kielten suunnasta tulevalle “kaikki käy” -asenne ei tule luonnostaan, minkä lisäksi kaikenlaisten kirjastojen ja alustojen kirjo on jokseenkin masentava. Samaan aikaan on toki pakko myöntää, että JS on nykypäivää ja kehittynyt hurjasti takavuosien turhista mouseover-ajoista. Aina välillä olisi myös ihan kätevää saada oma Processing-kikkare webaselaimen kautta muiden nähtäväksi, kun Java-applettien aika on auttamattomasti ohi.

Olen käyttänyt sillanrakennukseen aiemmin Processing.js:ää, joka kuitenkin lakkasi jossain vaiheessa päivittymästä eikä ollut muutenkaan koskaan täysin ongelmaton. Pienet kikkarat siirtyivät kyllä, mutta vähänkin mutkikkaamman pätkän kanssa tuli nopeasti seinä vastaan. Tuoreempaa tulokulmaa edustaa välimallin ratkaisu P5.js, joka on lähinnä kirjasto Processingin käteviä funktioita JS:lle. P5.js on sikäli virallinen ja tunnustettu, että sitä voi kirjoitella suoraan Processingin editorilla, kunhan vaan asentaa tarvitun laajennuksen. Sketsiä ajettaessa lopputulos menee suoraan tabiksi oletusselaimeen, eikä ympärille tarvitse onneksi räpeltää itse mitään HTML/CSS-purkkaa.

Ensimmäisenä yritelmänä oli joulun aikaan sopiva piirto-ohjelma, joka peilaa hiirellä piirrettävän viivan kahteentoista kertaan symmetrisesti. Härpättimellä saa helposti aikaan etenkin lumihiutaleita (sekä pitsipöytäliinoja):

Perustutoriaaleja googlaamalla pääsi nopeasti alkuun, eikä kokeiluun paljoa aikaa seonnut. Melko varmasti joitakin asioita tuli tehtyä tarpeettoman kierosti, mutta pluralismi näyttää olevan JS:lle luonteenomaista. Saman asian voi tehdä monella eri tavalla ja hyvin kyseenalainenkin “ratkaisu” saattaa vahingossa toimia. Mieluummin tietysti opettelisin alusta saakka niitä hyviä tapoja. Muuttujien näkyvyysalue ja esittely tuntuu edelleen hiukan randomilta: perinteinen var-tapa on oikeastaan ihan suoranaisen huono, mutta nykyään on sentään tarjolla järkevämpi let.

Sormiharjoituksena tiivistin vielä koodin mahdollisimman lyhyeksi, missä puuhassa tuli opittua sitä sun tätä uutta jekkua. Luettavuus on edelleen yllättävän hyvä, joten en varmaankaan osannut vielä käyttää kaikkia mahdollisia optimointikonsteja: frozen3.js. Pätkää voisi toki vielä merkittävästi lyhentää toiminnallisuutta heikentämällä — vaikkapa kumituksen poistolla ja värejä rumentamalla — mutta moinen kikkailu ei ole järin kiinnostavaa. Tulipa nyt tätäkin kokeiltua ja tulevaisuudessa ehkä lisääkin.

Filed under: artsu,koodi,softat,visuaalit