Este o plăcere să scriu un cod frumos, dar este greu să împărtășești această plăcere altor programatori, să nu mai vorbim de cei care nu sunt. În timpul meu liber și socializarea cu familia, am fost proiectat ideea de a programa un poem folosind elemente de panza pentru desen într-un browser.
Există o mulțime de termeni care descriu experimente vizuale în schema de cod, demo, artă interactivă și așa mai departe. Pentru a descrie acest proces, am stat pe termenul de programare a poeziei. Poemul este o lucrare lustruită de proză, lumină, scurtă și estetică. Aceasta nu este o schiță pe jumătate a ideii din album, ci ceva coerent, prezentat telespectatorului pentru plăcerea lui. O poezie nu este un instrument, ci trăiește pentru a evoca emoții.
Re-citesc multe cărți dedicate matematicii, informaticii, fizicii și biologiei pentru plăcerea mea. Și mi-am dat seama foarte repede că dacă mă împrăștie orice idee, oamenii se plictisesc repede. De fapt, pot să iau o idee pe care o găsesc incredibil de interesantă și să infectez repede o persoană cu un sentiment de interes, chiar dacă persoana nu are nicio idee despre codificare și cum funcționează. Nu aveți nevoie să vă implicați într-un fel de gândire filosofică complicată sau calcule computaționale pentru a programa o poezie. Este doar o dorință de a vedea ceva viu și de respirație pe ecran. Codurile și exemplele pe care le las mai jos vă vor ajuta să înțelegeți cum să implementați acest proces rapid și ușor.
Principalul lucru este că crearea unei poezii ar trebui să rămână simplă și ușoară. Nu este nevoie să petreceți trei luni și să construiți unul, deși un demo foarte cool. În schimb, creați 10 poezii care vor ajuta transpunerea ideii în realitate. Scrieți un cod care va fi interesant și nu vă fie teamă să eșuezi.
Nu este nimic complicat, puteți începe cu ușurință. Singurul lucru care poate fi puțin confuz este contextul care ar trebui să fie format cu setările, cum ar fi fillStyle, lineWidth, font și strokeStyle, înainte ca desenul real să fie utilizat. Puteți uita cu ușurință să actualizați sau să reîncărcați setările și, eventual, obțineți un rezultat neașteptat.
Primul exemplu rulează și transformă desenul static în panza. Toate acestea sunt bune, dar acum adevărata distracție începe când setați viteza de 60 de cadre pe secundă. Browserele moderne au un add-on în funcția requestAnimationFrame, care sincronizează codul sursă cu imaginea care se mișcă în browser. Acest lucru îmbunătățește eficiența și asigură o mișcare ușoară. Scopul vizualizării ar trebui să fie codul care se mută la o rată de 60 de cadre pe secundă.
var canvas = document.getElementById ("exemplu-canvas");
Și acum fiți atenți, înainte de a vorbi despre programarea și desenarea pe monitor, dar aici am pregătit ceva matematic. Recunosc, am iubit întotdeauna matematica (spre deosebire de mulți alți artiști). În ciuda acestei iubiri, sunt dezamăgit de modul în care se învață în școală. Este învățat prea formal, ceea ce poate fi bun pentru profesorul de matematică, dar, în același timp, sunt pierdute admirația, interesul pentru cercetare și pragmatismul cu care puteți face multe lucruri interesante. Dar există și vești bune, programatorii nu acordă atenție acestui lucru și se concentrează pe lucruri mai interesante.
Și acum voi încerca să explic cât de repede funcționează sistemul de coordonate. Acest lucru va fi util pentru a înțelege modul în care o funcție matematică poate crea mișcare. Imaginea de mai jos prezintă sistemul de coordonate interactiv. Rețineți că nu există numai coordonatele x. Funcția pe care am desenat-o este reprezentată de (a * x + b) * c + d. Redați cursorul pe grafic și veți vedea cum fiecare dintre aceste valori poate ajusta poziția graficului și a scalei.
Dacă totuși doriți să continuați să lucrați cu codul, vă sugerăm să setați direcția și direcția. Încercați să modificați valorile din sistemul de coordonate sau să treceți la o altă funcție și să vedeți ce se întâmplă.
Aceste exemple vor fi puțin mai complicate, deoarece sunt legate de obiecte, dar merită. Uitați-vă la exemplul de cod pentru a înțelege modul în care funcționează noua scenă, ceea ce vă va ajuta cu elementele de bază ale desenului în pânză. Punctul nostru nou va avea un marker pentru a avea acces la orice variabilă, ca în contextul canvasului.
Pentru a începe să lucrați cu designerul, pentru Point configurați configurația lucrării și setați unele variabile necesare pentru lucru. Din nou, ne referim la vectorul trei.js. Când redarea în rata de înregistrare este de 60 fps, este important să pre-lansați elementele și să nu creați altele noi în timpul redării. Poate să mănânce memoria disponibilă și să vă facă vizualizarea abruptă. De asemenea, acordați atenție modului în care punctul transmite o copie a cadrului prin referință. Acest lucru vă ajută să lucrați mai clar.
Restul codului va fi instalat pe prototipul obiect al punctului astfel. astfel încât fiecare punct nou să aibă acces la aceste metode. Voi explica din funcție că funcționează.
Am separat codul de desen din codul de actualizare. Acest lucru ajută mult mai ușor la menținerea și mutarea obiectului. La fel ca schema MVC împărtășește controlul dvs. personal și viziunea logică. Vectorul dt este schimbarea de timp în milisecunde de la ultima actualizare. Acest nume este convenabil și scurt și provine de la (nu fi speriat) derivate de calcul (calculul derivatelor). Acesta scade viteza mișcării de la rata cadrelor. Astfel, nu veți avea o încetinire a stilului NES, dacă există dificultăți. Dacă viteza dvs. este prea mare, se pare că cadrele vor fi sărite, dar viteza va rămâne aceeași.
Această funcție este puțin ciudată în structura sa, dar este convenabil de utilizat. Este foarte costisitor să alocați memoria într-un sistem de coordonate (funcții). Funcția DriveDistance poate fi setată o singură dată și utilizată când sistemul este repornit când este necesar.
Acest vector este utilizat numai pentru a calcula noua poziție și nu este destinat să funcționeze în afara funcției. Acesta este primul vector matematic care trebuie folosit. Acum direcția vectorului se înmulțește spre deosebire de schimbarea în timp și apoi se adaugă la poziție. În final, acțiunea modulului are loc, ceea ce menține punctul pe ecran.
Și, în cele din urmă, cea mai ușoară. Faceți o copie a contextului obiectului principal și desenați un dreptunghi (sau altceva, nu este important). Doar un dreptunghi este cel mai ușor de desenat pe ecran.
În acest moment, adaug un nou punct și îl numesc this.dot = nou Dot (x, y, this) în designerul principal. Apoi, în metoda principală de actualizare, adaug acestdot.update (dt) și un punct apare pe ecran.
Este frumos faptul că există o structură mai mică în cod, dar nu dă mai multă atractivitate. Aici începe ciclul. În obiectul principal, vom crea un nou obiect DotManager. Este convenabil să asamblați această funcție într-un obiect separat, deoarece este mai ușor și mai curat, deoarece modelarea devine din ce în ce mai complexă.
Acum, în șablon, în loc să actualizăm punctul, vom crea și actualiza DotManager. În primul rând, vom crea 5000 de puncte.
Cu siguranta arata mult mai bine decat un punct. Acum este momentul să începeți să adăugați mai mult la metoda actualizată din punctul dvs. de lucru. Orice modificare a codului obiectului se va reflecta în fiecare punct al ecranului. Și aici încep să se întâmple miracole. Amintiți-vă sistemul de coordonate de mai sus? Ce zici de efectul mișcării ondulate? Vom crea o variabilă wavePosition pentru obiectul Point. În concluzie, vom adăuga această variabilă în poziția Y.
Da, un pic confuz atunci când este scris într-o singură linie, așadar folosesc o altă opțiune, care este făcută ca și în sistemul de coordonate.
Sunt îngrijorat ...
Încă o atingere mică. Monocrom este un pic plictisitor, asa ca sa adaugam un pic de culoare.
Pentru fiecare punct nou, setați poziția sa inițială și setați nuanța de-a lungul liniei orizontale a pânzei. Am adăugat funcția Utils.hslToFillStyle. aceasta va ajuta un pic pentru a converti unele variabile de intrare într-un șir de umplere corect formatStyle. Lucrurile sunt deja mult mai interesante. Punctele vor fi colectate într-un singur loc și nu va mai exista efect de curcubeu după ce acestea sunt împrăștiate aleator. Din nou, acesta este un exemplu de vizualizare mobilă cu un amestec de matematică sau valori introductive. Prefer să lucrez cu culoarea prin modelul de culoare HSL, mai degrabă decât cu RGB, deoarece este mai ușor de utilizat. RGB este un pic abstract.
Până acum, nu a existat nicio lucrare reală pentru utilizatori.
Rămâne doar să creați un obiect de șoarece în cadrul schemei. Acum, că avem un șoarece, o puteți face astfel încât punctele să o urmeze.
Această metodă vă poate deruta puțin dacă nu sunteți foarte bun la matematica vectorială. Vectorii pot fi bine vizualizați și pot ajuta la desenarea pe hârtie a măcinării cu un spot de cafea. Pur și simplu pus, această funcție arată distanța dintre mouse și punct. Și când punctul se mișcă apropiindu-se de un alt punct, care se bazează pe cât de aproape este un alt punct și cât timp a trecut. Aceasta se face prin calcularea distanței de mișcare (o cifră scalară obișnuită) și crește această cifră prin normalizarea vectorului punctului (vector de lungime 1) care coincide cu mouse-ul. Bine, ultima teză nu trebuie să fie scrisă în limbaj simplu, dar acesta este doar începutul.
Cel mai important lucru pentru mine este procesul de a crea un poem de programare și de a crea ceva nou. V-aș sfătui să nu faceți prea multe detalii și proiecte mari. În schimb, repetați, experimentați, bucurați-vă cu succes și lăsați uneori să eșueze. Odată ce am ceva de genul unei bucăți de curcubeu teribil. Am avut mari speranțe în cercurile recursive, dar nu am permis rezultate nepotrivite să mă lovească din calea mea. În cele din urmă, codul care a fost descris aici în detaliu este un studiu într-un stil foarte orientat spre obiecte pe care îmi place cel mai mult. Adaptați aceste idei la propriul proces, instrumente și tehnici. Poemele nu sunt un mare sistem integrat, deci este ușor să desenezi și să experimentați cu el fără să țineți cont de condițiile proiectelor mari.
Luați în considerare panza ca un creion, care vă va ajuta să realizați minunatele și ideile dvs. și vă va permite creaturile să zboare.
ATENȚIE! Utilizați un browser Internet Explorer învechit
Acest site este construit pe tehnologii avansate și moderne și nu suportă versiunile 6 și 7 ale Internet Explorer.
Articole similare
Trimiteți-le prietenilor: