Menguasai Teks di p5.js: Font, Ukuran, dan Warna

Di balik visual interaktif dan animasi memukau di p5.js, ada satu elemen yang sering terlupakan namun sangat menentukan cara pesan tersampaikan: teks. Entah Anda sedang membuat poster generatif, visualisasi data, antarmuka sederhana, atau sekadar menambahkan judul pada sebuah sketsa, penguasaan teks-mulai dari pemilihan font, pengaturan ukuran, hingga pemilihan warna-akan membedakan karya yang “sekadar tampil” dengan karya yang benar-benar “berbicara”.

Artikel ini akan mengajak Anda menyelami bagaimana p5.js menangani teks: bagaimana memuat dan mengganti font, mengatur hirarki visual melalui ukuran huruf, serta memanfaatkan warna untuk memperkuat makna dan fokus. Dengan memahami dasar-dasar ini, Anda tidak hanya akan menampilkan kata-kata di layar, tetapi juga mengarahkan cara kata-kata itu dirasakan dan dibaca oleh pengguna.

Memilih dan Memuat Font di p5 js dari Default hingga Kustom Berlisensi Aman

Di p5.js, kamu bisa langsung pakai font bawaan sistem tanpa ribet, atau melangkah lebih jauh dengan font kustom yang lisensinya jelas aman. Untuk pemakaian cepat, cukup set font standar seperti sans-serif atau serif lewat textFont(). Tapi kalau ingin tampilan lebih khas, kamu bisa memuat file .ttf atau .otf lewat preload(), lalu menerapkannya di setup(). Yang sering terlupa justru soal lisensi: jangan asal unduh lalu pakai di proyek komersial. Utamakan font dari sumber yang jelas, misalnya Google Fonts atau marketplace yang mencantumkan lisensi dengan detail.

• Gunakan preload() untuk memastikan font sudah siap sebelum dipakai.
• Selalu baca lisensi sebelum menyertakan font di produk publik.
• Simpan font di folder terpisah (misalnya assets/fonts/) agar struktur proyek rapi.
• Siapkan font cadangan agar teks tetap terbaca jika font utama gagal dimuat.

“`javascript
let myFont;

function preload() {
// Pastikan file font dan path sudah benar
myFont = loadFont(‘assets/fonts/Inter-Regular.ttf’);
}

function setup() {
createCanvas(600, 300);
textFont(myFont); // Terapkan font kustom
textSize(32);
textAlign(CENTER, CENTER);
}

function draw() {
background(245);
fill(30);
text(‘Halo dari font kustom!’, width / 2, height / 2);
}
“`

Mengatur Ukuran dan Hierarki Teks untuk Tampilan Kode yang Rapi dan Terbaca

Ukuran teks di p5.js itu ibarat volume suara: terlalu kecil bikin orang menyipitkan mata, terlalu besar malah terasa “teriak”. Mulailah dengan menentukan skala dasar memakai textSize(), lalu buat lapisan hierarki yang jelas untuk membedakan judul, komentar, dan isi kode yang ingin kamu sorot. Misalnya, kamu bisa pakai ukuran besar untuk judul blok kode, ukuran sedang untuk penjelasan singkat, dan ukuran kecil untuk catatan teknis. Supaya lebih konsisten, kamu bisa membayangkan layout seperti dokumentasi profesional: rapi, bertingkat, dan mudah dipindai mata. Di dalam kanvas, pengaturan jarak juga penting; kombinasikan posisi teks dengan textLeading() dan penempatan koordinat yang terukur, jadi blok-blok penjelasan tetap terlihat teratur meski banyak elemen visual lain.

Untuk membantu kamu merancang tampilan yang enak dibaca, coba pikirkan struktur dasar seperti berikut:

• Judul atau label utama: teks paling besar, sering jadi titik fokus pertama.
• Subjudul atau kategori: sedikit lebih kecil, memecah informasi jadi bagian-bagian.
• Penjelasan kode: ukuran sedang, dipakai untuk deskripsi singkat.
• Catatan kecil / hint: ukuran paling kecil, cukup untuk info tambahan.

function setup() {
  createCanvas(600, 400);
  background(20);

  // Judul
  textSize(28);
  fill(255);
  text("Demo Hierarki Teks", 20, 50);

  // Subjudul
  textSize(18);
  fill(200);
  text("Penjelasan kode di bawah lebih kecil,", 20, 90);
  text("tapi masih jelas dan mudah dipindai.", 20, 115);

  // Deskripsi
  textSize(14);
  fill(180);
  text("Gunakan ukuran berbeda untuk menuntun fokus mata.", 20, 150);

  // Catatan kecil
  textSize(11);
  fill(150);
  text("Tip: jaga kontras warna teks dan background.", 20, 180);
}

Mewarnai Teks dengan fill stroke dan alpha untuk Efek Visual yang Lebih Hidup

Permainan warna di p5.js bukan cuma soal memilih warna yang “keren”, tapi juga soal bagaimana kamu menggabungkan fill(), stroke(), dan alpha supaya teks terasa lebih hidup. Triknya, kamu bisa memadukan warna teks dengan garis tepi (outline) yang kontras atau malah lembut, lalu menambahkan transparansi untuk memberi kesan layering. Misalnya, teks utama diberi warna solid, sementara outline-nya sedikit transparan, sehingga tampak seperti menyala samar. Atau sebaliknya: teks transparan dengan stroke tebal dan jelas. Kombinasi kecil seperti ini bisa bikin satu kata di kanvas langsung jadi pusat perhatian.

• fill(r, g, b, a) → warna isi teks + transparansi
• stroke(r, g, b, a) → warna garis tepi teks + transparansi
• strokeWeight() → ketebalan outline teks

“`javascript
function setup() {
createCanvas(600, 300);
background(10);
textFont(‘Georgia’);
textAlign(CENTER, CENTER);
}

function draw() {
background(10);

// Teks “neon”
textSize(72);
stroke(0, 255, 255, 180); // cyan agak transparan
strokeWeight(6);
fill(255, 255, 255, 230); // putih hampir solid
text(‘NEON’, width / 2, height / 2 – 50);

// Teks “ghost”
textSize(48);
noStroke();
fill(255, 255, 255, 80); // sangat transparan
text(‘ghost text’, width / 2, height / 2 + 40);
}
“`

Serunya lagi, kamu bisa mengubah nilai alpha secara dinamis untuk bikin efek animasi yang halus, misalnya teks bernafas pelan dengan opacity yang naik turun. Teknik ini cocok untuk judul, highlight, atau elemen UI yang perlu memancing perhatian tanpa terasa “berisik”. Kalau ingin eksperimen lebih jauh, gabungkan dengan perubahan warna bertahap (color transition) dan strokeWeight yang ikut berubah, sehingga teks seolah berdetak atau berdenyut. Jangan ragu coba kombinasi “aneh” dulu; sering kali efek yang paling menarik muncul dari eksperimen yang awalnya terasa iseng.

“`javascript
let a = 0;

function setup() {
createCanvas(600, 300);
textFont(‘Helvetica’);
textAlign(CENTER, CENTER);
}

function draw() {
background(15);

// Alpha bernafas
let alphaFill = map(sin(a), -1, 1, 50, 230);
let alphaStroke = map(cos(a), -1, 1, 30, 200);

textSize(64);
stroke(255, 100, 0, alphaStroke); // oranye dinamis
strokeWeight(map(sin(a), -1, 1, 1, 6));
fill(255, 220, 180, alphaFill);

text(‘PULSING’, width / 2, height / 2);

a += 0.03;
}
“`

Tips Optimasi Teks Mengurangi Lag dan Menjaga Kualitas Rendering di Berbagai Perangkat

Trik utamanya: jangan biarkan kanvas bekerja terlalu keras setiap frame. Hindari merender teks yang sama berkali-kali tanpa alasan. Kalau teks statis (judul, skor yang jarang berubah, label UI), kamu bisa menggambar teks di awal lalu memperbarui hanya saat perlu. Selain itu, batasi jumlah pemanggilan fungsi teks di dalam draw(), terutama di loop besar. Kamu bisa mengakali performa dengan beberapa langkah ringan seperti:

• Gunakan ukuran font seperlunya – font super besar di banyak posisi layar bikin GPU ngos-ngosan.
• Kurangi efek berat – bayangan, stroke tebal, atau perubahan warna ekstrem setiap frame bikin lag.
• Kelompokkan teks – render beberapa teks ke satu layer / buffer (createGraphics) lalu tampilkan sebagai gambar.
• Cache nilai yang sering dipakai – simpan ukuran teks, posisi, dan warna di variabel, jangan dihitung ulang terus.

Supaya tampilan tetap konsisten di berbagai ukuran layar, biasakan berpikir dalam rasio, bukan piksel mentah. Ukur teks berdasarkan lebar atau tinggi kanvas, jadi kalau kanvas berubah, teks ikut menyesuaikan tanpa perlu ubah satu-satu. Kamu juga bisa bikin satu fungsi helper khusus untuk mengatur skala teks, lalu panggil di mana saja saat butuh, jadi kode tetap rapi dan gampang disetel kalau suatu hari performa mulai terasa berat.

“`javascript
function scaledTextSize(base) {
// Sesuaikan ukuran teks dengan lebar kanvas
return map(width, 320, 1440, base * 0.8, base * 1.4, true);
}

function draw() {
background(20);

const sizeTitle = scaledTextSize(32);
const sizeBody = scaledTextSize(16);

textAlign(CENTER, CENTER);
fill(255);

textSize(sizeTitle);
text(“Judul Responsif”, width / 2, height * 0.3);

textSize(sizeBody);
text(“Teks ini ikut menyesuaikan layar tanpa bikin lag berlebihan.”, width / 2, height * 0.5);
}
“`

In Retrospect

Pada akhirnya, permainan teks di p5.js bukan sekadar soal huruf yang muncul di layar-tetapi bagaimana huruf itu berbicara. Dengan memahami font, ukuran, dan warna, kita tidak hanya mengatur tampilan, tapi juga suasana, ritme, dan cara pengguna membaca karya kita.

Setelah ini, cobalah bereksperimen: ganti font yang biasa dengan sesuatu yang lebih berani, ubah sedikit ukuran untuk memberi penekanan, atau mainkan kombinasi warna hingga teks benar-benar terasa “hidup” di kanvas. Jadikan setiap baris teks sebagai elemen visual yang punya peran, bukan hanya pelengkap.

Pada titik tertentu, Anda akan menyadari bahwa teks di p5.js bukan lagi sekadar teks-melainkan bagian penting dari bahasa visual yang Anda bangun sendiri. Dan di situlah kreativitas Anda mulai mengambil alih.