Variable
Constant
square(100, 200, 50);
Bagaimana agar square-nya jadi lebih lebar
Mudah, cukup ubah parameter ke-3:
square(100, 200, 100);
Bagaimana jika kita memiliki banyak square?
square(100, 200, 50);
square(200, 200, 50);
square(300, 200, 50);
โฆdan kita ingin membuat semua square-nya lebih lebar
square(100, 200, 100);
square(200, 200, 100);
square(300, 200, 100);
Repot kan? Kita harus mengubah semua parameter ke-3.
Nah, yang lebih mudah adalah menggunakan const
. Sesuai namanya, const
adalah konstanta, yang artinya nilainya tidak bisa diubah. Nilai const
tersebut bisa kita gunakan berkali-kali.
Untuk membuat const
, kita menggunakan keyword const
diikuti dengan nama variabel yang kita inginkan, lalu diikuti dengan nilai yang kita inginkan.
Setelah itu, kita bisa menggunakan const
tersebut di mana saja.
//define const
const squareSize = 100;
//use const
square(100, 200, squareSize);
square(200, 200, squareSize);
square(300, 200, squareSize);
Code di atas akan menghasilkan hasil yang sama dengan code sebelumnya, tapi lebih mudah dibaca dan diubah.
Jika kita ingin mengubah ukuran square, kita hanya perlu mengubah nilai squareSize
di baris pertama.
Variable
const
tidak bisa diubah, tapi bagaimana jika kita ingin menyimpan nilai yang bisa diubah?
Kita bisa menggunakan variable, untuk membuat variable kita menggunakan keyword let
.
let squareSize = 50;
square(100, 100, squareSize);
Mirip dengan contoh sebelumnya, kita hanya mengganti const
menjadi let
.
Tapiโฆ bagaimana jika kita ingin mengubah nilai variablenya?
Event
Untuk mengubah nilai variabel, kita perlu mendapatkan input dari user/external. Salah satunya adalah dengan menggunakan event.
function mousePressed() {
console.log("Mouse pressed");
}
Sesuai namanya mousePressed
function akan dipanggil ketika mouse ditekan.
Apa itu console.log
? console.log
adalah cara untuk menampilkan pesan di console. Ini sangat berguna untuk debugging.
Mari kita lihat code lengkapnya:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
let squareSize = 50;
square(100, 100, squareSize);
}function mousePressed() {
console.log("Mouse pressed");
}
Apa yang terjadi ketika kita tekan mouse? Tidak terlihat apa-apa.
Namun, jika kita buka console (click kanan di page di browser dan pilih Inspect), kita akan melihat pesan โMouse pressedโ setiap kali kita tekan mouse.
Ok, sekarang bagaimana jika kita ingin mengubah nilai squareSize
ketika mouse ditekan?
function draw() {
background(220);
let squareSize = 50;
square(100, 100, squareSize);
}
function mousePressed() {
= 100;
squareSize }
Hmm, tidak terjadi apa-apa. Kenapa?
Variable Scope
Variable squareSize
yang kita buat di dalam function draw
hanya bisa diakses di dalam function draw
. Jadi, ketika kita mencoba mengubah squareSize
di dalam function mousePressed
, kita sebenarnya membuat variable baru dengan nama yang sama.
TODO: tambah ilustrasi soal scoping
Kita perlu membuat squareSize
di luar function draw
agar bisa diakses di dalam function mousePressed
.
let squareSize = 50;
function draw() {
background(220);
square(100, 100, squareSize);
}
function mousePressed() {
= 100;
squareSize }
Nah, sekarang ketika kita tekan mouse, squareSize
akan berubah jadi besar.
Task 1 ๐: Increasing Size
Ubah code di atas, sehingga ketika mouse ditekan, squareSize
akan terus bertambah ukurannya.
Task 2 ๐: Decreasing Size
Lihat dokumentasi di https://p5js.org/reference/, tambahkan sebuah event baru mengurangi ukuran squareSize
ketika keyboard ditekan.
Fun: tekan terus key hingga ukurannya 0. Kemudian tekan sekali lagi, apa yang terjadi?
Time Variable
Variable bisa juga diubah, tidak hanya oleh event (user input), tapi juga oleh waktu.
let startTime;
function setup() {
createCanvas(400, 400);
= millis();
startTime
}
function draw() {
background(220);
let elapsedTime = millis() - startTime;
let squareSize = elapsedTime / 100;
square(100, 100, squareSize);
}
Random Variable
Selain waktu, kita juga bisa menggunakan nilai acak. https://p5js.org/reference/#/p5/random
random(20, 80)
akan menghasilkan nilai acak antara 20 dan 80.
function draw() {
background(220);
let size = random(20, 80);
square(100, 100, size);
}
Task 3 ๐: Random Square Location
Ubah code di atas, sehingga posisi square juga acak.
Task 4 ๐: Click Handling
Ubah code di atas, sehingga posisi dan ukuran square hanya diacak ketika mouse ditekan.
Text & Emoji
Selain menggambar bentuk, kita juga bisa menampilkan teks.
https://p5js.org/reference/#/p5/text
text("Hello", 100, 20);
Code di atas akan menampilkan teks โHelloโ di posisi (100, 20).
Agar lebih menarik, kita bisa memasukkan Emoji. Explore https://emojipedia.org/ dan temukan emoji yang kamu suka.
text("๐ถ", 100, 20);
Wah, kecil sekali, mari perbesar dengan textSize
:
textSize(60);
text("๐ถ", 100, 100);
Task 5 ๐: Random Emojis
Gambar dua emoji, dan randomize posisinya ketika mouse ditekan.