Kagiliw-giliw na Patnubay sa Programming para sa taga-disenyo - Kunin ang Iyong Pagpapatakbo ng Larawan (Unang Bahagi): 16 Mga Hakbang

2025 May -akda: John Day | [email protected]. Huling binago: 2025-01-23 15:13

Patakbo! Patakbo! Patakbo!

Ang programa ay hindi gaanong kahirap. Ang pangunahing punto ay upang hanapin ang iyong ritmo at gawin ito isa-isa.

Bago basahin ang kabanatang ito, inaasahan kong pamilyar ka na sa pangunahing pamamaraan ng pagguhit ng pagpapaandar, o mahihilo ka at malito ng dalawang malalaking pagpapaandar ng ulo: pag-set up at pagguhit.

Dahil nais naming gumawa ng mga motational graphics, kailangan naming malaman kung paano nagagawa ang animasyon.

Ang larawan sa itaas ay tila medyo kaakit-akit at biswal na ipinapakita ang prinsipyo ng pagpapatupad ng animasyon.

Ang animasyon ay mahika. Ito ay isang mahika tungkol sa visual na pandaraya. Gayunpaman, sa impormasyong ito ay sumabog, edad ng pagbaha ng video, nasanay na tayo rito. Ilang mga tao ang magulat na ito ay isang kamangha-manghang bagay na makita ang animasyon.

Ang parehong prinsipyo ay maaaring mailapat sa pagguhit ng animasyon sa programa. Dapat nating isaalang-alang kung paano gumuhit ng iba't ibang mga graphic sa bawat frame, at ang programa ay awtomatikong magpapasara ng mga pahina habang dinagdagan namin ang isang kumpletong animasyon sa aming ulo. Sa sumusunod na kabanata, pag-uusapan natin kung paano mapagtanto ang pangunahing paggalaw ng graphic. Bago ito, kailangan nating malaman ang ilang pangunahing kaalaman tungkol sa mga variable.

Hakbang 1: Variable

Variable ang lalagyan para sa data. Maaari itong magamit nang paulit-ulit sa loob ng isang programa.

Halimbawa:

[cceN_cpp tema = "bukang-liwayway"] laki (500, 500); ellipse (100, 250, 50, 50); ellipse (200, 250, 50, 50); ellipse (300, 250, 50, 50); ellipse (400, 250, 50, 50);

[/cceN_cpp]

Ang seksyon ng code na ito ay hindi gumamit ng anumang mga variable. Gumuhit ito ng apat na bilog sa screen. Mahahanap natin na mayroon silang parehong lapad at taas. Ngayon na ito ay pareho, upang mabawasan ang paulit-ulit na pag-input ng data, maaari naming tukuyin ang isang pag-sign upang kumatawan dito. Ang palatandaan na ito ay variable.

Narito ang code pagkatapos magdagdag ng isang variable:

[cceN_cpp tema = "bukang-liwayway"] laki (500, 500); int a = 50; ellipse (100, 250, a, a); ellipse (200, 250, a, a); ellipse (300, 250, a, a); ellipse (400, 250, a, a);

[/cceN_cpp]

Nakakuha kami ng isang ganap na parehong resulta!

Dahil natukoy namin ang variable a, madali naming mababago ang mga parameter. Kung binago natin ang isang = 50 sa isang = 100, kung gayon ang lahat ng lapad at taas ng mga bilog ay magiging 100 na magkapareho. Kaya hindi namin kailangang baguhin ang mga parameter nang isa-isa. Ang variable ay talagang isang mahusay na pag-imbento.

Hakbang 2: Ang Paglikha ng Variable

Bago gamitin ang variable, kailangan naming gumawa ng pahayag at italaga ang uri ng data nito.

int i;

ako ＝ 50;

Ang unang pangungusap ng code ay gumawa ng isang pahayag para sa isang variable i. Ang int ay isang simbolo na pangunahing ginagamit upang ideklara ang variable. Kapag nagdedeklara, magtipid ito ng isang silid sa memorya ng computer, na katumbas upang makabuo ng isang "kahon", na espesyal na ginamit upang ibalik ang data ng integer. Ang ikalawang pangungusap ay nangangahulugang paggawa ng takdang-aralin 50 na ipapatupad ng variable i. Matapos ang pagpapatupad ng pangungusap na ito, ang data ay itatago sa variable i stably. O maaari kang maging tamad upang pagsamahin ang nasa itaas na pangungusap sa isa at kumpletong takdang-aralin habang gumagawa ng pahayag.

int ＝ 50;

Ito ay medyo malayang magbigay pangalan ng isang variable. Ngunit kung minsan kailangan nating bigyang pansin ang isang bagay.

Hakbang 3: Regulasyon ng Pangalan ng Variable

• Dapat ay ito ang kombinasyon ng alpabeto at salungguhit. Maaari itong maging isang simbolo o isang salita.

• Sensitibo sa kaso. Ang pangalan at pangalan ay maaaring tumayo para sa iba't ibang mga variable.

• Subukang pangalanan ito nang mas madaling posible upang payagan kang maunawaan sa isang tingin. Ang paunang karakter ay dapat isang alpabeto sa halip na isang numero o isang espesyal na tauhan.

• Walang mga pangunahing salita tulad ng int, float

Ang mga sumusunod ay ilang maling pahayag.

int $ a;

int 89b;

Narito ang tamang mga pahayag:

int r;

int super_24;

int openTheDoor;

Hakbang 4: Uri ng Variable

Maliban sa pagdedeklara ng data ng integer, maaari nating ideklara para sa decimal data (tinatawag ding data ng lumulutang point) na may key float ng salita.

lumutang b = 0.5

Dapat nating tandaan kung anong uri ng uri ng data ang ginamit namin para sa aming pahayag. Kung ginamit namin ang key word int, ang huli na pagtatalaga ay hindi maaaring magsulat ng i ＝ 0.5 o isang bagay tulad nito, o ang programa ay magiging error. Ngunit kung salungat ang sinusulat namin, ayos lang. Halimbawa, ang float i = 5 ay ang tamang grammar ngunit makikilala ito ng programa bilang decimal number.

Ang ilan sa mga variable ay natukoy na ng system. Hindi natin ito dapat ideklara nang mag-isa. Tulad ng dating tinukoy na "lapad, taas", awtomatiko nitong makukuha ang lapad at taas ng screen ng computer. Ang nasabing mataas na dalas sa paggamit na direktang tinutukoy ng taga-disenyo na ito ay isang default variable upang mas madali itong magamit namin.

Hakbang 5: Operator

Ang mga sumusunod ay mga operator ng pagpoproseso:

+ plus

- minus

* dumami

hatiin

％ Modulus ng natitira

Dapat pamilyar ka sa lahat ng mga operator na ito maliban sa%. Tila medyo kakaiba dahil ang resulta nito ay natitira. Ang 9% 3 ay 0. Habang ang 9% 5 ay 4.

Maaaring gamitin ang mga operator sa mga takdang-aralin at variable.

[cceN_cpp tema = "bukang-liwayway"] int a = 1; // ideklara ang variable ng integer a, ang takdang-aralin ay 1. int b = 2; // Declare integer variable b, ang pagtatalaga ay 2. int c; // Declare integer variable c. c = a + b; // Plus dalawang takdang-aralin at italaga ang resulta nito sa c. i-print (c); // Variable ng output c.

[/cceN_cpp]

Hakbang 6: Resulta ng Pagpapatakbo:

Ang resulta ng output ay hindi ipapakita sa window ngunit sa console sa ibaba.

Ang pamamaraan ng pagsulat ng ika-apat na linya ay mukhang kakaiba. Ngunit ito ay isang karaniwang format na madalas na ginagamit sa pagtatalaga ng computer. Ang kaliwang bahagi ng pantay na simbolo ay dapat na ang huling itinalagang variable, habang ang kanang bahagi ay dapat na proseso ng operasyon.

Ang pagpapaandar na naka-print sa ikalimang linya ay maaaring mag-print ng mga variable sa console, na kadalasang ginagamit upang subukan ang kalagayan ng output ng data.

Hakbang 7: Regulasyon ng Operasyon

Ang isang mahirap na punto sa Pagproseso ay kailangan nating linawin ang uri ng variable. Kailangan nating magbayad ng espesyal na pansin sa proseso ng lumulutang na numero ng point at uri ng integer.

i-print （6/5）; // resulta 1

Ang operasyon sa pagitan ng mga integer ay magkakaroon ng bagong integer. 6 na hinati sa 5 ay 1.2. Ngunit ang resulta ng output ng programa ay 1. Ito ay salungat sa aming intuwisyon. Hindi haharapin ng programa ang pag-ikot ngunit tatanggalin ang numero sa likod ng decimal point.

i-print (6.0 / 5.0); // resulta 1.2

Ang pagpapatakbo sa pagitan ng mga lumulutang na puntos ay magreresulta ng isang bagong numero ng lumulutang na puntos. Kung ang aktwal na resulta ay 1.2, ang resulta ng output ng programa ay pareho.

i-print (6 / 5.0); // resulta 1.2

i-print (6.0 / 5); // resulta 1.2

Panghuli ito ay ang halo ng integer at lumulutang na numero ng puntos. Ang huling resulta ng output ay magiging 1.2.

• Sa totoo lang, dapat mong tandaan na ang layunin ng disenyo ng regulasyong ito ay hindi maluwag ang kawastuhan ng data. Kaya't kung ang isang elemento ay isang lumulutang na numero ng puntos, ang resulta ay magiging lumulutang na numero ng puntos din.

Hakbang 8: Pag-setup ng Pag-andar at Pag-andar ng Pagguhit

Dati ay napag-usapan natin ang isang salansan ng kaalaman sa saligan. Ngayon, sa wakas ay nakalaro kami ng isang bagay na kawili-wili. Ang pag-setup at pagguhit ng pagpapaandar ay katumbas ng mga pangunahing pag-andar ng pagproseso. Ang dalawang pag-andar na ito ay napaka-espesyal. Maaari nitong makontrol ang pamamaraan ng programa. Ang kumpara sa kumplikadong programa ay isasama ang dalawang pagpapaandar na ito sapagkat ang mga ito ang pangunahing frame para sa programa. Format:

walang bisa ang pag-setup () {

}

walang bisa draw () {

}

Ginagawa ng espesyal na paggamit ang kanilang format ng pag-uusap na naiiba sa iba pang mga pagpapaandar. Kailangan naming idagdag ang "walang bisa" bago ang pangalan ng pag-andar, na paninindigan para sa walang "naibalik na halaga". Sa likod ng pangalan ng pag-andar, kailangan naming magdagdag ng panaklong at mga brace.

[cceN_cpp tema = "bukang-liwayway"] walang bisa ang pag-set up () {print (1); } void draw () {print (2); } [/cceN_cpp]

Tingnan natin ang isang halimbawa:

Kapag pinindot ang pindutan ng operasyon, ang console ay unang magpapalabas ng "1" at pagkatapos ay patuloy na maglalabas ng "2" hanggang sa pinindot mo ang pindutan ng hintuan o isara ang window.

Ang code sa loob ng panaklong sa pag-andar ng pag-setup ay ipapatupad nang isang beses lamang. Habang ang code sa loob ng pagguhit ng paggana ay patuloy na tatakbo sa sirkulasyon (default na pagpapatupad ng 60 beses / segundo).

Dahil sa character na ito, ang pag-setup ay karaniwang ginagamit upang mapasimulan ang pag-aari ng kapaligiran, tulad ng lapad at taas ng screen, kulay ng background, at lahat ng uri ng takdang-aralin ng mga variable. Habang madalas naming inilalagay ang paggana ng pagguhit sa pagguhit ng function upang makabuo ng tuluy-tuloy na pagbabago ng graphics.

Hakbang 9: Circle sa Pahalang na Kilusan

Sa pagguhit ng pag-andar, maaari naming simulang lumikha ng aming mga animasyon. Ang pamamaraan ng pagsulat ng epekto ng animation sa pamamagitan ng Pagproseso ay medyo "mahirap". Wala itong anumang utos. Halimbawa, magtalaga ng isang tiyak na hugis upang gawin curvilinear.

Kailangan nating tukuyin ang mga detalyeng ito sa aming sarili. Kailangan mong sabihin sa programa kung anong uri ng graphics ang kailangan ng bawat frame na siguradong.

Isulat ang sumusunod na code dito (Ngayon simulan nating gawin ito sa pamamagitan ng mga kamay):

[cceN_cpp tema = "bukang-liwayway"] int x; int y; walang bisa ang pag-setup () {laki (300, 300); x = 0; y = taas / 2; } walang bisa na pagguhit () {background (234, 113, 107); noStroke (); ellipse (x, y, 50, 50); x = x + 1; }

[/cceN_cpp]

Ang seksyon ng code na ito ay nagpapakita ng isang motional circle. Ang dating idineklarang variable x, y ay ginagamit upang maiimbak ang posisyon ng coordinate. Ang mga takdang-aralin ay tumatakbo sa pag-setup ng pag-andar. Ang key code ay ang sumusunod sa isang gumuhit ng pag-andar:

x = x + 1

Huwag tingnan ito bilang equation sa matematika, o magiging kakaiba ito. Dito, ang "＝" ay isang simbolo para sa pagtatalaga. Kinakatawan nito upang mailagay ang mga tamang numero sa kaliwang variable. Ipagpalagay na ang x ay 50, sa sandaling tumatakbo ang code, ang kanang bahagi ng "＝" ay katumbas ng 50 + 1, ibig sabihin, 51. Ang huling resulta ay itatalaga sa variable x. Kaya ang halaga ng x ay nagiging 51.

Sundin ang pamamaraan ng programa, sa tuwing gumagalaw ang paggana ng pagpapaandar ng isang beses, ang halaga ng x ay tataas 1. Kaya't sa tuwing gumuhit kami, lilipat ang bilog ng isang direksyon ng pixel nang pakanan, kumpara sa dating frame. Samakatuwid, ang graphic ay naging motional.

• Upang makagawa ang code ng mas mahusay na kakayahang mabasa, kailangan nating magtipid ng isang tiyak na silid bago ang bawat linya ng code sa loob ng mga tirante. At ito ay dapat na nakahanay hangga't maaari. Pindutin ang TAB o maraming blangkong puwang, maaari itong mag-retract.

• Ang simbolo ng blangko na puwang at line break sa programa ay hindi makaka-impluwensya sa programa. Kaya't ok kung mag-type tayo ng isa pa o mas kaunti.

Narito ang isa pang mas simpleng paraan upang maipahayag ito. Upang gawing awtomatiko ang pagtaas ng bilog ng 1, kailangan nating isulat ito upang maging ang sumusunod na format.

bilog ＝ bilog ＋1

Medyo hindi maginhawa! Kung ang pangalan ng variable ay mas mahaba, pagkatapos ay kailangan naming mag-type ng maraming mga salita. Kaya't ang aming mga tamad na hinalinhan ay nag-iisip ng isang ideyang tulad nito.

bilog ＋＋

Hindi ba ito napaka-simple? Nangangahulugan ito na awtomatikong taasan ang 1. Katulad nito, mayroong - -, na nangangahulugang bawasan ang 1 nang awtomatiko.

Ngunit kung inaasahan namin na ang dami ng awtomatikong pagtaas ay iba pang bilang tulad ng 2, kailangan naming subukan ang isa pang pagpapahayag.

bilog + = 2

Katumbas ito sa

bilog = bilog + 2

Katulad nito, mayroong - ＝, / =, * =.

Hakbang 10: Direksyon ng Kilusan

Aling direksyon ang gumagalaw ng grapiko ay nakasalalay sa kung paano mo binago ang iyong coordinate. Kung binago ito sa y ＝ y ＋ 1, ang bilog ay lilipat pababa. Kung ang bothx at y ay tumataas ng 1, ang bilog ay lilipat pababa sa kanang ibaba. Kung isusulat namin ito mula sa isang minus na simbolo, lilipat ito sa kabaligtaran na direksyon.

[cceN_cpp tema = "bukang-liwayway"] int x, y; // Maaaring ideklara ang maraming mga variable nang sabay, gumamit ng kuwit upang paghiwalayin. walang bisa ang pag-setup () {laki (300, 300); x = 0; y = 0; } walang bisa na pagguhit () {background (234, 113, 107); noStroke (); ellipse (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Rate ng Kilusan

Naaalala ang default na 60 mga frame bawat segundo sa loob ng pagguhit ng pag-andar? Ayon sa rate na ito, ang bilog sa itaas ay lilipat ng 60 mga pixel bawat segundo sa kanan.

Kung nais naming baguhin ang rate ng paggalaw ng graphic, mayroong dalawang pamamaraan: ang isa ay upang taasan ang x halaga sa bawat oras dahil mababago ito.

x ＝ x ＋ 10

Pinagbuti nito ang bilis ng 10 beses kumpara sa orihinal!

Ang iba pang pamamaraan ay upang baguhin ang dalas ng pag-refresh ng canvas. frame rate()

Ang function na ito ay maaaring baguhin ang dalas ng pagsasahimpapaw ng canvas '. Isulat ang frameRate (10) sa pag-setup ng pag-andar, babaguhin nito ang orihinal na 60 mga frame bawat segundo sa 10 mga frame bawat segundo. Ang bilis ay pinabagal ng 6 beses kaysa dati.

Hakbang 11: Hindi Pinapansin ang Background

Ang lahat ng mga nakaraang halimbawa ay nagsusulat ng background sa pagguhit ng pag-andar. Naisip mo ba na isulat ito sa pag-setup ng pag-andar? Magkakaroon ba ito ng anumang pagkakaiba? Ngayon, i-update natin ang halimbawa ng pahalang na paggalaw.

[cceN_cpp tema = "bukang-liwayway"] int x, y; walang bisa ang pag-setup () {laki (300, 300); background (234, 113, 107); x = 0; y = taas / 2; } walang bisa draw () {noStroke (); ellipse (x, y, 50, 50); x + = 1; } [/cceN_cpp]

Anong nangyari? Marahil ay hindi nito maintindihan ang dahilan ng paggawa ng problema nang maayos. Tanggalin ang pagpapaandar na noStroke, magdagdag muli ng stroke, at makita ang paggalaw ng landas ng bilog.

Oh, ito ay dahil sa dating nilikha na bilog ay hindi na-delete! Dahil ang pag-andar ng pag-andar ay tumatakbo nang isang beses lamang, kung nagsusulat kami ng background sa itaas nito, pupunan nito ang background sa isang oras lamang at sa huli ay wala na itong epekto. Ang background ng pagpapaandar ay tulad ng tool ng pintura ng balde. Kapag ginamit na, sasakupin nito ang lahat ng mga nilalaman sa canvas sa halip na magtakda ng isang kulay sa background lamang. Isusulat namin ito bago gumuhit ng pag-andar upang ang dating frame ay matatakpan sa tuwing lumilikha kami ng isang bagong pattern. Samakatuwid, ang bilog ay maaaring tumakbo tulad ng inaasahan namin. Maliban sa pag-alala sa mga paggamit ng bawat pag-andar, kailangan nating isipin ang tungkol sa posisyon ng code. Maraming oras, pataas o pababa ng isang linya para sa codea at isulat ito sa loob o labas ng isang brace, lilikha ito ng magkakaibang mga epekto. Ang direksyon ng code ay dalawang-dimensional. Kung lilitaw ang isang bug, kailangan nating i-calibrate ang dalawang dimensyon na ito.

• Ang hindi paulit-ulit na pamamaraan ng pagguhit na ito ay maaaring lumikha ng napaka-espesyal na epekto kung maayos na ginamit. Maaari mong kopyahin ang sumusunod na code at subukan.

[cceN_cpp tema = "bukang-liwayway"] walang bisa ang pag-set up () {laki (400, 400); } void draw () {ellipse (width / 2-mouseX, taas / 2-mouseX, mouseY, mouseY); ellipse (lapad / 2-mouseX, taas / 2 + mouseX, mouseY, mouseY); ellipse (lapad / 2 + mouseX, taas / 2-mouseX, mouseY, mouseY); ellipse (lapad / 2 + mouseX, taas / 2 + mouseX, mouseY, mouseY); } [/cceN_cpp]

Ginamit namin dito ang magic variable mouseX at mouseY. Huling pag-uusapan natin ito nang detalyado.

Hakbang 12: Pag-alog ng Circle

Paano kung nais kong gawing hindi regular ang direksyon ng paggalaw ng bilog? Sa pagpapaandar na random na matalino, maaari mo ring mapagtanto ang epektong ito rin. Ang Random ay isang madalas na ginagamit na pagpapaandar. Maaari itong magamit upang makabuo ng random function. Ito ay tulad ng isang espiritu na walang track. Kapag nauugnay sa mga variable, hindi mo maisip kung ano ang susunod.

Format ng Pagtawag:

random (mataas)

Ang mataas ay kumakatawan sa random na itaas na limitasyon, at ang default na limitasyon sa ibaba ay 0. Halimbawa, random (10). Gumagawa ito ng isang numero mula 0 hanggang 10 nang sapalaran (kasama ang 0 ngunit hindi kasama ang 10).

random (mababa, mataas)

Kung magtakda kami ng dalawang mga parameter, pagkatapos ay babalik ito sa random na halaga sa pagitan nila. Halimbawa, random (5, 10). Gumagawa ito ng isang numero mula 5 hanggang 10 nang sapalaran (5 ay kasama ngunit 10 ay hindi kasama).

Halimbawa:

[cceN_cpp tema = "bukang-liwayway"] float x;

x = random (50, 100);

i-print (x); [/cceN_cpp]

Sa tuwing tatakbo namin ang programa, maglalabas ang console ng iba't ibang mga halaga.

• Tandaan: Ang mga halagang nilikha ng random na pag-andar ay kabilang sa lumulutang na uri ng punto (uri ng decimal number). Kung nais naming magtalaga ng isang halaga sa variable ng integer, kailangan nating ibahin ito sa pamamagitan ng function int (). Ang pagbabago ay hindi sumusunod sa pag-ikot ngunit direktang tinanggal ang decimal na bahagi. Sa gayon ang output ng int (random (5)), ay may 5 posibilidad lamang: 0, 1, 2, 3, 4.

Matapos naming pamilyar ang paggamit ng pag-andar ng random, maaari kaming direktang dumating sa kaso sa ibaba.

[cceN_cpp tema = "bukang-liwayway"] int x, y; walang bisa ang pag-setup () {laki (300, 300); x = lapad / 2; y = taas / 2; } walang bisa na pagguhit () {background (234, 113, 107); noStroke (); x + = int (random (-5, 5)); y + = int (random (-5, 5)); ellipse (x, y, 50, 50); }

[/cceN_cpp]

Ang dating idinagdag na mga halaga ng coordinate ay naayos. Lamang kung taasan namin ang isang random na halaga, ang bilog ay lilipat sa isang hindi tiyak na direksyon. Sa mas malaking saklaw na random, mas madalas itong umuuga. Dahil ang pagbabago ng halaga sa pagitan ng mga frame ay bounce, ang paggalaw ay hindi magiging maayos. Habang ang dating frame ay nasa (150, 150), ang huling frame ay lilipat sa posisyon ng (170, 170) sa loob ng isang sulyap.

Hakbang 13: Migrating Circle

Migrating Circle

Lilikha ba ito ng makinis na paggalaw? Maaaring makatulong sa atin ang ingay ng pagpapaandar. Ito ay may mas mahusay na ritmo kaysa sa karaniwang random. At ang mga random na nabuong mga random na numero ay tuloy-tuloy.

Format ng Pagtawag:

ingay （t）

Hindi matukoy ng ingay ng pagpapaandar ang saklaw ng output nito. Tinukoy ng programa na maaari lamang itong makabuo ng mga lumulutang na numero ng numero mula 0 hanggang 1 at ang nakapirming input ay maaari lamang magkaroon ng nakapirming output.

[cceN_cpp tema = "bukang-liwayway"] float x = ingay (5); float y = ingay (5); i-print (x, y); [/cceN_cpp]

Dahil ang mga parameter ng pag-input sa itaas ay 5, kaya't pareho ang mga resulta ng output. Pagkatapos paano baguhin ang resulta? Ang sagot ay upang baguhin ang mga parameter ng pag-input nang pabagu-bago. Talagang maaari naming isaalang-alang ang ingay bilang isang walang limitasyong track ng boses, ang mga input parameter ay tulad ng "kasalukuyang oras". Kung ang input ng parameter ay tuloy-tuloy, ang output ay magpapatuloy din.

[cceN_cpp tema = "bukang-liwayway"] float x, y; walang bisa ang pag-setup () {laki (700, 100); x = 0; background (0); } walang bisa na pagguhit () {x + = 1; y = ingay (frameCount / 100.0) * 100; noStroke (); ellipse (x, y, 2, 2); }

[/cceN_cpp]

Sa kasong ito, iginuhit namin ang landas ng pagbabago ng Y upang mas maintindihan namin ang ingay ng pag-andar.

• Kabilang dito, ang variable frameCount ay makakakuha ng kasalukuyang frame. Iba't ibang sa lapad, taas sa nakaraang, matatag ito nang walang anumang pagbabago. Bukod, nagsisimula itong tumaas mula sa 0. Kung nauunawaan natin ito sa pamamagitan ng aming paunang ipinakita na animated na graphic, ipinapakita nito ang pahina na aming napuntahan (sa halip na ang paglilihi ng oras sa programa).

• Ang frameCount ay variable ng integer. Nahahati sa isa pang variable ng integer, ang programa ay default upang maproseso ang resulta upang maging isang integer. Upang mapabuti ang kawastuhan ng resulta, kailangan nating baguhin ang 100 hanggang 100.0. Nahahati sa pamamagitan ng isang lumulutang na numero ng puntos, makakakuha rin kami ng isang lumulutang point na numero.

• Upang mabago ang Y axle mula 0 hanggang 100, kailangan nating i-multiply ang resulta ng ingay ng 100. Sa gayon ay makokontrol natin ang saklaw na random na halaga.

Ang ilan sa iyo na magaling mag-isip ay maaaring magtanong "bakit kailangan nating hatiin ang frameCountby 100? Hindi ba ok na magsulat nang direkta sa frameCount?" Syempre kaya mo! Ngunit narito, upang mas maipakita ang mga katangian ng ingay sa pagpapaandar, pinabagal natin ang "rate ng pag-broadcast". Ipinapakita ng halimbawa sa ibaba ang mga pagbabago sa halaga ng output sa ilalim ng iba't ibang rate ng pagbabago.

[cceN_cpp tema = "bukang-liwayway"] float x, y1, y2, y3, y4, y5; walang bisa ang pag-setup () {laki (700, 500); x = 0; background (0); } walang bisa na pagguhit () {x + = 1; y1 = ingay (frameCount) * 100; y2 = ingay (frameCount / 10.0) * 100; y3 = ingay (frameCount / 100.0) * 100; y4 = ingay (frameCount / 1000.0) * 100; y5 = ingay (frameCount / 10000.0) * 100; noStroke (); ellipse (x, y1, 2, 2); ellipse (x, y2 + 100, 2, 2); ellipse (x, y3 + 200, 2, 2); ellipse (x, y4 + 300, 2, 2); ellipse (x, y5 + 400, 2, 2); stroke (80); linya (0, 100, lapad, 100); linya (0, 200, lapad, 200); linya (0, 300, lapad, 300); linya (0, 400, lapad, 400); }

[/cceN_cpp]

Maaari mong ituring ang pagbabago ng mga parameter sa loob ng ingay ng pag-andar bilang isang bar ng pag-unlad. Baguhin ang parameter ay tulad ng paglipat namin ng progress bar. Kaya't kapag ang pagbabago ng saklaw ng "boses track" na ito ay mas malaki, ang harap at likod na tuluy-tuloy na mga katangian ng halaga ng output ay magiging mahina. (Maaari nating isipin kung ano ang mangyayari kung i-broadcast natin ang isang piraso ng musika o isang video na may 2 beses na bilis, 5 beses na bilis, 20 beses na bilis). Kapag ang saklaw ay mas malaki kaysa sa isang tiyak na halaga, kung gayon wala itong malaking pagkakaiba upang gumana nang random sa pagbuo ng halaga.

Kung mauunawaan mo ang lahat ng mga halimbawa sa itaas, sa gayon ay madarama mong walang mas madali para gumuhit ng isang lumilipat na lupon. Maaari mong maunawaan ang panloob na mga prinsipyo din.

[cceN_cpp tema = "bukang-liwayway"] float x, y; walang bisa ang pag-setup () {laki (300, 300); x = 0; } walang bisa na pagguhit () {background (234, 113, 107); x = ingay (frameCount / 100.0 + 100) * 300; y = ingay (frameCount / 100.0) * 300; noStroke (); ellipse (x, y, 50, 50); }

[/cceN_cpp]

Ngayon, ang paggalaw ay mas kawili-wili tulad ng isang umiikot na gyro.

• Ang dahilan kung bakit ang variable x sa loob ng ingay ng pagpapaandar ay kailangang magdagdag ng 100 ay dahil upang paghiwalayin ang mga ito para sa isang distansya. Kung ang mga parameter ng xy sa loob ng ingay ng pag-andar ay pareho o medyo malapit, ang pagbabago ng x, y coordinate ay malapit sa pareho. Ito ay upang gawing mas random ang kilusan.

Hakbang 14: Circle Inilipat ng Mouse

Susunod, sa wakas nakarating kami sa dalawang mga variable na gusto ko ang pinaka: mouseX at mouseY. Sa unang tingin ng dalawang pagpapalagay, ang aking mga mata ay kumikinang sa ilaw. Dahil ito ang pinaka direktang paraan upang makipag-ugnay sa graphic. Maaari kaming lumikha ng maraming mga kagiliw-giliw na programa kasama nito.

Ang kaso ay medyo simple:

[cceN_cpp tema = "bukang-liwayway"] int x, y; walang bisa ang pag-setup () {laki (300, 300); x = 0; y = 0; } walang bisa na pagguhit () {background (234, 113, 107); noStroke (); x = mouseX; y = mouseY; ellipse (x, y, 50, 50); }

[/cceN_cpp]

Ang mouseX ay maaaring makakuha ng x coordinate ng mouse, habang ang mouseY ay maaaring makakuha ng y coordinate.

• Subukan nating baguhin ang positibo at negatibong simbolo, o makipagpalitan ng mouseX at mouseY.

Hakbang 15: Wakas

Mula sa pamilyar na mga utos na ito, maaari mong maisagawa ang paggalaw ng mga graphic. Gamit ang nilalaman ng huling kabanata, gamitin nang maayos ang iyong imahinasyon, maaari kang lumikha ng maraming mga kagiliw-giliw na animated na epekto.

Sa susunod nating kabanata, makakakita tayo ng mas maraming mga halimbawa. Sa parehong oras, gagamitin namin ang mga pagpapaandar sa matematika at pagsamahin ito sa paggalaw ng grapiko.

Ang artikulong ito ay nagmula sa taga-disenyo na Wenzy.

Hakbang 16: Mga Kamag-anak na Pagbasa:

Kagiliw-giliw na Patnubay sa Programming para sa taga-disenyo - Pagproseso ng Paunang Pag-ugnay

Kagiliw-giliw na Patnubay sa Programming para sa taga-disenyo - Lumikha ng Iyong Unang Programa sa Pagpoproseso

Ang artikulong ito ay mula sa:

Kung kailangan mo ng tulong, maaari kang makipag-ugnay sa: [email protected].