Mengenal OOP di p5.js: Menata Objek dengan Class

Bayangkan Anda sedang menggambar sebuah kota di kanvas p5.js. Ada mobil yang bergerak, lampu yang berkedip, awan yang melintas, dan karakter yang berjalan mondar-mandir. Semuanya hidup, semuanya dinamis. Semakin banyak elemen yang Anda tambahkan, semakin ruwet pula kode yang harus diurus-variabel di mana-mana, fungsi yang saling tumpang tindih, logika yang mulai sulit diikuti.

Di sinilah konsep Object-Oriented Programming (OOP) mulai terasa penting. Alih-alih menulis satu blok kode panjang yang mengatur semuanya sekaligus, kita bisa “menyusun dunia” p5.js menjadi kumpulan objek yang rapi: tiap objek punya data, punya perilaku, dan punya tanggung jawab yang jelas. Mobil diwakili oleh satu class, partikel oleh class lain, dan seterusnya. Alurnya tetap sama dinamis, tapi strukturnya jauh lebih tertata.

Artikel ini akan mengajak Anda mengenal OOP di p5.js melalui penggunaan class. Kita akan melihat bagaimana cara memecah elemen visual dan interaktif menjadi objek-objek mandiri, sehingga kode lebih mudah dibaca, dikembangkan, dan dirawat-baik untuk sketsa kecil maupun proyek kreatif yang lebih kompleks.

Merancang Blueprint Objek dengan Class p5 js dari Properti hingga Metode

Di p5.js, class itu ibarat gambar kerja sebelum kita membangun objek di layar. Kita mulai dengan memilih dulu apa saja properti yang mau disimpan: posisi, warna, kecepatan, ukuran, atau bahkan mood objek kalau mau iseng. Properti ini didefinisikan di dalam constructor(), dan di situlah kita “mengisi identitas” setiap objek baru. Lalu, kita tambahkan metode untuk mengatur cara objek itu bertingkah: bagaimana ia digambar, bergerak, bereaksi terhadap klik, atau berubah saat menyentuh tepi kanvas. Jadi alurnya mirip banget seperti mendesain karakter gim: tentukan dulu data pentingnya, baru susun daftar kemampuan yang dia punya.

• Properti: menyimpan data unik tiap objek (posisi, warna, ukuran).
• Metode: mengatur aksi atau perilaku (menggambar, update, cek tabrakan).
• Constructor: tempat awal mendefinisikan semua nilai properti.
• Instance: objek nyata yang dibuat dari satu blueprint class.

“`js
class Bola {
constructor(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.col = color(random(255), random(255), random(255));
this.vx = random(-2, 2);
this.vy = random(-2, 2);
}

tampilkan() {
noStroke();
fill(this.col);
circle(this.x, this.y, this.r * 2);
}

gerak() {
this.x += this.vx;
this.y += this.vy;

if (this.x < this.r || this.x > width – this.r) this.vx *= -1;
if (this.y < this.r || this.y > height – this.r) this.vy *= -1;
}
}

let bolaKecil;

function setup() {
createCanvas(400, 400);
bolaKecil = new Bola(width / 2, height / 2, 20);
}

function draw() {
background(30);
bolaKecil.gerak();
bolaKecil.tampilkan();
}
“`

Menyusun Struktur Program yang Rapi dengan Pewarisan dan Komposisi Objek

Di p5.js, OOP makin terasa manfaatnya ketika kamu mulai memecah logika ke dalam beberapa class dan menghubungkannya lewat pewarisan dan komposisi. Misalnya, kamu bisa punya class dasar Entity yang menyimpan posisi dan kecepatan, lalu class lain seperti Player dan Enemy mewarisi perilaku dasar ini, tinggal menambah kemampuan unik masing-masing. Sementara itu, komposisi bikin kamu bisa menyusun objek dari “bagian-bagian”, misalnya objek Player yang punya objek Weapon, HealthBar, dan ParticleEmitter di dalamnya, tanpa perlu semuanya jadi satu class gemuk yang susah diatur.

• Pewarisan: fokus pada hubungan “is a”, misalnya Enemy is a Entity.
• Komposisi: fokus pada hubungan “has a”, misalnya Player has a Weapon.
• Struktur rapi: tiap class punya tanggung jawab jelas, nggak saling tumpang tindih.
• Mudah dikembangkan: nambah fitur baru tanpa bongkar total kode lama.

class Entity {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
  }

  update() {
    this.pos.add(this.vel);
  }

  draw() {
    circle(this.pos.x, this.pos.y, 20);
  }
}

class Enemy extends Entity {
  constructor(x, y) {
    super(x, y);
    this.vel.x = random(-2, 2);
    this.vel.y = random(-2, 2);
  }

  draw() {
    push();
    fill(255, 0, 0);
    super.draw();
    pop();
  }
}

class Weapon {
  constructor(owner) {
    this.owner = owner;
  }

  shoot() {
    // logika menembak sederhana
    console.log('Pew! dari', this.owner.pos.x, this.owner.pos.y);
  }
}

class Player extends Entity {
  constructor(x, y) {
    super(x, y);
    this.weapon = new Weapon(this); // komposisi
  }

  handleInput() {
    if (keyIsDown(LEFT_ARROW)) this.pos.x -= 3;
    if (keyIsDown(RIGHT_ARROW)) this.pos.x += 3;
  }

  update() {
    this.handleInput();
    super.update();
  }
}

let player;
let enemies = [];

function setup() {
  createCanvas(400, 400);
  player = new Player(width / 2, height - 40);
  for (let i = 0; i < 5; i++) {
    enemies.push(new Enemy(random(width), random(height / 2)));
  }
}

function draw() {
  background(30);

  player.update();
  player.draw();

  enemies.forEach(e => {
    e.update();
    e.draw();
  });
}

function keyPressed() {
  if (key === ' ') {
    player.weapon.shoot();
  }
}

Mengelola Interaksi dan Perilaku Visual di Kanvas melalui Instance Class

Begitu punya class, kita bisa membuat banyak objek yang saling merespons gerakan mouse, klik, atau bahkan posisi kursor di kanvas tanpa harus menulis ulang logika satu per satu. Setiap instance bisa punya sifat unik-ada yang gesit mengikuti mouse, ada yang cuek dan cuma berubah warna ketika disentuh. Trik utamanya, simpan interaksi di dalam method, lalu panggil method itu di draw() atau mousePressed(). Dengan begitu, peta alur kode jadi lebih rapi. Misalnya, alih-alih menulis banyak if di luar, kita biarkan objek sendiri yang memutuskan kapan ia harus mengganti warna, membesar, atau menghilang.

• Instance menyimpan posisi, kecepatan, warna, dan status interaksi.
• Method di dalam class mengatur perilaku: bergerak, menggambar, merespons event.
• Loop di draw() hanya fokus memanggil method semua objek, bukan detail logika.
• Manipulasi visual (opacity, bentuk, ukuran) jadi cukup diubah di satu tempat: di class.

Supaya lebih kebayang, bayangkan kita punya sekumpulan lingkaran yang bisa “sadar” ketika kursor mendekat: mereka menjauh pelan, atau justru tertarik mendekat dan memudar warnanya. Semua ini bisa dirangkum di sebuah class, misalnya Bubble, yang menyimpan posisi dan warna, plus method untuk update dan cek jarak ke mouse. Di luar class, kita hanya butuh larik (array) berisi banyak bubble, lalu memanggil method mereka di dalam loop, mirip orkestra yang dipimpin satu konduktor saja.

“`javascript
class Bubble {
constructor(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.baseColor = color(100, 150, 255);
this.currentColor = this.baseColor;
}

update() {
let d = dist(mouseX, mouseY, this.x, this.y);
if (d < this.r * 2) { // Bereaksi saat kursor dekat this.currentColor = color(255, 120, 150); this.x += (this.x - mouseX) * 0.02; this.y += (this.y - mouseY) * 0.02; } else { // Kembali ke warna dasar this.currentColor = lerpColor(this.currentColor, this.baseColor, 0.05); } } show() { noStroke(); fill(this.currentColor); circle(this.x, this.y, this.r * 2); } } let bubbles = []; function setup() { createCanvas(600, 400); for (let i = 0; i < 25; i++) { bubbles.push(new Bubble(random(width), random(height), random(15, 35))); } } function draw() { background(20); for (let b of bubbles) { b.update(); b.show(); } } ```

Rekomendasi Praktik Terbaik OOP di p5 js untuk Proyek Kreatif yang Skalabel

Supaya sketsa p5.js kamu tetap enak dikembangkan meski idenya melebar ke mana-mana, usahakan sejak awal bikin pola kode yang rapi dan konsisten. Misalnya, pastikan setiap class punya satu tanggung jawab utama: ada yang khusus ngurus tampilan, ada yang fokus ke logika, dan ada yang jadi “koordinator” antar objek. Hindari God object yang isinya semua hal jadi satu; awalnya terlihat praktis, tapi nanti bikin kepala mumet saat ingin menambah fitur. Kamu juga bisa bikin konvensi penamaan sendiri: nama class diawali huruf besar, properti pakai camelCase, dan variabel global dibatasi seperlunya. Hal-hal kecil seperti ini bikin proyek kreatif tetap mudah dirawat, bahkan kalau dikerjain rame-rame.

• Gunakan komposisi, bukan warisan berlebihan – lebih baik gabungkan beberapa objek kecil daripada bikin rantai extends yang rumit.
• Pisahkan data dan gambar – simpan warna, ukuran, dan kecepatan sebagai properti, jangan langsung “di-hardcode” di fungsi draw().
• Buat class utilitas – untuk hal-hal umum seperti animasi, pengaturan warna, atau input sehingga bisa dipakai ulang di banyak sketsa.
• Rapiin koleksi objek – gunakan array atau map untuk many-object seperti partikel atau musuh, dan sediakan metode update() serta display() yang konsisten.

In Summary

Pada akhirnya, mengenal OOP di p5.js bukan soal menambah rumus baru di kepala, melainkan cara baru melihat kode: bahwa lingkaran, musuh, partikel, bahkan tombol di layar bisa diperlakukan sebagai “makhluk” dengan sifat dan perilakunya sendiri. Class hanyalah wadah; imajinasi dan struktur kitalah yang mengisinya.

Jika sebelumnya sketsa p5.js Anda penuh variabel yang berserakan, OOP menawarkan cara untuk merapikan panggung: setiap objek tahu tugasnya, setiap bagian kode punya rumahnya. Begitu pola ini mulai terasa alami, Anda akan menyadari bahwa menambah fitur bukan lagi berarti menambah kekacauan, tapi memperluas “dunia” yang sudah tertata.

Setelah ini, Anda bisa mulai bereksperimen: pecah sketsa jadi beberapa class, ciptakan objek-objek baru, biarkan mereka “hidup” di kanvas p5.js Anda. Mungkin dari satu class sederhana hari ini, lahir sebuah permainan, visualisasi data, atau instalasi interaktif di lain hari.

Pada akhirnya, OOP di p5.js adalah undangan: untuk menulis kode yang bukan hanya berjalan, tapi juga enak dipikirkan kembali. Selebihnya, terserah Anda ingin menciptakan dunia seperti apa.