Zanimljiv vodič za programiranje za dizajnera-Pokrenite svoju sliku (drugi dio): 8 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:32

Matematika se većini vas čini beskorisnom. U svakodnevnom životu najčešće se koristi samo zbrajanje, oduzimanje, množenje i dijeljenje. Međutim, sasvim je drugačije ako možete stvarati s programom. Što više znate, to ćete postići sjajniji rezultat.

Korak 1: Kretanje i funkcija

Dopustite mi da vam pokažem nekoliko nepoznatih slika koje će vam potaknuti ukus.

Što je ovo? Sada samo zadržite ovo pitanje, a kasnije ćete ga znati i koristiti.

U prošlom smo poglavlju naučili postavljanje funkcija i crtanje funkcija, zbog čega statička grafika može postati dinamična. Međutim, ovaj format kretanja je previše jednostavan. Koristit ćemo znanje o funkcijama koje smo prije savladali za pokretanje grafike s vlastitim likom.

Koliko funkcija možete prepoznati na gornjim slikama? Kakav odnos imaju s kretanjem? Sada pokupimo kvadratnu funkciju iz nje, nasumce dodamo neke parametre i vidimo što će se dogoditi. Na primjer, y = x² / 100.

Ovako izgleda slika funkcije. Kopirajte donji kod.

[cceN_cpp theme = "dawn"] plutaju x, y; void setup () {veličina (300, 300); pozadina (0); x = 0; } void draw () {potez (255); strokeWeight (2); y = pow (x, 2) / 100,0; // Funkcija pow će se vratiti na n -tu stepen broja oznake. (x, 2) predstavlja kvadrat od x. Prvi parametar je osnovni broj, a drugi indeks. točka (x, y); x ++; } [/cceN_cpp]

Učinak trčanja

Zatim odaberite funkciju sin. Formula: y = 150 + sin (x).

Kopirajte sljedeći kôd.

[cceN_cpp theme = "dawn"] plutaju x, y; void setup () {veličina (300, 300); pozadina (0); x = 0; } void draw () {y = visina/2 + sin (radijani (x)) * 150; // Funkcija radijanske transformacije x u kut. x ++; moždani udar (255); strokeWeight (2); točka (x, y); } [/cceN_cpp]

Učinak trčanja

Ovo je slika koju dobivamo nakon rada s kodom. I to su njihovi tragovi kretanja. U usporedbi s prethodnim, rezultat je očit. Slika funkcije zapravo odgovara tragu kretanja! Dosta je jednostavno. Morate samo zamijeniti vrijednost x, y u koordinatu. Prvi trag koji smo nacrtali ekvivalentan je grafikonu funkcije y = x² / 100. Dok je drugi trag jednak grafikonu funkcije y = 150 + sin (x). Ali u programu je smjer osi y suprotan. Dakle, u usporedbi s izvornom grafikom, pjesma će biti okrenuta naglavačke. Pretpostavljam da morate imati osjećaj da se neka teška pitanja koja su vam dugo trajala u glavi odmah riješe. Nevjerojatno je da se ove fantastične funkcije koje smo prije naučili mogu koristiti za kontrolu grafičkog kretanja!

Korak 2: Za pisanje funkcije

U nastavku sam naveo nekoliko često korištenih funkcija. Nadam se da će nam to pomoći u prevođenju funkcija u kôd koji računalo može prepoznati.

Stoga će donja formula u programu biti napisana ovako:

y = x² → y = pow (x, 2) ili 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)

Također možete nasumično upisati funkciju u program i vidjeti kako će izgledati njen trag kretanja. Ne zaboravite uzeti u obzir raspon polja vrijednosti i domenu definicije ili će vaša slika nestati s zaslona.

Trigonometrijska funkcija

Idemo dalje kako bismo saznali neke zapise trigonometrijskih funkcija.

Moramo obratiti pozornost da u programu ulaz parametra funkcije u odnosu na kut prihvaća radijan. Tako će se sin90 ° upisati u grijeh (PI ／ 2). Ako niste upoznati s ovom metodom, možete upotrijebiti funkciju randians za pretvaranje kuta u radijan unaprijed, a zatim upišite sin （radijane (90)).

Upotreba stupnjeva funkcija relativno je suprotna. Može pretvoriti radijan u kut. Unesite ispis (stupnjevi (PI/2)) izravno u područje uređivanja i pogledajte što ćete dobiti.

Korak 3: Upravljajte grafičkim kretanjem s trigonometrijskom funkcijom

Evo slučaja da vidite stvarni učinak grafičkog kretanja.

[cceN_cpp theme = "dawn"] plutaju x, y; void setup () {veličina (700, 300); } void draw () {background (234, 113, 107); y = sin (radijani (x)) * 150 + 150; x ++; noStroke (); elipsa (x, y, 50, 50); } [/cceN_cpp]

Funkcija sin je periodična funkcija. Njegova minimalna vrijednost je －1, a najveća vrijednost 1. Visina zaslona je 300. Upućeno na y = sin (radijani (x)) * 150 + 150, stoga će se raspon promjena vrijednosti y dobro kontrolirati unutar 0 do 300.

Vrteći se krug

Pa, konačno smo došli do najvažnijeg dijela u ovom poglavlju. Kako nacrtati kružnu putanju u programu? Kako koristiti funkcije za prikaz? Dopustite mi da vam ponovno pokažem dvije slike koje smo vidjeli na početku ovog članka.

Zapravo su vizualno razotkrili odnos koordinate opsega i trigonometrijske funkcije. Kretanje na gornjim slikama pokreće stalno rastuća neovisna varijabla θ. Lijevo je slika funkcije sin i cos, a desno označava točku koja radi kružno kretanje nakon što je preslikana. Nije li to jako pametno? Više nije tajanstven. Možete upotrijebiti kôd za njegovu realizaciju.

Jednostavan primjer:

[cceN_cpp theme = "dawn"] plutaju x, y, r, R, kut; void setup () {veličina (300, 300); r = 20; // Promjer kruga R = 100; // Polumjer putanje kretanja x = 0; kut = 0; y = visina/2; } void draw () {background (234, 113, 107); prevesti (širina/2, visina/2); // Pomaknite izvornu točku u središte zaslona. noStroke (); x = R * cos (kut); y = R * sin (kut); elipsa (x, y, r, r); kut += 0,05; } [/cceN_cpp]

Izgled! Pojavljuje se krug koji se vrti! Ovdje neovisna varijabla više nije u konstantnom povećanju bitnog kuta (jednako je θ na slici). To je oznaka za kut. Među njima, xy imaju relativno pomnožen koeficijent R, što dovodi do produženja radijusa kretanja kružnice (R je radijus). Ako se ne želi množiti R, njegov će se put kretati biti ograničen u rasponu od -1 do 1.

Zašto ne biste koristili povećavajući x? Prema svojstvu same funkcije, bilo koji x unutar domene definicije ima jedini y koji mu odgovara. Dakle, u ravninskom pravokutnom dimenzionalnom koordinatnom sustavu ne možete pronaći "jednostavnu funkciju" za izravno crtanje kruga. To znači da ne možemo više koristiti ovaj format.

y = (Nepoznati izraz x?);

x ＋＋;

Zato moramo promijeniti svoju ideju. Odaberite drugi kut kao neovisnu varijablu, a zatim pomoću funkcije sin i cos pretvorite ga u vodoravnu i okomitu koordinatu.

x = R * cos (kut);

y = R * sin (kut);

kut += 0,05;

Neki od vas bi se mogli zapitati zašto može prikazati putanju kretanja kruga. Prema definiciji trigonometrijske funkcije, možemo lako zaključiti da je ta funkcija sin odnos suprotne strane prema hipotenuzi; funkcija cos je omjer susjedne i hipotenuze. Bez obzira gdje se nalazi točka kružnice, r (polumjer) će ostati nepromijenjen. Stoga možemo zaključiti izraz x koordinate i y koordinate.

Budući da ovo nije matematičko vodstvo, ovdje ću vam prestati prikazivati više znanja o trigonometrijskoj funkciji. Ako to želite znati ili ste jednostavno zaboravili, možete to pokušati sami ponovno pregledati.

Naravno, u redu je ako to ne možete u potpunosti razumjeti. Morate samo znati upotrijebiti ga za crtanje kruga. Ovo je također svojevrsna "programska ideja". Kasnije ćemo se često pozivati na neke od postojećih modula koje su drugi napravili kako bi ostvarili određenu vrstu funkcije. Samo se nemojte siliti da to detaljno upoznate.

Međutim, funkcija sin i cos je uobičajena. Ako želite stvarati na višoj razini, bolje ga pokušajte temeljito upoznati. Ako ovo pitanje samo po sebi može potaknuti nas da naučimo više matematičkog znanja, čekaju vas još zanimljivije stvari.

Ovo su slike blisko povezane s trigonometrijskom funkcijom.

Korak 4: Koordinatni sustav kretanja

Prethodni učinci odnose se na promjene grafičkih koordinata. Sam koordinatni sustav je statičan. Zapravo možemo napraviti koordinatu kako bismo ostvarili pokretni učinak. Ovo je baš kao da ljudi na plaži promatraju druge ljude u čamcu. Za ljude na brodu čamac je statičan. No što ako se sam brod kreće, tada se s njim kreću i ljudi u čamcu. U prvim slučajevima radi se o "ljudima koji trče na brodu". Zapravo, čamac se ne miče. Slijede neke uobičajene funkcije za promjenu koordinatnog sustava.

Prevođenje funkcija

Funkcija translate, o kojoj smo ranije govorili, koristi se za horizontalno pomicanje koordinatnog sustava grafike.

Format poziva:

prevesti (a, b)

Prvi parametar označava pomicanje u pozitivnom smjeru osi x za piksele. Drugi parametar označava premještanje u pozitivni smjer osi y za b piksela.

Usporedite dva koda i pokušajte pronaći razliku. (Kako bismo pojednostavili kôd, možemo izbrisati veličinu funkcije, širina i visina zaslona su zadane na 100.)

Prije nego što upotrijebimo:

elipsa (0, 0, 20, 20);

Nakon što upotrijebimo:

prevesti (50, 50);

elipsa (0, 0, 20, 20);

Rotiranje funkcije

Format poziva:

rotirati (a)

Koristi se za rotiranje koordinatnog sustava. Kad je parametar pozitivan, odabrat će izvornu točku kao središnju točku i rotirati u smjeru kazaljke na satu. Unos parametra je isti s trigonometrijskom funkcijom za korištenje radijana.

Prije uporabe:

elipsa (50, 50, 20, 20);

Nakon upotrebe:

rotirati (radijani (30));

elipsa (50, 50, 20, 20);

Učinak u programu je da se krug okrene oko koordinatne središnje točke u smjeru kazaljke na satu za 30 stupnjeva.

Ljestvica funkcija

Format poziva:

ljestvica (a)

Ova funkcija može umanjiti koordinatni sustav. Vrijednost je za skaliranje. Kad je parametar veći od 1, povećajte; ako je niža od 1, smanjite.

Prije uporabe:

elipsa (0, 0, 20, 20);

Nakon upotrebe:

ljestvica (4);

elipsa (0, 0, 20, 20);

Krug na gornjoj slici pojačan je do četiri puta od izvorne veličine. Također, možete koristiti dva parametra za odvojeno smanjivanje smjerova x osi i y osi.

ljestvica (4, 2);

elipsa (0, 0, 20, 20);

Superpozicija funkcije transformacije

Ovdje se superpozicija odnosi na promjene u odnosu na sadašnji koordinatni sustav. Drugim riječima, učinci se mogu preklapati.

prevesti (40, 10);

prevesti (10, 40);

elipsa (0, 0, 20, 20);

Njegov konačni učinak bit će jednak

prevesti (50, 50);

elipsa (0, 0, 20, 20);

Ista funkcija rotiranja

rotirati (radijani (10));

rotirati (radijani (20));

elipsa (50, 50, 20, 20);

Jednako je

rotirati (radijani (30));

elipsa (50, 50, 20, 20);

I skalirajte funkciju i rotirajte središte na izvornoj točki za skaliranje i rotiranje. Ako želimo postići efekt rotacije sa središnjim položajem na (50, 50), moramo razmišljati na suprotan način. Prvo pomaknite izvornu točku u položaj (50, 50), a zatim dodajte rotirajuću funkciju transformacije. Na kraju učinite svoju grafiku naslikanom na izvornoj točki.

Prije uporabe:

elipsa (50, 50, 50, 20);

Nakon upotrebe:

prevesti (50, 50);

rotirati (radijani (45));

elipsa (0, 0, 50, 20); // Kako bismo vidjeli promjenu kuta zakretanja, napravili smo oval.

Moglo bi izgledati uvrtanje. Morate samo više vježbati pa ćete to razumjeti. (Također možete pokušati promijeniti redoslijed prevođenja funkcija i rotirati kako biste vidjeli razliku.)

Horizontalno kretanje i kružno kretanje

U slijedećim slučajevima, pokretački učinak ćemo ostvariti promjenom koordinatnog sustava. U isto vrijeme, želio bih vas zamoliti da se osvrnete na primjer iz prethodnog poglavlja. Većinu vremena ćete pronaći kako biste ostvarili određenu vrstu učinka, možete koristiti potpuno drugačiju metodu.

Korak 5: Horizontalno kretanje

[cceN_cpp theme = "zora"]

int x, y; void setup () {veličina (300, 300); x = 0; y = visina/2; } void draw () {background (234, 113, 107); noStroke (); prevesti (x, y); elipsa (0, 0, 50, 50); x ++; } [/cceN_cpp]

Koordinata kruga se ne mijenja, ali se mijenja njezin koordinatni sustav.

Okretni pokret

[cceN_cpp theme = "dawn"] plutaju r, R, kut; void setup () {veličina (300, 300); r = 20; // dimenzija kruga R = 100; // Polumjer traga kretanja} void draw () {background (234, 113, 107); prevesti (širina/2, visina/2); // Pomicanje izvorne točke u središte zaslona. rotirati (kut); noStroke (); elipsa (0, R, r, r); kut += 0,05; } [/cceN_cpp]

Nije li to daleko jasnije i jednostavnije od trigonometrijske funkcije? Ovdje možete imati pitanje. Uzmite rotirajući kôd kao primjer. Očigledno je da je gore spomenuta funkcija transformacije relativna i dopušta superpoziciju. Ako upisujemo translate (širina/2, visina/2) u iscrtavanje funkcije, ne znači li to da svaki put kada funkcija crtanja operira jednom, koordinatni sustav pomaknut će udaljenost u desnom donjem smjeru od izvorne baze? Razumno neće zauvijek ostati u središtu zaslona.

Možete razumjeti na ovaj način. Nakon što kôd u izvlačenju funkcija dovrši operaciju odozgo prema dolje, koordinatni sustav će se vratiti u početno stanje u drugoj operaciji. Izvorna točka koordinatnog sustava bit će zadana za povratak u lijevi gornji kut. Dakle, ako želimo da se koordinatni sustav neprestano mijenja, parametri kuta unutar funkcije rotacije stalno će povećavati njegovu vrijednost.

Pristupite statusu koordinata

Ponekad ne želimo da se promjena statusa koordinatnog sustava temelji na prethodnom. U ovom trenutku moramo koristiti funkcije pushMatrix i popMatrix. Dvije se funkcije obično pojavljuju u paru. Funkcija pushMatrix je prije popMatrix -a. Ne mogu se koristiti isključivo ili će krenuti krivo.

Primjer:

[cceN_cpp theme = "svitanje"] pushMatrix (); // Spremi status koordinatnog sustava translate (50, 50); elipsa (0, 0, 20, 20); popMatrix (); // Očitavanje statusa koordinatnog sustava rect (0, 0, 20, 20); [/cceN_cpp]

U ovom primjeru, prije korištenja translate (50, 50), koristimo funkciju pushMatrix.za spremanje trenutnog statusa koordinatnog sustava. To je ujedno i početni status. Nakon što nacrtamo krug, a zatim implementiramo popMatrix, vratit će se u ovaj status. U ovom trenutku, implementirajte funkciju rect, vidjet ćete da nije pretrpjela utjecaj funkcije translate, umjesto toga nacrtajte kvadrat u lijevom gornjem kutu izvorne točke.

Osim toga, funkcije pushMatrix i popMatrix omogućuju ugniježđenje.

Na primjer

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Kako bismo intuitivno prikazali njegov odnos, odabiremo format kondenzacije.

Kombinirano kretanje ili kretanje u pokretu?

Sada počinje drugi val važnog dijela. Samo pokušajte napred. Ranije smo koristili metaforu broda i ljudi. Jeste li ikada razmišljali o tome što ako natjeramo i ljude i brod da se kreću, kakav će osjećaj imati ljudi na plaži?

Slično kombinirati horizontalno kretanje s rotirajućim kretanjem koordinatnog sustava. Ovdje se zapravo radi samo o smjeru.

[cceN_cpp theme = "svitanje"] int x, y; kut plovka; void setup () {veličina (300, 300); pozadina (234, 113, 107); noStroke (); x = 0; // Kada je početna vrijednost x 0, možemo zanemariti ovu rečenicu koda. Prilikom deklariranja varijable zadana vrijednost je 0. y = 0; // Isto kao gore. kut = 0; // Isto kao gore. } void draw () {kut += 0,25; y--; prevesti (širina/2, visina/2); pushMatrix (); rotirati (kut); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Tu su i kružna kretanja i skaliranje koordinatnog sustava.

[cceN_cpp theme = "dawn"] plutaju x, y, kut; void setup () {veličina (300, 300); pozadina (234, 113, 107); noStroke (); } void draw () {kut += 0,01; x = sin (kut) * 100; y = cos (kut) * 100; prevesti (širina / 2, visina / 2); pushMatrix (); ljestvica (1 + 0,1 * sin (kut * 10)); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Neka vas to ne prevari! Točka kruga zapravo radi kružni pokret. Nije teško razumjeti usporedimo li ga s skaliranjem video kamerom. Video kamera koja se stalno pomiče sprijeda ili natrag snima kružnim pokretima točku.

Iznenađen? To su jednostavne osnovne funkcije. No s različitim kombinacijama možemo stvoriti toliko različitih efekata. Do sada je moja izloženost prestala kako bi se uštedjelo malo prostora za vaše istraživanje.

Korak 6: Sveobuhvatna upotreba

Uskoro se završava ovo poglavlje. U posljednje dva poglavlja predstavio sam osnovnu metodu grafičkog kretanja. Vjerujem da biste mogli imati dublje razumijevanje za to, u usporedbi s vašim početnim idejama. Najzad, evo nekoliko dovršenih primjera za vašu referencu.

[cceN_cpp theme = "dawn"] plutaju x1, y1, x2, y2, r, R; kut plutanja1, kut2; void setup () {veličina (300, 300); r = 12; R = 120; kut1 = 0; kut2 = PI/4; } void draw () {background (234, 113, 107); noStroke (); prevesti (širina / 2, visina / 2); kut1 += 0,02; kut2 += 0,06; x1 = R *sin (kut1); y1 = R* cos (kut1); x2 = R/2 *sin (kut2); y2 = R/2 *cos (kut2); elipsa (x1, y1, r/2, r/2); elipsa (x2, y2, r, r); elipsa (-x1, -y1, r/2, r/2); elipsa (-x2, -y2, r, r); elipsa (x1, -y1, r/2, r/2); elipsa (x2, -y2, r, r); elipsa (-x1, y1, r/2, r/2); elipsa (-x2, y2, r, r); moždani udar (255); strokeWeight (3); linija (x1, y1, x2, y2); linija (-x1, -y1, -x2, -y2); redak (x1, -y1, x2, -y2); linija (-x1, y1, -x2, y2); } [/cceN_cpp]

Ovaj primjer ne sadrži nikakvo znanje osim našeg prethodnog poglavlja.

Za koje bodove odgovara? Koje linije odgovaraju? Ni ja to ne mogu shvatiti. Ali sjećam se da potječe iz malog dijela koda.

To je priroda njegova kretanja. Ostale linije su samo zrcalni efekt. Ako nastavite slijediti ove upute, možete napraviti ažuriranu verziju i dodati kontroler na svoju grafiku kako biste promijenili status kretanja grafike u stvarnom vremenu.

Zanimljivost programiranja leži u tome što možete osmisliti ili kombinirati propise. Međutim, konačni program ovisi o vašim sposobnostima. Dizajneri obično imaju snažnu grafičku maštu. Možete skicirati sliku u glavi, a zatim je pokušati prevesti u kôd. Također, možete krenuti od samog kodeksa i propisa, funkcija dizajna i varijabli po želji. Upamtite Obrada je vaša skica, a kod vaše četke! Samo slobodno prskajte svoje ideje!

Korak 7: KRAJ

Za kraj u našem poglavlju, vratimo se na pitanje koje smo dugo čuvali od početka. Koja je svrha trošenja toliko napora da se napravi slika s programom? Nakon što ste naučili ovo poglavlje, uvidjet ćete da postoji toliko mnogo metoda sviranja koje čekaju da istražite.

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; void setup () {veličina (500, 500); } void draw () {background (200, 0, 0); browX = 150 + sin (frameCount / 30.0) *20; earD = 180 + sin (frameCount / 10.0) *20; eyeD = 60 + sin (frameCount/30.0) *50; liceD = 300; strokeWeight (8); elipsa (175, 220, earD, earD); elipsa (širina - 175, 220, naušnica, naušnica); rect (100, 100, faceD, faceD); linija (browX, 160, 220, 240); linija (width-browX, 160, width-220, 240); ispuniti (nasumično (255), slučajno (255), slučajno (255)); elipsa (175, 220, okoD, okoD); elipsa (širina-175, 220, okoD, okoD); ispuniti (255); točka (širina/2, visina/2); trokut (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, širina - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Nije li to čarolija za dinamičku grafiku? Ovdje vam ne pokazujem previše slučajeva. Možda biste mogli osmisliti daleko bolji učinak od mene. Prednost crtanja programom postoji u tome što se možete igrati sa svakim pikselom. Budući da vaša grafika nije bitmapa, svaka ključna točka na vašoj grafici može se kontrolirati. Može ostvariti neke učinke koje drugi softver ne može ostvariti.

Ako imate srce koje želi sve slomiti i ponovno spojiti, studijski program uvelike će vam pomoći da ispunite ovu ideju.

Ovaj članak dolazi od dizajnera Wenzyja.

Korak 8: Relativna očitanja:

Zanimljiv vodič za programiranje za dizajnera-obrada početnog dodira

Zanimljive programske upute za dizajnera-izradite svoj prvi program za obradu

Zanimljive programske upute za dizajnera - pokrenite svoju sliku (prvi dio)

Ako imate pitanja, možete poslati e -poruku na [email protected].

Ovaj članak je sa: