Përmbajtje
Kaloni një ditë me Brendan Dawes në Gjeneroni Londrën dhe zbuloni se si të dhënat janë të tmerrshme. Në këtë punëtori gjithë ditore ai do të shpjegojë se si të marrim të dhënat që na rrethojnë çdo ditë dhe t'i kthejmë ato në diçka të bukur duke përdorur Përpunimin dhe p5.js. Rezervoni tani!
p5.js është një bibliotekë e krijuar për të sjellë fuqinë e përpunimit në internet. Ai synon të prezantojë artistë, dizajnerë dhe edukatorë në botën e programimit, ndërsa gjithashtu ofron mjete të gjithanshme për të sjellë zhvillues dhe inxhinierë në artet pamore.
Le të zhytemi dhe të krijojmë 'skicën' tonë të parë. Qëllimi ynë është të ndërtojmë një mjet vizatimi që transformon një imazh të thjeshtë në një fushë të yjeve të animuar. Së pari, ne do të përcaktojmë disa variabla globale dhe do të shkruajmë tonat konfigurimi () funksioni p5-të konfigurimi () ekzekutohet një herë, kur skica është e ngarkuar, kështu që është vendi ideal për të trajtuar inicializimin.
Shkarkoni skedarët që do t'ju duhen këtu.
var hintImage, skyImage, yjet = []; konfigurimi i funksionit () {...}
Brenda tonë konfigurimi funksion, ne do të krijojmë një kanavacë dhe do të fshehim kursorin e miut në mënyrë që të mund të vizatojmë tonën. Si parazgjedhje, p5 shton një skicë rreth formave - ne duam të çaktivizojmë goditjet në këtë rast.
krijoniCanvas (800,500); noCursor (); noStroke ();
Tjetra, ne do të ngarkojmë një palë imazhe. Njëra do të shërbejë si sfond - në këtë rast, një skenë e qiellit të natës. Tjetri do të jetë imazhi 'aluzion' - dizajni bardh e zi mbi të cilin do të bazohet dizajni ynë përfundimtar. Ideja është të vendosim shumicën e yjeve mbi pikselët e zi në imazhin tonë të aluzionit, për të rikrijuar modelin në skenën tonë të sfondit. Do të ishte e lehtë të krijosh këto imazhe me tekstin dhe mjetet e vizatimit të p5, por për hir të shkurtësisë do të përdorim asete statike.
hintImage = loadImage ("// bit.ly/hintImage"); skyImage = loadImage ("// bit.ly/skyImage");
Funksioni i vizatimit
Kjo është ajo për konfigurimi ()! Një tjetër funksion kryesor është barazim (). Calledshtë thirrur në një lak të vazhdueshëm, i cili është i dobishëm për animacionet dhe shtimin e elementeve me kalimin e kohës.
vizatimi i funksionit () {...}
Brenda funksionit Vizato, detyra jonë e parë është të mbushim kanavacën me imazhin tonë të sfondit. p5 nuk pastron automatikisht kanavacën midis barazim () thirrjet, kështu që duhet ta bëjmë këtë çdo kornizë ose do të përfundojmë me disa efekte të çuditshme të akumulimit. Për të vendosur një imazh të ngarkuar në kanavacë, përdorni imazh () funksionojnë dhe japin koordinatat x dhe y për pozicionimin.
imazhi (skyImage, 0, 0);
Tjetra, ne do të kapim vendndodhjen aktuale të miut dhe do ta ruajmë atë si një p5.Vektor duke përdorur krijoniVector (). Ky objekt vjen me funksione të dobishme për t'u marrë me pikat në hapësirë, por ne kryesisht po e përdorim atë si një enë.
pozicioni var = krijoniVektor (miu X, miu Y);
Duke përdorur pozicionin tonë të miut të ruajtur rishtas, ne mund të vizatojmë kursorin tonë. Ne do të vendosim ngjyrën e vizatimit me mbush () duke kaluar vlerat dhe përdorimin e RGB elips () për të vizatuar një rreth në vendndodhjen e miut.
mbush (255, 192, 0); elips (pozicioni.x, pozicioni.y, 8, 8);
Ne vetëm duam të vizatojmë yje të rinj ndërsa miu shtypet, kështu që do të kontrollojmë p5-të miuShtypur para se të vazhdohet. Nëse miu është poshtë, duhet të llogarisim një vend të mirë për yllin tonë të ardhshëm që të përfundojë. Ne do ta bëjmë atë me një funksion të personalizuar të quajtur findPixel (), të cilën do ta përcaktojmë më vonë.
Pasi të kemi një objektiv, ne do të krijojmë një shembull të ri të një objekti të personalizuar Star (më poshtë) dhe do ta shtyjmë atë në fund të grupit tonë yll. Nëse përfundojmë me mbi 2,000 yje, do të fillojmë të heqim ato më të vjetrat.
nëse (mouseIsPressed) {var target = findPixel (); yll var = Yll i ri (pozicioni, synimi); yjet.push (yll); if (yjet.gjatësia> 2000) yjet.shift (); }
Më në fund, ne do të shikojmë në rrjetën tonë të yjeve dhe do të telefonojmë azhurnoj () dhe barazim () në secilën prej tyre. Ne do të zhytemi në këto metoda më vonë.
për (var i = 0; i yjeve. gjatësia; i ++) {yjet [i]. azhurnoj (); yjet [i]. vizatoj (); }
Funksionet ndihmëse
Tani konfigurimi () dhe barazim () janë në vend, ne do të punojmë në funksionet dhe objektet ndihmëse. Së pari, ne do të përcaktojmë një funksion që gjen një pozicion pushimi për secilin yll të ri. E tëra çfarë duhet të bëjmë është të kontrollojmë disa pikselë të rastësishëm në imazhin tonë të aluzionit, duke përdorur marr() për të parë nëse janë të zeza apo të bardha.
Ne në fakt duhet vetëm të shohim vlerën e tyre të kuqe, sepse në të dy rastet vlerat RGB përputhen. Nëse gjejmë një piksel jo të bardhë, do ta kthejmë sepse kemi goditur modelin tonë. Nëse jo, ne thjesht do të kthejmë pikselin e fundit të kontrolluar dhe ai do të shërbejë si një yll i rastësishëm.
funksioni findPixel () {var x, y; për (var i = 0; i 15; i ++) {x = kati (i rastësishëm (hintImage.width)); y = dysheme (e rastit (hintImage. lartësia)); if (e kuqe (hintImage.get (x, y)) 255) pushim; } kthimi createVector (x, y); }
E fundit është objekti ynë i personalizuar Star. Thënë thjesht, ne duam një kontejner të ripërdorshëm që ruan informacione për secilin yll, dhe gjithashtu siguron një mjet për azhurnimin dhe vizatimin e tyre. JavaScript nuk ofron një mënyrë për të krijuar klasa në një kuptim tradicional, por ne mund të marrim të njëjtin rezultat duke përcaktuar një funksion dhe duke e zgjeruar atë për nevojat tona.
Secili yll ka disa veti (pozicionin fillestar, vendndodhjen përfundimtare dhe një diametër të krijuar në mënyrë të rastësishme), të cilat ne do t'i përcaktojmë në një 'funksion konstruktor' që thirret për çdo yll të ri të krijuar në lakun tonë të vizatimit.
funksioni Yll (pozicion, synim) {this.pozicion = pozicion; kjo. target = target; kjo.diametri = i rastësishëm (1, 5); }
Tjetra do të shtojmë një azhurnoj () metoda tek Star, e cila do të përdorë p5.Vector's lerp () për të llogaritur një vendndodhje të re midis pozicioneve aktuale dhe të synuara të një ylli. Në këtë rast, ne po lëvizim katër përqind të distancës së mbetur për çdo barazim, i cili në mënyrë efektive na jep një efekt lehtësimi.
Nëse do të donim të bënim zbukurime, mund të simulonim edhe disa fizika këtu, por tani do ta mbajmë të thjeshtë.
Star.prototype.update = funksioni () {this.pozicion = p5.Vektor.lerp (ky.pozicion, ky. target, 0,04); };
Vizatimi i yjeve
Më në fund, Star’s barazim () metoda në fakt e tërheq yllin në kanavacë. Edhe një herë, po përdorim mbush () dhe elips (), megjithëse kësaj here po telefonojmë mbush () me një vlerë të shkallës gri dhe një vlerë alfa për transparencën.
Për t’i dhënë yjeve një vezullim, vlera alfa përcaktohet duke përdorur p5-të zhurma () funksioni Kjo kthen vlerën e zhurmës së Perlinit për koordinatat e specifikuara, që do të thotë që ju të merrni një sekuencë të lëmuar dhe të rrjedhshme të numrave të rastit. Për parametrin e tretë, ne po kalojmë një vlerë të bazuar në kohë sesa një vlerë hapësinore, në mënyrë që zhurma të gjallërohet me kalimin e kohës.
Star.prototype.draw = funksioni () {var alfa = zhurma (this.target.x, this.target.y, millis () / 1000.0); mbush (255, alfa * 255); elips (kjo.pozicioni.x, kjo.pozicioni.y, kjo.diametri, kjo.diametri); };
Kjo është ajo për skicën tonë të parë! Klikoni dhe tërhiqni për të parë yjet e rinj që shfaqen dhe përputhen me imazhin e aluzionit.
Ç'pritet më tej?
Nga këtu, ju mund të shtoni disa elementë HTML për të kontrolluar ndryshoret duke përdorur shtesën p5.dom ose madje edhe të shtoni tinguj në pamjet vizuale duke përdorur f5.shëndoshë.
Ne vetëm kemi gërvishtur sipërfaqen e asaj që është e mundur me p5.js, dhe me veçori të reja gjatë rrugës, ka edhe më shumë për të pritur. Argëtohuni!
Mësoni më shumë rreth anës krijuese të kodimit në Gjeneroni Londrën! Brendan Dawes do t'ju mësojë se si të përdorni Përpunimin dhe p5.js për t'i kthyer të dhënat në gjëra të bukurisë në punëtorinë e tij; ai gjithashtu do të flasë për gëzimin e punës me të letër, plastikë dhe piksele. Rezervoni tani biletën tuaj!
