{"id":6282,"date":"2020-12-16T10:50:01","date_gmt":"2020-12-16T08:50:01","guid":{"rendered":"http:\/\/www.kameli.net\/marq\/?p=6282"},"modified":"2020-12-16T10:50:01","modified_gmt":"2020-12-16T08:50:01","slug":"vanha-koira-ja-p5-js","status":"publish","type":"post","link":"http:\/\/www.kameli.net\/marq\/?p=6282","title":{"rendered":"Vanha koira ja P5.js"},"content":{"rendered":"\n

En ole koskaan erityisemmin kiinnostunut JavaScriptist\u00e4 — perinteisten tyypitettyjen kielten suunnasta tulevalle “kaikki k\u00e4y” -asenne ei tule luonnostaan, mink\u00e4 lis\u00e4ksi kaikenlaisten kirjastojen ja alustojen kirjo on jokseenkin masentava. Samaan aikaan on toki pakko my\u00f6nt\u00e4\u00e4, ett\u00e4 JS on nykyp\u00e4iv\u00e4\u00e4 ja kehittynyt hurjasti takavuosien turhista mouseover-ajoista. Aina v\u00e4lill\u00e4 olisi my\u00f6s ihan k\u00e4tev\u00e4\u00e4 saada oma Processing-kikkare webaselaimen kautta muiden n\u00e4ht\u00e4v\u00e4ksi, kun Java-applettien aika on auttamattomasti ohi.<\/p>\n\n\n\n

Olen k\u00e4ytt\u00e4nyt sillanrakennukseen aiemmin Processing.js:\u00e4\u00e4<\/a>, joka kuitenkin lakkasi jossain vaiheessa p\u00e4ivittym\u00e4st\u00e4 eik\u00e4 ollut muutenkaan koskaan t\u00e4ysin ongelmaton. Pienet kikkarat siirtyiv\u00e4t kyll\u00e4, mutta v\u00e4h\u00e4nkin mutkikkaamman p\u00e4tk\u00e4n kanssa tuli nopeasti sein\u00e4 vastaan. Tuoreempaa tulokulmaa edustaa v\u00e4limallin ratkaisu P5.js<\/a>, joka on l\u00e4hinn\u00e4 kirjasto Processingin k\u00e4tevi\u00e4 funktioita JS:lle. P5.js on sik\u00e4li virallinen ja tunnustettu, ett\u00e4 sit\u00e4 voi kirjoitella suoraan Processingin editorilla, kunhan vaan asentaa tarvitun laajennuksen. Sketsi\u00e4 ajettaessa lopputulos menee suoraan tabiksi oletusselaimeen, eik\u00e4 ymp\u00e4rille tarvitse onneksi r\u00e4pelt\u00e4\u00e4 itse mit\u00e4\u00e4n HTML\/CSS-purkkaa.<\/p>\n\n\n\n

Ensimm\u00e4isen\u00e4 yritelm\u00e4n\u00e4 oli joulun aikaan sopiva piirto-ohjelma, joka peilaa hiirell\u00e4 piirrett\u00e4v\u00e4n viivan kahteentoista kertaan symmetrisesti. H\u00e4rp\u00e4ttimell\u00e4<\/a> saa helposti aikaan etenkin lumihiutaleita (sek\u00e4 pitsip\u00f6yt\u00e4liinoja):<\/p>\n\n\n\n

\"\"<\/a>
Lumi on jo peitt\u00e4nyt canvasin webasessa.<\/figcaption><\/figure>\n\n\n\n

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

Sormiharjoituksena tiivistin viel\u00e4 koodin mahdollisimman lyhyeksi, miss\u00e4 puuhassa tuli opittua sit\u00e4 sun t\u00e4t\u00e4 uutta jekkua. Luettavuus on edelleen yll\u00e4tt\u00e4v\u00e4n hyv\u00e4, joten en varmaankaan osannut viel\u00e4 k\u00e4ytt\u00e4\u00e4 kaikkia mahdollisia optimointikonsteja: frozen3.js<\/a>. P\u00e4tk\u00e4\u00e4 voisi toki viel\u00e4 merkitt\u00e4v\u00e4sti lyhent\u00e4\u00e4 toiminnallisuutta heikent\u00e4m\u00e4ll\u00e4 — vaikkapa kumituksen poistolla ja v\u00e4rej\u00e4 rumentamalla — mutta moinen kikkailu ei ole j\u00e4rin kiinnostavaa. Tulipa nyt t\u00e4t\u00e4kin kokeiltua ja tulevaisuudessa ehk\u00e4 lis\u00e4\u00e4kin.<\/p>\n\n\n\n

\"\"<\/a>
Mik\u00e4\u00e4n pakkohan ei ole piirt\u00e4\u00e4 hiutaleita.<\/figcaption><\/figure>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

En ole koskaan erityisemmin kiinnostunut JavaScriptist\u00e4 — perinteisten tyypitettyjen kielten suunnasta tulevalle “kaikki k\u00e4y” -asenne ei tule luonnostaan, mink\u00e4 lis\u00e4ksi kaikenlaisten kirjastojen ja alustojen kirjo on jokseenkin masentava. Samaan aikaan on toki pakko my\u00f6nt\u00e4\u00e4, ett\u00e4 JS on nykyp\u00e4iv\u00e4\u00e4 ja kehittynyt hurjasti takavuosien turhista mouseover-ajoista. Aina v\u00e4lill\u00e4 olisi my\u00f6s ihan k\u00e4tev\u00e4\u00e4 saada oma Processing-kikkare webaselaimen kautta […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,25,24,26],"tags":[],"class_list":["post-6282","post","type-post","status-publish","format-standard","hentry","category-artsu","category-koodi","category-softat","category-visuaalit"],"_links":{"self":[{"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=\/wp\/v2\/posts\/6282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6282"}],"version-history":[{"count":1,"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=\/wp\/v2\/posts\/6282\/revisions"}],"predecessor-version":[{"id":6285,"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=\/wp\/v2\/posts\/6282\/revisions\/6285"}],"wp:attachment":[{"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6282"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.kameli.net\/marq\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}