Membuat Jam & Desktop Scene 3D dengan p5.js
Menggambar dengan coding…
p5js adalah javascript library yang digunakan untuk membuat sketch, gambar, desain, di web canvas. p5js merupakan implementasi dari Processing khususnya untuk web.
Processing sendiri adalah software sekaligus bahasa pemrograman untuk membuat visual art, prototyping, untuk pembelajaran, dsb.
“Menggambar dengan coding” itulah gambaran singkat di otak saya ketika pertama mengenal processing dan p5js.
Persiapan:
Editor : Kita akan menggunakan live editor dari p5js http://alpha.editor.p5js.org/, sehingga kita tidak perlu persiapan mengunduh paket p5js, atau memulai kerangka kerja dari awal, langsung cus koding saja!.
Seperti berikut tampilannya:
Kita akan skip dasar-dasar p5js, teman-teman yang masih bingung bisa melihat getting started-nya disini dan juga referensi dokumentasi API disini
Koding
Langkah pertama
Buatlah inisiasi, fungi setup, dan fungsi draw seperti berikut:
- Inisiasi
Kita buat array months berisikan nama-nama bulan.
Buat variable kosong date, time dan dateTexture nantinya akan kita gunakan - Fungsi setup (fungsi ini dijalankan hanya sekali saat canvas pertama kali dibuat).
Rubah canvas menjadi berukuran 900x650, dan kita implementasikan WEBGL karna sketch yang kita buat nantinya menjadi 3D.
dateTexture, kita buat texture dengan createGraphics() berukuran 200x100. textalign center, dan fill color white. Texture ini nantinya adalah tanggal dan jam yang akan bergerak terus seiring waktu berjalan. - Fungsi draw (fungsi ini dijalankan terus menerus/ loop selama sketch aktif).
disinilah tempat yang cocok untuk meletakan kode untuk jam supaya berjalan realtime seiring dengan waktu sekarang.
date & time
day() //hari dalam bulan (1–31)months[month() - 1].substr(0, 3)
//bulan 1-12, ambil index dari array bulan, substring 3 hurufyear() //tahun XXXX(hour() < 10 ? '0'+hour() : hour())
//jam 0-23, jika kurang dari 10 kita tambahkan angka 0 didepan(minute() < 10 ? '0'+minute() : minute())
//menit 0-59, jika kurang dari 10 kita tambahkan angka 0 didepan(second() < 10 ? '0'+second() : second())
//detik 0-59, jika kurang dari 10 kita tambahkan angka 0 didepan
kemudian set text size 30, untuk date, kita posisikan sumbu x pada dateTexture.width/2 supaya ditengah, dan y dateTexture.height/2 supaya ditengah. Berikut juga untuk timenya hanya saja kita atur untuk textsizenya 12.
buat plane ukuran 200x100 sama dengan ukuran dateTexture, sebelum baris plane() kita definisikan tekstur dari plane menggunakan fungsi texture(dateTexture);
dalam bahasa pemrogramman Processing baris yang diatas akan mempengaruhi baris yang ada dibawahnya.
run sketch dan seperti ini lah hasil dari langkah awal kita, dapat kita lihat tanggal dan jam akan bergerak seiring waktu yg berjalan saat ini.
Langkah kedua
Rubah bagian ini
texture(dateTexture);
plane(200,100);menjadi seperti gambar berikut:
push() dan pop() berguna agar baris yang ada didalam tidak terpengaruh oleh kode yang di atas atau di luar.
Pada bagian ini kita membuat box(220,120,100) abu-abu, dan kita translasikan ke belakang plane (sumbu z) dengan translate(0, 0, -50.1).
lalu box dan plane kita rotasikan ke sumbu Y keduanya sekaligus dengan rotate(PI/4) supaya lebih artistik
PI = 180 derajat
hasilnya seperti berikut ini
Nah jam digital 3D kita sudah jadi.
demonya seperti ini
https://alpha.editor.p5js.org/full/BkzQX0HLf
live edit
https://alpha.editor.p5js.org/andreecy/sketches/BkzQX0HLf
Selanjutnya untuk PR silahkan teman-teman berkreasi sendiri, seperti mengganti font, menambahkan ornamen meja, buku, tanaman dll 😜
Full source code (seperti cover artikel ) di link berikut:
https://github.com/andreecy/p5-desktop-time
