Menjelajah Koordinat dan Grid dalam p5.js

Di balik setiap garis yang terlukis, setiap bentuk yang bergerak, dan setiap animasi yang hidup di layar, ada sebuah panggung tak terlihat: sistem koordinat dan grid. Dalam p5.js-sebuah pustaka JavaScript yang populer untuk seni generatif dan kreativitas visual-panggung inilah yang menentukan di mana sebuah titik akan muncul, bagaimana sebuah objek berpindah, dan seberapa presisi kita dapat mengatur komposisi visual.

Namun, cara p5.js memandang ruang sering kali berbeda dari intuisi kita sehari-hari. Titik (0, 0) tidak berada di tengah layar, sumbu-y tidak bergerak ke atas seperti di buku matematika, dan ukuran kanvas bisa mengubah rasa “ruang” yang kita gunakan. Di sinilah koordinat dan grid menjadi kunci: keduanya membantu kita menata ide visual secara terstruktur, sambil tetap memberi ruang untuk bereksperimen.

Artikel ini akan mengajak Anda menjelajah cara kerja koordinat dan grid dalam p5.js: dari memahami titik awal dan arah sumbu, membangun grid sebagai panduan visual, hingga memakai sistem ini untuk menyusun pola, tata letak, dan interaksi. Dengan memahami fondasi ini, kanvas p5.js bukan lagi sekadar ruang kosong, melainkan medan bermain yang dapat Anda kuasai dengan lebih sadar dan terarah.

Memahami Sistem Koordinat p5 js dari Titik 0 0 hingga Transformasi Kompleks

Bayangkan kanvas p5.js sebagai hamparan kosong, dan titik (0, 0) adalah sudut kiri atas, bukan tengah seperti di dunia matematika klasik. Dari situlah semua koordinat lain “diukur”: nilai x bertambah ke kanan, dan y bertambah ke bawah. Jadi kalau kamu menggambar lingkaran di tengah layar, kamu biasanya akan pakai sesuatu seperti width/2 dan height/2. Supaya lebih kebayang, kamu bisa menganggap tiap piksel itu seperti petak kecil di grid tak terlihat. Triknya, biasakan diri untuk selalu membayangkan arah sumbu sebelum menggambar, terutama kalau kamu suka campur posisi absolut dan variabel yang dinamis.

• Origin default: sudut kiri atas canvas
• Arah sumbu X: ke kanan (nilai makin besar)
• Arah sumbu Y: ke bawah (nilai makin besar)
• Cocok untuk: UI, layout, game 2D sederhana

Hal seru dimulai saat kamu mulai “menggeser” dan memanipulasi koordinat dengan transformasi. Misalnya, kamu bisa memindahkan pusat koordinat ke tengah canvas pakai translate(width/2, height/2), lalu semua bentuk yang kamu gambar akan seolah-olah muncul dari tengah layar. Dari situ, rotasi dengan rotate() dan pembesaran lewat scale() jadi jauh lebih intuitif, apalagi kalau kamu suka bikin pola-pola simetris atau animasi yang berputar. Satu kebiasaan yang penting: manfaatkan push() dan pop() supaya transformasi kompleks nggak bikin elemen lain di kanvas ikut “ketarik” tanpa sengaja.

“`javascript
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}

function draw() {
background(20);

// Koordinat default
noStroke();
fill(80);
rect(10, 10, 60, 60);

// Koordinat yang sudah ditransformasi
push();
translate(width / 2, height / 2);
rotate(frameCount * 2);
fill(200, 100, 100);
rectMode(CENTER);
rect(0, 0, 120, 40);
pop();
}
“`

Membangun Grid Dinamis dengan Loop dan Fungsi Modular yang Mudah Dipelihara

Daripada nulis semua kotak satu per satu, lebih enak kalau kita bikin satu fungsi kecil yang tugasnya cuma “gambar satu sel”, lalu sisanya kita serahkan ke loop. Misalnya, kita bisa punya fungsi drawCell() yang menerima parameter koordinat, ukuran, atau bahkan warna. Dari situ, kita pakai dua lapis for loop (horizontal dan vertikal) untuk membangun grid lengkap. Struktur seperti ini bikin kode lebih pendek, gampang dibaca, dan yang paling penting: gampang diubah kalau suatu saat kamu ingin menambah efek hover, animasi, atau interaksi lain. Di bawah ini contoh pola pikirnya: satu fungsi fokus ke “bagaimana menggambar”, dan loop yang mengatur “berapa banyak dan di mana digambar”.

• Fungsi kecil, efek besar – satu fungsi untuk satu tugas.
• Loop bersarang – baris dan kolom yang fleksibel.
• Parameterisasi – jumlah sel, jarak, dan warna bisa diatur lewat variabel.

Begitu struktur dasar ini beres, kamu bisa mulai “bermain” di dalam fungsi selnya. Misalnya, warna setiap kotak bisa bergantung pada indeks kolom dan baris, posisi mouse, atau bahkan nilai noise() supaya grid terlihat organik dan nggak kaku. Grid yang tadinya statis mendadak terasa hidup hanya dengan mengubah beberapa baris di satu fungsi. Pendekatan modular seperti ini juga bikin refactor terasa aman: kamu tahu persis di mana logika visual berada, dan di mana logika perulangan bekerja, jadi saat layout diubah atau ukuran kanvas diganti, kamu nggak perlu bongkar semua dari nol.

“`
let cols, rows;
let cellSize = 40;

function setup() {
createCanvas(400, 400);
cols = floor(width / cellSize);
rows = floor(height / cellSize);
noStroke();
}

function draw() {
background(20);
drawGrid();
}

function drawGrid() {
for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { drawCell(x, y); } } } function drawCell(col, row) { let px = col * cellSize; let py = row * cellSize; // Contoh pewarnaan dinamis berbasis posisi mouse let d = dist(mouseX, mouseY, px + cellSize / 2, py + cellSize / 2); let c = map(d, 0, width, 255, 50); fill(c, 150, 220); rect(px, py, cellSize, cellSize); } ```

Mengoptimalkan Kinerja Saat Menggambar Grid Besar melalui Teknik Buffer dan Caching

Saat grid mulai membengkak jadi ribuan sel, menggambar semuanya berulang-ulang di draw() bisa bikin FPS jeblok. Di sinilah buffer dan caching jadi penyelamat. Dengan createGraphics()off-screen buffer, lalu di dalam loop cukup menampilkan hasilnya seperti menaruh satu gambar besar di atas kanvas. Cara ini cocok banget kalau layout grid jarang berubah, sementara yang sering diubah cuma isi di dalam selnya. Selain itu, kamu juga bisa menyimpan perhitungan koordinat atau status sel ke dalam struktur data sederhana supaya nggak dihitung ulang setiap frame.

let gridBuffer;
const cols = 100;
const rows = 100;
const cellSize = 10;

function setup() {
  createCanvas(800, 600);
  gridBuffer = createGraphics(cols * cellSize, rows * cellSize);
  
  // gambar grid sekali saja di buffer
  gridBuffer.background(30);
  gridBuffer.stroke(70);
  for (let x = 0; x <= cols; x++) {
    gridBuffer.line(x * cellSize, 0, x * cellSize, rows * cellSize);
  }
  for (let y = 0; y <= rows; y++) {
    gridBuffer.line(0, y * cellSize, cols * cellSize, y * cellSize);
  }
}

function draw() {
  background(20);
  
  // tampilkan grid dari buffer
  image(gridBuffer, 0, 0);
  
  // contoh: gambar sel aktif tanpa sentuh garis grid
  noStroke();
  fill(0, 200, 120);
  const t = millis() * 0.002;
  const activeX = floor((noise(t) * cols));
  const activeY = floor((noise(t + 1000) * rows));
  rect(activeX * cellSize, activeY * cellSize, cellSize, cellSize);
}