Panduan Utama untuk Bahasa Pemrosesan Bagian I: Dasar-dasar

Diterbitkan: 2022-03-11

Anda berjuang dengan kebosanan, dan gatal untuk menggunakan kreativitas Anda. Anda ingin membangun sesuatu, sesuatu yang mengesankan secara visual, sesuatu yang berseni. Atau mungkin Anda ingin belajar pemrograman dan membuat sesuatu yang mengesankan sesegera mungkin. Jika demikian, maka bahasa Pemrosesan adalah cara yang harus dilakukan.

Di antara semua bahasa pemrograman yang telah saya gunakan sejauh ini, Pemrosesan tidak diragukan lagi salah satu yang paling menghibur. Ini adalah bahasa yang lugas - mudah dipelajari, dipahami, dan digunakan, namun sangat kuat. Ini hampir seperti Anda sedang melukis di atas kanvas kosong dengan baris kode. Tidak ada aturan atau pedoman yang kaku untuk membatasi kreativitas Anda, satu-satunya batasan adalah imajinasi Anda.

Panduan Utama untuk bahasa Pemrosesan Bagian I: Dasar-dasar

Di perguruan tinggi saya adalah asisten pengajar dari sebuah program yang mengumpulkan siswa sekolah menengah dan mengajari mereka Pemrosesan. Kebanyakan dari mereka tidak memiliki latar belakang pemrograman yang kuat, beberapa bahkan tidak pernah menulis satu baris kode pun sebelumnya. Hanya dalam lima hari, mereka diharapkan untuk belajar bahasa dan membuat permainan sederhana mereka sendiri. Tingkat keberhasilannya hampir seratus persen, kami jarang menghadapi kegagalan. Dalam artikel ini, inilah yang akan kita lakukan. Saya mengecilkan seluruh program menjadi dua bagian. Bagian pertama, saya akan berbicara tentang bahasa. Saya akan memberikan gambaran dasar, panduan untuk Pengolahan dan saya akan memberikan beberapa tips & trik. Kemudian di bagian selanjutnya, kita akan membangun game sederhana langkah demi langkah, setiap langkah akan dijelaskan secara rinci. Saya juga akan mengubah kode game menjadi JavaScript menggunakan p5js, sehingga game kita dapat berjalan di browser web.

Apa Yang Harus Anda Ketahui

Untuk memahami dan mengikuti artikel ini dengan mudah, Anda harus memiliki pengetahuan dasar tentang pemrograman, karena saya tidak akan berbicara tentang dasar-dasar pemrograman. Saya sebagian besar tidak akan menyentuh konsep pemrograman tingkat lanjut, jadi pemahaman yang dangkal akan dilakukan. Ada beberapa bagian di mana saya berbicara tentang beberapa ide dan konsep tingkat rendah seperti pemrograman berorientasi objek (OOP), tetapi itu tidak penting. Itu untuk pembaca yang penasaran yang tertarik dengan struktur bahasa. Jika Anda tidak ingin tahu, Anda bisa melewatkan bagian-bagian itu. Selain itu, satu-satunya hal yang harus Anda miliki adalah ambisi untuk mempelajari bahasa yang luar biasa ini dan antusiasme untuk membuat game Anda sendiri!

Cara Mengikuti

Saya selalu mendukung belajar pemrograman dengan mencoba dan bereksperimen. Semakin cepat Anda mendalami permainan Anda sendiri, semakin cepat Anda akan merasa nyaman dengan Processing. Jadi itu akan menjadi saran pertama saya, coba setiap langkah di lingkungan Anda sendiri. Processing memiliki IDE yang sederhana dan mudah digunakan (yaitu editor kode), itu adalah satu-satunya hal yang perlu Anda unduh & instal untuk mengikutinya. Anda dapat mengunduhnya dari sini.

Jadi mari kita mulai!

Apa itu Bahasa Pemrosesan?

Bagian ini mencakup tinjauan teknis singkat bahasa, strukturnya dan beberapa catatan tentang proses kompilasi dan eksekusi. Rinciannya akan mencakup beberapa pengetahuan lanjutan tentang pemrograman dan lingkungan Java. Jika Anda tidak keberatan tentang detail untuk saat ini dan tidak sabar untuk mempelajari dan membuat kode permainan Anda sendiri, Anda dapat melompat ke bagian "Dasar-dasar Pemrosesan".

Processing adalah bahasa pemrograman visual yang memungkinkan Anda untuk membuat sketsa dengan kode, sehingga untuk berbicara. Namun itu bukan bahasa pemrograman itu sendiri, itu adalah apa yang mereka sebut bahasa pemrograman "Java-esque", yang berarti bahasa tersebut dibangun di atas platform Java, tetapi bukan Java per se. Ini didasarkan pada Java dan semua kode Anda akan diproses sebelumnya dan diubah langsung menjadi kode Java saat Anda menekan tombol run. Kelas PApplet Java adalah kelas dasar untuk semua sketsa Pemrosesan. Sebagai contoh, mari kita ambil beberapa blok kode pemrosesan dasar:

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

Blok kode ini akan diubah menjadi seperti ini:

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

Anda dapat melihat bahwa blok kode pemrosesan dibungkus dengan kelas yang diperluas dari PApplet Java. Oleh karena itu, semua kelas yang Anda definisikan dalam kode pemrosesan Anda, jika ada, akan diperlakukan sebagai kelas dalam.

Fakta bahwa Pemrosesan berbasis Java memberi kami banyak keuntungan, terutama jika Anda adalah pengembang Java. Sintaksnya tidak hanya familier, tetapi juga memberi Anda kemampuan untuk melakukan hal-hal seperti menyematkan kode Java, pustaka, file JAR dalam sketsa, menggunakan applet Pemrosesan langsung di aplikasi Java, mendefinisikan kelas, dan menggunakan tipe data standar seperti int , float, char dan sebagainya. Anda bahkan dapat menulis kode Pocessing Anda langsung dari Eclipse, jika Anda ingin meluangkan waktu untuk menyiapkannya. Satu hal yang tidak dapat Anda lakukan adalah menggunakan komponen AWT atau Swing dalam sketsa Pemrosesan Anda, karena keduanya bertentangan dengan sifat pengulangan Pemrosesan. Tapi jangan khawatir, kami tidak akan melakukan hal-hal mewah di artikel ini.

Dasar-dasar Pemrosesan

Pemrosesan kode terdiri dari dua bagian utama, penyiapan dan penarikan blok. Blok penyetelan berjalan satu kali saat kode dieksekusi, dan blok pengundian berjalan terus menerus. Gagasan utama di balik Pemrosesan adalah, apa yang Anda tulis di dalam blok undian akan dieksekusi 60 kali per detik dari atas ke bawah, hingga program Anda berakhir . Kami akan membangun segalanya dengan memanfaatkan ide ini. Kami akan membuat objek kami bergerak, menjaga skor kami, mendeteksi tabrakan, menerapkan gravitasi, dan melakukan hampir semua hal lain menggunakan fitur ini. Refresh loop ini adalah jantung dari proyek kami . Saya akan menjelaskan bagaimana menggunakan detak jantung ini untuk menghidupkan kode Anda di bagian selanjutnya. Pertama, izinkan saya memperkenalkan Anda ke Processing IDE.

Memproses IDE

Jika Anda telah membaca sampai titik ini dan masih belum mengunduh Processing IDE, silakan lanjutkan dan lakukan. Sepanjang artikel, saya akan menguraikan beberapa tugas mudah untuk Anda coba sendiri, Anda hanya dapat berlatih jika Anda memiliki IDE dan berjalan. Berikut adalah pengenalan singkat tentang IDE pemrosesan. Ini sangat sederhana dan cukup jelas, jadi saya akan membuatnya singkat.

Seperti yang Anda harapkan, tombol run dan stop melakukan apa yang mereka sarankan. Ketika Anda mengklik tombol run , kode Anda akan dikompilasi dan dieksekusi. Secara alami, program pemrosesan tidak pernah dihentikan, mereka berjalan selamanya sampai terganggu. Anda dapat menghentikannya secara terprogram, namun jika tidak, Anda dapat menggunakan tombol stop .

Tombol yang terlihat seperti kupu-kupu di sebelah kanan run & stop adalah debugger . Menggunakan debugger membutuhkan seluruh artikel lain yang didedikasikan untuk itu. Itu di luar cakupan artikel ini, jadi Anda bisa mengabaikannya untuk saat ini. Dropdown di sebelah tombol debugger adalah tempat Anda menambahkan / mengatur mod. Mod memberi Anda beberapa fungsi tertentu, memungkinkan Anda menulis kode untuk Android, memungkinkan Anda menulis kode dengan Python, dan seterusnya dan seterusnya. Mod juga di luar cakupan, sehingga Anda dapat menyimpannya dalam mode Java default dan mengabaikannya juga.

Jendela pada editor kode adalah tempat sketsa Anda biasanya dijalankan. Pada gambar itu kosong, karena kami belum mengatur properti apa pun seperti ukuran atau warna latar belakang, atau kami tidak menggambar apa pun.

Tidak banyak yang perlu dibicarakan tentang editor kode, itu hanya tempat Anda menulis kode Anda. Ada nomor baris (!) Pemrosesan versi lama tidak memilikinya dan Anda tidak dapat membayangkan betapa bahagianya saya ketika pertama kali melihatnya.

Kotak hitam di bawah ini adalah konsol . Kami akan menggunakannya untuk mencetak barang untuk keperluan debugging cepat. Tab kesalahan di sebelah konsol adalah tempat kesalahan Anda akan muncul. Ini juga merupakan fitur baru yang berguna yang disertakan dengan Processing 3.0. Di versi yang lebih lama, kesalahan dicetak ke konsol dan sulit untuk melacaknya.

Blok Pengaturan

Seperti yang dinyatakan sebelumnya, blok penyiapan dieksekusi sekali saat program dimulai. Anda dapat menggunakannya untuk membuat konfigurasi dan untuk hal-hal yang ingin Anda jalankan hanya sekali, misalnya, memuat gambar atau suara. Berikut adalah contoh blok pengaturan. Jalankan kode ini di lingkungan Anda sendiri dan lihat sendiri hasilnya.

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

Metode yang berhubungan dengan styling (background, fill, stroke) akan dijelaskan di bagian properties & settings. Untuk saat ini, yang perlu Anda ketahui adalah bagaimana pengaturan dan konfigurasi yang kami atur di sini memengaruhi keseluruhan sketsa kami. Kode yang ditulis di sini digunakan untuk menetapkan beberapa aturan dasar yang berlaku di seluruh sketsa. Apa yang juga harus Anda pahami di bagian ini adalah metode yang tercantum di bawah ini:

size() - Seperti namanya, fungsi ini digunakan untuk mengkonfigurasi ukuran sketsa kita. Itu harus berada di baris pertama dari blok kode pengaturan. Itu bisa digunakan dalam bentuk berikut:

  • ukuran (lebar, tinggi);
  • ukuran (lebar, tinggi, penyaji);

Nilai lebar dan tinggi dapat diberikan dalam piksel. Fungsi ukuran menerima parameter ketiga, penyaji, yang digunakan untuk menyetel mesin pengurai mana yang akan digunakan sketsa kita. Secara default, penyaji diatur ke P2D. Penyaji yang tersedia adalah P2D (Pemrosesan 2D), P3D (Pemrosesan 3D, harus digunakan jika sketsa Anda akan menyertakan grafik 3D) dan PDF (Grafik 2D digambar langsung ke dalam file PDF Acrobat. Informasi lebih lanjut dapat ditemukan di sini). Perender P2D dan P3D menggunakan perangkat keras grafis yang kompatibel dengan OpenGL.

fullScreen() - Mulai dari Processing 3.0, fungsi fullScreen sekarang dapat digunakan sebagai ganti fungsi size(). Sama seperti fungsi size() , itu juga harus berada di baris pertama blok penyiapan. Penggunaannya adalah sebagai berikut:

  • layar penuh();
  • Layar penuh (tampilan);
  • Layar penuh (perender);
  • layar penuh (tampilan, penyaji);

Jika Anda menggunakannya tanpa parameter apa pun, sketsa pemrosesan Anda hanya akan berjalan dalam layar penuh, dan akan berjalan di tampilan utama Anda. Parameter 'display' digunakan untuk mengatur tampilan sketsa Anda yang akan dijalankan. Misalnya jika Anda menghubungkan monitor eksternal ke komputer Anda, Anda dapat mengatur variabel tampilan ke 2 (atau 3, 4 dst.) dan sketsa Anda akan berjalan di sana. Parameter 'renderer' adalah seperti yang dijelaskan pada bagian size() di atas.

Blok Pengaturan

Ini adalah fitur lain yang diperkenalkan dengan rilis baru Processing. Ini adalah blok kode, seperti pengaturan dan menggambar. Ini berguna ketika Anda ingin mendefinisikan metode size() atau fullScreen() dengan parameter variabel. Anda juga perlu mendefinisikan size() dan properti gaya lainnya seperti smooth() di blok kode ini jika Anda menggunakan lingkungan apa pun selain IDE Processing sendiri, seperti Eclipse. Tetapi Anda tidak akan membutuhkannya dalam banyak kasus, jelas tidak dalam artikel ini.

Menggambar Blok

Tidak ada yang istimewa untuk dibicarakan tentang blok undian, namun semuanya istimewa tentangnya. Draw block adalah tempat semua keajaiban terjadi. Ini adalah jantung dari program Anda, berdetak 60 kali per detik. Blok kode ini menampung semua logika kode Anda. Semua bentuk, objek, dll. Anda akan ditulis di sini.

Sebagian besar kode yang akan kita bicarakan dalam artikel ini berasal dari blok undian, jadi penting bagi Anda untuk memahami dengan jelas cara kerja blok kode ini. Untuk memberi Anda demonstrasi, berikut adalah sesuatu yang dapat Anda coba. Catatan pertama bahwa kita dapat mencetak apapun ke konsol dengan menggunakan metode print() atau println() . Metode cetak hanya mencetak ke konsol, namun println mencetak dan menambahkan baris baru di akhir, sehingga setiap println() akan mencetak dalam baris terpisah.

Jadi, lihat blok kode berikut. Pertama, coba tebak apa yang akan dicetak di konsol. Kemudian, lanjutkan dan coba:

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

Jika Anda menebak “1 2 3 4…”, saya mengerti! Ini adalah salah satu kebingungan dalam Pengolahan. Ingat blok ini berulang kali dieksekusi? Saat Anda mendefinisikan variabel di sini, variabel itu akan didefinisikan pada setiap loop berulang kali. Pada setiap iterasi, x disetel ke 0, bertambah 1 dan dicetak ke konsol. Oleh karena itu kita mendapatkan hasil “1 1 1 1…”. Contoh ini agak jelas, tetapi mungkin membingungkan ketika keadaan menjadi sedikit rumit.

Kami tidak ingin x ditimpa, jadi bagaimana kami bisa mencapai ini dan mendapatkan hasil "1 2 3 4..." ? Dengan menggunakan variabel global . Ini bukan hal yang mewah, kami hanya mendefinisikan variabel di luar blok draw sehingga tidak didefinisikan ulang pada setiap iterasi. Juga, ruang lingkup variabel akan dapat dicapai di seluruh sketsa. Lihat kode di bawah ini:

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

Anda mungkin bertanya pada diri sendiri, bagaimana variabel yang didefinisikan di luar blok kami bekerja? Dan mengapa kita tidak menggunakan blok setup() karena itu dijalankan sekali di awal? Jawabannya terkait dengan pemrograman dan ruang lingkup berorientasi objek, jika Anda tidak terbiasa, Anda dapat melewati paragraf ini. Lihat bagian di mana saya menjelaskan bagaimana kode Pemrosesan diubah menjadi Java. Ingat bagaimana mereka dibungkus dengan kelas Java? Variabel yang kita tulis di luar blok setup() dan draw() juga dibungkus, oleh karena itu variabel tersebut diperlakukan sebagai bidang kelas luar yang membungkus kode kita. Menggunakan x+=1 sama dengan menggunakan this.x+=1. Ini juga berfungsi sama dalam kasus kami, tidak ada variabel yang disebut x yang didefinisikan dalam ruang lingkup draw() dan ruang lingkup luar dicari, yang merupakan ruang lingkup this . Dan mengapa kita tidak mendefinisikan variabel x kita di bagian setup()? Jika kita melakukannya, cakupan x yang didefinisikan akan menjadi cakupan fungsi penyiapan dan tidak akan dapat diakses dari blok draw().

Menggambar Bentuk & Teks

Sekarang kita tahu bagaimana mengonfigurasi sketsa kita menggunakan blok penyiapan, dan kita tahu apa yang dilakukan blok undian. Jadi inilah saatnya untuk mendapatkan sedikit visual dan belajar tentang bagian menyenangkan dari pemrosesan: cara menggambar bentuk.

Sebelum kita mulai, Anda harus memahami sistem koordinat . Di Processing, Anda menentukan koordinat setiap objek yang Anda gambar di layar. Sistem koordinat dalam piksel. Asal (yaitu. titik awal) adalah sudut kiri atas, Anda harus memberikan koordinat Anda relatif terhadap titik itu. Hal lain yang harus Anda ketahui adalah, setiap bentuk memiliki titik referensi yang berbeda. Misalnya, rect() memiliki sudut kiri atas sebagai titik referensi. Untuk elips(), itu adalah pusatnya. Titik referensi ini dapat diubah dengan metode seperti rectMode() dan ellipseMode(), yang akan saya jelaskan di bagian properti & pengaturan. Sebuah gambar contoh disediakan untuk membantu Anda memahami lebih baik.

Artikel ini adalah ikhtisar dasar Pemrosesan, jadi kami tidak akan menyentuh bentuk rumit apa pun seperti titik atau bentuk 3D. Bentuk 2D dasar sebenarnya akan lebih dari cukup bagi kita untuk membuat game kita sendiri. Pada gambar, Anda dapat melihat contoh bagaimana bentuk digambar. Setiap bentuk memiliki sintaksnya sendiri untuk dibuat, tetapi ide dasarnya adalah memberikan koordinatnya atau ukurannya atau keduanya. Berikut adalah beberapa bentuk yang harus Anda ketahui (untuk semua nilai yang diberikan di bawah ini, 'x' dan 'y' berarti koordinat x dan y dalam piksel, 'w' dan 'h' berarti nilai lebar dan tinggi juga dalam piksel):

point() - Titik sederhana, hanya membutuhkan satu koordinat. Penggunaan:

  • titik (x, y)
  • point(x, y, z) - Jika Anda menggunakan 3 dimensi.

line() - Untuk membuat garis. Anda dapat membuat garis hanya dengan titik awal dan akhir. Penggunaan:

  • garis(x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - Jika Anda menggunakan 3 dimensi.

segitiga() - Untuk membuat segitiga. Penggunaan: segitiga(x1, y1, x2, y2, x3, y3)

quad() - Untuk membuat segi empat. Penggunaan: quad(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - Untuk membuat persegi panjang. Titik referensi adalah sudut kiri atas secara default (lihat gambar). Berikut adalah penggunaannya:

  • persegi (x, y, w, h)
  • rect(x, y, w, h, r) - 'r' berarti jari-jari dalam piksel untuk membuat sudut membulat.
  • rect(x, y, w, h, tl, tr, br, bl) - Radius untuk masing-masing sudut kiri atas, kanan atas, kanan bawah, kiri bawah. Ini juga dalam piksel.

ellipse() - Untuk membuat bentuk elips. Ini juga digunakan untuk membuat lingkaran, nilai lebar dan tinggi yang sama harus diberikan. Titik referensi untuk bentuk ini adalah pusat secara default (lihat gambar). Berikut adalah penggunaannya:

  • elips (x, y, w, h)

arc() - Menggambar busur. Penggunaan:

  • arc(x, y, w, h, start, stop) - 'start' dan 'stop' digunakan untuk menentukan sudut mulai dan berhenti menggambar busur. Nilai dalam radian. Konstanta seperti “PI, HALF_PI, QUARTER_PI dan TWO_PI” dapat digunakan.
  • arc(x, y, w, h, start, stop, mode) - variabel 'mode' adalah untuk menentukan gaya rendering arc (string). Pilihan yang tersedia adalah “OPEN, CHORD, PIE”. OPEN akan membiarkan bagian yang tidak digambar tanpa batas. CHORD akan melengkapi bagian yang tidak digambar dengan batas. PIE akan membuat busur Anda terlihat seperti diagram lingkaran.

Menampilkan teks di layar mirip dengan menampilkan bentuk, ide dasarnya adalah Anda menentukan koordinat di mana Anda ingin teks ditampilkan. Namun ada lebih banyak untuk menangani teks. Anda akan memiliki kontrol lebih besar atas teks Anda setelah bagian properti & pengaturan, di mana Anda akan belajar bagaimana menerapkan pengaturan dan properti ke objek. Untuk saat ini, saya akan menunjukkan dasar-dasar menampilkan teks. Ada banyak cara untuk melakukannya, saya hanya akan menunjukkan yang penting.

teks() - Menampilkan teks. Penggunaan:

  • teks(c, x, y) - 'c' berarti karakter, karakter alfanumerik apa pun akan ditampilkan.
  • text(c, x, y, z) - Jika Anda bekerja dengan 3 dimensi.
  • text(str, x, y) - 'str' adalah string yang akan ditampilkan.
  • text(str, x, y, z) - Jika Anda bekerja dengan 3 dimensi.
  • text(num, x, y) - 'num' adalah nilai numerik yang akan ditampilkan.
  • text(num, x, y, z) - Jika Anda bekerja dengan 3 dimensi.

Properti & Pengaturan

Hal pertama yang harus dijelaskan di bagian ini adalah logika di balik pengaturan properti objek. Warna isi, warna latar belakang, batas, lebar batas, warna batas, perataan bentuk, gaya batas, dll. Bisa menjadi beberapa contoh dari properti ini.

Saat Anda menetapkan properti, Anda harus ingat bahwa kode akan dieksekusi dari atas ke bawah . Katakanlah, Anda mengatur properti "isi" menjadi merah, semua objek yang digambar di bawah garis itu akan diisi dengan warna merah sampai ditimpa oleh properti isian lainnya. Hal yang sama juga berlaku untuk properti lain, namun perhatikan bahwa tidak semua properti akan saling menimpa. Misalnya properti "stroke" tidak menimpa properti "fill", melainkan bekerja bersama. Berikut adalah representasi visual bagi Anda untuk memahami logika:

Seperti yang Anda lihat pada gambar, baris pertama mengatur warna isian menjadi merah dan baris kedua mengatur warna goresan menjadi biru. Kami sekarang memiliki dua pengaturan aktif: mengisi stroke merah dan biru. Seperti yang Anda harapkan, apa pun objek kita di baris berikutnya, itu akan diisi dengan goresan merah dan biru (jika ada). Anda dapat terus memeriksa gambar dengan cara ini, dan Anda akan memahami logikanya.

Berikut adalah beberapa properti & pengaturan penting yang umum digunakan:

Pengaturan gaya

fill() - Mengatur warna isian ke objek. Pengaturan ini juga digunakan untuk mewarnai teks. Untuk saat ini, kita hanya perlu mengetahui kegunaan berikut:

  • fill(r, g, b) - Nilai merah, hijau dan biru sebagai bilangan bulat
  • fill(r, g, b, a) - Nilai alfa tambahan, maks adalah 255

noFill() - Mengatur warna isian menjadi transparan.

stroke() - Mengatur warna stroke ke objek. Properti Stroke berlaku untuk garis dan batas di sekitar objek. Untuk saat ini, kita hanya perlu mengetahui kegunaan berikut:

  • stroke(r, g, b) - Nilai merah, hijau dan biru sebagai bilangan bulat.
  • stroke(r, g, b, a) - Nilai alfa tambahan, maks adalah 255

noStroke() - Menghapus goresan.

strokeWeight() - Mengatur lebar goresan. Penggunaan:

  • strokeWeight(x) - x adalah bilangan bulat dan mewakili lebar stroke dalam piksel.

background() - Mengatur warna latar belakang. Untuk saat ini, kita hanya perlu mengetahui kegunaan berikut:

  • background(r, g, b) - Nilai merah, hijau dan biru sebagai bilangan bulat.
  • background(r, g, b, a) - Nilai alfa tambahan, maks adalah 255

Pengaturan Penjajaran

ellipseMode() - Menyetel tempat yang akan diambil sebagai titik referensi yang menyelaraskan elips. Penggunaan:

  • ellipseMode(mode) - 'mode' adalah parameternya, berikut adalah parameter yang tersedia:
    • CENTER (default): Ambil bagian tengah sebagai titik referensi.
    • RADIUS: Ini juga mengambil pusat sebagai titik referensi, tetapi dalam mode ini, nilai w dan h yang Anda tentukan diperlakukan sebagai setengah (yaitu radius, bukan diameter)
    • CORNER: Mengambil sudut kiri atas sebagai titik referensi.
    • CORNERS: Menetapkan dua parameter pertama (x dan y) sebagai lokasi sudut kiri atas, dan dua parameter terakhir (w dan h) sebagai lokasi sudut kiri bawah elips. Jadi mode ini, "lebar" dan "tinggi" tidak relevan. Memikirkannya sebagai elips(x_tl,y_tl,x_br,y_br) lebih masuk akal dalam kasus ini.

rectMode() - Menyetel tempat yang akan diambil sebagai titik referensi yang menyelaraskan persegi panjang. Penggunaan:

  • rectMode(mode) - 'mode' adalah parameternya, berikut adalah parameter yang tersedia:
    • TENGAH: Ambil pusat sebagai titik referensi.
    • RADIUS: Ini juga mengambil pusat sebagai titik referensi, tetapi dalam mode ini, nilai w dan h yang Anda tentukan diperlakukan sebagai setengah
    • CORNER (default): Mengambil sudut kiri atas sebagai titik referensi.
    • CORNERS: Menetapkan dua parameter pertama (x dan y) sebagai lokasi sudut kiri atas, dan dua parameter terakhir (w dan h) sebagai lokasi sudut kiri bawah elips. Jadi mode ini, "lebar" dan "tinggi" tidak relevan. Memikirkannya sebagai rect(x_tl,y_tl,x_br,y_br) lebih masuk akal dalam kasus ini.

Pengaturan Terkait Teks

textSize() - Mengatur ukuran font teks. Penggunaan:

  • textSize(size) - Nilai integer dari ukuran yang diinginkan.

textLeading() - Mengatur tinggi baris teks Anda. Penggunaan:

  • textLeading(lineheight) - Nilai piksel ruang antar baris.

textAlign() - Mengatur tempat untuk mengambil teks sebagai titik referensi. Penggunaan.

  • textAlign(alignX) - 'alignX' adalah untuk perataan horizontal. Tersedia: KIRI, TENGAH, KANAN
  • textAlign(alignX, alignY) - 'alignY' adalah untuk perataan vertikal. Tersedia: TOP, BOTTOM, CENTER, BASELINE.

animasi

Sejauh ini, kita telah belajar cara menggambar objek dan teks. Tetapi masalah dengan mereka adalah bahwa mereka statis. Sekarang bagaimana kita membuat mereka bergerak? Sederhana, alih-alih memberikan koordinat sebagai bilangan bulat, kami menggunakan variabel sehingga kami dapat menambah / menguranginya . Masuk akal? Perhatikan kode berikut:

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

Apakah Anda melihat bagaimana kami mengelola animasi? Kami menetapkan x dan y sebagai variabel global dan nilai awalnya menjadi 0. Dalam loop gambar kami, kami membuat elips kami, mengatur warna isian menjadi merah, warna goresan menjadi biru dan koordinat ke x dan y. Saat kita menambah x dan y, bola hanya mengubah lokasinya. Tetapi ada masalah dengan kode ini, dapatkah Anda memperhatikannya? Sebagai tantangan mudah untuk diri sendiri, cobalah untuk mencari tahu apa masalahnya, dan ujilah. Inilah hasilnya:

Niat saya untuk membiarkan ini terjadi adalah untuk membuat Anda menyadari bagaimana sifat looping dari Processing bekerja. Lihat contoh di bagian “Draw Block”, apakah Anda ingat mengapa kami mendapat “1 1 1…” bukannya “1 2 3…” ? Alasan yang sama mengapa bola meninggalkan bekas. Setiap kali blok undian berulang, x dan y bertambah 5 dan oleh karena itu bola digambar ulang menjadi 5 piksel ke bawah dan ke kanan. Namun bola yang diambil dari iterasi sebelumnya tetap dalam tampilan. Bagaimana kita membuat mereka pergi? Ada tebakan?

Untuk menghilangkan tanda yang ditinggalkan bola, kita cukup menghapus latar belakang(255) dari blok penyiapan, dan menempelkannya ke baris pertama dari blok undian. Ketika kode latar belakang kita berada di blok penyiapan, kode itu berjalan satu kali di awal, membuat latar belakang kita menjadi putih. Tapi itu tidak cukup, kita membutuhkannya untuk mengatur latar belakang kita menjadi putih pada setiap loop untuk menutupi bola yang diambil dari loop sebelumnya. Latar belakang menjadi baris pertama berarti berjalan terlebih dahulu, itu menjadi lapisan dasar. Pada setiap loop, kanvas kita dicat putih, dan elemen baru digambar di atas latar belakang putih. Jadi kita tidak punya tanda.

Itulah ide di balik menganimasikan sesuatu di Processing, memanipulasi koordinat objek secara terprogram untuk mengubah lokasinya. Tapi bagaimana kita akan melakukan hal-hal mewah, seperti menjaga bola di layar? Atau mungkin menerapkan gravitasi? Saya akan mengajarkan bagaimana melakukan hal ini di bagian selanjutnya dari artikel ini. Kita akan belajar dengan mencoba dan membangun. Kami akan belajar bagaimana melakukannya dan menerapkannya pada permainan kami segera. Pada akhirnya, kita akan memiliki game yang lengkap, dapat dimainkan, dan semoga menyenangkan.

Interaksi Keyboard & Mouse

Interaksi keyboard & mouse dalam Processing sangat mudah dan lugas. Ada metode yang dapat Anda panggil untuk setiap peristiwa, dan apa yang Anda tulis di dalamnya akan dieksekusi sekali saat peristiwa itu terjadi. Juga ada variabel global seperti mousePressed dan keyPressed yang dapat Anda gunakan di blok gambar Anda untuk memanfaatkan loop. Berikut beberapa cara beserta penjelasannya:

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

Seperti yang Anda lihat, cukup mudah untuk memeriksa apakah mouse diklik atau tombol mana yang ditekan. Namun ada lebih banyak opsi yang tersedia untuk variabel mousePressed dan keyCode. Pilihan yang tersedia untuk mousePressed adalah LEFT, RIGHT dan CENTER. Ada banyak lagi yang tersedia untuk keyCode ; ATAS, BAWAH, KIRI, KANAN, ALT, KONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC, dan DELETE.

Satu hal yang perlu diketahui tentang variabel mouse, dan kita akan sering menggunakan ini, adalah bagaimana mendapatkan koordinat mouse. Untuk mendapatkan koordinat kursor yang tepat, kita dapat menggunakan variabel mouseX dan mouseY langsung di blok draw(). Last but not least, ada banyak metode berguna lainnya yang harus Anda lihat. Semuanya didokumentasikan dalam Referensi Pemrosesan.

Kesimpulan

Anda seharusnya sudah terbiasa dengan Processing sekarang. Namun jika Anda berhenti di sini, semua pengetahuan ini akan terbang . Saya sangat menyarankan Anda terus berlatih, bermain-main dengan apa yang telah Anda pelajari. Untuk membantu Anda berlatih, saya akan memberi Anda dua latihan. Anda harus mencoba yang terbaik untuk melakukannya sendiri. Jika Anda buntu, Google dan Referensi Pemrosesan harus menjadi teman terbaik Anda. Saya akan memberikan kode untuk yang pertama, tetapi melihatnya harus menjadi hal terakhir yang Anda lakukan.

Latihan yang Direkomendasikan 1

Anda harus membuat 4 bola dengan warna yang berbeda , mulai dari 4 sudut layar yang melewati bagian tengah dengan kecepatan yang berbeda . Saat Anda mengklik dan menahan tombol mouse, bola akan membeku . Dan ketika Anda melepaskan mouse, bola bisa kembali ke posisi awal dan terus bergerak. Jadi, saya mencari sesuatu seperti ini.

Setelah Anda mencoba latihannya sendiri, Anda dapat melihat kodenya di sini.

Latihan yang Direkomendasikan 2

Ingat screensaver DVD terkenal yang logo DVDnya memantul di sekitar layar dan kita semua menunggu dengan putus asa untuk mencapai sudut? Saya ingin Anda mereplikasi screensaver itu, tetapi hanya menggunakan persegi panjang alih-alih logo DVD. Saat Anda memulai aplikasi, layar harus hitam dan persegi panjang harus dimulai di lokasi acak. Setiap kali persegi panjang menyentuh sudut, itu harus berubah warnanya (dan jelas arahnya). Saat Anda menggerakkan mouse, persegi panjang akan menghilang dan warna latar belakang akan berubah menjadi putih (ini adalah screensaver, bukan?). Saya tidak akan memberikan kode untuk latihan ini di artikel ini. Anda harus mencoba yang terbaik untuk menerapkannya, dan kode akan diberikan di bagian kedua artikel ini.

Bagian kedua dari panduan utama Pemrosesan, tutorial langkah demi langkah untuk membuat game sederhana, telah diterbitkan.

Bacaan Lebih Lanjut di Blog Teknik Toptal:

  • Bagaimana Pendekatan Menulis Penerjemah Dari Awal