Huvitavad programmeerimisjuhised disainerile-pildistage (teine osa): 8 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:46

Enamikule teist tundub matemaatika kasutu. Meie igapäevaelus kasutatakse kõige sagedamini lihtsalt liitmist, lahutamist, korrutamist ja jagamist. See on aga hoopis teistsugune, kui saate programmiga luua. Mida rohkem teate, seda imelisema tulemuse saate.

Samm: liikumine ja funktsioon

Ma näitan teile mitmeid tundmatuid pilte, et teie maitset ergutada.

Mis see on? Hoidke see küsimus kõigepealt alles ja hiljem teate ja kasutate seda.

Viimases peatükis oleme õppinud funktsioonide seadistamist ja funktsioonide joonistamist, mis võivad muuta staatilise graafika dünaamiliseks. See liikumisvorming on aga liiga lihtne. Me kasutame funktsiooniteadmisi, mida oleme varem omandanud, et graafikat oma iseloomuga käitada.

Kui palju funktsioone saate ülaltoodud piltidelt ära tunda? Milline on nende suhe liikumisega? Nüüd võtame sealt ruutfunktsiooni, lisame juhuslikult mõned parameetrid ja vaatame, mis juhtub. Näiteks y = x² / 100.

Funktsioonipilt näeb välja selline. Kopeerige allolev kood.

[cceN_cpp theme = "koidik"] float x, y; void setup () {suurus (300, 300); taust (0); x = 0; } tühine viik () {löök (255); löökKaal (2); y = pow (x, 2) / 100,0; // Funktsioon pow naaseb tähise numbri n -ndasse astmesse. (x, 2) tähistab x ruutu. Esimene parameeter on baasarv ja teine indeks. punkt (x, y); x ++; } [/cceN_cpp]

Jooksev efekt

Seejärel valige funktsioon patt. Valem: y = 150 + sin (x).

Kopeerige järgmine kood.

[cceN_cpp theme = "koidik"] float x, y; void setup () {suurus (300, 300); taust (0); x = 0; } void draw () {y = kõrgus/2 + sin (radiaanid (x)) * 150; // Funktsioon radiaan teisendab x nurgaks. x ++; insult (255); löökKaal (2); punkt (x, y); } [/cceN_cpp]

Jooksev efekt

See on graafika, mille saame pärast koodi kasutamist. Ja need on nende liikumisjäljed. Võrreldes endisega on tulemus ilmne. Funktsioonipilt vastab tegelikult liikumisrajale! See on piisavalt lihtne. Peate lihtsalt asendama x, y väärtuse koordinaadiks. Esimene joonistatud rada võrdub funktsiooni y = x² / 100 graafikaga. Viimane rada võrdub funktsiooni y = 150 + sin (x) graafikaga. Kuid programmis on y telje suund vastupidine. Seega, võrreldes algse graafikaga, on rada tagurpidi. Nüüd on teil vist tunne, et mõned keerulised küsimused, mis teie peas pikka aega kummitavad, lahendatakse kohe. On hämmastav, et neid fantastilisi funktsioone, mida me varem õppisime, saab kasutada graafilise liikumise juhtimiseks!

2. samm: funktsiooni kirjutamine

Allpool on loetletud mitu sageli kasutatavat funktsiooni. Loodetavasti aitavad need meil funktsioone tõlkida koodiks, mida arvuti saab ära tunda.

Seetõttu kirjutatakse programmis järgmine valem järgmiselt:

y = x² → y = pow (x, 2) või 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 = ruutmeetrit (5)

Samuti saate programmi juhuslikult funktsiooni kirjutada ja vaadata, kuidas selle liikumisrada välja näeb. Ärge unustage arvestada väärtusvälja ja määratlusdomeeni vahemikuga, vastasel juhul saab teie graafika ekraanilt otsa.

Trigonomeetriline funktsioon

Nüüd läheme kaugemale, et teada saada mõningaid trigonomeetriliste funktsioonide kirjutisi.

Peame pöörama tähelepanu sellele, et programmis sisestab funktsiooni parameeter nurga suhtes radiaani. Seega kirjutatakse sin90 ° patuks (PI ／ 2). Kui te pole selle meetodiga tuttav, saate funktsiooni randiaanid eelnevalt nurga radiaaniks teisendada ja seejärel kirjutada sin （radiaanid (90)).

Funktsioonikraadide kasutamine on suhteliselt vastupidine. See võib muuta radiaani nurgaks. Sisestage print (kraadid (PI/2)) otse redigeerimisalasse ja vaadake, mida saate.

3. samm: kontrollige graafilist liikumist trigonomeetrilise funktsiooniga

Siin on teil võimalus näha graafilise liikumise tegelikku mõju.

[cceN_cpp theme = "koidik"] float x, y; void setup () {suurus (700, 300); } tühine viik () {taust (234, 113, 107); y = patt (radiaanid (x)) * 150 + 150; x ++; noStroke (); ellips (x, y, 50, 50); } [/cceN_cpp]

Funktsioon patt on perioodiline funktsioon. Selle minimaalne väärtus on －1 ja maksimaalne väärtus 1. Ekraani kõrgus on 300. Viidatud y = sin (radiaanid (x)) * 150 + 150, seetõttu on väärtuse y muutumisvahemik hästi kontrollitav 0 piires kuni 300.

Ketrusring

Noh, lõpuks oleme jõudnud selle peatüki kõige olulisemasse ossa. Kuidas programmis ringjoont joonistada? Kuidas kasutada funktsioone selle kuvamiseks? Las ma näitan teile uuesti kahte pilti, mida nägime selle artikli alguses.

Tegelikult on nad visuaalselt paljastanud seose ümbermõõdu koordinaatide ja trigonomeetrilise funktsiooni vahel. Ülaltoodud piltide liikumist juhib pidevalt suurenev sõltumatu muutuja θ. Vasakpoolne on funktsiooni sin ja cos kujutis ning parempoolne tähistab punkti, mis teeb kaardistamise järel ringikujulisi liigutusi. Kas pole väga tark? See pole enam salapärane. Selle realiseerimiseks võite kasutada koodi.

Lihtne näide:

[cceN_cpp theme = "dawn"] ujuk x, y, r, R, nurk; void setup () {suurus (300, 300); r = 20; // Ringi läbimõõt R = 100; // Liikumistee raadius x = 0; nurk = 0; y = kõrgus/2; } tühine viik () {taust (234, 113, 107); tõlkima (laius/2, kõrgus/2); // Liigutage algne punkt ekraani keskele. noStroke (); x = R * cos (nurk); y = R * sin (nurk); ellips (x, y, r, r); nurk += 0,05; } [/cceN_cpp]

Vaata! Ilmub pöörlev ring! Siin ei ole sõltumatu muutuja enam pideva suurenemisega bittide nurk (võrdub pildil θ). See on nurga all. Nende hulgas on xy -l suhteliselt korrutatud koefitsient R, mis viib ringi liikumisraadiuse pikenemiseni (R on raadius). Kui R ei korruta, on selle liikumistee vahemikus -1 kuni 1.

Miks mitte kasutada kasvavat x -i? Funktsiooni enda omaduse kohaselt on igal definitsioonidomeeni x -il ainult y, mis sellega sobib. Nii et tasapinnalise ristkülikukujulise koordinaatide süsteemis ei saa otsida ringi tegemiseks lihtsat funktsiooni. See tähendab, et me ei saa seda vormingut enam kasutada.

y = (x tundmatu avaldis?);

x ＋＋;

Seega peame oma ideed muutma. Valige sõltumatu muutujana teine nurk ja seejärel kasutage funktsiooni sin ja cos, et muuta see horisontaalseks ja vertikaalseks koordinaadiks.

x = R * cos (nurk);

y = R * sin (nurk);

nurk += 0,05;

Mõni teist võib imestada, miks see suudab kuvada ringide liikumise rada. Vastavalt trigonomeetrilise funktsiooni määratlusele saame selle funktsiooni kergesti põhjendada vastaspoole ja hüpotenuusi suhtega; funktsioon cos on külgneva ja hüpotenuusi suhe. Olenemata ringpunkti asukohast jääb r (raadius) muutumatuks. Seetõttu võime lõpetada x -koordinaadi ja y -koordinaadi avaldise.

Kuna see ei ole matemaatiline juhis, lõpetan siinkohal teile trigonomeetrilise funktsiooni kohta rohkemate teadmiste kuvamise. Kui soovite seda teada või lihtsalt unustate, võite proovida selle uuesti üle vaadata.

Loomulikult on kõik korras, kui te ei saa sellest täielikult aru. Peate ainult teadma, kuidas seda kasutada ringi joonistamiseks. See on ka omamoodi “programmeerimise idee”. Hiljem kutsume sageli teatud olemasolevate moodulite juurde teatud funktsioone. Lihtsalt ärge suruge ennast seda üksikasjalikult tundma.

Funktsioon sin ja cos on aga tavaline. Kui soovite luua kõrgema taseme loomist, proovige seda paremini teada. Kui see küsimus võib iseennast ajendada rohkem matemaatilisi teadmisi õppima, ootab teid väljakaevamist huvitavam.

Need on trigonomeetrilise funktsiooni lähedased pildid.

4. samm: liikumiskoordinaatide süsteem

Eelmised efektid puudutavad graafiliste koordinaatide muutmist. Koordinaatsüsteem ise on staatiline. Tegelikult saame liikumismõju saavutamiseks koordinaadi liigutada. See on täpselt nii, nagu rannarahvas jälgib teisi inimesi paadis. Paadis viibivate inimeste jaoks on paat staatiline. Aga mis siis, kui paat ise liigub, siis inimesed paadis liiguvad koos sellega. Varasemad juhtumid on seotud inimestega, kes jooksevad paadiga. Tegelikult paat ei liigu. Allpool on toodud mõned ühised funktsioonid koordinaatsüsteemi muutmiseks.

Funktsiooni tõlkimine

Funktsioonitõlget, millest oleme varem rääkinud, kasutatakse graafika koordinaatsüsteemi horisontaalseks teisaldamiseks.

Kutsumisvorming:

tõlkima (a, b)

Esimene parameeter tähistab pikslite puhul x -telje positiivsesse suunda liikumist. Teine parameeter tähistab liikumist y telje positiivsesse suunda b pikslite puhul.

Võrrelge kahte koodi ja proovige leida erinevusi. (Koodi lihtsustamiseks võime funktsiooni suuruse kustutada, ekraani laius ja kõrgus on vaikimisi 100.)

Enne kui kasutame:

ellips (0, 0, 20, 20);

Pärast seda, kui kasutame:

tõlkima (50, 50);

ellips (0, 0, 20, 20);

Funktsiooni pööramine

Kutsumisvorming:

pöörlema (a)

Seda kasutatakse pöörleva koordinaatsüsteemi jaoks. Kui parameeter on positiivne, valib see keskpunkti algpunkti ja pöörleb päripäeva. Radiaani kasutamiseks on parameetrite sisend sama trigonomeetrilise funktsiooniga.

Enne kasutamist:

ellips (50, 50, 20, 20);

Pärast kasutamist:

pöörlema (radiaanid (30));

ellips (50, 50, 20, 20);

Programmi mõju on panna ring pöörlema ümber koordinaatide keskpunkti päripäeva 30 kraadi.

Funktsiooni skaala

Kutsumisvorming:

skaala (a)

See funktsioon võib koordinaatsüsteemi vähendada. Väärtus on skaleerimiseks. Kui parameeter on üle 1, siis suurendage; kui see on väiksem kui 1, siis vähendage.

Enne kasutamist:

ellips (0, 0, 20, 20);

Pärast kasutamist:

skaala (4);

ellips (0, 0, 20, 20);

Ülaloleval pildil olev ring on võimendatud neljakordselt esialgsest suurusest. Samuti saate kahe telje ja x telje suuna vähendamiseks kasutada kahte parameetrit.

skaala (4, 2);

ellips (0, 0, 20, 20);

Teisendusfunktsiooni superpositsioon

Siin on superpositsioon seotud muudatustega praeguse koordinaatsüsteemi suhtes. Teisisõnu, efekte saab üksteise peale asetada.

tõlkima (40, 10);

tõlkima (10, 40);

ellips (0, 0, 20, 20);

Selle lõplik mõju on võrdne

tõlkima (50, 50);

ellips (0, 0, 20, 20);

Sama funktsioonide pööramiseks

pöörlema (radiaanid (10));

pöörlema (radiaanid (20));

ellips (50, 50, 20, 20);

Võrdub

pöörlema (radiaanid (30));

ellips (50, 50, 20, 20);

Mõlemad funktsioonid skaalavad ja pööravad algpunkti keskpunkti skaleerimiseks ja pööramiseks. Kui tahame saada pööramisefekti keskpositsiooniga (50, 50), peame mõtlema vastupidi. Esmalt viige algne punkt asendisse (50, 50), seejärel lisage pöörlev teisendusfunktsioon. Lõpuks maalige oma graafika algsele punktile.

Enne kasutamist:

ellips (50, 50, 50, 20);

Pärast kasutamist:

tõlkima (50, 50);

pöörlema (radiaanid (45));

ellips (0, 0, 50, 20); // Pöördenurga muutumise nägemiseks oleme teinud ovaali.

See võib tunduda väänlev. Peate lihtsalt rohkem harjutama, siis saate sellest aru. (Erinevuse nägemiseks võite proovida muuta ka funktsioonide tõlkimise ja pööramise järjestust.)

Horisontaalne liikumine ja ringliikumine

Järgmistel juhtudel mõistame liikumisefekti koordinaatsüsteemi muutmise kaudu. Samal ajal tahaksin paluda teil viidata endise peatüki näitele. Enamasti leiad teatud efekti saavutamiseks täiesti teistsuguse meetodi.

Samm: horisontaalne liikumine

[cceN_cpp theme = "koidik"]

int x, y; void setup () {suurus (300, 300); x = 0; y = kõrgus/2; } tühine viik () {taust (234, 113, 107); noStroke (); tõlkima (x, y); ellips (0, 0, 50, 50); x ++; } [/cceN_cpp]

Ringjoone koordinaati ei muudeta, kuid selle koordinaatsüsteemi muudetakse.

Pööra liikumist

[cceN_cpp theme = "dawn"] ujuk r, R, nurk; void setup () {suurus (300, 300); r = 20; // Ringimõõt R = 100; // Liikumisraja raadius} void draw () {taust (234, 113, 107); tõlkima (laius/2, kõrgus/2); // Liigutage algne punkt ekraani keskele. pöörlema (nurk); noStroke (); ellips (0, R, r, r); nurk += 0,05; } [/cceN_cpp]

Kas pole see palju selgem ja lihtsam kui trigonomeetriline funktsioon? Siin võib teil tekkida küsimus. Võtke näiteks pöörlev kood. Ilmselgelt on ülaltoodud teisendusfunktsioon suhteline ja võimaldab üksteise asetamist. Kui kirjutame tõlkimise (laius/2, kõrgus/2) funktsioonijooniseks, kas see ei tähenda, et iga kord, kui funktsioonijoonistus töötab üks kord, liigub koordinaatsüsteem kaugust alumisest alusest paremas suunas? Mõistlikult ei jää see igavesti ekraani keskele.

Saate aru nii. Kui funktsioonide joonistamise kood on lõpule viinud toimingu alt üles, naaseb koordinaatsüsteem teise toimingu ajal algsesse olekusse. Algne koordinaatsüsteemi punkt vaikimisi naaseb vasakusse ülanurka. Seega, kui tahame koordinaatsüsteemi pidevalt muuta, suurendavad funktsiooni pöörlemise nurgaparameetrid selle väärtust pidevalt.

Juurdepääs koordinaatide olekule

Mõnikord ei taha me, et koordinaatsüsteemi oleku muutmine põhineb eelmisel. Praegu peame kasutama funktsioone pushMatrix ja popMatrix. Need kaks funktsiooni ilmuvad tavaliselt paaris. Funktsioon pushMatrix on enne popMatrixit. Neid ei saa kasutada ainult, vastasel juhul läheb see valesti.

Näide:

[cceN_cpp theme = "koidik"] pushMatrix (); // Salvesta koordinaatsüsteemi olekutõlge (50, 50); ellips (0, 0, 20, 20); popMatrix (); // Loe koordinaatsüsteemi olekut rect (0, 0, 20, 20); [/cceN_cpp]

Selles näites kasutame enne tõlke (50, 50) kasutamist funktsiooni pushMatrix.koordinaatsüsteemi praeguse oleku salvestamiseks. See on samal ajal esialgne staatus. Pärast ringi joonistamist ja popMatrixi rakendamist naaseb see olekusse. Praegu rakendage funktsiooni otse, leiate, et see ei ole funktsiooni tõlkimise mõju all kannatanud, vaid joonistab ruudu algse punkti vasakusse ülanurka.

Lisaks võimaldavad funktsioon pushMatrix ja popMatrix pesastamist.

Näiteks

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Selleks, et näidata selle suhet intuitiivselt, valime kondensvormingu.

Kombineeritud liikumine või liikumine liikumises?

Nüüd algab oluline osa teine laine. Proovige lihtsalt edasi liikuda. Varem oleme kasutanud paadi ja inimeste metafoori. Kas olete kunagi mõelnud, mis siis, kui paneme nii inimesed kui ka paadi liikuma, mis tunne rannas viibijatel tekib?

Nagu kombineerida horisontaalne liikumine koordinaatsüsteemi pöörleva liikumisega. Siin on tegelikult eesmärk liikuda ainult teatud suunas.

[cceN_cpp theme = "koidik"] int x, y; ujuki nurk; void setup () {suurus (300, 300); taust (234, 113, 107); noStroke (); x = 0; // Kui x algväärtus on 0, võime selle koodilause tähelepanuta jätta. Muutuja deklareerimisel on vaikeväärtus 0. y = 0; // Sama, mis eespool. nurk = 0; // Sama, mis eespool. } void draw () {nurk += 0,25; y--; tõlkima (laius/2, kõrgus/2); pushMatrix (); pöörlema (nurk); ellips (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Ja seal on ringliikumine ja koordinaatsüsteemi skaleerimine.

[cceN_cpp theme = "dawn"] ujuk x, y, nurk; void setup () {suurus (300, 300); taust (234, 113, 107); noStroke (); } void draw () {nurk += 0,01; x = sin (nurk) * 100; y = cos (nurk) * 100; tõlkima (laius / 2, kõrgus / 2); pushMatrix (); skaala (1 + 0,1 * sin (nurk * 10)); ellips (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Ärge laske end sellest petta! Ringipunkt teeb tegelikult ringikujulisi liigutusi. Sellest pole raske aru saada, kui võrrelda seda videokaameraga skaleerimisega. Videokaamera, mis liigub pidevalt ette või taha, pildistab punkti ringikujuliselt.

Üllatunud? Need on lihtsad põhifunktsioonid. Kuid erineva kombinatsiooniga saame luua nii palju erinevaid efekte. Siiani peatub minu kokkupuude, et säästa ruumi teie uurimiseks.

6. samm: põhjalik kasutamine

Selle peatüki jaoks hakkab see varsti lõppema. Viimases kahes peatükis olen tutvustanud graafilise liikumise põhimeetodit. Usun, et teil on sellest esialgsete ideedega võrreldes sügavam arusaam. Kõige vähem, siin on teie viiteks mõni lõpetatud näide.

[cceN_cpp theme = "dawn"] ujuk x1, y1, x2, y2, r, R; ujuknurk1, nurk2; void setup () {suurus (300, 300); r = 12; R = 120; nurk1 = 0; nurk2 = PI/4; } tühine viik () {taust (234, 113, 107); noStroke (); tõlkima (laius / 2, kõrgus / 2); nurk1 += 0,02; nurk2 += 0,06; x1 = R *sin (nurk1); y1 = R* cos (nurk1); x2 = R/2 *sin (nurk2); y2 = R/2 *cos (nurk2); ellips (x1, y1, r/2, r/2); ellips (x2, y2, r, r); ellips (-x1, -y1, r/2, r/2); ellips (-x2, -y2, r, r); ellips (x1, -y1, r/2, r/2); ellips (x2, -y2, r, r); ellips (-x1, y1, r/2, r/2); ellips (-x2, y2, r, r); insult (255); löökKaal (3); rida (x1, y1, x2, y2); joon (-x1, -y1, -x2, -y2); joon (x1, -y1, x2, -y2); joon (-x1, y1, -x2, y2); } [/cceN_cpp]

See näide ei sisalda mingeid teadmisi peale meie eelneva peatüki.

Milliste punktide jaoks sobivad? Millised read sobivad? Ma ei saa ka sellest aru. Kuid mäletan, et see tuleneb väikesest koodilõigust.

See on selle liikumise olemus. Ülejäänud jooned on lihtsalt peegeliefekt. Kui järgite neid juhiseid, saate teha värskendatud versiooni ja lisada graafikale kontrolleri, et muuta oma graafilise liikumise olekut reaalajas.

Programmeerimise huvitav mõte seisneb selles, et saate kavandada või kombineerida eeskirju. Lõplik programm kujuneb aga teie võimekusest. Tavaliselt on disaineritel võimas graafiline kujutlusvõime. Võite oma peas pildi joonistada ja proovida seda koodiks tõlkida. Samuti võite alustada koodist ja eeskirjadest, disainifunktsioonidest ja muutujatest. Pidage meeles, et töötlemine on teie visand ja kood on teie pintslid! Lihtsalt piserdage oma ideid vabalt!

Samm 7: LÕPP

Pöördume oma peatüki viimasena tagasi küsimuse juurde, mille oleme algusest peale pikka aega säilitanud. Milleks kulutada programmiga pildi tegemiseks nii palju vaeva? Pärast selle peatüki õppimist leiate, et teie uurimist ootab nii palju mängumeetodeid.

[cceN_cpp theme = "dawn"] float kulmX, earD, eyeD, faceD; void setup () {suurus (500, 500); } void draw () {taust (200, 0, 0); kulmX = 150 + sin (frameCount / 30,0) *20; kõrvD = 180 + patt (frameCount / 10,0) *20; eyeD = 60 + sin (frameCount/30,0) *50; näguD = 300; löökKaal (8); ellips (175, 220, earD, earD); ellips (laius - 175, 220, kõrvD, kõrvD); sirge (100, 100, näguD, näguD); joon (kulmX, 160, 220, 240); joon (laius-kulmX, 160, laius-220, 240); täitma (juhuslik (255), juhuslik (255), juhuslik (255)); ellips (175, 220, eyeD, eyeD); ellips (laius-175, 220, eyeD, eyeD); täitma (255); punkt (laius/2, kõrgus/2); kolmnurk (170 - cos (frameCount / 10,0) * 20, 300 - sin (frameCount / 10,0) * 20, laius - (170 + cos (frameCount / 10,0) * 20), 300 + sin (frameCount / 10,0) * 20, 250, 350); } [/cceN_cpp]

Kas pole dünaamilise graafika jaoks maagia? Siin ma ei näita teile liiga palju juhtumeid. Võimalik, et suudate luua palju parema efekti kui mina. Programmiga joonistamise eelis on olemas, saate mängida iga piksliga. Kuna teie graafika ei ole bitikaart, on teie graafika iga põhipunkt kontrollitav. See võib realiseerida mõningaid mõjusid, mida muu tarkvara ei suuda.

Kui teil on süda, mis tahab kõike murda ja uuesti ühendada, aitab õppeprogramm teid selle idee täitmisel.

See artikkel pärineb disainer Wenzylt.

8. samm: suhtelised näidud:

Huvitavad programmeerimisjuhised disainerile-esialgse puudutuse töötlemine

Huvitavad programmeerimisjuhised disainerile-looge oma esimene töötlusprogramm

Huvitavad programmeerimisjuhised disainerile - pildistamiseks (esimene osa)

Kui teil on küsimusi, võite saata e -kirja aadressile [email protected].

See artikkel on pärit: