Catatan Pertama : Buat Jam dengan JavaScript, Framework : p5.js

Sebenarnya tujuan blog ini adalah sebagai catatan pribadi dalam belajar coding menggunakan bahasa program JavaScript, lebih tepatnya JavaScript dengan framework p5.js

Setelah mencoba berbagai macam platform untuk pencatatan, nampaknya memang tempat yang paling mudah dan murah adalah melalui laman blogspot ini. Mudah dalam arti isi platform ini mudah untuk disunting dan dilihat, dijalankan, serta dibandingkan antara satu kode dengan kode yang lainnya. Dan karena blog ini sejatinya adalah catatan, maka harus bisa diutak-atik sesering mungkin, dimodifikasi, dan dibandingkan hasilnya antara satu konsep dengan konsep yang lainnya.

Dalam bentuk aslinya, p5.js sebenarnya dirancang untuk dijalankan dalam 1 halaman HTML. Namun, untuk keperluan studi saya dalam coding ini, saya perlu menjalankan beberapa program p5.js dalam satu halaman. Web page dan snippet melalui Blogspot dan widget p5.js adalah solusi yang saya ambil. Kode p5.js pada awalnya saya tulis dalam mode edit posting blogspot, namun dengan bantuan github, maka saya dapat memisahkan script yang dibuat di tempat lain untuk kemudahan penyuntingan.

Oke, langsung saja. Dalam catatan pertama kali ini, saya akan mencoba utak-atik dan membuat jam dalam bahasa JavaScript.

Sebagai template dan pedoman belajar, saya menggunakan petunjuk dari video oleh Daniel Shiffman di bawah ini.

Dengan pedoman video di atas, saya akan coba satu-persatu code yang digunakan agar pemahaman semakin meningkat dalam langkah demi langkahnya. Kode di bawah ini memanggil besaran hour, minute, dan second untuk kita manfaatkan dalam menggambar bentuk jam nanti.

Lalu, setelah mengetahui mengambil data jam, menit, dan detik pada kode di atas, maka saya coba memetakan 'map' pembuatan busur sesuai dengan nilai dari variabel yang lain, dalam hal ini saya coba ambil nilai posisi Mouse X.

Dengan fungsi mapping second ke dalam input fungsi sudut arc, didapatkan arc yang menggambarkan posisi jam.

Lalu ditambahkan garis penunjuk waktu, menggunakan fungsi push() dan pop() untuk setting canvas. Pembahasan mendalam dapat dilihat pada link video ini.

Sebenarnya, ada 1 bug dalam hasil jam ini. Misalkan pada jam 7.45, maka jarum penunjuk angka jam harusnya menunjukkan lokasi di tempat lebih dari 7, namun sedikit di bawah angka 8. Pada kode di atas, posisi angka tetap pada angka 7 hingga saat jam tepat pukul 8.00, maka jarum jam baru berpindah ke angka 8. Jadi, ini mungkin masih bersambung jika masih ada kesempatan :)