Îndrumări de programare interesante pentru designer - Pune-ți fotografia în funcțiune (partea a doua): 8 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

Matematica, pentru majoritatea dintre voi, pare inutilă. Cel mai frecvent utilizat în viața noastră de zi cu zi este doar să adunăm, să scădem, să înmulțim și să împărțim. Cu toate acestea, este destul de diferit dacă puteți crea cu programul. Cu cât știți mai multe, cu atât veți obține un rezultat mai minunat.

Pasul 1: Mișcare și funcție

Permiteți-mi să vă arăt câteva imagini necunoscute pentru a vă stimula gustul.

Ce este asta? Acum, păstrați această întrebare mai întâi, iar pe urmă o veți cunoaște și utiliza.

În ultimul capitol, am învățat configurarea funcției și desenarea funcțiilor, care pot face ca grafica statică să devină dinamică. Cu toate acestea, acest format de mișcare este prea simplu. Vom folosi cunoștințele funcționale pe care le-am stăpânit înainte pentru a ne rula grafica cu propriul caracter.

Câte funcții puteți recunoaște din imaginile de mai sus? Ce fel de relație au cu mișcarea? Acum, să luăm o funcție pătratică din aceasta, să adăugăm alți parametri în mod aleatoriu și să vedem ce se va întâmpla. De exemplu, y = x² / 100.

Așa arată imaginea funcțională. Copiați codul de mai jos.

[cceN_cpp theme = "dawn"] float x, y; void setup () {dimensiune (300, 300); fundal (0); x = 0; } void draw () {stroke (255); greutate accident vascular cerebral (2); y = pow (x, 2) / 100,0; // Funcția Pow va reveni la a n-a putere a numărului de desemnare. (x, 2) reprezintă pătratul lui x. Primul parametru este numărul de bază, iar al doilea este indexul. punctul (x, y); x ++; } [/cceN_cpp]

Efect de alergare

Apoi, alege funcția sin. Formula: y = 150 + sin (x).

Copiați următorul cod.

[cceN_cpp theme = "dawn"] float x, y; void setup () {dimensiune (300, 300); fundal (0); x = 0; } void draw () {y = înălțime / 2 + sin (radiani (x)) * 150; // Funcția radian transformă x în unghi. x ++; accident vascular cerebral (255); greutate accident vascular cerebral (2); punctul (x, y); } [/cceN_cpp]

Efect de alergare

Acesta este graficul pe care îl obținem după operarea codului. Și acestea sunt urmele lor de mișcare. Comparativ cu primul, rezultatul este evident. Imaginea funcțională corespunde de fapt pistei de mișcare! Este destul de simplu. Trebuie doar să înlocuiți valoarea lui x, y în coordonate. Prima pistă pe care am desenat-o este echivalentă cu graficul funcției y = x² / 100. În timp ce pista din urmă este egală cu graficul funcției y = 150 + sin (x). Dar în program, direcția axei y este opusă. Deci, în comparație cu grafica originală, pista va fi cu capul în jos. Acum, cred că trebuie să aveți sentimentul că unele întrebări dificile bântuite în capul dvs. pentru o lungă perioadă de timp sunt rezolvate imediat. Este uimitor faptul că aceste funcții fantastice pe care le-am învățat înainte pot fi folosite pentru a controla mișcarea grafică!

Pasul 2: Scrierea funcției

Am enumerat mai jos câteva funcții utilizate frecvent. Sper că acestea ne pot ajuta să traducem funcțiile în cod care poate fi recunoscut de computer.

Prin urmare, formula de mai jos din program va fi scrisă astfel:

y = x² → y = pow (x, 2) sau y = sq (x)

y = x³ → y = pow (x, 3)

y = xⁿ → y = pow (x, n)

y = 4ⁿ → y = pow (4, n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

De asemenea, puteți scrie aleatoriu o funcție în program și puteți vedea cum va arăta pista de mișcare. Nu uitați să luați în considerare domeniul câmpului valoric și domeniul de definiție, altfel graficul dvs. va rămâne fără ecran.

Funcție trigonometrică

Acum, să mergem mai departe pentru a cunoaște câteva scrieri ale funcțiilor trigonometrice.

Trebuie să fim atenți la faptul că în program intrarea parametrului funcției în raport cu unghiul adoptă radianul. Astfel păcatul 90 ° va fi scris în păcat (PI ／ 2). Dacă nu sunteți familiarizați cu această metodă, puteți utiliza funcția randian pentru a transforma unghiul în radian în prealabil și apoi scrieți sin （radiani (90)).

Utilizarea gradelor funcției este comparativ opusă. Poate transforma radianul în unghi. Introduceți tipărirea (grade (PI / 2)) direct în zona de editare și vedeți ce veți obține.

Pasul 3: Controlează mișcarea grafică cu funcție trigonometrică

Iată un caz pentru a vedea efectul real al mișcării grafice.

[cceN_cpp theme = "dawn"] float x, y; void setup () {dimensiune (700, 300); } void draw () {fundal (234, 113, 107); y = sin (radiani (x)) * 150 + 150; x ++; noStroke (); elipsa (x, y, 50, 50); } [/cceN_cpp]

Funcția sin este o funcție periodică. Valoarea sa minimă este －1, iar valoarea maximă este 1. Înălțimea ecranului este 300. Referit la y = sin (radiani (x)) * 150 + 150, prin urmare intervalul de schimbare a valorii y va fi bine controlat în intervalul 0 la 300.

Cercul de filare

Ei bine, am ajuns în cele din urmă la cea mai importantă parte din acest capitol. Cum să desenați o cale de cerc într-un program? Cum se utilizează funcțiile pentru a o afișa? Permiteți-mi să vă arăt din nou cele două imagini pe care le-am văzut la începutul acestui articol.

De fapt, ei au expus vizual relația dintre coordonatele de circumferință și funcția trigonometrică. Mișcarea din imaginile de mai sus este condusă de variabila independentă în continuă creștere θ. Stânga este imaginea funcției sin și cos, iar dreapta reprezintă un punct care face mișcare circulară după ce a fost cartografiat. Nu este foarte inteligent? Nu mai este misterios. Puteți utiliza codul pentru a-l realiza.

Un exemplu simplu:

[cceN_cpp theme = "dawn"] float x, y, r, R, angle; void setup () {dimensiune (300, 300); r = 20; // Diametrul cercului R = 100; // Raza drumului de mișcare x = 0; unghi = 0; y = înălțime / 2; } void draw () {fundal (234, 113, 107); traducere (lățime / 2, înălțime / 2); // Mutați punctul original în centrul ecranului. noStroke (); x = R * cos (unghi); y = R * sin (unghi); elipsa (x, y, r, r); unghiul + = 0,05; } [/cceN_cpp]

Uite! Apare un cerc rotativ! Aici, variabila independentă nu mai este în unghi de creștere constantă a bitului (egal cu θ în imagine). Este stand pentru unghi. Dintre acestea, xy au un coeficient relativ multiplicat R, ceea ce duce la extinderea razei de mișcare a cercului (R este pentru rază). Dacă nu se înmulțește R, calea sa de mișcare va fi limitată în intervalul de la -1 la 1.

De ce să nu folosiți creșterea x? Conform proprietății funcției în sine, orice x din domeniul definiției are singurul y care se potrivește. Deci, în sistemul de coordonate cu dimensiuni dreptunghiulare plane, nu puteți găsi o „funcție simplă” pentru a desena cercul direct. Adică nu mai putem folosi acest format.

y = (Expresia necunoscută a lui x?);

x ＋＋;

Deci, trebuie să ne schimbăm ideea. Alegeți un alt unghi ca variabilă independentă, apoi folosiți funcția sin și cos pentru a-l transforma în coordonate orizontale și verticale.

x = R * cos (unghi);

y = R * sin (unghi);

unghiul + = 0,05;

Unii dintre voi s-ar putea întreba de ce poate afișa calea mișcării cercului. Conform definiției funcției trigonometrice, putem argumenta cu ușurință că funcția sin raportul dintre latura opusă și ipotenuză; funcția cos este raportul dintre adiacent la hipotenuză. Indiferent unde este punctul cercului, r (raza) va rămâne neschimbată. Prin urmare, putem concluziona expresia coordonatei x și a coordonatei y.

Deoarece acest lucru nu este o îndrumare matematică, aici voi înceta să vă afișez mai multe cunoștințe despre funcția trigonometrică. Dacă doriți să o cunoașteți sau pur și simplu să o uitați, puteți încerca să o revedeți din nou.

Desigur, este în regulă dacă nu o puteți înțelege pe deplin. Trebuie doar să știi cum să-l folosești pentru a desena un cerc. Acesta este și un fel de „idee de programare”. Mai târziu, vom invoca adesea unele dintre modulele existente realizate de alții pentru a realiza un anumit tip de funcție. Nu vă împingeți să o cunoașteți în detaliu.

Cu toate acestea, funcția sin și cos este comună. Dacă doriți să creați un nivel superior, ar fi bine să încercați să îl cunoașteți cu atenție. Dacă această întrebare în sine ne poate determina să învățăm mai multe cunoștințe matematice, există mai multe lucruri interesante care vă așteaptă să le dezgropați.

Acestea sunt imagini strâns legate de funcția trigonometrică.

Pasul 4: Sistemul de coordonate de mișcare

Efectele anterioare se referă la modificări ale coordonatelor grafice. Sistemul de coordonate în sine este static. De fapt, putem face mișcarea coordonatelor pentru a realiza efectul de mișcare. La fel cum oamenii de pe plajă îi privesc pe ceilalți oameni din barcă. Pentru oamenii de pe barcă, barca este statică. Dar dacă barca însăși se mișcă, atunci oamenii din barcă se mișcă odată cu ea. Primele cazuri se referă la „oameni care aleargă pe barcă”. De fapt, barca nu se mișcă. Următoarele sunt câteva funcții comune pentru schimbarea sistemului de coordonate.

Traducere funcție

Funcția de traducere, despre care am vorbit anterior, este utilizată pentru a muta sistemul de coordonate al graficului pe orizontală.

Invocați formatul:

traduce (a, b)

Primul parametru înseamnă deplasarea în direcția pozitivă a axei x pentru un pixel. Al doilea parametru înseamnă deplasarea în direcția pozitivă a axei y pentru b pixeli.

Comparați cele două coduri și încercați să găsiți orice diferență. (Pentru a simplifica codul, putem șterge dimensiunea funcției, lățimea și înălțimea ecranului sunt implicit 100.)

Înainte de a utiliza:

elipsa (0, 0, 20, 20);

După ce folosim:

traducere (50, 50);

elipsa (0, 0, 20, 20);

Funcția se rotește

Invocați formatul:

rotire (a)

Este folosit pentru rotirea sistemului de coordonate. Când parametrul este pozitiv, acesta va alege punctul original ca punct central și se va roti în sensul acelor de ceasornic. Intrarea parametrului este aceeași cu funcția trigonometrică pentru a utiliza radianul.

Inainte de folosire:

elipsa (50, 50, 20, 20);

După utilizare:

rotire (radiani (30));

elipsa (50, 50, 20, 20);

Efectul în program este de a face cercul să se rotească în jurul punctului central al coordonatelor în direcția acelor de ceasornic timp de 30 de grade.

Scara funcției

Invocați formatul:

scara (a)

Această funcție poate micșora sistemul de coordonate. Valoarea este pentru scalare. Când parametrul depășește 1, măriți; dacă este mai mic de 1, micșorați.

Inainte de folosire:

elipsa (0, 0, 20, 20);

După utilizare:

scara (4);

elipsa (0, 0, 20, 20);

Cercul din imaginea de mai sus este amplificat de patru ori mai mare decât dimensiunea inițială. De asemenea, puteți utiliza doi parametri pentru a micșora în direcția axei x și axa y separat.

scara (4, 2);

elipsa (0, 0, 20, 20);

Suprapunerea funcției de transformare

Aici, suprapunerea se referă la modificări în raport cu sistemul actual de coordonate. Cu alte cuvinte, efectele pot fi suprapuse.

traducere (40, 10);

traducere (10, 40);

elipsa (0, 0, 20, 20);

Efectul său final va fi egal cu

traducere (50, 50);

elipsa (0, 0, 20, 20);

Același lucru cu funcția de rotire

rotire (radiani (10));

rotire (radiani (20));

elipsa (50, 50, 20, 20);

Este egal cu

rotire (radiani (30));

elipsa (50, 50, 20, 20);

Ambele funcții scalează și rotesc centrul pe punctul original pentru a scala și roti. Dacă vrem să obținem efectul de rotire cu o poziție centrală la (50, 50), trebuie să gândim în sens opus. Mai întâi mutați punctul original în poziția (50, 50), apoi adăugați funcția de transformare rotativă. În cele din urmă, faceți grafica pictată pe punctul original.

Inainte de folosire:

elipsa (50, 50, 50, 20);

După utilizare:

traducere (50, 50);

rotire (radiani (45));

elipsa (0, 0, 50, 20); // Pentru a vedea schimbarea unghiului de rotație, am făcut un oval.

Ar putea părea răsucitor. Trebuie doar să exersezi mai mult, apoi îl vei înțelege. (De asemenea, puteți încerca să schimbați secvența de traducere a funcțiilor și să o rotiți pentru a vedea diferența.)

Mișcarea orizontală și mișcarea circulară

În următoarele cazuri, vom realiza efectul de mișcare prin schimbarea sistemului de coordonate. În același timp, aș dori să vă rog să vă referiți la exemplul din capitolul anterior. De cele mai multe ori, veți găsi pentru a realiza un anumit tip de efect, puteți folosi o metodă total diferită.

Pasul 5: Mișcare orizontală

[cceN_cpp theme = "dawn"]

int x, y; void setup () {dimensiune (300, 300); x = 0; y = înălțime / 2; } void draw () {fundal (234, 113, 107); noStroke (); traduce (x, y); elipsa (0, 0, 50, 50); x ++; } [/cceN_cpp]

Coordonatele cercului nu sunt modificate, dar sistemul său de coordonate este modificat.

Rotiți mișcarea

[cceN_cpp theme = "dawn"] float r, R, unghi; void setup () {dimensiune (300, 300); r = 20; // Dimensiunea cercului R = 100; // Raza de mișcare pistă} void draw () {fundal (234, 113, 107); traducere (lățime / 2, înălțime / 2); // Mutați punctul original în centrul ecranului. rotire (unghi); noStroke (); elipsa (0, R, r, r); unghiul + = 0,05; } [/cceN_cpp]

Nu este mult mai clar și mai simplu decât funcția trigonometrică? S-ar putea să aveți o întrebare aici. Luați codul rotativ ca exemplu. În mod evident, funcția de transformare menționată mai sus este relativă și permite suprapunerea. Dacă scriem traducerea (lățimea / 2, înălțimea / 2) în extragerea funcției, nu înseamnă că de fiecare dată când extragerea funcției funcționează o singură dată, sistemul de coordonate se va deplasa la o distanță în direcția inferioară dreaptă de la baza originală? În mod rezonabil, nu va rămâne în centrul ecranului pentru totdeauna.

Puteți înțelege în acest fel. Odată ce codul din extragerea funcțională a finalizat o operațiune de sus în jos, sistemul de coordonate va reveni la starea inițială la a doua operație. Punctul original al sistemului de coordonate va fi implicit pentru a reveni în colțul din stânga sus. Deci, dacă vrem să facem schimbarea continuă a sistemului de coordonate, parametrii unghiului din funcția de rotație vor crește constant valoarea acestuia.

Accesați starea coordonatelor

Uneori, nu dorim ca schimbarea stării sistemului de coordonate să se bazeze pe cea anterioară. În acest moment, trebuie să folosim funcția pushMatrix și popMatrix. Cele două funcții apar de obicei în cuplu. Funcția pushMatrix este înainte de popMatrix. Ele nu pot fi folosite exclusiv sau va merge prost.

Exemplu:

[cceN_cpp theme = "dawn"] pushMatrix (); // Stocați traducerea stării sistemului de coordonate (50, 50); elipsa (0, 0, 20, 20); popMatrix (); // Citiți starea sistemului de coordonate rect (0, 0, 20, 20); [/cceN_cpp]

În acest exemplu, înainte de a folosi translate (50, 50), folosim funcția pushMatrix.pentru a stoca starea curentă a sistemului de coordonate. Acesta este, în același timp, starea inițială. După ce desenăm un cerc, apoi implementăm popMatrix, acesta va reveni la această stare. În acest moment, implementați funcția rect, veți găsi că nu a suferit influența din funcția de traducere, în schimb, desenează un pătrat în colțul din stânga sus al punctului original.

În plus, funcțiile pushMatrix și popMatrix permit cuibărirea.

De exemplu

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Pentru a-i arăta relația intuitiv, alegem formatul de condensare.

Mișcare combinată sau Mișcare în mișcare?

Acum începe al doilea val de parte importantă. Încercați doar să împingeți înainte. Anterior, am folosit o metaforă a bărcii și a oamenilor. Te-ai gândit vreodată dacă, dacă îi facem pe oameni și pe bărci să se miște, ce fel de simțire vor avea oamenii de pe plajă?

De exemplu, combinați mișcarea orizontală cu mișcarea rotativă a sistemului de coordonate. Ideea este de fapt să ne mișcăm doar într-o direcție.

[cceN_cpp theme = "dawn"] int x, y; unghi de plutire; void setup () {dimensiune (300, 300); fundal (234, 113, 107); noStroke (); x = 0; // Când valoarea inițială a lui x este 0, putem neglija această propoziție de cod. Când declarăm variabila, valoarea implicită este 0. y = 0; // La fel cu cele de mai sus. unghi = 0; // La fel cu cele de mai sus. } void draw () {unghi + = 0,25; y--; traducere (lățime / 2, înălțime / 2); pushMatrix (); rotire (unghi); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Și există mișcare circulară și scalare a sistemului de coordonate.

[cceN_cpp theme = "dawn"] float x, y, angle; void setup () {dimensiune (300, 300); fundal (234, 113, 107); noStroke (); } void draw () {unghi + = 0,01; x = sin (unghiul) * 100; y = cos (unghi) * 100; traducere (lățime / 2, înălțime / 2); pushMatrix (); scala (1 + 0,1 * sin (unghi * 10)); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Nu vă lăsați înșelați! Punctul de cerc face de fapt mișcare circulară. Nu este dificil de înțeles dacă îl comparăm cu scalarea cu o cameră video. O cameră video se mișcă constant în față sau în spate filmează un punct în mișcare circulară.

Uimit? Acestea sunt funcții de bază simple. Dar cu o combinație diferită, putem crea atât de multe efecte diferite. Până acum, expunerea mea se oprește, astfel încât să-ți fac loc pentru explorarea ta.

Pasul 6: utilizare cuprinzătoare

Se apropie de sfârșit în curând pentru acest capitol. Ultimele două capitole, am introdus metoda de bază a mișcării grafice. Cred că s-ar putea să aveți o înțelegere mai profundă în comparație cu ideile dvs. inițiale. În ultimul rând, iată câteva exemple complete pentru referință.

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; float angle1, angle2; void setup () {dimensiune (300, 300); r = 12; R = 120; unghiul1 = 0; unghiul2 = PI / 4; } void draw () {fundal (234, 113, 107); noStroke (); traducere (lățime / 2, înălțime / 2); unghiul 1 + = 0,02; unghiul2 + = 0,06; x1 = R * sin (unghiul1); y1 = R * cos (unghiul1); x2 = R / 2 * sin (unghiul2); y2 = R / 2 * cos (unghiul2); elipsă (x1, y1, r / 2, r / 2); elipsa (x2, y2, r, r); elipsă (-x1, -y1, r / 2, r / 2); elipsă (-x2, -y2, r, r); elipsă (x1, -y1, r / 2, r / 2); elipsă (x2, -y2, r, r); elipsă (-x1, y1, r / 2, r / 2); elipsă (-x2, y2, r, r); accident vascular cerebral (255); greutate accident vascular cerebral (3); linie (x1, y1, x2, y2); linie (-x1, -y1, -x2, -y2); linie (x1, -y1, x2, -y2); linie (-x1, y1, -x2, y2); } [/cceN_cpp]

Acest exemplu nu conține nicio cunoștință dincolo de capitolul anterior introdus.

Pentru ce meciuri de puncte? Care linii se potrivesc? Nu-mi pot da seama nici eu. Dar îmi amintesc că derivă dintr-o mică secțiune de cod.

Aceasta este natura mișcării sale. Liniile de odihnă sunt doar efect de oglindă. Dacă continuați să urmați aceste îndrumări, puteți face o versiune actualizată și puteți adăuga un controler la imaginea dvs. pentru a vă schimba starea mișcării grafice în timp real.

Punctul interesant al programării constă în faptul că puteți proiecta sau combina reglementări. Totuși, ceea ce va fi programul final depinde de abilitatea ta. De obicei, designerii au o imaginație grafică puternică. Puteți schița o imagine în cap și apoi puteți încerca să o traduceți în cod. De asemenea, puteți începe de la cod și reglementări în sine, funcții de proiectare și variabile după bunul plac. Nu uitați că Procesarea este schița dvs., iar codul este pensulele dvs.! Pur și simplu pulverizați-vă ideile liber!

Pasul 7: ÎNCHEI

Ultimul din capitolul nostru, să ne întoarcem la o întrebare pe care am păstrat-o mult timp de la început. La ce folosești atât de mult efort ca să faci o poză cu programul? După ce ați învățat acest capitol, veți descoperi că există atât de multe metode de joc care vă așteaptă să le explorați.

[cceN_cpp theme = "dawn"] float frunteaX, earD, eyeD, faceD; void setup () {dimensiune (500, 500); } void draw () {fundal (200, 0, 0); frunteaX = 150 + sin (frameCount / 30.0) * 20; earD = 180 + sin (frameCount / 10.0) * 20; eyeD = 60 + sin (frameCount / 30.0) * 50; fataD = 300; greutate accident vascular cerebral (8); elipsă (175, 220, earD, earD); elipsă (lățime - 175, 220, earD, earD); rect (100, 100, faceD, faceD); linie (browX, 160, 220, 240); linie (width-browX, 160, width-220, 240); umplere (aleatoriu (255), aleatoriu (255), aleatoriu (255)); elipsa (175, 220, eyeD, eyeD); elipsă (lățime-175, 220, eyeD, eyeD); umplutură (255); punct (lățime / 2, înălțime / 2); triunghi (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, lățime - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Nu este magie pentru grafica dinamică? Aici nu vă arăt prea multe cazuri. S-ar putea să reușiți să creați un efect mult mai bun decât mine. Avantajul desenării cu programul există este că puteți juca cu fiecare pixel. Deoarece graficul dvs. nu este bitmap, fiecare punct cheie al graficului dvs. este controlabil. Poate realiza unele efecte pe care alte programe software nu le pot realiza.

Dacă aveți o inimă care dorește să rupă totul și să o combine din nou, programul de studiu vă va ajuta foarte mult să îndepliniți această idee.

Acest articol vine de la designerul Wenzy.

Pasul 8: Citiri relative:

Îndrumări de programare interesante pentru proiectant - Prelucrarea atingerii inițiale

Ghid de programare interesant pentru designer - Creați primul program de procesare

Îndrumări de programare interesante pentru designer - Pune-ți fotografia în funcțiune (prima parte)

Dacă aveți întrebări, puteți trimite un e-mail la [email protected].

Acest articol provine de la: