Tujuan:
Siswa mengenal dasar JavaScript.
Siswa memahami konsep koordinat, variabel, dan perulangan.
Siswa melihat hasil coding secara langsung di Chromebook.
Langkah-Langkah
Persiapan
Pastikan Chromebook terhubung ke internet.
Buka browser Google Chrome.
Kunjungi https://editor.p5js.org/.
Klik “New Sketch”.
Penjelasan Singkat
p5.js adalah library JavaScript untuk membuat gambar, animasi, dan interaksi.
Kita akan membuat sebuah bola yang memantul di layar.
Ketik Kode Berikut
let x = 50; // posisi x bola let y = 50; // posisi y bola let xSpeed = 3; // kecepatan bola di sumbu x let ySpeed = 2; // kecepatan bola di sumbu y function setup() { createCanvas(400, 400); // ukuran kanvas } function draw() { background(220); // gambar bola fill(255, 0, 0); ellipse(x, y, 50, 50); // gerakkan bola x += xSpeed; y += ySpeed; // pantulkan bola jika menyentuh tepi if (x > width – 25 || x < 25) { xSpeed *= -1; } if (y > height – 25 || y < 25) { ySpeed *= -1; } }
Tekan tombol ▶ Run
Bola merah akan bergerak memantul ke semua arah.
Pengembangan Aktivitas
Tantangan 1: Ubah warna bola setiap kali memantul.
Tantangan 2: Tambahkan dua bola dengan kecepatan berbeda.
Tantangan 3: Ubah ukuran kanvas menjadi 800×400 dan lihat per
