Panduan Pemrograman yang Menarik untuk Desainer--Dapatkan Gambar Anda Berjalan (Bagian Satu): 16 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:59

Lari! Lari! Lari!

Pemrograman tidak begitu sulit. Poin kuncinya adalah menemukan ritme Anda dan melakukannya satu per satu.

Sebelum membaca bab ini, saya harap Anda sudah terbiasa dengan metode menggambar fungsi dasar, atau Anda akan merasa pusing dan bingung dengan dua fungsi kepala besar: setup dan menggambar.

Karena kita ingin membuat motion graphic, kita harus tahu bagaimana animasi itu dihasilkan.

Gambar di atas tampak cukup menarik dan secara visual mengungkapkan prinsip implementasi animasi.

Animasi adalah sihir. Ini adalah keajaiban tentang kecurangan visual. Namun, dalam ledakan informasi ini, video membanjiri zaman, kita sudah terbiasa dengannya. Beberapa orang akan terkejut bahwa itu adalah hal yang menakjubkan untuk dapat melihat animasi.

Prinsip yang sama dapat diterapkan dalam menggambar animasi dengan program. Kita harus mempertimbangkan cara menggambar grafik yang berbeda di setiap frame, dan program akan secara otomatis membalik halaman sementara kita melengkapi animasi yang sudah selesai di kepala kita. Pada bab berikut, kita akan berbicara tentang bagaimana mewujudkan gerakan grafis dasar. Sebelum itu, kita perlu mengetahui beberapa pengetahuan dasar tentang variabel.

Langkah 1: Variabel

Variabel adalah wadah untuk data. Ini dapat digunakan berulang kali dalam suatu program.

Sebagai contoh:

[cceN_cpp theme="fajar"] ukuran(500, 500); elips(100, 250, 50, 50); elips (200, 250, 50, 50); elips (300, 250, 50, 50); elips (400, 250, 50, 50);

[/cceN_cpp]

Bagian kode ini tidak menggunakan variabel apa pun. Ini menarik empat lingkaran di layar. Kita dapat menemukan mereka memiliki lebar dan tinggi yang sama. Sekarang sama, untuk meminimalkan input data berulang, kita dapat mendefinisikan tanda untuk mewakilinya. Tanda ini bervariasi.

Berikut kode setelah ditambahkan variabel:

[cceN_cpp theme="fajar"] ukuran(500, 500); int = 50; elips(100, 250, a, a); elips(200, 250, a, a); elips(300, 250, a, a); elips(400, 250, a, a);

[/cceN_cpp]

Kami mendapatkan hasil yang sama sekali!

Karena kita telah mendefinisikan variabel a, kita dapat dengan mudah mengubah parameter. Jika kita mengubah a=50 menjadi a=100, maka lebar dan tinggi semua lingkaran akan menjadi 100 seragam. Jadi kita tidak perlu mengubah parameter satu per satu. Variabel benar-benar penemuan yang bagus.

Langkah 2: Pembuatan Variabel

Sebelum menggunakan variabel, kita harus membuat pernyataan dan menentukan tipe datanya.

di aku;

saya 50;

Kalimat pertama kode telah membuat pernyataan untuk variabel i. int adalah simbol yang terutama digunakan untuk mendeklarasikan variabel. Saat mendeklarasikan, itu akan menghemat ruang di memori komputer, yang setara dengan menghasilkan "kotak", yang khusus digunakan untuk memulihkan data integer. Kalimat kedua adalah membuat tugas 50 untuk dilaksanakan oleh variabel i. Setelah penerapan kalimat ini, data akan disimpan dalam variabel i secara stabil. Atau Anda bisa malas untuk menggabungkan dua kalimat di atas menjadi satu dan menyelesaikan tugas sambil membuat pernyataan.

int i 50;

Hal ini relatif bebas untuk nama variabel. Tapi terkadang kita harus memperhatikan sesuatu.

Langkah 3: Regulasi Penamaan Variabel

• Harus kombinasi abjad dan garis bawah. Itu bisa berupa simbol atau kata.

• Hal - hal sensitif. Nama dan nama dapat mewakili variabel yang berbeda.

• Cobalah untuk menyebutkannya semudah mungkin agar Anda mengerti dalam satu pandangan. Karakter awal harus berupa alfabet, bukan angka atau karakter khusus.

• Tidak ada kata kunci seperti int, float

Berikut ini adalah beberapa pernyataan yang salah.

int $a;

int 89b;

Berikut pernyataan yang benar:

int r;

int super_24;

int bukaPintu;

Langkah 4: Tipe Variabel

Kecuali untuk mendeklarasikan data integer, kita dapat mendeklarasikan untuk data desimal (juga disebut data floating point) dengan kata kunci float.

mengapung b = 0,5

Kita harus mengingat tipe data apa yang kita gunakan untuk pernyataan kita. Jika kita telah menggunakan kata kunci int, tugas terakhir tidak dapat menulis i＝0.5 atau semacamnya, atau program akan menjadi error. Tetapi jika kita menulis sebaliknya, tidak apa-apa. Misalnya, float i=5 adalah tata bahasa yang benar tetapi program akan mengenalinya sebagai angka desimal.

Beberapa variabel sudah ditentukan oleh sistem. Kita tidak perlu mendeklarasikannya sendiri. Sama seperti "lebar, tinggi" yang disebutkan sebelumnya, secara otomatis akan memperoleh lebar dan tinggi layar komputer. Frekuensi penggunaan yang begitu tinggi sehingga desainer secara langsung mendefinisikannya sebagai variabel default agar lebih nyaman untuk kita gunakan.

Langkah 5: Operator

Berikut ini adalah operator pengolahan:

+ ditambah

- minus

* kalikan

membagi

Modulus sisa

Anda harus familiar dengan semua operator ini kecuali %. Tampaknya cukup aneh karena hasilnya adalah sisa. 9%3 adalah 0. Sedangkan 9%5 adalah 4.

Operator dapat digunakan di antara tugas dan variabel.

[cceN_cpp theme="fajar"] int a = 1; //deklarasikan variabel integer a, penugasannya adalah 1. int b = 2; //Deklarasikan variabel integer b, penugasannya adalah 2. int c; //deklarasikan variabel integer c. c = a + b; //Plus dua tugas dan tetapkan hasilnya ke c. cetak(c); //variabel keluaran c.

[/cceN_cpp]

Langkah 6: Hasil Operasi:

Hasil output tidak akan ditampilkan di jendela tetapi di konsol di bagian bawah.

Metode penulisan baris keempat terlihat cukup aneh. Tapi itu adalah format umum yang sering digunakan selama tugas komputer. Sisi kiri simbol yang sama harus menjadi variabel akhir yang ditetapkan, sedangkan sisi kanan harus menjadi proses operasi.

Fungsi print pada baris kelima dapat mencetak variabel di console, yang sering digunakan untuk menguji kondisi keluaran data.

Langkah 7: Peraturan Operasi

Poin yang merepotkan dalam Processing adalah kita harus mengklarifikasi jenis variabel. Kita harus memberikan perhatian khusus pada proses bilangan floating point dan tipe integer.

cetak（6 / 5）; //hasil 1

Operasi antara bilangan bulat akan memiliki bilangan bulat baru. 6 dibagi 5 adalah 1,2. Namun hasil keluaran program adalah 1. Hal ini bertentangan dengan intuisi kita. Program tidak akan berurusan dengan putaran tetapi menghapus angka di belakang titik desimal.

cetak (6.0 / 5.0); //hasil 1.2

Operasi antara floating point akan menghasilkan nomor floating point baru. Jika hasil aktualnya adalah 1,2, maka hasil keluaran program akan sama.

cetak (6 / 5.0); //hasil 1.2

cetak (6.0 / 5); //hasil 1.2

Akhirnya itu adalah campuran bilangan bulat dan bilangan floating point. Hasil keluaran akhir akan menjadi 1.2.

• Sebenarnya perlu diingat bahwa tujuan dari perancangan regulasi ini adalah agar tidak kehilangan akurasi data. Jadi jika salah satu elemen adalah bilangan floating point, hasilnya juga bilangan floating point.

Langkah 8: Fungsi Pengaturan & Fungsi Gambar

Sebelumnya kita telah membicarakan setumpuk pengetahuan grounding. Sekarang, kami akhirnya datang untuk memainkan sesuatu yang menarik. Pengaturan fungsi dan menggambar setara dengan fungsi utama pemrosesan. Kedua fungsi ini sangat istimewa. Itu dapat mengontrol prosedur program. Program yang relatif rumit akan mencakup kedua fungsi ini karena keduanya merupakan kerangka dasar untuk program tersebut. Format:

batalkan pengaturan(){

}

batal menggambar(){

}

Penggunaan khusus membuat format pemanggilannya berbeda dengan fungsi lainnya. Kita harus menambahkan "void" sebelum nama fungsi, yang merupakan singkatan dari no "returned value". Di belakang nama fungsi, kita harus menambahkan tanda kurung dan kurung kurawal.

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

Mari kita lihat contohnya:

Saat menekan tombol operasi, konsol pertama-tama akan menampilkan "1" dan kemudian terus-menerus mengeluarkan "2" sampai Anda menekan tombol stop atau menutup jendela.

Kode di dalam tanda kurung di fungsi setup akan diimplementasikan hanya sekali. Sementara kode di dalam function draw akan terus berjalan di sirkulasi (implementasi default 60 kali/detik).

Karena karakter ini, setup biasanya digunakan untuk menginisialisasi properti lingkungan, seperti lebar dan tinggi layar, warna latar belakang, dan semua jenis penugasan variabel. Sementara kita sering menempatkan fungsi menggambar ke dalam fungsi menggambar untuk menghasilkan grafik yang terus berubah.

Langkah 9: Lingkaran dalam Gerakan Horizontal

Dengan function draw, kita bisa mulai membuat animasi kita. Cara penulisan efek animasi oleh Processing cukup “canggung”. Itu tidak memiliki perintah yang ada. Misalnya, tentukan bentuk tertentu untuk melakukan lengkung.

Kita harus mendefinisikan detail ini sendiri. Anda harus memberi tahu program jenis grafik apa yang pasti dibutuhkan setiap frame.

Tulis kode berikut ke dalamnya (Sekarang mari kita mulai melakukannya dengan tangan):

[cceN_cpp theme="fajar"] int x; int y; batalkan pengaturan(){ ukuran(300, 300); x = 0; y = tinggi/2; } batal draw(){ latar belakang(234, 113, 107); tidak ada Stroke(); elips(x, y, 50, 50); x = x+1; }

[/cceN_cpp]

Bagian kode ini menampilkan lingkaran bergerak. Variabel x,y yang dideklarasikan sebelumnya digunakan untuk menyimpan posisi koordinat. Penugasannya berjalan dalam pengaturan fungsi. Kode kuncinya adalah kode berikut di dalam function draw:

x = x + 1

Jangan melihatnya sebagai persamaan matematis, atau akan sangat aneh. Di sini, "＝" adalah simbol untuk tugas. Ini mewakili untuk menempatkan angka kanan ke dalam variabel kiri. Misalkan x adalah 50, setelah kode dijalankan, sisi kanan "＝" sama dengan 50+1, yaitu 51. Hasil akhir akan dimasukkan ke dalam variabel x. Jadi nilai x menjadi 51.

Ikuti prosedur program, setiap kali function draw beroperasi satu kali, nilai x akan bertambah 1. Jadi setiap kali kita menggambar, lingkaran akan bergerak satu arah piksel secara horizontal ke kanan, dibandingkan dengan frame sebelumnya. Oleh karena itu, grafik menjadi gerak.

• Untuk membuat kode mendapatkan keterbacaan yang lebih baik, kita harus menyisihkan ruang tertentu sebelum setiap baris kode di dalam kurung kurawal. Dan itu harus diselaraskan mungkin. Tekan TAB atau beberapa ruang kosong, dapat melakukan retraksi.

• Simbol spasi dan jeda baris dalam program tidak akan mempengaruhi program. Jadi tidak apa-apa jika kita mengetik satu lebih atau kurang.

Inilah cara lain yang lebih sederhana untuk mengekspresikannya. Untuk membuat lingkaran variabel bertambah 1 secara otomatis, kita harus menulisnya menjadi format berikut.

lingkaran lingkaran 1

Cukup tidak nyaman! Jika nama variabel lebih panjang, maka kita harus mengetikkan lebih banyak kata. Jadi para pendahulu kita yang malas memikirkan ide seperti ini.

lingkaran＋＋

Bukankah itu sangat sederhana? Artinya bertambah 1 secara otomatis. Mirip dengan itu, ada --, yang berarti turun 1 secara otomatis.

Tetapi jika kita berharap kuantitas kenaikan otomatis adalah angka lain seperti 2, kita harus mencoba ekspresi lain.

lingkaran += 2

Ini sama dengan

lingkaran = lingkaran + 2

Demikian pula, ada, /=, *=.

Langkah 10: Arah Gerakan

Arah mana grafik bergerak tergantung pada bagaimana Anda mengubah koordinat Anda. Jika diubah menjadi y＝y＋1, lingkaran akan bergerak ke bawah. Jika keduax dan y bertambah 1, lingkaran akan bergerak ke bawah kanan bawah. Jika kita menulisnya menjadi simbol minus, itu akan bergerak ke arah yang berlawanan.

[cceN_cpp theme="fajar"] int x, y; //Dapat mendeklarasikan beberapa variabel secara bersamaan, gunakan koma untuk memisahkan. batalkan pengaturan(){ ukuran(300, 300); x = 0; y = 0; } batal draw(){ latar belakang(234, 113, 107); tidak ada Stroke(); elips(x, y, 50, 50); x++; y++; }

[/cceN_cpp]

Tingkat Pergerakan

Ingat 60 frame per detik default dalam fungsi draw? Menurut kecepatan ini, lingkaran di atas akan bergerak 60 piksel per detik ke kanan.

Jika kita ingin mengubah laju pergerakan grafik, ada dua metode: satu adalah meningkatkan nilai x setiap kali karena akan diubah.

x＝x＋10

Ini telah meningkatkan kecepatan 10 kali dibandingkan dengan yang asli!

Metode lainnya adalah mengubah frekuensi menyegarkan kanvas. frameRate()

Fungsi ini dapat mengubah frekuensi siaran kanvas. Tulis frameRate (10) ke dalam pengaturan fungsi, itu akan mengubah 60 frame per detik yang asli menjadi 10 frame per detik. Kecepatannya diperlambat 6 kali dari sebelumnya.

Langkah 11: Latar Belakang Terabaikan

Semua contoh sebelumnya menulis background ke dalam function draw. Pernahkah Anda berpikir untuk menuliskannya ke dalam pengaturan fungsi? Apakah akan ada perbedaan? Sekarang, mari kita perbarui contoh gerakan horizontal.

[cceN_cpp theme="fajar"] int x, y; batalkan pengaturan(){ ukuran(300, 300); latar belakang (234, 113, 107); x = 0; y = tinggi/2; } batal draw(){ noStroke(); elips(x, y, 50, 50); x += 1; } [/cceN_cpp]

Apa yang terjadi? Mungkin tidak bisa memahami alasan produksi masalah dengan benar. Hapus fungsi noStroke, tambahkan stroke lagi, dan lihat jalur pergerakan lingkaran.

Oh, itu karena lingkaran yang dibuat sebelumnya belum dihapus! Karena pengaturan fungsi beroperasi hanya sekali, jika kita menulis latar belakang di atasnya, itu akan mengisi latar belakang hanya satu kali dan terakhir tidak akan berpengaruh lagi. Latar belakang fungsi seperti alat ember cat. Setelah digunakan, itu akan mencakup semua konten di kanvas alih-alih hanya mengatur warna latar belakang. Kami menulisnya sebelum menggambar fungsi sehingga bingkai sebelumnya akan tertutup setiap kali kami membuat pola baru. Oleh karena itu, lingkaran dapat berjalan seperti yang kita harapkan. Kecuali mengingat kegunaan dari masing-masing fungsi, kita harus memikirkan posisi kode. Sering kali, garis ke atas atau ke bawah untuk codea dan untuk menuliskannya di dalam atau di luar kurung kurawal, itu akan menciptakan efek yang sangat berbeda. Arah kode adalah dua dimensi. Jika bug muncul, kita harus mengkalibrasi dalam dua dimensi ini.

• Metode menggambar yang tidak berulang ini dapat menciptakan efek yang sangat istimewa jika digunakan dengan benar. Anda dapat menyalin kode berikut dan mencoba.

[cceN_cpp theme="fajar"] void setup(){ size(400, 400); } void draw(){ elips(lebar/2-mouseX, tinggi/2-mouseX, mouseY, mouseY); elips(lebar/2-mouseX, tinggi/2+mouseX, mouseY, mouseY); elips(lebar/2+mouseX, tinggi/2-mouseX, mouseY, mouseY); elips(lebar/2+mouseX, tinggi/2+mouseX, mouseY, mouseY); } [/cceN_cpp]

Di sini kita telah menggunakan variabel ajaib mouseX dan mouseY. Nanti kita akan membicarakannya secara rinci.

Langkah 12: Gemetar Lingkaran

Bagaimana jika saya ingin membuat arah gerakan lingkaran menjadi tidak beraturan? Dengan fungsi acak secara cerdik, Anda juga dapat mewujudkan efek ini. Acak adalah fungsi yang sering digunakan. Ini dapat digunakan untuk menghasilkan fungsi acak. Ini seperti roh tanpa jejak. Setelah terkait dengan variabel, Anda tidak dapat membayangkan apa yang akan terjadi selanjutnya.

Format Panggilan:

acak (tinggi)

Tinggi mewakili batas atas acak, dan batas bawah default adalah 0. Misalnya, acak (10). Ini akan menghasilkan angka dari 0 hingga 10 secara acak (0 disertakan tetapi 10 tidak termasuk).

acak (rendah, tinggi)

Jika kita menetapkan dua parameter, maka itu akan kembali ke nilai acak di antara mereka. Misalnya, acak (5, 10). Ini akan menghasilkan angka dari 5 hingga 10 secara acak (5 disertakan tetapi 10 tidak termasuk).

Contoh:

[cceN_cpp theme="fajar"] float x;

x = acak(50, 100);

cetak(x); [/cceN_cpp]

Setiap kali kita menjalankan program, konsol akan menampilkan nilai yang berbeda.

• Catatan: Nilai yang dibuat oleh fungsi acak termasuk dalam tipe floating point (tipe angka desimal). Jika kita ingin memberikan nilai ke variabel integer, kita harus mengubahnya melalui fungsi int(). Transformasi tidak mematuhi bulat tetapi menghapus bagian desimal secara langsung. Jadi output dari int (acak (5)), hanya memiliki 5 kemungkinan: 0, 1, 2, 3, 4.

Setelah kita terbiasa dengan penggunaan fungsi random, kita bisa langsung masuk ke kasus di bawah ini.

[cceN_cpp theme="fajar"] int x, y; batalkan pengaturan(){ ukuran(300, 300); x = lebar/2; y = tinggi/2; } batal draw(){ latar belakang(234, 113, 107); tidak ada Stroke(); x += int(acak(-5, 5)); y += int(acak(-5, 5)); elips(x, y, 50, 50); }

[/cceN_cpp]

Nilai koordinat yang ditambahkan sebelumnya adalah tetap. Hanya jika kita meningkatkan nilai acak, lingkaran akan bergerak ke arah yang tidak terbatas. Dengan rentang acak yang lebih besar, itu bergetar lebih sering. Karena perubahan nilai antar frame dipantulkan, pergerakan tidak akan mulus lagi. Sementara bingkai sebelumnya berada di (150, 150), bingkai terakhir akan berpindah ke posisi (170, 170) dalam sekejap.

Langkah 13: Migrasi Lingkaran

Migrasi Lingkaran

Apakah akan menghasilkan gerakan yang mulus? Fungsi kebisingan dapat membantu kami. Ini memiliki ritme yang lebih baik daripada acak standar. Dan angka acak yang dihasilkan secara acak terus menerus.

Format Panggilan:

kebisingan

Fungsi noise tidak dapat menentukan rentang outputnya. Program yang mendefinisikannya hanya dapat menghasilkan angka floating point dari 0 hingga 1 dan input tetap hanya dapat memiliki output tetap.

[cceN_cpp theme="fajar"] float x = noise(5); float y = kebisingan(5); cetak(x, y); [/cceN_cpp]

Karena parameter input di atas adalah 5, maka hasil outputnya sama. Lalu bagaimana cara mengubah hasilnya? Jawabannya adalah mengubah parameter input secara dinamis. Sebenarnya kita dapat menganggap kebisingan sebagai trek suara tanpa batas, parameter input seperti "saat ini". Jika input parameter kontinu, outputnya juga kontinu.

[cceN_cpp theme="fajar"] float x, y; batalkan pengaturan(){ ukuran(700, 100); x = 0; latar belakang(0); } batal draw(){ x += 1; y = kebisingan(frameCount/100.0)*100; tidak ada Stroke(); elips(x, y, 2, 2); }

[/cceN_cpp]

Dalam hal ini, kami menggambar jalur perubahan Y sehingga kami dapat memahami fungsi noise dengan lebih baik.

• Diantaranya, variabel frameCount akan mendapatkan frame saat ini. Berbeda dengan lebar, tinggi sebelumnya, stabil tanpa perubahan apapun. Selain itu, mulai meningkat dari 0. Jika kita memahaminya dengan grafik animasi tampilan awal kita, itu menunjukkan halaman yang telah kita buka (bukan konsepsi waktu dalam program).

• frameCount adalah variabel integer. Dibagi dengan variabel integer lain, program akan secara default memproses hasilnya menjadi integer. Untuk meningkatkan akurasi hasil, kita perlu mengubah 100 menjadi 100.0. Dibagi dengan angka floating point, kita akan mendapatkan angka floating point juga.

• Untuk mengubah sumbu Y dari 0 menjadi 100, kita harus mengalikan hasil noise dengan 100. Dengan demikian kita dapat mengontrol rentang nilai acak.

Beberapa dari Anda yang pandai berpikir mungkin bertanya "mengapa kita harus membagi frameCountby 100? Tidak apa-apa menulis frameCount secara langsung?" Tentu saja Anda bisa! Tapi di sini, untuk menampilkan karakteristik fungsi noise dengan lebih baik, kami memperlambat "kecepatan penyiaran". Contoh di bawah ini menunjukkan nilai output berubah di bawah tingkat perubahan yang berbeda.

[cceN_cpp theme="fajar"] float x, y1, y2, y3, y4, y5; batalkan pengaturan(){ ukuran(700, 500); x = 0; latar belakang(0); } batal draw(){ x += 1; y1 = kebisingan(frameCount)*100; y2 = noise(frameCount/10.0)*100; y3 = kebisingan(frameCount/100.0)*100; y4 = kebisingan(frameCount/100.0)*100; y5 = noise(frameCount/10000.0)*100; tidak ada Stroke(); elips(x, y1, 2, 2); elips(x, y2+100, 2, 2); elips(x, y3+200, 2, 2); elips(x, y4+300, 2, 2); elips(x, y5+400, 2, 2); pukulan (80); garis(0, 100, lebar, 100); garis(0, 200, lebar, 200); garis (0, 300, lebar, 300); garis (0, 400, lebar, 400); }

[/cceN_cpp]

Anda dapat menganggap parameter yang berubah dalam derau fungsi sebagai bilah kemajuan. Mengubah parameter seperti kita memindahkan progress bar. Jadi ketika ruang lingkup perubahan "track suara" ini lebih besar, karakteristik kontinu depan dan belakang dari nilai output akan lebih lemah. (Kita bisa membayangkan apa yang akan terjadi jika kita menyiarkan musik atau video dengan kecepatan 2 kali, 5 kali kecepatan, 20 kali kecepatan). Ketika ruang lingkup lebih besar dari nilai tertentu, maka tidak ada perbedaan besar untuk berfungsi secara acak pada pembangkitan nilai.

Jika Anda dapat memahami semua contoh di atas, maka Anda akan merasa tidak ada yang lebih mudah untuk menggambar lingkaran yang bermigrasi. Anda dapat memahami prinsip-prinsip internal juga.

[cceN_cpp theme="fajar"] float x, y; batalkan pengaturan(){ ukuran(300, 300); x = 0; } batal draw(){ latar belakang(234, 113, 107); x = noise(frameCount/100.0 + 100)*300; y = kebisingan(frameCount/100.0)*300; tidak ada Stroke(); elips(x, y, 50, 50); }

[/cceN_cpp]

Kini, gerakannya lebih menarik seperti gyro yang berputar.

• Alasan mengapa variabel x dalam fungsi noise harus ditambah 100 adalah karena untuk memisahkannya dalam jarak tertentu. Jika parameter xy dalam derau fungsi sama atau cukup dekat, perubahan koordinat x, y akan mendekati sama. Hal ini untuk membuat gerakan menjadi jauh lebih acak.

Langkah 14: Lingkaran Digerakkan oleh Mouse

Selanjutnya, kita akhirnya sampai pada dua variabel yang paling saya sukai: mouseX dan mouseY. Pada pandangan pertama dari dua konsepsi, mata saya berkilauan dengan cahaya. Karena itu adalah cara paling langsung untuk berinteraksi dengan grafik. Kita bisa membuat banyak program menarik dengannya.

Kasusnya cukup sederhana:

[cceN_cpp theme="fajar"] int x, y; batalkan pengaturan(){ ukuran(300, 300); x = 0; y = 0; } batal draw(){ latar belakang(234, 113, 107); tidak ada Stroke(); x = tikusX; y = tikusY; elips(x, y, 50, 50); }

[/cceN_cpp]

mouseX dapat memperoleh koordinat x dari mouse, sedangkan mouseY dapat memperoleh koordinat y.

• Coba kita ganti simbol positif dan negatif, atau tukar mouseX dan mouseY.

Langkah 15: Akhir

Dari perintah yang sudah dikenal ini, Anda mungkin dapat melakukan pergerakan grafik. Dengan isi bab terakhir, gunakan imajinasi Anda dengan benar, Anda dapat membuat banyak efek animasi yang menarik.

Dalam bab berikutnya, kita dapat melihat lebih banyak contoh. Pada saat yang sama, kita akan menggunakan fungsi matematika dan menggabungkannya dengan gerakan grafik.

Artikel ini berasal dari desainer Wenzy.

Langkah 16: Pembacaan Relatif:

Panduan Pemrograman yang Menarik untuk Desainer--Memproses Sentuhan Awal

Panduan Pemrograman Menarik untuk Desainer--Buat Program Pemrosesan Pertama Anda

Artikel ini dari:

Jika Anda membutuhkan bantuan, Anda dapat menghubungi: [email protected].