Programare creativă 2.0 în JS: Animație, Sunet și Culoare

Programare creativă 2.0 în JS: Animație, Sunet și Culoare

“Felicitări! Ai ajuns la finalul acestui curs Domestika. Îți mulțumesc pentru participare și sper că ți-a plăcut. Am lucrat împreună la câteva compoziții, dar cea mai importantă parte au fost tehnicile pe care le-ai învățat. Acum le poți folosi mai departe, le poți reaplica în altă parte și poți crea ceva diferit! Chiar dacă am acoperit multe subiecte, întotdeauna există mai multe de discutat, așa că am pregătit o mică listă de sfaturi pentru această ultimă unitate. Am folosit câteva dintre ele pe parcursul cursului, dar există mii de altele. Unora le place să facă totul singuri, dar uneori e ca și cum ai încerca să reinventezi roata. Ori de câte ori ai nevoie de ceva anume, ți-aș recomanda să cauți mai întâi NPM. Poate că altcineva a lucrat deja la problema respectivă! De exemplu, dacă trebuie să încărcați date dintr-un fișier CSV, există biblioteci pentru asta. Dacă trebuie să efectuați operațiuni cu vectori, să convertiți între diferite spații de culoare sau să încărcați fișiere de fonturi, există biblioteci pentru asta. Construirea unui site web O schiță poate exista de la sine. Puteți exporta compoziția și o puteți imprima sau posta undeva. Dar dacă doriți să vă partajați schițele online, puteți face acest lucru și cu o comandă „--build”. Aceasta generează fișiere JavaScript și HTML statice care pot fi găzduite ca pagini web obișnuite oriunde. În cazul în care aveți nevoie ca schița dvs. să fie integrată într-un site web existent, rețineți că folosim întotdeauna API-ul nativ Canvas, astfel încât puteți copia părți relevante din codul dvs. într-un alt proiect și îl puteți rula fără canvas-sketch. p5.js Mulți oameni se apucă de codarea creativă folosind Processing sau p5.js, iar asta are sens, sunt instrumente grozave. Sunt obișnuit să lucrez cu API-ul nativ, dar dacă deja te simți confortabil cu p5.js, îl poți folosi alături de canvas-sketch. Există un exemplu de bază inclus în videoclipul de mai sus care îți arată cum să faci asta. Aceasta este o problemă evidentă. Asigurați-vă că verificați documentația. Aceasta nu este valabilă doar pentru canvas-sketch sau Canvas, ci pentru orice API cu care lucrați. Cineva și-a făcut timp să organizeze și să documenteze codul său, astfel încât să putem profita de el. Este acolo pentru a ne ajuta. În continuare, aș dori să fac o recapitulare a ceea ce am văzut până acum. În acest curs, am lucrat la cinci proiecte mici. Primul a început cu un dreptunghi simplu, dar în final a implicat câteva cunoștințe despre trigonometrie, aleatoriu, palete de culori, moduri de amestecare și măști de decupare.

Al doilea proiect a constat în crearea unor elemente vizuale folosind segmente de curbă distribuite sub formă de grilă, utilizând culorile într-un mod diferit față de ceea ce ați făcut în prima unitate. Apoi, am folosit date de audiofrecvență pentru a genera niște elemente vizuale și am încercat să recreez câteva modele clasice de postere folosind cod. Ultima schiță este despre particule! Ai învățat cum să le aplici forțe, folosind concepte de bază din fizică, cum ar fi viteza și accelerația. Acum, aș vrea să împărtășiți schițele voastre pe forum, dând clic pe butonul „Creează-ți proiectul” de mai sus. Ar fi minunat dacă ați putea, de asemenea, să explicați alegerile pe care le-ați făcut pe parcurs și să ne spuneți dacă aveți nelămuriri. Î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ă vă ofer îndrumări. Sunt curios să văd ce veți crea cu ceea ce ați învățat la curs. Ne vedem acolo! ”

Rezumatul cursului pentru: Programare creativă 2.0 în JS: Animație, Sunet și Culoare

• Nivel: Începător
• 99% recenzii pozitive ( 182 )
• 1 elev
• 1 unitate
• 1 lecție ( 1 oră 1 metru )

• Categorie

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

• Zone

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