Programare creativă: Crearea de elemente vizuale cu JavaScript

Introducere în programare pentru designeri vizuali

“Salut și bine ați venit la finalul acestui curs Domestika. În această ultimă lecție vom face o recapitulare a ceea ce am văzut până acum și voi adăuga câteva sfaturi care să vă ajute în călătoria voastră către programarea creativă. Codul este un limbaj. Ca să folosim o metaforă cu limbajul vorbit, atunci când vrem să exprimăm ceva, nu este vorba despre câte cuvinte folosim, ci despre cum alegem să combinăm cuvintele pe care le cunoaștem. Am parcurs un drum lung. Am pornit de la un fișier gol, de la concepte fundamentale precum variabile și funcții. Am menționat că le vom folosi peste tot și așa am făcut. Cea mai bună modalitate de a învăța este întotdeauna prin exemple și am văzut destule. Am văzut, de asemenea, tablouri, bucle, condiționalități și numere aleatorii. Și am văzut cât de multe putem face doar cu aceste câteva concepte. Mediul ales pentru rularea codului nostru a fost browserul, care este foarte accesibil și familiar. Acum știm că îl putem folosi și pentru crearea de elemente vizuale. Am văzut cum se creează o pagină HTML și se scrie JavaScript în ea. Apoi am văzut o configurație mai elaborată folosind canvas-sketch. Ne-a oferit un mediu cu unele avantaje față de a începe de la zero, cum ar fi facilitarea modificării dimensiunilor schiței noastre și, de asemenea, reîncărcarea automată a acesteia imediat ce codul a fost salvat. Schița pe canvas oferă mai multe avantaje decât am văzut în curs, așa că vă recomand să consultați documentația de pe Github. Aici găsiți informații despre pregătirea schiței pentru imprimare în formate mari, cum să exportați GIF-uri și, de asemenea, cum să pregătiți grafica pentru plottere. Prima schiță pe care am făcut-o împreună a fost o grilă simplă. Aveam 5 rânduri și 5 coloane. Dacă ați încercat să schimbați acel număr, felicitări pentru experimentare. Poate v-ați dat seama că grila nu va mai fi centrată, deoarece foloseam valori codificate fix. Mai târziu, am văzut o modalitate mai flexibilă de a face lucrurile. Așa că nu ezitați să reveniți la schița 01 și să o îmbunătățiți cu ceea ce știți acum, este un exercițiu bun.

În a doua noastră schiță am folosit puțină trigonometrie. Mi-aș fi dorit ca profesorul meu de matematică să-mi fi arătat cum să fac lucruri creative cu trigonometria când eram la școală. Acesta este un alt lucru interesant despre programarea creativă, matematica simplă ajunge departe. S-ar putea să descoperiți că unele concepte matematice se potrivesc în cele din urmă, cu siguranță mi s-a întâmplat și mie. În a treia schiță am văzut mai multe aspecte matematice cu Pitagora și am învățat și cum să-l animăm. Browserul redesenează mereu pânza, așa că tot ce trebuie să facem este să schimbăm valorile în timp. Din nou, vă recomand să aruncați o privire la documentația canvas-sketch și să vedeți cum puteți crea o buclă animată, asigurându-vă că valorile se schimbă și, în cele din urmă, revin la punctul lor inițial. În a patra schiță, v-am arătat cum să normalizați o valoare, adică să schimbați intervalul său original la un număr între 0 și 1. Acest lucru este foarte util și se observă în toate domeniile programării. Dacă într-o zi trebuie să convertiți, să zicem, o culoare într-un unghi sau decibelii unui eșantion audio în înălțimea unui teren, știți că puteți face asta dacă normalizați valorile. Pentru schița finală, am vrut să vă arăt cum să folosiți tipografia într-un mod creativ, dar poate cel mai interesant lucru pe care l-am învățat acolo a fost cum să citim valorile culorilor din pixelii din pânza noastră. Am folosit o literă mare, dar nimic nu ne-a împiedicat să folosim orice altă imagine. Un emoji, o pictogramă, un logo, toate acestea sunt pixeli și efectul ar funcționa la fel de bine. Mi-ar plăcea foarte mult să văd elementele tale vizuale. Nu te teme să experimentezi cu orice. Ți-am dat câteva sfaturi, dar totul se rezumă la explorare. Dacă setăm o valoare la 5, încearcă 500. Încearcă să rotești lucrurile lateral, încearcă să le mărești sau să le micșorezi, încearcă cercuri în loc de pătrate sau cercuri peste pătrate. Și poate, mai important, încearcă să combini lucrurile, folosește ceva din schița 02 peste schița 05 sau invers. Distribuie schițele tale pe forum dând clic pe butonul „Creează-ți proiectul” de mai sus. În acest fel, vom învăța cu toții unii de la alții. Voi fi acolo să răspund la întrebări și să ofer îndrumări. A fost minunat să împărtășesc cu tine cunoștințele și pasiunea mea. Mulțumesc și la revedere. ”

Rezumatul cursului pentru: Programare creativă: Crearea de elemente vizuale cu JavaScript

• Nivel: Începător
• 97% recenzii pozitive ( 1201 )
• 1 elev
• 1 unitate
• 1 lecție ( 1 oră 1 metru )
• 1 descărcare

• Categorie

  3D și animație, Design web și aplicații

• Zone

  Grafică în mișcare, JavaScript, Multimedia, Programare