Latihan 1: Canvas Animation Lanjutan — Web Animation

Latihan 1 dari materi Canvas Animation Lanjutan di Web Animation — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi lima function sistem partikel (logika murni, tanpa Canvas sungguhan). Kode awal sudah berisi function kosongnya dan baris console.log-nya; isi function-nya dan biarkan baris console.log seperti adanya.

  1. createParticle(x, y, vx, vy, life) mengembalikan object { x, y, vx, vy, life, maxLife: life, opacity: 1 }.
  2. updateParticle(particle, dt) menambah x dengan vx * dt dan y dengan vy * dt, mengurangi life dengan dt, mengisi opacity = Math.max(0, life / maxLife) dan alive = life > 0, lalu mengembalikan partikelnya.
  3. createParticleSystem(maxParticles) mengembalikan { particles: [], maxParticles }.
  4. emitParticle(system, particle) menambahkan partikel ke system.particles hanya kalau jumlahnya masih di bawah maxParticles, lalu mengembalikan system.
  5. updateSystem(system, dt) memperbarui semua partikel dengan updateParticle, lalu membuang yang alive-nya false dari system.particles.

Yang dinilai, tujuh baris console harus persis, berurutan:

  1. 1
  2. 1
  3. 5
  4. 0.5
  5. true
  6. false
  7. 2

Nilai kembaliannya juga dinilai langsung: createParticle(1, 2, 10, 20, 4) setelah updateParticle(..., 1) harus punya x 11, y 22, opacity 0.75, dan alive true; setelah updateParticle(..., 3) lagi, alive-nya false. Hasil gabungannya 11|22|0.75|true|false.

updateSystem juga dipanggil langsung: system dengan dua partikel berumur 1 dan 3 detik, diperbarui 2 detik, harus tinggal punya satu partikel, yang posisi dan sisa umurnya sudah ikut diperbarui.

Hint