Cara menggunakan P5JS pada 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.

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

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 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.

hasil langkah pertama

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