{"id":154,"date":"2020-03-24T23:08:32","date_gmt":"2020-03-24T23:08:32","guid":{"rendered":"https:\/\/uni.hi.is\/martin\/?p=154"},"modified":"2020-03-24T23:08:32","modified_gmt":"2020-03-24T23:08:32","slug":"fikt-med-paper-js","status":"publish","type":"post","link":"https:\/\/uni.hi.is\/martin\/2020\/03\/24\/fikt-med-paper-js\/","title":{"rendered":"Fikt me\u00f0 paper.js"},"content":{"rendered":"

\u00c9g hef reglulega sett sm\u00e1 p\u00fa\u00f0ur \u00ed a\u00f0 finna verkf\u00e6ri sem g\u00e6ti gert gagnvirk t\u00f3l og hreyfimyndir \u00e1 vefs\u00ed\u00f0um. H\u00e9r er stutt yfirfer\u00f0 yfir nokkur t\u00f3l sem \u00e9g hef prufa\u00f0 og svo \u00fea\u00f0 sem \u00e9g er a\u00f0 sko\u00f0a n\u00fana.<\/p>\n

SVG<\/h2>\n

Upphaflega sko\u00f0a\u00f0i \u00e9g a\u00f0 nota SVG. Vigurmyndir eru fr\u00e1b\u00e6rar fyrir a\u00f0 vera skalanlegar og au\u00f0k\u00f3\u00f0anlegar. SVG var \u00e1 \u00feeim t\u00edma \u00ed nokkurri \u00fer\u00f3un og veri\u00f0 a\u00f0 b\u00e6ta hreyfimyndaeiginleikum vi\u00f0 sta\u00f0alinn. \u00de\u00e1 var hann \u00fe\u00f3 nokku\u00f0 van\u00fer\u00f3a\u00f0ur enn. Seinlegt a\u00f0 setja upp \u00f6ll SVG merkin, f\u00e1tt sem h\u00e6gt var a\u00f0 hreyfa til, og engin gagnvirkni. \u00dea\u00f0 fikt f\u00f3r aldrei lengra en \u00feetta gauf h\u00e9r<\/a>. \u00deetta var hins vegar fyrir r\u00e9ttum t\u00edu \u00e1rum svo \u00fea\u00f0 kann eitthva\u00f0 a\u00f0 hafa breyst s\u00ed\u00f0an.<\/p>\n

\"\"<\/a><\/p>\n

Canvas<\/h2>\n

S\u00ed\u00f0ar kynntist \u00e9g canvas-einingunni sem h\u00e6gt er a\u00f0 teikna inn \u00e1 me\u00f0 hreinu Javascript-i. \u00dea\u00f0 nota\u00f0i \u00e9g t.a.m. til a\u00f0 gera t\u00f6lvuger\u00f0a R\u00f3l\u00f3 Pend\u00falu-mynd<\/a> \u00e1 uppl\u00fdsingas\u00ed\u00f0u um r\u00f3luna<\/a> \u00e1 vef V\u00edsindasmi\u00f0junnar. Javascript-i\u00f0 leyf\u00f0i mun f\u00e1ga\u00f0ir hreyfimyndir, en \u00fea\u00f0 voru nokkrir \u00f3kostir.<\/p>\n

\"\"<\/a><\/p>\n

Fyrir \u00fea\u00f0 fyrsta var ekki h\u00e6gt a\u00f0 hreyfa suma hluti til en l\u00e1ta a\u00f0ra sitja kyrra. T.a.m. vildi \u00e9g l\u00e1ta \u201er\u00f3luna\u201c skilja eftir sig feril, en f\u00e6rast sj\u00e1lf, og eins vildi \u00e9g teikna l\u00e1r\u00e9tta og l\u00f3\u00f0r\u00e9tta l\u00ednu sem s\u00fdndu hvernig ferillinn tengdist tveimur einf\u00f6ldum sveiflum. \u00deetta var hins vegar ekki h\u00e6gt nema m\u00f6gulega me\u00f0 mj\u00f6g miklum kr\u00f3kalei\u00f0um.<\/p>\n

p5.js<\/h2>\n

Fyrir nokkru kynntist \u00e9g Processing<\/a> forritunarm\u00e1linu. \u00dea\u00f0 er \u00fatg\u00e1fa af Java, og upphaflega hanna\u00f0 fyrir listaf\u00f3lk. \u00c9g ver\u00f0 a\u00f0 vi\u00f0urkenna a\u00f0 \u00e9g \u00e1tta\u00f0i mig ekki strax \u00e1 m\u00f6guleikunum, en \u00feegar \u00e9g loks \u00e1tta\u00f0i mig \u00e1 \u00feeim f\u00f3r \u00e9g a\u00f0 leita lei\u00f0a til a\u00f0 gera hreyfimyndirnar a\u00f0gengilegar \u00e1 netinu.<\/p>\n

\u00dea\u00f0 t\u00f3k ekki langan t\u00edma a\u00f0 \u00e9g datt ni\u00f0ur \u00e1 P5.js<\/a>, sem er JavaScript \u00fatg\u00e1fa af Processing, s\u00e9rstaklega gert fyrir vefinn. Svo skemmir ekki fyrir a\u00f0 stuttu eftir a\u00f0 \u00e9g uppg\u00f6tva\u00f0i P5.js var sett upp vefvi\u00f0m\u00f3t sem heldur utan um k\u00f3\u00f0a \u00feeirra sem stofna notanda \u00ed kerfinu \u00feeirra. \u00c9g hef a\u00f0eins sko\u00f0a\u00f0 a\u00f0 nota \u00feetta \u00ed kennslu, en ekki fundi\u00f0 nitsuna \u00ed \u00fea\u00f0. V\u00e6ri skemmtilegt a\u00f0 sko\u00f0a a\u00f0 nota \u00fea\u00f0 m\u00f6gulega \u00ed listkennslu.<\/p>\n

Fyrsta verkefni\u00f0 sem \u00e9g vann \u00ed P5.js var fyrir smi\u00f0ju sem \u00e9g var a\u00f0 \u00fer\u00f3a \u00ed V\u00edsindasmi\u00f0junni. H\u00fan fjalla\u00f0i um teningakast og mig langa\u00f0i til a\u00f0 geta l\u00edkt \u00edtreka\u00f0 eftir miklum fj\u00f6lda kasta og s\u00fdna hvernig hlutfall kastanna getur veri\u00f0 lengi nokku\u00f0 \u00f3jafnt, en n\u00e1lgast \u00e1 endanum jafnv\u00e6gi. P5.js leyfir a\u00f0 embed-a verkefnin sem unnin eru \u00ed vefvi\u00f0m\u00f3tinu sem au\u00f0veldar mj\u00f6g a\u00f0 deila \u00feeim:<\/p>\n

... nema h\u00e9r \u00e1 \u00feessu bloggi \u00fear sem \u00e9g m\u00e1 hvorki nota canvas n\u00e9 iframe ...<\/p>\n

Allavega, forriti\u00f0 m\u00e1 sj\u00e1 me\u00f0 \u00fev\u00ed a\u00f0 smella \u00e1 myndina h\u00e9r a\u00f0 ne\u00f0an. Smelli\u00f0 svo \u00e1 d\u00f6kkgr\u00e1a fl\u00f6tinn \u00feegar \u00fei\u00f0 eru\u00f0 komin inn \u00ed vi\u00f0m\u00f3ti\u00f0.<\/p>\n

\"\"<\/a><\/p>\n

N\u00e6sta verkefni var nokku\u00f0 fl\u00f3knara en g\u00f3\u00f0 \u00e6fing \u00ed a\u00f0 gera fl\u00f3knari hlutbundna forritun (a\u00f0 \u00fev\u00ed marki sem P5.js\/JavaScript leyfir). \u00dea\u00f0 gekk \u00fat \u00e1 a\u00f0 l\u00edkja eftir umfer\u00f0 b\u00edla yfir gatnam\u00f3t. \u00deetta var skemmtilegt verkefni, en s\u00ed\u00f0ast \u00feegar \u00e9g skildi vi\u00f0 \u00fea\u00f0 n\u00e1\u00f0i \u00e9g ekki a\u00f0 kl\u00e1ra umb\u00e6turnar sem \u00e9g var a\u00f0 reyna a\u00f0 gera, svo \u00fea\u00f0 virkar ekki sem stendur. \u00deetta er \u00e1g\u00e6tis lex\u00eda: \u00dea\u00f0 \u00fearf a\u00f0 g\u00e6ta \u00feess a\u00f0 halda a\u00f0skildum verkefnum sem enn eru \u00ed \u00fer\u00f3un, og \u00feeim sem eru komin \u00ed notkun.<\/p>\n

\"\"<\/a><\/p>\n

\u00deri\u00f0ja verkefni\u00f0 var l\u00edka umfer\u00f0artengt. \u00c9g rakst \u00e1 umr\u00e6\u00f0ur um \u00e1lyktanir \u00fat fr\u00e1 ranns\u00f3kn \u00e1 l\u00edfsg\u00e6\u00f0um f\u00f3lk sem t\u00f3k almenningssamg\u00f6ngur e\u00f0a \u00f3k \u00ed einkab\u00edl til og fr\u00e1 vinnu. M\u00e9r \u00fe\u00f3ttu \u00e1lyktanirnar h\u00e6pnar og setti upp \u00feetta forrit til a\u00f0 s\u00fdna a\u00f0 \u00fea\u00f0 v\u00e6ri h\u00e6gt a\u00f0 f\u00e1 s\u00f6mu ni\u00f0urst\u00f6\u00f0ur og \u00ed ranns\u00f3kninni me\u00f0 \u00f6\u00f0rum forsendum en \u00feeim sem vi\u00f0komandi h\u00f6f\u00f0u \u00e1lykta\u00f0 a\u00f0 g\u00f6gnin s\u00fdndu fram \u00e1. \u00deetta er \u00e1g\u00e6tt d\u00e6mi um gagnsemi forritunar til l\u00edkanger\u00f0ar til a\u00f0 sko\u00f0a fleiri valkosti en gerleg (e\u00f0a si\u00f0fer\u00f0ilega r\u00e9ttl\u00e6tt) er a\u00f0 gera.<\/p>\n

\"\"<\/a><\/p>\n

Paper.js<\/h2>\n

N\u00fdlega var \u00e9g a\u00f0 setja inn efni \u00e1 s\u00ed\u00f0u fyrir skynvillusmi\u00f0juna<\/a> \u00ed V\u00edsindasmi\u00f0juna. \u00dear eru nokkur vefforrit sem mig langa\u00f0i til a\u00f0 embed-a \u00e1 s\u00ed\u00f0unum. \u00de\u00e1 datt m\u00e9r jafnvel \u00ed hug a\u00f0 \u00fea\u00f0 v\u00e6ri n\u00fa bara kannski ekkert \u00fat \u00ed h\u00f6tt a\u00f0 endurskrifa \u00feau bara sj\u00e1lfur. \u00de\u00e1 v\u00e6ri h\u00e6gt a\u00f0 vera me\u00f0 \u00feau eins a\u00f0gengileg og vi\u00f0 viljum, og \u00fea\u00f0 er au\u00f0velt a\u00f0 deila \u00feeim og \u00edslenska.<\/p>\n

Vandam\u00e1li\u00f0 sem \u00e9g \u00fe\u00f3 s\u00e1, var a\u00f0 \u00e1 nokkrum st\u00f6\u00f0um \u00fear sem \u00e9g mundi vilja \u00fatf\u00e6ra skynvillurnar \u00f6\u00f0ruv\u00edsi mundi \u00e9g lenda \u00ed miklum bobba me\u00f0 P5.js \u00fev\u00ed hlutirnir \u00ed \u00fev\u00ed geta ekki teki\u00f0 vi\u00f0 m\u00fasarsmellum!<\/p>\n

A\u00f0eins canvas-inn greinir m\u00fasarsmelli, og \u00fea\u00f0 er forritarans a\u00f0 greina hvort m\u00fasarsmellurinn hafi veri\u00f0 yfir hlutnum. Sem er ekkert st\u00f3rm\u00e1l ef hluturinn er hringlaga me\u00f0 \u00feekkta mi\u00f0ju og geisla. \u00deegar hluturinn er \u00f3reglulegri ver\u00f0ur \u00feetta lei\u00f0indah\u00f6fu\u00f0verkur.<\/p>\n

Svo, \u00e9g f\u00f3r \u00e1 st\u00fafana og leita\u00f0i a\u00f0 \u00f6\u00f0rum valkostum til a\u00f0 gera hreyfimyndir me\u00f0 JavaScript sem g\u00e6tu leyft a\u00f0eins f\u00e1ga\u00f0ri vi\u00f0m\u00f3t vi\u00f0 m\u00fasarsmelli.<\/p>\n

Eftir mikla leit rakst \u00e9g \u00e1 paper.js<\/a>.<\/p>\n

\u00dea\u00f0 er \u00f6rl\u00edtill \u00fer\u00f6skuldur a\u00f0 \u00feurfa a\u00f0 l\u00e6ra \u00e1 n\u00fdja JavaScript \u00fatg\u00e1fu, en fyrstu tilraunir lofa g\u00f3\u00f0u.<\/p>\n

\"\"<\/a><\/p>\n

St\u00e6rsti \u00f3kosturinn sem \u00e9g hef rekist \u00e1 er hva\u00f0 \u00fea\u00f0 er l\u00edti\u00f0 af skj\u00f6lun \u00ed kringum paper.js, s\u00e9rstaklega mi\u00f0a\u00f0 vi\u00f0 p5.js. \u00dea\u00f0 s\u00ed\u00f0arnefnda var enda hanna\u00f0 til a\u00f0 kenna og vera nota\u00f0 af f\u00f3lki sem hefur ekki sterkan bakgrunni \u00ed forritun, en me\u00f0 sm\u00e1 herkjum gengur \u00feetta.<\/p>\n

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

\u00c9g hef reglulega sett sm\u00e1 p\u00fa\u00f0ur \u00ed a\u00f0 finna verkf\u00e6ri sem g\u00e6ti gert gagnvirk t\u00f3l og hreyfimyndir \u00e1 vefs\u00ed\u00f0um. H\u00e9r er stutt yfirfer\u00f0 yfir nokkur…<\/p>\n","protected":false},"author":1485,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[150627,150637,759],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","hentry","category-daglegt-bras","category-forritun","category-oflokkad"],"_links":{"self":[{"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/users\/1485"}],"replies":[{"embeddable":true,"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":8,"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/posts\/154\/revisions\/169"}],"wp:attachment":[{"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uni.hi.is\/martin\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}