Memindahkan Lokasi HTML5 Canvas untuk P5.js

P5.js sangat berguna untuk memvisualisasikan sesuatu secara cepat dan mudah

Terutama dengan bahasa yang digunakannya yaitu Javascript, P5.js sangat mudah diakses oleh banyak orang

Terutama bagi web developer, atau lebih spesifiknya adalah front-end developer yang memang makanan sehari-harinya adalah Javascript

Salah satu cara termudah untuk segera membuat projek P5.js adalah dengan mempergunakan online editornya di https://editor.p5js.org/

Tapi sayangnya editor itu menyembunyikan beberapa implementasi, salah satunya adalah hubungan script p5.js dengan html nya

Bukan hanya online editornya, tapi memang biasaya projek p5.js tidak perlu dipindahkan lokasinya


P5.js sangat berguna untuk membuat visualisasi menarik di web, misalnya menjadikannya sebagai background sebuah website atau webapp

Atau bahkan, meng-embed-nya sebagai bagian dari sebuah postingan seperti yang aku lakukan dibawah

Jadi bagaimana aku melakukannya?

Buat sebuah halaman html dan hubungkan semua dependency yang diperlukan (Dalam hal ini p5.min.js, p5.dom.min.js, p5.sounds.min.js dan tentunya projek p5.js kita, sketch.js)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

Dengan isi sketch.js adalah

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Fungsi createCanvas secara default akan meletakkan HTML5 canvas di bagian terbawah, yang paling terakhir dibuat. Bagaimana cara kita memindahkannya? Dengan memindahkannya kedalam sebuah elemen div

Dalam p5.js references kamu dapat membaca halaman p5.element.parent() untuk keterangan lebih lengkapnya. Fungsinya adalah untuk menyematkan sebuah elemen kedalam elemen lainnya

Kita ingin menyematkan HTML5 canvas kedalam sebuah elemen div. Untuk itu kita bisa memodifikasi html yang kita buat tadi menjadi seperti ini

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <div id="ortu-canvas">
      <!-- Canvas akan disimpan disini -->
    </div>
    <script src="sketch.js"></script>
  </body>
</html>

Yang kita lakukan hanyalah menambahkan sebuah elemen div, memberikannya sebuah id agar kita bisa mereferensikannya nanti (Dalam sketch.js)

Ada satu masalah yang kusadari, jika aku menjadikan elemen div nya self-closing (<div id="ortu-canvas"/>) maka cara ini tidak bekerja. Jadi biarkan saja opening dan closing nya terpisah

Lalu ubah sketch.js menjadi

function setup() {
  let cnv = createCanvas(400, 400);
  cnv.parent("ortu-canvas");
}

function draw() {
  background(220);
}

Yang aku lakukan adalah memasukkan canvas yang dibuat oleh fungsi createCanvas kedalam sebuah variabel (cnv), lalu memanggil fungsi .parent untuk menyematkannya kedalam elemen ber-ID ortu-canvas

Kamu juga bisa menjadikannya satu baris dengan createCanvas(400, 400).parent("ortu-canvas");

Jika kamu ingin meng-embed-nya kedalam sebuah postingan WordPress (Seperti yang kulakukan diatas), kamu bisa membaca tutorial berikutnya

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *