Zanimiv programski vodnik za oblikovalca-Ustvarite svojo sliko (drugi del): 8 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

Matematika se večini zdi neuporabna. V vsakdanjem življenju se najpogosteje uporablja samo seštevanje, odštevanje, množenje in deljenje. Vendar pa je precej drugače, če lahko ustvarjate s programom. Več ko veste, bolj čudovit rezultat boste dobili.

1. korak: Gibanje in funkcija

Naj vam pokažem nekaj neznanih slik, ki bodo spodbudile vaš okus.

Kaj je to? Najprej samo obdržite to vprašanje, potem pa ga boste poznali in uporabili.

V zadnjem poglavju smo se naučili nastavitve in risbe funkcij, zaradi katerih lahko statična grafika postane dinamična. Vendar je ta oblika gibanja preveč preprosta. Znanje o funkcijah, ki smo ga prej obvladali, bomo uporabili za izvajanje grafike z lastnimi lastnostmi.

Koliko funkcij lahko prepoznate iz zgornjih slik? Kakšen odnos imajo do gibanja? Zdaj pa iz nje vzemimo kvadratno funkcijo, naključno dodamo nekaj parametrov in poglejmo, kaj se bo zgodilo. Na primer, y = x² / 100.

Tako izgleda slika funkcije. Kopirajte spodnjo kodo.

[cceN_cpp theme = "dawn"] float x, y; void setup () {velikost (300, 300); ozadje (0); x = 0; } void draw () {potez (255); strokeWeight (2); y = pow (x, 2) / 100,0; // Funkcija pow se bo vrnila na n -to stopnjo številke označbe. (x, 2) predstavlja kvadrat x. Prvi parameter je osnovna številka, drugi pa indeks. točka (x, y); x ++; } [/cceN_cpp]

Učinek teka

Nato izberite funkcijo sin. Formula: y = 150 + sin (x).

Kopirajte naslednjo kodo.

[cceN_cpp theme = "dawn"] float x, y; void setup () {velikost (300, 300); ozadje (0); x = 0; } void draw () {y = višina/2 + sin (radiani (x)) * 150; // Funkcija radianove transformacije x v kot. x ++; kap (255); strokeWeight (2); točka (x, y); } [/cceN_cpp]

Učinek teka

To je slika, ki jo dobimo po upravljanju kode. In to so njihove sledi gibanja. V primerjavi s prejšnjim je rezultat očiten. Slika funkcije dejansko ustreza sledi gibanja! Precej preprosto je. Vrednost x, y morate le zamenjati v koordinato. Prva steza, ki smo jo narisali, je enakovredna grafiki funkcije y = x² / 100. Druga sled je enaka grafiki funkcije y = 150 + sin (x). Toda v programu je smer osi y nasprotna. Tako bo skladba v primerjavi s prvotno grafiko obrnjena na glavo. Mislim, da moraš imeti občutek, da se nekatera težka vprašanja, ki so ti dolgo v glavi, rešijo takoj. Neverjetno je, da lahko te fantastične funkcije, ki smo se jih prej naučili, uporabimo za nadzor grafičnega gibanja!

Korak: Zapišite funkcijo

Spodaj sem navedel več pogosto uporabljenih funkcij. Upajmo, da nam lahko to pomaga pri prevajanju funkcij v kodo, ki jo računalnik lahko prepozna.

Zato se spodaj navedena formula v programu zapiše tako:

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

Prav tako lahko naključno vpišete funkcijo v program in si ogledate, kako bo videti njeno gibanje. Upoštevajte obseg polja vrednosti in domene definicije, sicer bo vaša slika zmanjkala na zaslonu.

Trigonometrična funkcija

Zdaj pa pojdimo dalje, da spoznamo nekaj zapisov trigonometričnih funkcij.

Pozorni moramo biti, da v programu vhod funkcijskega parametra glede na kot sprejme radian. Tako se sin90 ° zapiše v greh (PI ／ 2). Če te metode ne poznate, lahko s funkcijo randians predhodno pretvorite kot v radian in nato napišete sin （radiane (90)).

Uporaba stopinj funkcije je sorazmerno nasprotna. Radian lahko spremeni v kot. Vnesite tiskanje (stopinje (PI/2)) neposredno v območje za urejanje in poglejte, kaj boste dobili.

3. korak: Nadzirajte grafično gibanje s trigonometrično funkcijo

Tukaj je primer, da vidite dejanski učinek grafičnega gibanja.

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

Funkcija sin je periodična funkcija. Njegova najmanjša vrednost je －1, največja vrednost pa 1. Višina zaslona je 300. Sklicuje se na y = sin (radiani (x)) * 150 + 150, zato bo območje spreminjanja vrednosti y dobro nadzorovano v 0 do 300.

Vrteči se krog

No, končno smo prišli do najbolj pomembnega dela tega poglavja. Kako narisati krožno pot v programu? Kako uporabiti funkcije za prikaz? Naj vam spet pokažem dve sliki, ki smo jih videli na začetku tega članka.

Pravzaprav so vizualno razkrili razmerje med koordinato oboda in trigonometrično funkcijo. Gibanje na zgornjih slikah poganja nenehno naraščajoča neodvisna spremenljivka θ. Levo je slika funkcije sin in cos, desna pa označuje točko, ki se po preslikavi krožno premika. A ni zelo pametno? Ni več skrivnostno. Za uresničitev lahko uporabite kodo.

Preprost primer:

[cceN_cpp theme = "dawn"] float x, y, r, R, kot; void setup () {velikost (300, 300); r = 20; // premer kroga R = 100; // Polmer poti premikanja x = 0; kot = 0; y = višina/2; } void draw () {ozadje (234, 113, 107); prevesti (širina/2, višina/2); // Premaknite izvirno točko v sredino zaslona. noStroke (); x = R * cos (kot); y = R * sin (kot); elipsa (x, y, r, r); kot += 0,05; } [/cceN_cpp]

Poglej! Prikaže se vrteči se krog! Tu neodvisna spremenljivka ni več v konstantnem povečevanju kota bitnega kota (enako je θ na sliki). Je stojalo za kot. Med njimi imajo xy relativno pomnožen koeficient R, kar vodi do podaljšanja polmera gibanja kroga (R je za polmer). Če ne želite pomnožiti R, bo njegova pot gibanja omejena v območju od -1 do 1.

Zakaj ne bi uporabili naraščajočega x? Glede na lastnost same funkcije ima vsak x znotraj definicijske domene edini y, ki se mu ujema. Tako v ravninskem pravokotnem dimenzijskem koordinatnem sistemu ne morete najti "preproste funkcije" za neposredno risanje kroga. To pomeni, da te oblike ne moremo več uporabljati.

y = (neznani izraz x?);

x ＋＋;

Zato moramo svojo idejo spremeniti. Izberite drug kot kot neodvisno spremenljivko in nato uporabite funkcijo sin in cos, da jo spremenite v vodoravno in navpično koordinato.

x = R * cos (kot);

y = R * sin (kot);

kot += 0,05;

Nekateri se morda sprašujete, zakaj lahko prikaže pot gibanja kroga. Po definiciji trigonometrične funkcije lahko zlahka ugotovimo, da je funkcija sin razmerje nasprotne strani do hipotenuze; funkcija cos je razmerje med sosednjo in hipotenuzo. Ne glede na to, kje je krožna točka, bo r (polmer) ostal nespremenjen. Zato lahko zaključimo izraz koordinate x in koordinate y.

Ker to ni matematično vodilo, vam bom nehal prikazovati več znanja o trigonometrični funkciji. Če želite to vedeti ali pa pozabite, jo lahko poskusite pregledati sami.

Seveda je vse v redu, če tega ne razumete v celoti. Le risati krog morate le z njim. Tudi to je nekakšna "programska ideja". Kasneje se bomo pogosto sklicevali na nekatere obstoječe module, ki so jih naredili drugi za uresničitev določene vrste funkcije. Samo ne trudite se, da bi to podrobno spoznali.

Vendar je funkcija sin in cos pogosta. Če želite ustvariti na višji ravni, raje poskusite to temeljito poznati. Če se lahko to vprašanje samo pripelje do tega, da se naučimo več matematičnega znanja, vas čakajo še zanimivejše stvari.

To so slike, ki so tesno povezane s trigonometrično funkcijo.

4. korak: Koordinatni sistem gibanja

Prejšnji učinki govorijo o spremembah grafičnih koordinat. Sam koordinatni sistem je statičen. Pravzaprav lahko naredimo koordinato, da uresničimo gibalni učinek. To je tako, kot ljudje na plaži opazujejo druge ljudi v čolnu. Za ljudi na čolnu je čoln statičen. Kaj pa, če se čoln sam premika, se z njim premikajo tudi ljudje v čolnu. V prvih primerih gre za "ljudi, ki tečejo na čolnu". Pravzaprav se čoln ne premika. Spodaj je nekaj skupnih funkcij za spreminjanje koordinatnega sistema.

Prevajanje funkcij

Funkcija translate, o kateri smo že govorili, se uporablja za vodoravno premikanje koordinatnega sistema grafike.

Format priklica:

prevesti (a, b)

Prvi parameter pomeni premik v pozitivno smer osi x za slikovne pike. Drugi parameter pomeni premik v pozitivno smer osi y za b slikovnih pik.

Primerjajte obe kodi in poskusite najti kakršno koli razliko. (Za poenostavitev kode lahko izbrišemo velikost funkcije, širina in višina zaslona sta privzeto 100.)

Pred uporabo:

elipsa (0, 0, 20, 20);

Ko uporabimo:

prevesti (50, 50);

elipsa (0, 0, 20, 20);

Funkcija vrtenja

Format priklica:

vrtenje (a)

Uporablja se za vrtenje koordinatnega sistema. Ko je parameter pozitiven, bo za središčno točko izbral prvotno točko in se zasukal v smeri urinega kazalca. Za uporabo radiana je vnos parametra enak pri trigonometrični funkciji.

Pred uporabo:

elipsa (50, 50, 20, 20);

Po uporabi:

vrtenje (radiani (30));

elipsa (50, 50, 20, 20);

Učinek v programu je, da se krog vrti okoli koordinatne središčne točke v smeri urinega kazalca za 30 stopinj.

Lestvica funkcij

Format priklica:

lestvica (a)

Ta funkcija lahko pomanjša koordinatni sistem. Vrednost je za skaliranje. Ko je parameter večji od 1, povečajte; če je nižja od 1, pomanjšajte.

Pred uporabo:

elipsa (0, 0, 20, 20);

Po uporabi:

lestvica (4);

elipsa (0, 0, 20, 20);

Krog na zgornji sliki se poveča na štirikratnik prvotne velikosti. Z dvema parametroma lahko ločeno pomanjšate tudi smeri osi x in osi y.

lestvica (4, 2);

elipsa (0, 0, 20, 20);

Superpozicija transformacijske funkcije

Tu gre pri superpoziciji za spremembe glede na sedanji koordinatni sistem. Z drugimi besedami, učinki se lahko prekrivajo.

prevesti (40, 10);

prevesti (10, 40);

elipsa (0, 0, 20, 20);

Njegov končni učinek bo enak

prevesti (50, 50);

elipsa (0, 0, 20, 20);

Enako kot funkcija vrtenja

vrtenje (radiani (10));

vrtenje (radiani (20));

elipsa (50, 50, 20, 20);

Enako

vrtenje (radiani (30));

elipsa (50, 50, 20, 20);

Funkcijo merite in zavrtite središče na prvotni točki za merjenje in vrtenje. Če želimo učinek rotacije doseči s središčnim položajem pri (50, 50), moramo razmišljati obratno. Najprej premaknite prvotno točko v položaj (50, 50), nato dodajte funkcijo rotacijske transformacije. Končno narišite svojo grafiko na prvotno točko.

Pred uporabo:

elipsa (50, 50, 50, 20);

Po uporabi:

prevesti (50, 50);

vrtenje (radiani (45));

elipsa (0, 0, 50, 20); // Da bi videli spremembo kota vrtenja, smo naredili oval.

Morda se zdi zvijanje. Morate samo več vaditi, potem boste razumeli. (Poskusite lahko tudi spremeniti zaporedje funkcij prevajanja in zavrtite, da vidite razliko.)

Vodoravno in krožno gibanje

V naslednjih primerih bomo s spreminjanjem koordinatnega sistema uresničili gibalni učinek. Hkrati bi vas prosil, da se sklicujete na primer iz prejšnjega poglavja. Večino časa boste za dosego določenega učinka uporabili popolnoma drugačno metodo.

5. korak: vodoravno gibanje

[cceN_cpp theme = "dawn"]

int x, y; void setup () {velikost (300, 300); x = 0; y = višina/2; } void draw () {ozadje (234, 113, 107); noStroke (); prevesti (x, y); elipsa (0, 0, 50, 50); x ++; } [/cceN_cpp]

Koordinata kroga se ne spremeni, spremeni pa se njen koordinatni sistem.

Rotacijsko gibanje

[cceN_cpp theme = "dawn"] float r, R, kot; void setup () {velikost (300, 300); r = 20; // dimenzija kroga R = 100; // Polmer gibanja poti} void draw () {ozadje (234, 113, 107); prevesti (širina/2, višina/2); // Premakni izvirno točko v sredino zaslona. vrtenje (kot); noStroke (); elipsa (0, R, r, r); kot += 0,05; } [/cceN_cpp]

Ali ni veliko bolj jasna in enostavna kot trigonometrična funkcija? Morda imate tukaj vprašanje. Za primer vzemite vrtljivo kodo. Očitno je, da je zgoraj omenjena funkcija preoblikovanja relativna in dopušča prekrivanje. Če v funkcijo draw napišemo translate (širina/2, višina/2), ali to ne pomeni, da vsakič, ko funkcija draw enkrat deluje, bo koordinatni sistem premaknil razdaljo v desno spodnjo smer od prvotne osnove? Razumno ne bo večno ostal v središču zaslona.

Na ta način lahko razumete. Ko koda v funkciji draw dokonča operacijo od spodaj, se bo koordinatni sistem pri drugi operaciji vrnil v začetno stanje. Prvotna točka koordinatnega sistema bo privzeta, da se vrne nazaj v levi zgornji kot. Če torej želimo, da se koordinatni sistem neprestano spreminja, morajo kotni parametri znotraj funkcije vrtenja stalno povečevati njegovo vrednost.

Dostop do statusa koordinate

Včasih nočemo, da sprememba statusa koordinatnega sistema temelji na prejšnjem. V tem času moramo uporabiti funkciji pushMatrix in popMatrix. Obe funkciji se običajno pojavita v paru. Funkcija pushMatrix je pred popMatrixom. Ne morete jih uporabljati samo, sicer bo šlo narobe.

Primer:

[cceN_cpp theme = "dawn"] pushMatrix (); // Shrani stanje stanja koordinatnega sistema (50, 50); elipsa (0, 0, 20, 20); popMatrix (); // Branje stanja koordinatnega sistema rect (0, 0, 20, 20); [/cceN_cpp]

V tem primeru pred uporabo translate (50, 50) uporabimo funkcijo pushMatrix.za shranjevanje trenutnega stanja koordinatnega sistema. To je hkrati začetni status. Ko narišemo krog in nato implementiramo popMatrix, se bo vrnil v to stanje. V tem času, implementirajte funkcijo rect, boste ugotovili, da ni utrpela vpliva funkcije translate, namesto tega nariše kvadrat v levem zgornjem kotu prvotne točke.

Poleg tega funkciji pushMatrix in popMatrix omogočata gnezdenje.

Na primer

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Da bi intuitivno prikazali njegovo razmerje, izberemo zgoščeno obliko.

Kombinirano gibanje ali gibanje v gibanju?

Zdaj se začne drugi val pomembnega dela. Samo poskušajte napredovati. Prej smo uporabljali metaforo čolna in ljudi. Ste kdaj pomislili, kaj če bomo tako ljudi kot čoln premaknili, kakšen občutek bodo imeli ljudje na plaži?

Tako kot združite vodoravno gibanje z vrtečim se gibanjem koordinatnega sistema. Bistvo tukaj je dejansko samo v smeri.

[cceN_cpp theme = "dawn"] int x, y; plavajoči kot; void setup () {velikost (300, 300); ozadje (234, 113, 107); noStroke (); x = 0; // Ko je začetna vrednost x 0, lahko ta stavek kode zanemarimo. Pri razglasitvi spremenljivke je privzeta vrednost 0. y = 0; // Enako zgoraj. kot = 0; // Enako zgoraj. } void draw () {kot += 0,25; y--; prevesti (širina/2, višina/2); pushMatrix (); vrtenje (kot); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Obstajajo krožno gibanje in skaliranje koordinatnega sistema.

[cceN_cpp theme = "dawn"] float x, y, kot; void setup () {velikost (300, 300); ozadje (234, 113, 107); noStroke (); } void draw () {kot += 0,01; x = sin (kot) * 100; y = cos (kot) * 100; prevesti (širina / 2, višina / 2); pushMatrix (); lestvica (1 + 0,1 * sin (kot * 10)); elipsa (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Naj vas to ne zavede! Krožna točka dejansko izvaja krožno gibanje. Če ga primerjamo s skaliranjem z video kamero, ga ni težko razumeti. Videokamera, ki se nenehno premika spredaj ali zadaj, snema točko v krožnem gibanju.

Presenečeni? To so preproste osnovne funkcije. Toda z različnimi kombinacijami lahko ustvarimo toliko različnih učinkov. Do sedaj se moja izpostavljenost ustavi, da bi prihranili nekaj prostora za vaše raziskovanje.

6. korak: Celovita uporaba

Za to poglavje se kmalu konča. V zadnjih dveh poglavjih sem predstavil osnovno metodo grafičnega gibanja. Verjamem, da bi to lahko bolje razumeli v primerjavi s svojimi začetnimi zamislimi. Nazadnje, tukaj je nekaj zaključenih primerov za vašo referenco.

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; plavajoči kot1, kot2; void setup () {velikost (300, 300); r = 12; R = 120; kot1 = 0; kot 2 = PI/4; } void draw () {ozadje (234, 113, 107); noStroke (); prevesti (širina / 2, višina / 2); kot1 += 0,02; kot2 += 0,06; x1 = R *sin (kot 1); y1 = R* cos (kot 1); x2 = R/2 *sin (kot 2); y2 = R/2 *cos (kot 2); 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); kap (255); strokeWeight (3); vrstica (x1, y1, x2, y2); vrstica (-x1, -y1, -x2, -y2); vrstica (x1, -y1, x2, -y2); vrstica (-x1, y1, -x2, y2); } [/cceN_cpp]

Ta primer ne vsebuje nobenega znanja razen našega prejšnjega poglavja.

Za katere točke se ujema? Katere vrstice se ujemajo? Tudi tega ne morem ugotoviti. Spomnim pa se, da izhaja iz majhnega dela kode.

To je narava njegovega gibanja. Ostale črte so le zrcalni učinek. Če boste nadaljevali s temi navodili, lahko naredite posodobljeno različico in svoji grafiki dodate krmilnik, da spremenite stanje gibanja grafike v realnem času.

Zanimivost programiranja je v tem, da lahko oblikujete ali kombinirate predpise. Kakšen bo končni program, je odvisno od vaših sposobnosti. Običajno imajo oblikovalci močno grafično domišljijo. Lahko si skicirate sliko v glavi in jo nato poskusite prevesti v kodo. Prav tako lahko začnete s samim kodeksom in predpisi, oblikovalskimi funkcijami in spremenljivkami po želji. Ne pozabite, da je obdelava vaša skica, koda pa vaše krtače! Samo prosto razpršite svoje ideje!

7. korak: KONEC

Nazadnje v našem poglavju se vrnimo k vprašanju, ki smo ga dolgo ohranili od začetka. Kakšen je namen porabe toliko truda, da bi naredili sliko s programom? Ko boste izvedeli to poglavje, boste ugotovili, da vas čaka toliko načinov igranja, da jih raziščete.

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; void setup () {velikost (500, 500); } void draw () {ozadje (200, 0, 0); browX = 150 + sin (frameCount / 30.0) *20; earD = 180 + greh (frameCount / 10.0) *20; eyeD = 60 + sin (frameCount/30.0) *50; obrazD = 300; strokeWeight (8); elipsa (175, 220, earD, earD); elipsa (širina - 175, 220, ušesa, ušesa); rect (100, 100, faceD, faceD); vrstica (browX, 160, 220, 240); vrstica (width-browX, 160, width-220, 240); izpolni (naključno (255), naključno (255), naključno (255)); elipse (175, 220, eyeD, eyeD); elipsa (širina-175, 220, eyeD, eyeD); napolni (255); točka (širina/2, višina/2); trikotnik (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]

Ali ni čarobno za dinamično grafiko? Tukaj vam ne pokažem preveč primerov. Morda boste lahko oblikovali veliko boljši učinek od mene. Prednost risanja s programom obstaja, saj se lahko igrate z vsakim piksom. Ker vaša grafika ni bitna, je mogoče nadzorovati vsako ključno točko grafike. Lahko uresniči nekatere učinke, ki jih druga programska oprema ne more uresničiti.

Če imate srce, ki želi vse zlomiti in znova združiti, vam bo študijski program v veliko pomoč pri uresničevanju te zamisli.

Ta članek prihaja od oblikovalca Wenzyja.

8. korak: Relativni odčitki:

Zanimiva programska navodila za oblikovalca-obdelava začetnega dotika

Zanimiva programska navodila za oblikovalca-ustvarite svoj prvi program za obdelavo

Zanimiva programska navodila za oblikovalca - zaženite svojo sliko (prvi del)

Če imate kakršna koli vprašanja, lahko pošljete e -pošto na [email protected].

Ta članek je iz: