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

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:04

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 pomoću programa. Što više znate, to ćete postići sjajniji rezultat.

Korak 1: Kretanje i funkcija

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

Šta 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, što može učiniti da statička grafika postane dinamična. Međutim, ovaj format kretanja je previše jednostavan. Koristit ćemo znanje o funkcijama koje smo prethodno 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"] float x, y; void setup () {veličina (300, 300); pozadina (0); x = 0; } void draw () {stroke (255); strokeWeight (2); y = pow (x, 2) / 100,0; // Funkcija pow će se vratiti na n -tu stepen broja oznake. (x, 2) predstavlja kvadrat x. Prvi parametar je osnovni broj, a drugi indeks. tačka (x, y); x ++; } [/cceN_cpp]

Efekat trčanja

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

Kopirajte sljedeći kôd.

[cceN_cpp theme = "dawn"] float 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); tačka (x, y); } [/cceN_cpp]

Efekat trčanja

Ovo je grafika koju dobijamo nakon rukovanja kodom. I to su njihovi tragovi kretanja. U usporedbi s prethodnim, rezultat je očit. Slika funkcije zapravo odgovara tragu kretanja! Sasvim je jednostavno. Samo trebate 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 odnosu na originalnu grafiku, pjesma će biti okrenuta naglavačke. Pretpostavljam da morate imati osjećaj da se neka teška pitanja koja su vam dugo mučila u glavi odmah rješavaju. 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 da prevedemo funkcije 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 pravac kretanja. Ne zaboravite uzeti u obzir raspon polja vrijednosti i domene definicije ili će vaša slika nestati s ekrana.

Trigonometrijska funkcija

Idemo dalje kako bismo saznali neke zapise trigonometrijskih funkcija.

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

Upotreba stepena funkcije je relativno suprotna. Može pretvoriti radijan u kut. Unesite otisak (stepeni (PI/2)) direktno u oblast za uređivanje i pogledajte šta ćete dobiti.

Korak 3: Upravljajte grafičkim kretanjem pomoću trigonometrijske funkcije

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

[cceN_cpp theme = "dawn"] float 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 maksimalna vrijednost 1. Visina ekrana je 300. Upućeno na y = sin (radijani (x)) * 150 + 150, stoga će se raspon promjene vrijednosti y dobro kontrolirati unutar 0 do 300.

Spinning Circle

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 ponovo pokažem dvije slike koje smo vidjeli na početku ovog članka.

Zapravo su vizualno razotkrili odnos između koordinate opsega i trigonometrijske funkcije. Kretanje na gornjim slikama pokreće stalno rastuća nezavisna varijabla θ. Lijevo je slika funkcije sin i cos, a desno označava točku koja radi kružno kretanje nakon mapiranja. Nije li to baš pametno? To više nije misteriozno. Možete koristiti kôd za njegovu realizaciju.

Jednostavan primjer:

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

Pogledaj! Pojavljuje se krug koji se vrti! Ovdje nezavisna varijabla više nije u konstantnom povećanju ugla postajanja ugla (jednako θ na slici). To je oznaka za ugao. 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 put kretanja bit će ograničen u rasponu od -1 do 1.

Zašto ne biste koristili rastući x? Prema svojstvu same funkcije, bilo koji x unutar domene definicije ima jedini y koji mu odgovara. Dakle, u ravni koordinatnog sistema pravokutne dimenzije ne možete pronaći "jednostavnu funkciju" za crtanje kruga direktno. To znači da ne možemo više koristiti ovaj format.

y = (Nepoznati izraz x?);

x ＋＋;

Zato moramo promijeniti našu 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 (ugao);

y = R * sin (kut);

ugao += 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 funkcija sin odnos suprotne strane prema hipotenuzi; funkcija cos je omjer susjedne i hipotenuze. Bez obzira gdje se nalazi tačka kružnice, r (radijus) će ostati nepromijenjen. Stoga možemo zaključiti izraz x koordinate i y koordinate.

Zbog toga što ovo nije matematičko uputstvo, ovdje ću vam prestati prikazivati više znanja o trigonometrijskim funkcijama. Ako to želite znati ili ste jednostavno zaboravili, možete to pokušati ponovo pregledati sami.

Naravno, u redu je ako to ne možete u potpunosti razumjeti. Morate samo znati kako ga koristiti za crtanje kruga. Ovo je takođe neka vrsta „programske ideje“. Kasnije ćemo se često pozivati na neke od postojećih modula koje su drugi napravili za realizaciju određene vrste funkcije. Samo se nemojte truditi da to detaljno upoznate.

Međutim, funkcija sin i cos je uobičajena. Ako želite stvoriti kreaciju na višem nivou, pokušajte to temeljito upoznati. Ako ovo pitanje samo po sebi može nas natjerati da naučimo više matematičkog znanja, čekaju vas još zanimljivije stvari.

Ovo su slike blisko povezane s trigonometrijskom funkcijom.

Korak 4: Koordinatni sistem kretanja

Prethodni efekti odnose se na promjene grafičkih koordinata. Sam koordinatni sistem je statičan. Zapravo možemo napraviti koordinatni pomak kako bismo ostvarili pokretni učinak. Ovo je baš kao da ljudi na plaži gledaju druge ljude u čamcu. Za ljude na brodu čamac je statičan. Ali što ako se sam brod kreće, tada se i ljudi u čamcu kreću s njim. Prvi slučajevi govore o „ljudima koji trče na brodu“. Zapravo, čamac se ne miče. U nastavku su neke uobičajene funkcije za promjenu koordinatnog sistema.

Prevođenje funkcija

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

Format pozivanja:

prevesti (a, b)

Prvi parametar označava pomicanje u pozitivnom smjeru osi x za piksele. Drugi parametar označava pomicanje u pozitivnom smjeru osi y za b piksela.

Uporedite dva koda i pokušajte pronaći razliku. (Da bismo pojednostavili kod, možemo izbrisati veličinu funkcije, širina i visina ekrana su zadane na 100.)

Pre nego što upotrebimo:

elipsa (0, 0, 20, 20);

Nakon što upotrebimo:

prevesti (50, 50);

elipsa (0, 0, 20, 20);

Funkcija rotiranje

Format pozivanja:

rotirati (a)

Koristi se za rotiranje koordinatnog sistema. Kada 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 upotrebe:

elipsa (50, 50, 20, 20);

Nakon upotrebe:

rotirati (radijani (30));

elipsa (50, 50, 20, 20);

Efekat u programu je da se krug rotira oko koordinatne središnje tačke u smeru kazaljke na satu za 30 stepeni.

Skala funkcija

Format pozivanja:

skala (a)

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

Prije upotrebe:

elipsa (0, 0, 20, 20);

Nakon upotrebe:

skala (4);

elipsa (0, 0, 20, 20);

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

skala (4, 2);

elipsa (0, 0, 20, 20);

Superpozicija funkcije transformacije

Ovdje se superpozicija svodi na promjene u odnosu na sadašnji koordinatni sistem. Drugim riječima, efekti 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 centar na izvornoj tački da biste skalirali i rotirali. Ako želimo postići efekt rotacije sa središnjom pozicijom (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. Konačno, učinite svoju grafiku naslikanom na originalnoj tački.

Prije upotrebe:

elipsa (50, 50, 50, 20);

Nakon upotrebe:

prevesti (50, 50);

rotirati (radijani (45));

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

Moglo bi izgledati uvrnuto. Samo morate više vježbati i tada ćete to razumjeti. (Također možete pokušati promijeniti redoslijed prevođenja funkcija i rotirati da vidite razliku.)

Horizontalno i kružno kretanje

U sljedećim slučajevima ćemo pokretni efekat ostvariti promjenom koordinatnog sistema. U isto vrijeme, želio bih vas zamoliti da se osvrnete na primjer iz prethodnog poglavlja. Većinu vremena ćete otkriti da za postizanje određene vrste 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 njen koordinatni sistem.

Okretni pokret

[cceN_cpp theme = "dawn"] pluta r, R, kut; void setup () {veličina (300, 300); r = 20; // dimenzija kruga R = 100; // Polumjer staze kretanja} void draw () {background (234, 113, 107); prevesti (širina/2, visina/2); // Pomaknite originalnu točku u središte ekrana. rotirati (ugao); noStroke (); elipsa (0, R, r, r); ugao += 0,05; } [/cceN_cpp]

Nije li to daleko jasnije i jednostavnije od trigonometrijske funkcije? Možda imate pitanje ovdje. 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 draw radi jednom, koordinatni sistem će pomaknuti udaljenost u smjeru dna desno od izvorne baze? Razumno neće zauvijek ostati u središtu ekrana.

Možete razumjeti na ovaj način. Nakon što kôd u izvlačenju funkcija dovrši operaciju odozgo prema dolje, koordinatni sistem će se vratiti u početni status u drugoj operaciji. Originalna tačka koordinatnog sistema će biti zadana da bi se vratila nazad u lijevi gornji ugao. Dakle, ako želimo da se koordinatni sistem stalno mijenja, kutni parametri unutar funkcije rotirat će stalno povećavati njegovu vrijednost.

Pristupite statusu koordinate

Ponekad ne želimo da se promjena statusa koordinatnog sistema zasniva 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 naopako.

Primjer:

[cceN_cpp theme = "dawn"] pushMatrix (); // Pohrani translate statusa koordinatnog sistema (50, 50); elipsa (0, 0, 20, 20); popMatrix (); // Očitavanje statusa koordinatnog sistema rect (0, 0, 20, 20); [/cceN_cpp]

U ovom primjeru, prije korištenja translate (50, 50), koristimo funkciju pushMatrix.za spremanje trenutnog statusa koordinatnog sistema. Ovo 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 nacrta 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 njegovu vezu, odabiremo format kondenzacije.

Kombinovano 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 šta će, ako natjeramo i ljude i čamac da se kreću, kakav osjećaj imati ljudi na plaži?

Poput kombinovanja horizontalnog kretanja sa rotirajućim kretanjem koordinatnog sistema. Ovdje se zapravo radi samo o smjeru.

[cceN_cpp theme = "dawn"] 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 deklaracije varijable, zadana vrijednost je 0. y = 0; // Isto kao gore. ugao = 0; // Isto kao gore. } void draw () {ugao += 0,25; y--; prevesti (širina/2, visina/2); pushMatrix (); rotirati (ugao); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Postoje kružna kretanja i skaliranje koordinatnog sistema.

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

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

Iznenađen? Ovo su jednostavne osnovne funkcije. Ali 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 odnosu na vaše početne ideje. Najzad, evo nekoliko dovršenih primjera za vašu referencu.

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; plutajući ugao1, ugao2; void setup () {veličina (300, 300); r = 12; R = 120; angle1 = 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 (ugao1); y1 = R* cos (ugao1); 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); linija (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 njegovog kretanja. Ostale linije su samo zrcalni efekt. Ako nastavite slijediti ove smjernice, 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 dizajnirati 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 početi 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

Na kraju u našem poglavlju, vratimo se na pitanje koje smo dugo čuvali od početka. Kakva je korist od trošenja toliko napora da se napravi slika s programom? Nakon što ste naučili ovo poglavlje, vidjet ć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, naušnica, naušnica); 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); ispuni (nasumično (255), nasumično (255), nasumično (255)); elipsa (175, 220, oko, oko); elipsa (širina-175, 220, oko, oko); ispuniti (255); tačka (širina/2, visina/2); trougao (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 magija za dinamičku grafiku? Ovdje vam ne pokazujem previše slučajeva. Možda biste mogli osmisliti daleko bolji efekat od mene. Prednost crtanja pomoću programa postoji u tome što se možete igrati sa svakim pikselom. Budući da vaša grafika nije bitmapa, svaka ključna tačka na vašoj grafici se može kontrolirati. Može ostvariti neke efekte koje drugi softver ne može ostvariti.

Ako imate srce koje želi sve slomiti i ponovo spojiti, studijski program će vam uvelike 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

Zanimljiv vodič za programiranje za dizajnera-Kreirajte svoj prvi program za obradu

Zanimljiv vodič za programiranje za dizajnera - pokrenite svoju sliku (prvi dio)

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

Ovaj članak je sa: