IT Forum

Sejak tahun 2012 hingga sekarang, JavaScript selalu menjadi bahasa pemrograman paling populer di [StackOverflow]() (sebuah situs populer tanya jawab seputar pemrograman) melalui StackOverflow Developer Survey.

Survey penggunaan bahasa pemrograman terpopuler di tahun 2019

Berfokus pada bidang desain serta artistik, kehadiran P5.js sebagai subsider dari Javascript selalu memberikan inspirasi tersendiri bagi para pengembang web.

p5js adalah javascript library yang digunakan untuk membuat sketsa, gambar, dan 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

Seringkali, penggunaan P5.js dilibatkan dalam pemberian efek background (maupun transisi) pada suatu website. Juga, para pengembang web sering berinteraksi dengan bahasa pemrograman terkait sebagai media animasi (melalui berbagai package yang telah mendukung P5.js)

Pada tutorial kali ini kita akan membuat animasi Dripping Effect menggunakan bahasa pemrograman P5.js (Subsider dari JavaScript). Berikut langkah-langkahnya :

1. Persiapkan text editor seperti Notepad++, sublime, Light Table, Atom, dll sebagai media penulisan syntax

2. Buatlah file yang bernama index.html yang berisikan kode sebagai berikut:

1

2

3

4

5

6

7

8

9

10

11

12

<html>

<head>

   <title>Inixindo Dripping Effect</title>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>

   <style>

   </style>

</head>

<body>

    <script>

    </script>

</body>

</html>

 

3. Pada bagian syntax <style>, masukkan kode berikut:

1

2

3

4

5

6

7

html, body {

  margin: 0;

}


canvas {

   display: block;

}

 

4. Nantinya, bagian <style> akan memiliki struktur kode sebagai berikut, untuk lebih jelasnya lihat pada ilustrasi dibawah ini :

 

5. Pada bagian syntax <script>, masukkan kode berikut:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

  let points;

let stepsPerFrame;


function setup() {

  stepsPerFrame = 5;

  createCanvas(windowWidth, windowHeight);

  noFill();

  strokeWeight(3);

  reset();

}


function draw() {

  for (let i = 0; i < stepsPerFrame; i++) {

     stroke(0, 255 - i * 255 / stepsPerFrame);

     drawLine();

}

}


function reset() {

  document.body.style.backgroundImage = "url('inixindoresize2.png')";

  resetPoints();

}


function resetPoints() {

  points = [];

  for (let i = 0; i < windowWidth; i++) {

     points.push([i, 0]);

}

}


function drawLine() {

  beginShape();

  let atLeastOneOnScreen = false;

  points.forEach(p => {

      vertex(p[0], p[1]);

      p[1] += noise(frameCount / 100 + p[0] / 25);

      if (p[1] < windowHeight * 1.1) {

        atLeastOneOnScreen = true;

 }

     });

     endShape();


     if (!atLeastOneOnScreen) {

       reset();

}

}


function windowResized() {

resizeCanvas(windowWidth, windowHeight);

}

 

6. Nantinya, bagian syntax <scripts> akan memiliki struktur kode sebagai berikut, untuk lebih jelasnya lihat pada ilustrasi dibawah ini :

Tambahan

Pada syntax bagian <scripts> di line 36, kamu bisa menggantinya dengan code background("white");untuk mengganti background warna polos. Kata “white” bisa diganti dengan warna yang lain, atau kalian bisa modifikasi background sesuai selera. (Pada Contoh tutorial ini menggunakan background image).

 

35

36

37

38

function reset() {

document.body.style.backgroundImage = "url('inixindoresize2.png')";

resetPoints();

}



 7. Save file yang telah dimodifikasi sebelumnya dengan shortcut CTRL+S   . Lalu, buka file index.html melalui browser (Google Chrome, Firefox, Internet Explorer).

Jika berhasil, akan muncul halaman website dengan konten animasi dripping effect yang ditandai dengan perubahan (dari background image ke hitam) yang dibentuk seperti halnya lelehan liquid. Sesuaikan penggunaan animasi dripping dengan website yang telah dibuat.

Demikian tutorial cara membuat animasi dripping dengan Javascript semoga bermanfaat, cukup mudah bukan?

Jika ingin memperdalam lebih jauh tentang javascript Inixindo punya trainingnya loh untuk info lebih lanjut mengenai training HTML Javascript dan CSS silahkan klik https://inixindo.co.id/index.php/trainings/web-app-dev/420-html-css3-js

You are not authorised to post comments.

Comments powered by CComment

Silahkan Login untuk memberikan komentar.