p5.js adalah pustaka JavaScript untuk pengkodean kreatif, dengan fokus membuat pengkodean dapat diakses dan inklusif bagi seniman, desainer, pendidik, pemula, dan siapa pun! p5.js gratis dan sumber terbuka karena kami percaya perangkat lunak, dan alat untuk mempelajarinya, harus dapat diakses oleh semua orang. Menggunakan metafora
sketsa, p5.js memiliki set lengkap fungsi menggambar menggunakan elemen kanvas HTML5. Anda tidak terbatas pada kanvas gambar. Anda dapat menganggap seluruh halaman browser Anda sebagai sketsa Anda, termasuk objek HTML5 untuk teks, input, video, webcam, dan suara. p5.js menarik inspirasi, kebijaksanaan, dan bimbingan dari pendahulunya Pengolahan . Namun, itu adalah interpretasi baru, bukan emulasi atau port. Kami
tidak bertujuan untuk menyamai rangkaian fungsi Processing secara tepat, membiarkan diri kami memiliki ruang untuk menyimpang dan berkembang dalam konteks web. NS p5js.org situs web berisi ikhtisar ekstensif tentang proyek, komunitas, dokumentasi, dan contoh. Jika Anda sudah mengetahui
dasar-dasar JavaScript atau Pemrosesan, ikhtisar p5.js halaman wiki adalah tempat yang baik untuk memulai. #p5.js #programming-c #javascript p5.js adalah pustaka JavaScript untuk pengkodean kreatif, dengan fokus membuat
pengkodean dapat diakses dan inklusif bagi seniman, desainer, pendidik, pemula, dan siapa pun! p5.js gratis dan sumber terbuka karena kami percaya perangkat lunak, dan alat untuk mempelajarinya, harus dapat diakses oleh semua orang.
www.youtube.com
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 //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
//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
//alpha.editor.p5js.org/full/BkzQX0HLf
live
edit
//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:
//github.com/andreecy/p5-desktop-time