Dizayner uchun qiziqarli dasturiy ko'rsatma-Rasmingizni ishga tushiring (Birinchi qism): 16 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:29

Yugur! Yugur! Yugur!

Dasturlash unchalik qiyin emas. Asosiy nuqta - ritmingizni topish va uni birma -bir bajarish.

Ushbu bo'limni o'qishdan oldin, umid qilamanki, siz rasm chizishning asosiy usuli bilan allaqachon tanish bo'lgansiz yoki boshning ikkita katta funktsiyasidan boshingiz aylanib, chalkashib ketasiz: sozlash va chizish.

Biz harakatlanuvchi grafika yaratmoqchi bo'lganimiz uchun, animatsiya qanday ishlab chiqarilganini bilishimiz kerak.

Yuqoridagi rasm juda jozibali ko'rinadi va vizual ravishda animatsiyani amalga oshirish tamoyilini ochib beradi.

Animatsiya sehrli. Bu vizual aldash haqidagi sehrdir. Biroq, bu ma'lumot portladi, video toshqini davri, biz allaqachon bunga o'rganib qolganmiz. Animatsiyani ko'rish ajoyib narsa ekaniga ko'pchilik ajablanmaydi.

Xuddi shu printsipni dastur yordamida animatsiya chizishda ham qo'llash mumkin. Biz har bir freymda turli xil grafiklarni qanday chizish kerakligini o'ylab ko'rishimiz kerak, va biz boshimizga tugallangan animatsiyani qo'shganda dastur avtomatik ravishda sahifalarni aylantiradi. Keyingi bobda biz asosiy grafik harakatini qanday amalga oshirish haqida gaplashamiz. Undan oldin biz o'zgaruvchilar haqida ba'zi asosiy bilimlarni bilishimiz kerak.

1 -qadam: o'zgaruvchan

Variant - bu ma'lumotlar uchun konteyner. Uni dastur ichida qayta -qayta ishlatish mumkin.

Masalan:

[cceN_cpp theme = "tong"] o'lchami (500, 500); ellips (100, 250, 50, 50); ellips (200, 250, 50, 50); ellips (300, 250, 50, 50); ellips (400, 250, 50, 50);

[/cceN_cpp]

Kodning ushbu bo'limida hech qanday o'zgaruvchi ishlatilmagan. U ekranda to'rtta aylana chizadi. Biz ularning kengligi va balandligi bir xil ekanligini topamiz. Ma'lumotlar takroriy kiritilishini minimallashtirish uchun biz ham xuddi shunday, biz uni ifodalovchi belgini belgilashimiz mumkin. Bu belgi o'zgaruvchan.

O'zgaruvchini qo'shgandan keyin kod:

[cceN_cpp theme = "tong"] o'lchami (500, 500); int a = 50; ellips (100, 250, a, a); ellips (200, 250, a, a); ellips (300, 250, a, a); ellips (400, 250, a, a);

[/cceN_cpp]

Biz mutlaqo bir xil natijaga erishamiz!

A o'zgaruvchini aniqlaganimiz uchun parametrlarni qulay o'zgartirishimiz mumkin. Agar biz a = 50 ni a = 100 ga o'zgartirsak, u holda barcha doiralar kengligi va balandligi bir xilda 100 ga aylanadi. Shuning uchun biz parametrlarni birma -bir o'zgartirishimiz shart emas. O'zgaruvchan, albatta, yaxshi ixtiro.

2 -qadam: O'zgaruvchilarning yaratilishi

O'zgaruvchini ishlatishdan oldin, biz bayonot berishimiz va uning ma'lumotlar turini belgilashimiz kerak.

int i;

i ＝ 50;

Kodning birinchi jumlasi i o'zgaruvchisi uchun bayonot berdi. int - asosan o'zgaruvchini e'lon qilish uchun ishlatiladigan belgi. E'lon qilganda, u kompyuter xotirasida, butun sonli ma'lumotlarni tiklash uchun maxsus ishlatiladigan "quti" ni yaratishga teng bo'lgan xonani bo'shatadi. Ikkinchi jumla 50 -topshiriqni o'zgarmaydigan tomonidan bajarilishini bildiradi. Ushbu jumla amalga oshirilgandan so'ng, ma'lumotlar barqaror o'zgaruvchan i saqlanadi. Yoki siz bayonot berayotganda yuqoridagi ikkita jumlani bitta qilib, topshiriqni bajarishga dangasa bo'lishingiz mumkin.

int i ＝ 50;

O'zgaruvchini nomlash nisbatan erkin. Lekin ba'zida biz biror narsaga e'tibor qaratishimiz kerak.

3 -qadam: O'zgaruvchilarni nomlash qoidalari

• Bu alifbo va pastki chiziqning kombinatsiyasi bo'lishi kerak. Bu belgi yoki so'z bo'lishi mumkin.

• Harflar katta-kichikligiga sezgir. Ism va ism har xil o'zgaruvchilar uchun turishi mumkin.

• Bir qarashda tushunishga imkon berish uchun uni iloji boricha osonroq nomlashga harakat qiling. Bosh belgi raqam yoki maxsus belgi o'rniga alifbo bo'lishi kerak.

• int, float kabi kalit so'zlar yo'q

Quyida ba'zi noto'g'ri bayonotlar keltirilgan.

int $ a;

int 89b;

Mana, to'g'ri bayonotlar:

int r;

int super_24;

int openTheDoor;

4 -qadam: o'zgaruvchan tur

Butun sonli ma'lumotlarni e'lon qilishdan tashqari, biz float kalit so'z bilan o'nlik ma'lumotlarni (shuningdek, suzuvchi nuqta ma'lumotlari deb ham ataladi) e'lon qilishimiz mumkin.

float b = 0,5

Biz bayonot uchun qanday ma'lumot turini ishlatganimizni yodda tutishimiz kerak. Agar biz int kalit so'zidan foydalansak, oxirgi topshiriq i ＝ 0.5 yoki shunga o'xshash narsani yozolmaydi, yoki dastur xato bo'ladi. Ammo aksincha yozsak, hammasi joyida. Masalan, float i = 5 - to'g'ri grammatika, lekin dastur uni o'nlik raqam sifatida tan oladi.

Ba'zi o'zgaruvchilar allaqachon tizim tomonidan aniqlangan. Biz ularni o'zimiz e'lon qilishimiz shart emas. Xuddi ilgari aytilgan "kenglik, balandlik" kabi, u avtomatik ravishda kompyuter ekranining kengligi va balandligini oladi. Foydalanishning shunchalik yuqori chastotasi, dizayner uni ishlatishni yanada qulayroq qilish uchun uni to'g'ridan -to'g'ri standart o'zgaruvchi deb belgilaydi.

5 -qadam: Operator

Qayta ishlash operatorlari quyidagilar:

+ plyus

- minus

* ko'paytirish

bo'lmoq

％ Qolganlarning moduli

Siz %dan tashqari barcha operatorlarni bilishingiz kerak. Bu g'alati tuyuladi, chunki uning natijasi qolgan. 9%3 - 0. 9%5 esa 4.

Vazifalar va o'zgaruvchilar orasida operatorlardan foydalanish mumkin.

[cceN_cpp theme = "tong"] int a = 1; // a butun sonli o'zgaruvchini e'lon qiling, topshiriq 1. int b = 2; // b butun sonli o'zgaruvchini e'lon qiling, topshiriq 2. int c; // Butun sonli o'zgaruvchini e'lon qiling c. c = a + b; // Plus ikkita topshiriq va uning natijasini c ga belgilang. bosib chiqarish (c); // Chiqish o'zgaruvchisi c.

[/cceN_cpp]

6 -qadam: operatsiya natijasi:

Chiqish natijasi oynada emas, balki pastki qismidagi konsolda ko'rsatiladi.

To'rtinchi qatorning yozish usuli juda g'alati ko'rinadi. Ammo bu kompyuterni tayinlashda tez -tez ishlatiladigan umumiy format. Teng belgining chap tomoni oxirgi tayinlangan o'zgaruvchi bo'lishi kerak, o'ng tomoni esa ishlash jarayoni bo'lishi kerak.

Beshinchi qatorda chop etish funktsiyasi konsoldagi o'zgaruvchilarni chop etishi mumkin, bu ko'pincha ma'lumotlar chiqarish holatini tekshirish uchun ishlatiladi.

7 -qadam: Ishni tartibga solish

Qayta ishlashning muammoli tomoni shundaki, biz o'zgaruvchining turini aniqlashimiz kerak. Biz o'zgaruvchan nuqta raqami va butun son turiga alohida e'tibor qaratishimiz kerak.

bosib chiqarish (6/5); // natija 1

Butun sonlar orasidagi operatsiya yangi tamsayıga ega bo'ladi. 6 ning 5 ga bo'linishi 1,2 ga teng. Lekin dastur natijasi 1. Bu bizning sezgiimizga zid. Dastur yumaloq bilan ishlamaydi, balki o'nlik kasr ortidagi raqamni o'chiradi.

chop etish (6.0 / 5.0); // natija 1.2

O'zgaruvchan nuqtalar orasidagi operatsiya yangi suzuvchi nuqta raqamini keltirib chiqaradi. Agar haqiqiy natija 1,2 bo'lsa, dasturning chiqish natijasi bir xil bo'ladi.

chop etish (6 / 5.0); // natija 1.2

chop etish (6.0 / 5); // natija 1.2

Nihoyat, bu butun son va suzuvchi nuqta raqamining aralashmasi. Yakuniy chiqish natijasi 1,2 bo'ladi.

• Aslida, siz shuni esda tutishingiz kerakki, ushbu tartibga solishning maqsadi ma'lumotlarning aniqligini yo'qotmaslikdir. Shunday qilib, agar bitta element suzuvchi nuqta raqami bo'lsa, natija ham o'zgaruvchan nuqta raqami bo'ladi.

8 -qadam: Funktsiyani sozlash va chizish funktsiyasi

Ilgari biz asosli bilimlar haqida gaplashdik. Nihoyat, biz qiziq bir narsani o'ynashga keldik. Funktsiyalarni sozlash va chizish ishlov berishning asosiy funktsiyalariga tengdir. Bu ikkita funktsiya juda o'ziga xosdir. U dastur tartibini boshqarishi mumkin. Nisbatan murakkab dastur bu ikkita funktsiyani o'z ichiga oladi, chunki ular dastur uchun asosiy ramka hisoblanadi. Format:

bo'sh o'rnatish () {

}

bekor chizish () {

}

Maxsus foydalanish ularni chaqirish formatini boshqa funktsiyalardan farq qiladi. Funktsiya nomidan oldin "qaytarilmagan qiymat" degan ma'noni anglatuvchi "void" ni qo'shishimiz kerak. Funktsiya nomining orqasida biz qavs va qavs qo'shishimiz kerak.

[cceN_cpp theme = "shafaq"] void setup () {print (1); } void draw () {print (2); } [/cceN_cpp]

Keling, bir misolni ko'rib chiqaylik:

Ish tugmachasini bosganingizda, konsol birinchi bo'lib "1" ni chiqaradi, so'ng siz to'xtatish tugmachasini bosmaguningizcha yoki oynani yopmaguningizcha "2" ni doimiy ravishda chiqaradi.

O'rnatish funktsiyasidagi qavs ichidagi kod faqat bir marta amalga oshiriladi, funksiya chizig'idagi kod esa doimiy ravishda aylanada ishlaydi (standart bajarilish 60 marta/soniya).

Ushbu belgi tufayli sozlash odatda ekranning kengligi va balandligi, fon rangi va har xil o'zgaruvchilar tayinlanishi kabi muhit xususiyatlarini ishga tushirish uchun ishlatiladi. Biz tez -tez o'zgarib turadigan grafikalar yaratish uchun chizish funktsiyalarini funktsiya chizig'iga joylashtiramiz.

9 -qadam: Gorizontal harakatda aylana

Draw funktsiyasi yordamida biz o'z animatsiyalarimizni yaratishni boshlashimiz mumkin. Qayta ishlash orqali animatsiya effektini yozish usuli juda "noqulay". Unda mavjud buyruq yo'q. Masalan, egri chiziqli qilish uchun ma'lum bir shaklni belgilang.

Biz bu tafsilotlarni o'zimiz aniqlashimiz kerak. Siz har bir kadrga qanday grafikalar kerakligini aniq aytib berishingiz kerak.

Unga quyidagi kodni yozing (Endi buni qo'l bilan bajarishni boshlaymiz):

[cceN_cpp theme = "tong"] int x; int y; void setup () {size (300, 300); x = 0; y = balandlik/2; } void draw () {background (234, 113, 107); noStroke (); ellips (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Kodning ushbu bo'limi harakat doirasini ko'rsatadi. Oldindan e'lon qilingan x, y o'zgaruvchisi koordinata o'rnini saqlash uchun ishlatiladi. Uning vazifalari funktsiyalarni sozlashda ishlaydi. Funktsiya chizig'ida kalit kodi quyidagicha:

x = x + 1

Buni matematik tenglama deb qaramang, aks holda bu juda g'alati bo'ladi. Bu erda "＝" - bu topshiriqning ramzi. Bu o'ng sonlarni chap o'zgaruvchiga joylashtirishni anglatadi. Agar kod ishga tushsa, "50" ning o'ng tomoni 50+1 ga, ya'ni 51 ga teng. Shunday qilib, x qiymati 51 ga aylanadi.

Dastur protsedurasiga rioya qiling, har safar chizish funksiyasi bir marta ishlasa, x ning qiymati oshadi. Shunday qilib, har safar chizganimizda, aylana oldingi yo'nalishga nisbatan piksel yo'nalishini gorizontal ravishda o'ngga siljitadi. Shunday qilib, grafik harakatga aylanadi.

• Kodni yaxshiroq o'qilishini ta'minlash uchun, qavs ichidagi har bir kod satridan oldin ma'lum bir xonani ajratishimiz kerak. Va u iloji boricha tekislanadi. TAB yoki bir nechta bo'sh joyni bosing, u orqaga tortilishi mumkin.

• Dasturda bo'sh joy va satr uzilishi belgisi dasturga ta'sir qilmaydi. Shunday qilib, agar biz bir yoki undan ko'p yozsak yaxshi bo'ladi.

Buni ifodalashning yana bir oddiy usuli. O'zgaruvchan doirani avtomatik ravishda 1 ga oshirish uchun biz uni quyidagi formatga yozishimiz kerak.

doira, aylana 1

Juda noqulay! Agar o'zgaruvchining nomi uzunroq bo'lsa, biz ko'proq so'zlarni kiritishimiz kerak. Shunday qilib, bizning dangasa o'tmishdoshlarimiz shunday fikrni o'ylab topishadi.

doira ＋＋

Bu juda oddiy emasmi? Bu avtomatik ravishda 1 ga ko'payishini anglatadi. Shunga o'xshab, - - bor, ya'ni avtomatik ravishda 1 kamayadi.

Ammo, agar biz avtomatik o'sish miqdori 2 kabi boshqa raqamga umid qilsak, biz boshqa ifodani sinab ko'rishimiz kerak.

doira += 2

Bu teng

doira = aylana + 2

Xuddi shunday, - ＝, /=, *= bor.

10 -qadam: harakat yo'nalishi

Grafika qaysi yo'nalishda harakat qilishi koordinatangizni qanday o'zgartirishingizga bog'liq. Agar u y ＝ y ＋ 1 ga o'zgartirilsa, aylana pastga siljiydi. Agar ikkala va y ikkalasi ham 1 ga ko'paysa, aylana o'ng pastki qismdan pastga siljiydi. Agar biz uni minus belgisi deb yozsak, u teskari yo'nalishda harakat qiladi.

[cceN_cpp theme = "tong"] int x, y; // Bir vaqtning o'zida bir nechta o'zgaruvchini e'lon qila oladi, ajratish uchun vergul ishlatiladi. void setup () {size (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); ellips (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Harakat darajasi

Funktsiya chizig'ida sekundiga standart 60 kadrni eslaysizmi? Bu tezlikka ko'ra, yuqoridagi aylana soniyasiga 60 piksel o'ngga siljiydi.

Agar biz grafik harakat tezligini o'zgartirmoqchi bo'lsak, ikkita usul bor: biri har safar x qiymatini o'zgartirish, chunki u o'zgaradi.

x x x x 10

Asl tezlik bilan taqqoslaganda tezlikni 10 barobar yaxshilandi!

Boshqa usul - tuvalni yangilash chastotasini o'zgartirish. frameRate ()

Bu funksiya tuvalning efir chastotasini o'zgartirishi mumkin. FrameRate (10) ni funksiya sozlamalariga yozing, u dastlabki 60 kadrni sekundiga 10 kadrga o'zgartiradi. Tezlik avvalgisiga qaraganda 6 marta sekinlashdi.

11 -qadam: e'tiborga olinmagan fon

Oldingi barcha misollar funktsiyalarni chizish uchun fon yozadi. Siz buni funksiya sozlamalariga yozishni o'ylab ko'rganmisiz? Unda farqlar bo'ladimi? Keling, gorizontal harakat misolini yangilaylik.

[cceN_cpp theme = "tong"] int x, y; void setup () {size (300, 300); fon (234, 113, 107); x = 0; y = balandlik/2; } void draw () {noStroke (); ellips (x, y, 50, 50); x += 1; } [/cceN_cpp]

Nima bo'ldi? Balki u muammoning to'g'ri ishlab chiqarish sababini tushuna olmaydi. NoStroke funktsiyasini o'chirib tashlang, yana kontur qo'shing va aylananing harakatlanish yo'lini ko'ring.

Oh, chunki ilgari yaratilgan davr o'chirilmagan! Chunki funktsiyalarni sozlash bir marta ishlaydi, agar biz uning ustiga fon yozsak, u fonni faqat bir marta to'ldiradi, ikkinchisiga esa hech qanday ta'siri bo'lmaydi. Funktsional fon bo'yoq paqir asbobiga o'xshaydi. Ishlatilgandan so'ng, u faqat fon rangini o'rnatish o'rniga, tuvaldagi barcha tarkibni qamrab oladi. Biz uni funktsiya chizmasidan oldin yozamiz, shunda biz har safar yangi naqsh yaratganimizda oldingi ramka yopiladi. Shuning uchun, aylana biz kutgandek ishlashi mumkin. Har bir funktsiyaning ishlatilishini eslashdan tashqari, biz kodning o'rni haqida o'ylashimiz kerak. Ko'p vaqt, koda uchun yuqoriga yoki pastga chiziq va uni qavs ichida yoki tashqarisida yozish, bu butunlay boshqacha effektlarni yaratadi. Kodning yo'nalishi ikki o'lchovli. Agar xato paydo bo'lsa, biz ushbu ikki o'lchovda kalibrlashimiz kerak.

• Bu takrorlanmagan chizish usuli to'g'ri ishlatilganda juda o'ziga xos effekt yaratishi mumkin. Siz quyidagi kodni nusxalashingiz va urinib ko'rishingiz mumkin.

[cceN_cpp theme = "tong"] void setup () {size (400, 400); } void draw () {ellipse (width/2-mouseX, height/2-mouseX, mouseY, mouseY); ellips (kenglik/2-mouseX, balandlik/2+mouseX, mouseY, mouseY); ellips (kenglik/2+mouseX, balandlik/2-mouseX, mouseY, mouseY); ellips (kenglik/2+mouseX, balandlik/2+mouseX, mouseY, mouseY); } [/cceN_cpp]

Bu erda biz mouseX va mouseY sehrli o'zgaruvchisidan foydalandik. Keyinchalik biz bu haqda batafsil gaplashamiz.

12 -qadam: aylanani silkit

Agar aylananing harakat yo'nalishini tartibsiz holga keltirmoqchi bo'lsam nima bo'ladi? Tasodifiy tasodif bilan, siz ham bu ta'sirni sezishingiz mumkin. Tasodifiy - tez -tez ishlatib turadigan funksiya. Bu tasodifiy funktsiyani yaratish uchun ishlatilishi mumkin. Bu izsiz ruhga o'xshaydi. O'zgaruvchilar bilan bog'liq bo'lganingizda, keyin nima bo'lishini tasavvur qila olmaysiz.

Chaqiruv formati:

tasodifiy (yuqori)

Oliy tasodifiy yuqori chegarani ifodalaydi va standart pastki chegarasi 0. Masalan, tasodifiy (10). U tasodifiy ravishda 0 dan 10 gacha raqam chiqaradi (0 kiritilgan, lekin 10 qo'shilmagan).

tasodifiy (past, yuqori)

Agar ikkita parametr o'rnatilsa, u holda ular orasidagi tasodifiy qiymatga qaytadi, masalan, tasodifiy (5, 10). U tasodifiy ravishda 5 dan 10 gacha raqam ishlab chiqaradi (5 ta kiritilgan, lekin 10 ta qo'shilmagan).

Misol:

[cceN_cpp theme = "tong"] suzuvchi x;

x = tasodifiy (50, 100);

bosib chiqarish (x); [/cceN_cpp]

Har safar dasturni ishga tushirganimizda, konsol har xil qiymatlarni chiqaradi.

• Eslatma: tasodifiy funktsiya tomonidan yaratilgan qiymatlar suzuvchi nuqta turiga tegishli (o'nli raqamlar turi). Agar biz butun sonli o'zgaruvchiga qiymat tayinlamoqchi bo'lsak, uni int () funktsiyasi orqali o'zgartirishimiz kerak. O'zgartirish yumaloq emas, balki o'nlik kasrni to'g'ridan -to'g'ri o'chiradi. Shunday qilib, int (tasodifiy (5)) chiqishi faqat 5 ta imkoniyatga ega: 0, 1, 2, 3, 4.

Tasodifiy funktsiyani ishlatish bilan tanishganimizdan so'ng, biz to'g'ridan -to'g'ri quyidagi holatga o'tishimiz mumkin.

[cceN_cpp theme = "tong"] int x, y; void setup () {size (300, 300); x = kenglik/2; y = balandlik/2; } void draw () {background (234, 113, 107); noStroke (); x += int (tasodifiy (-5, 5)); y += int (tasodifiy (-5, 5)); ellips (x, y, 50, 50); }

[/cceN_cpp]

Oldingi qo'shilgan koordinata qiymatlari aniqlanadi. Faqat tasodifiy qiymatni ko'paytirsak, aylana noaniq yo'nalishda harakat qiladi. Kattaroq tasodifiy diapazon bilan u tez -tez chayqaladi. Kadrlar orasidagi qiymat o'zgarganligi sababli, harakat endi silliq bo'lmaydi. Oldingi ramka (150, 150) darajasida bo'lsa, ikkinchi ramka bir qarashda (170, 170) holatiga o'tadi.

13 -qadam: Ko'chib yurish doirasi

Ko'chib yurish doirasi

Bu silliq harakatni yaratadimi? Funktsional shovqin bizga yordam berishi mumkin. U standart tasodifdan ko'ra yaxshiroq ritmga ega. Va tasodifiy hosil qilingan tasodifiy sonlar uzluksiz.

Chaqiruv formati:

shovqin

Shovqin funktsiyasi uning chiqish diapazonini aniqlay olmaydi. Dastur faqat 0 dan 1 gacha suzuvchi nuqta raqamlarini yaratishi mumkinligini aniqlaydi va sobit kirish faqat aniq chiqishga ega bo'lishi mumkin.

[cceN_cpp theme = "tong"] float x = shovqin (5); float y = shovqin (5); bosib chiqarish (x, y); [/cceN_cpp]

Yuqoridagi kirish parametrlari 5 bo'lgani uchun chiqish natijalari bir xil bo'ladi, keyin natijani qanday o'zgartirish mumkin? Javob - kirish parametrlarini dinamik ravishda o'zgartirish. Aslida biz shovqinni cheksiz ovozli trek deb hisoblashimiz mumkin, kirish parametrlari xuddi "hozirgi vaqt" ga o'xshaydi. Agar parametr kiritish uzluksiz bo'lsa, chiqish ham uzluksiz bo'ladi.

[cceN_cpp theme = "tong"] suzuvchi x, y; void setup () {size (700, 100); x = 0; fon (0); } void draw () {x += 1; y = shovqin (frameCount/100.0)*100; noStroke (); ellips (x, y, 2, 2); }

[/cceN_cpp]

Bunday holda, biz funktsional shovqinni yaxshiroq tushunish uchun Y ning o'zgarish yo'lini chizamiz.

• O'zgaruvchan frameCount joriy ramkani oladi. Oldingi kenglik va balandlikdan farqli o'laroq, u hech qanday o'zgarishsiz barqarordir. Bundan tashqari, u 0 dan oshib ketadi. Agar biz uni birinchi ko'rsatuvli animatsion grafik orqali tushunsak, u biz o'girgan sahifani ko'rsatadi (dasturdagi vaqt tushunchasiga emas).

• frameCount butun sonli o'zgaruvchidir. Boshqa tamsayı o'zgaruvchiga bo'linib, dastur natijani butun songa aylantiradi. Natijaning aniqligini oshirish uchun biz 100 ni 100,0 ga o'zgartirishimiz kerak. O'zgaruvchan nuqta raqamiga bo'linib, biz ham o'zgaruvchan nuqta raqamini olamiz.

• Y o'qini 0 dan 100 gacha o'zgartirish uchun shovqin natijasini 100 ga ko'paytirish kerak. Shunday qilib, biz tasodifiy qiymatlar oralig'ini nazorat qila olamiz.

Sizlardan ba'zilari "Nega biz frameCountby 100 ni ajratishimiz kerak? FrameCountni to'g'ridan -to'g'ri yozish yaxshi emasmi?" Deb so'rashingiz mumkin. Albatta qila olasiz! Ammo bu erda funktsional shovqin xususiyatlarini yaxshiroq ko'rsatish uchun biz "translyatsiya tezligini" sekinlashtiramiz. Quyidagi misolda chiqish qiymati har xil o'zgarish tezligida o'zgarishi ko'rsatilgan.

[cceN_cpp theme = "tong"] suzuvchi x, y1, y2, y3, y4, y5; void setup () {size (700, 500); x = 0; fon (0); } void draw () {x += 1; y1 = shovqin (frameCount)*100; y2 = shovqin (frameCount/10.0)*100; y3 = shovqin (frameCount/100.0)*100; y4 = shovqin (frameCount/1000.0)*100; y5 = shovqin (frameCount/10000.0)*100; noStroke (); ellips (x, y1, 2, 2); ellips (x, y2+100, 2, 2); ellips (x, y3+200, 2, 2); ellips (x, y4+300, 2, 2); ellips (x, y5+400, 2, 2); qon tomir (80); chiziq (0, 100, kenglik, 100); chiziq (0, 200, kenglik, 200); chiziq (0, 300, kenglik, 300); chiziq (0, 400, kenglik, 400); }

[/cceN_cpp]

Siz funktsional shovqin ichidagi o'zgaruvchan parametrlarni rivojlanish paneli sifatida ko'rishingiz mumkin. Parametrni o'zgartirish, biz harakat panelini siljitgandek. Shunday qilib, "ovozli trek" ning o'zgaruvchan doirasi kattaroq bo'lganda, chiqish qiymatining old va orqa uzluksiz xarakteristikalari kuchsizroq bo'ladi. (Agar biz musiqa yoki videoni 2 barobar tezlikda uzatsak nima bo'lishini tasavvur qilishimiz mumkin, 5 marta tezlik, 20 marta tezlik). Qachonki ma'lum bir qiymatdan kattaroq bo'lsa, unda qiymat ishlab chiqarishda tasodifiy ishlashning katta farqi yo'q.

Agar siz yuqoridagi barcha misollarni tushuna olsangiz, ko'chib o'tuvchi doirani chizish osonroq bo'lmaydi, deb o'ylaysiz. Siz ichki printsiplarni ham tushunishingiz mumkin.

[cceN_cpp theme = "tong"] suzuvchi x, y; void setup () {size (300, 300); x = 0; } void draw () {background (234, 113, 107); x = shovqin (frameCount/100.0 + 100)*300; y = shovqin (frameCount/100.0)*300; noStroke (); ellips (x, y, 50, 50); }

[/cceN_cpp]

Endi, harakat aylanayotgan gyros kabi qiziqroq.

• Funktsion shovqin ichida x o'zgaruvchining nima uchun ortiqcha 100 bo'lishi kerakligi, chunki ularni masofaga ajratish uchun. Agar funktsiya shovqinidagi xy parametrlari bir xil yoki juda yaqin bo'lsa, x, y koordinatasining o'zgarishi ham shunga yaqin bo'ladi. Bu harakatni tasodifiy holga keltirish uchun qilingan.

14 -qadam: aylana sichqoncha tomonidan harakatlantirildi

Keyinchalik, men nihoyat menga eng yoqadigan ikkita o'zgaruvchiga keldik: mouseX va mouseY. Ikki kontseptsiyani birinchi ko'rishdayoq, ko'zlarim nurga o'xshaydi. Chunki bu grafik bilan ishlashning eng to'g'ridan -to'g'ri usuli. Biz uning yordamida juda ko'p qiziqarli dasturlarni yaratishimiz mumkin.

Vaziyat juda oddiy:

[cceN_cpp theme = "tong"] int x, y; void setup () {size (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); x = sichqoncha; y = sichqoncha Y; ellips (x, y, 50, 50); }

[/cceN_cpp]

mouseX sichqonchaning x koordinatasini, mouseY esa y koordinatasini olishi mumkin.

• Keling, ijobiy va salbiy belgini o'zgartirishga, yoki mouseX va mouseY almashishga harakat qilaylik.

15 -qadam: tugatish

Ushbu tanish buyruqlar yordamida siz grafik harakatini boshqarishingiz mumkin. Oxirgi bobning mazmuni bilan o'z tasavvuringizdan to'g'ri foydalaning, siz juda ko'p qiziqarli animatsion effektlarni yaratishingiz mumkin.

Keyingi bobda biz yana ko'p misollarni ko'rishimiz mumkin. Shu bilan birga, biz matematik funktsiyalarni ishlatamiz va uni grafik harakati bilan birlashtiramiz.

Ushbu maqola dizayner Vensidan keladi.

16 -qadam: Nisbiy o'qishlar:

Dizayner uchun qiziqarli dasturiy ko'rsatma-Dastlabki teginishni qayta ishlash

Dizayner uchun qiziqarli dasturiy ko'rsatma-Birinchi ishlov berish dasturini yarating

Bu maqola:

Agar sizga yordam kerak bo'lsa, quyidagi manzilga murojaat qilishingiz mumkin: [email protected].