Particles.js: Perkenalan

() translation by (you can also view the original English article)

Partikel yang bergerak dalam jumlah banyak dan berinteraksi satu sama lain memiliki pesona tersendiri. Jika kamu dalam situasi di mana kamu perlu bekerja dengan partikel, Particles.js akan sangat membantu. Seperti namanya, Particles.js adalah library JavaScript yang bisa membantu kamu membuat sistem partikel. Terlebih lagi, Particles.js ringan, mudah digunakan, dan mudah diatur.

Pada tutorial ini, saya akan membahas semua fitur dalam library dan membantu kamu memulai. Tutorial ini adalah bagian pertama dari seri tutorial dan hanya membahas dasar-dasarnya.

Instalasi dan penggunaan

Pertama, kamu perlu menyimpan library tersebut. Kamu bisa mengunggah pada server sendiri atau menggunakan CDN jsdeliver seperti saya.

1	<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Kamu juga perlu membuat elemen DOM di mana Particles.js akan membuat partikelnya. Berikan id yang mudah dikenali, untuk mengacunya lain kali.

1	<div id="particles-js"></div>

Sekarang, untuk membuat sistem dasar partikel dengan pengaturan daar, kamu perlu menambahkan satu baris JavaScript untuk menginisialisasi library tersebut.

1	particlesJS();

Partikel awalnya berwarna putih. Mereka terhubung dengan garis tipis berwarna putih. Jadi jika kamu tidak melihat apa-apa saat ini, ubah warna latar belakang menjadi warna lain. Berikut adalah CSS untuk mengubah tampilan partikel div:

1	#particles-js {
2	background: cornflowerblue;
3	}

Klik di mana saja pada demo di bawah. Setelah setiap klik, Particles.js akan membuat empat atau lebih partikel.

Mengatur Opsi Khusus

Walau hanya membutuhkan empat baris kode untuk membuat demo sebelumnya, hasil akhirnya mungkin bukan yang kamu inginkan. Menurut saya, pertikel terlihat terlalu besar dan terlalu rapat. Mungkin kamu ingin partikel perlu memiliki bentuk atau ukuran yang berbeda. Particles.js membolehkan kamu mengatur semua itu dan lebih banyak properti lain dalam JSON yang bisa kamu muat saat inisialisasi. Sintaks untuk memanggil fungsi akan terlihat seperti ini:

1	particlesJS(dom-id, path-json, callback (optional));

Di sini, dom-id adalah elemen di mana kamu ingin partikelnya muncul. path-json adalah posisi file JSON yang berisi konfigurasi, dan callback adalah fungsi optional yang akan dipanggil. Selain path, kamu bisa menyimpan kode JSON langsung pada parameter kedua.

Kita coba membuat salju turun menggunakan library ini. Pertama-tama, fungsi kita terlihat seperti ini:

1	particlesJS("snowfall", 'assets/snowflakes.json');

Saya menghapus fungsi callback dan mengubah DOM Id menjadi nama yang lebih spesifik. Salju umumnya akan memiliki bentuk lingkaran. Mereka akan turun ke bawah dan memiliki ukuran yang berbeda-beda. Dan, tidak seperti demo pertama, partikel tidak akan terhubung dengan garis.

Menggerakkan Partikel

Pada awalnya, snowflakes.json akan berisi kode berikut:

{
  "particles": {
  
  },
  "interactivity": {
    
  }
}

Semua konfigurasi berhubungan dengan properti fisik seperti bentuk, ukuran, dan gerakan akan masuk ke dalam particles. Semua opsi konfigurasi yang menentukan perilaku interaksi akan masuk ke dalam interactivity.

Saya mengatur jumlah partikel menjadi 100. Ini akan tergantung pada ruang yang tersedia. Seperti dijelaskan sebelumnya, saya akan atur bentuknya menjadi lingkaran. Pada titik ini, file kamu akan terlihat seperti ini:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    }
  },
  "interactivity": {
    
  }
}

Saya menggunakan nilai 10 untuk mengatur ukuran salju. Karena salju memiliki ukuran berbeda-beda, saya atur random menjadi true. Dengan ini salju bisa berukuran antara nol sampai nilai maksimum yang kita atur. Untuk menghapus semua garis yang menghubungkan partikel-partikel ini, kamu bisa atur enable menjadi false pada line_linked.

Untuk menggerakkan partikel, kamu harus mengatur enable menjadi true. Tanpa pengaturan lain, partikel akan bergerak seperti mereka di luar angkasa. Kamu bisa mengatur arah gerak partikel dengan nilai string seperti "bottom". Walau partikel secara umum bergerak ke bawah, mereka masih perlu bergerak secara acak agar terlihat natural. Ini bisa dicapai dengan mengatur straight menjadi false. Pada titik ini, snowflakes.json akan memiliki kode berikut:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
    
  }
}

Dengan kode JSON di atas, kamu akan mendapatkan hasil berikut:

Mengubah Perilaku Interaksi

Jika kamu menggerakkan kursor pada demo di atas, kamu akan lihat bahwa garis masih ada tapi hanya muncul sementara saat di bawah kursor. Untuk menghilangkan garis sepenuhnya, kamu bisa mengatur properti enable pada event onhover menjadi false. Coba klik di dalam demo di atas dan kamu akan lihat setiap klik menghasilkan empat partikel. Ini adalah perilaku dasar. Kamu juga bisa mengubah jumlah partikel menggunakan properti particles_nb pada push. Saya mengatur nilai ini menjadi 12.

Kamu juga bisa menentukan untuk mendeteksi event pada window atau canvas menggunakan opsi detect_on.

Berikut adalah kode lengkap file JSON kita:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false
      }
    },
    "modes": {
      "push": {
        "particles_nb": 12
      }
    }
  }
}

Seperti yang kamu lihat, saya tidak harus mengatur event onclick. Pada awalnya event tersebut sudah aktif. Begitu pula, saya bisa menghapus opsi lain seperti "detect_on":"canvas" pada interactivity dan "straight":false pada move. Saya membiarkannya agar pemula tidak bingung tentang hal seperti kenapa partikel tidak bergerak dalam garis lurus.

Kamu bisa mencoba berbagai nilai yang berbeda untuk mengubah salju pada demo CodePen berikut.

Penutup

Memulai dengan Particles.js mudah. Jika kamu tidak pernah menggunakan sistem partikel sebelumnya, library ini akan membantu kamu memulai dengan cepat. Tutorial ini hanya pengenalan dasar untuk library Particle.js. Pada dua tutorial berikutnya, saya akan membahas aspek lain library ini dengan lebih detail.

Jika kamu punya pertanyaan tentang tutorial ini, beritahu saya pada komentar.