Cara Membuat Animasi Waterfall dengan Javascript

Berfokus pada bidang desain serta artistik, kehadiran P5.js sebagai subsider dari Javascript selalu memberikan inspirasi tersendiri bagi para pengembang web. 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).

Sebagai presentasi dari fungsionalitas animasi, pada artikel kali ini, kita akan membuat animasi waterfall menggunakan bahasa pemrograman P5.js (subsider dari Javascript).

Langkah:

1. Persiapkan text editor (notepad, sublime text, dan sebagainya) sebagai media pengetikan syntax nantinya.

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

<html>
<head>
  <title>Inwepo Waterfall</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
  <style>
  </style>
</head>
<body>
  <script>
  </script>
</body>
</html>

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

body {
  padding: 0; 
  margin: 0; 
  overflow: hidden;
}

.container {
  display: block;
  background-color: transparent;
  width: 800px;
  height: 50px;
  position: absolute;
  top: 42%;
  left: 100%;
  margin-left: -400px;
  margin-top: -25px;
  color: white;
  margin: 0 auto;
  display: block;
  animation: glow 6s linear forwards, scroll 6s linear forwards;
}

@keyframes glow {
  0% {color: transparent; }
  35% {color: white; }
  65% {color: white; }
  75% {color: transparent; }
  100% {color: transparent; }
  
}

@keyframes scroll {
  0% {left: 100%;}
  100% {left: -100%;}
}

Nantinya, bagian <style> akan memiliki struktur kode sebagai berikut:

<style>
	body {
	  padding: 0; 
	  margin: 0; 
	  overflow: hidden;
	}

	.container {
	  display: block;
	  background-color: transparent;
	  width: 800px;
	  height: 50px;
	  position: absolute;
	  top: 42%;
	  left: 100%;
	  margin-left: -400px;
	  margin-top: -25px;
	  color: white;
	  margin: 0 auto;
	  display: block;
	  animation: glow 6s linear forwards, scroll 6s linear forwards;
	}

	@keyframes glow {
	  0% {color: transparent; }
	  35% {color: white; }
	  65% {color: white; }
	  75% {color: transparent; }
	  100% {color: transparent; }
	  
	}

	@keyframes scroll {
	  0% {left: 100%;}
	  100% {left: -100%;}
	}
</style>

4. Pada bagian <script>, masukkan kode berikut:

var waterfall = [];
var dropletWidth = .15;
var droplets = 1050;
var angle = 21;

function setup() {
  if (window.innerWidth < 801) droplets = 400; //reduce drops on small displays
  noStroke();
  colorMode(RGB, 255, 255, 255, 1);
  createCanvas(window.innerWidth, window.innerHeight);
  for (var i = 0; i < droplets; i++) {
    var x = random(width);
    var y = random(-height); //start off screen
    var r = random(0.2, 1.2);
    var h = random(20, 255); //amount of blue
    var b = random(10, 250); //opacity
    var s = random(0.02, 0.06); //speed
    waterfall[i] = new WaterFall(x, y, r, h, b, s); //create waterfall droplets
  }
}



function draw() {
  var blue = random(0, 60);
   background(30 - (blue / 3), 30 - (blue / 3), blue, .07);
  strokeWeight(dropletWidth / 1.52);
  for (var i =0; i < droplets; i++) {
    waterfall[i].move();
    waterfall[i].display();
  }
  header();
}

function WaterFall(tempX, tempY, tempDiameter, tempHue, tempB, s) {
  this.x = tempX;
  this.y = tempY;
  this.diameter = tempDiameter;
  this.h = tempHue;
  this.b = tempB;
  this.s = s;
  this.move = function() {
    
    var range = 1;
    var xspeed = this.s;
    angle += xspeed;
    var tx = sin(angle) * range;
    var ty = random(1, 5)+530*this.s;

    this.x += (tx);
    if ((this.x > width+(dropletWidth)) || (this.x < -dropletWidth)) { this.x = round(random(width / dropletWidth)) * dropletWidth; }
    this.y += (ty);
    if (this.y > height) { this.y = random(-height); this.x = random(width);}
}
  
  this.display = function() {
  stroke(140, 140, 255, 1);
   line(this.x, this.y, this.x, this.y + this.s * 5000);
  }
}

function header(){
	fill(24, 24, 24);
	rect(0,0,width,100);
	fill(255);
	textFont('Segoe UI');
	textSize(50);
	textAlign(CENTER);
	text("Inwepo Waterfall", width/2, 60);
	textSize(12);
	text("klik animasi dibawah untuk mengubah efek waterfall", width/2, 90);
}

function mousePressed() {
  dropletWidth = random(0.05, 2);
  droplets = round(random(200, 1000));
  if (dropletWidth < .5) droplets = round(random(30, 1200));
  if (window.innerWidth < 801) droplets = round(random(20, 300));
  for (var i = 0; i < droplets; i++) {
    var x = random(width);
    var y = random(-height);
    var r = random(0.2, 1.2);
    var h = random(20, 255);
    var b = random(10, 150);
    var s = random(0.03, 0.05);
    waterfall[i] = new WaterFall(x, y, r, h, b, s);
  }
}

Nantinya, bagian <script> akan memiliki struktur kode sebagai berikut:

<script>
	var waterfall = [];
	var dropletWidth = .15;
	var droplets = 1050;
	var angle = 21;

	function setup() {
	  if (window.innerWidth < 801) droplets = 400; //reduce drops on small displays
	  noStroke();
	  colorMode(RGB, 255, 255, 255, 1);
	  createCanvas(window.innerWidth, window.innerHeight);
	  for (var i = 0; i < droplets; i++) {
		var x = random(width);
		var y = random(-height); //start off screen
		var r = random(0.2, 1.2);
		var h = random(20, 255); //amount of blue
		var b = random(10, 250); //opacity
		var s = random(0.02, 0.06); //speed
		waterfall[i] = new WaterFall(x, y, r, h, b, s); //create waterfall droplets
	  }
	}



	function draw() {
	  var blue = random(0, 60);
	   background(30 - (blue / 3), 30 - (blue / 3), blue, .07);
	  strokeWeight(dropletWidth / 1.52);
	  for (var i =0; i < droplets; i++) {
		waterfall[i].move();
		waterfall[i].display();
	  }
	  header();
	}

	function WaterFall(tempX, tempY, tempDiameter, tempHue, tempB, s) {
	  this.x = tempX;
	  this.y = tempY;
	  this.diameter = tempDiameter;
	  this.h = tempHue;
	  this.b = tempB;
	  this.s = s;
	  this.move = function() {
		
		var range = 1;
		var xspeed = this.s;
		angle += xspeed;
		var tx = sin(angle) * range;
		var ty = random(1, 5)+530*this.s;

		this.x += (tx);
		if ((this.x > width+(dropletWidth)) || (this.x < -dropletWidth)) { this.x = round(random(width / dropletWidth)) * dropletWidth; }
		this.y += (ty);
		if (this.y > height) { this.y = random(-height); this.x = random(width);}
	}
	  
	  this.display = function() {
	  stroke(140, 140, 255, 1);
	   line(this.x, this.y, this.x, this.y + this.s * 5000);
	  }
	}

	function header(){
		fill(24, 24, 24);
		rect(0,0,width,100);
		fill(255);
		textFont('Segoe UI');
		textSize(50);
		textAlign(CENTER);
		text("Inwepo Waterfall", width/2, 60);
		textSize(12);
		text("klik animasi dibawah untuk mengubah efek waterfall", width/2, 90);
	}

	function mousePressed() {
	  dropletWidth = random(0.05, 2);
	  droplets = round(random(200, 1000));
	  if (dropletWidth < .5) droplets = round(random(30, 1200));
	  if (window.innerWidth < 801) droplets = round(random(20, 300));
	  for (var i = 0; i < droplets; i++) {
		var x = random(width);
		var y = random(-height);
		var r = random(0.2, 1.2);
		var h = random(20, 255);
		var b = random(10, 150);
		var s = random(0.03, 0.05);
		waterfall[i] = new WaterFall(x, y, r, h, b, s);
	  }
	}
</script>

5. Save file yang telah dimodifikasi sebelumnya. Lalu, buka file index.html melalui browser kamu. Jika berhasil, nantinya halaman website akan menampilkan konten teks serta animasi rintik air / waterfall menyertakan pewarnaan animasi yang telah ditetapkan oleh syntax yang kita deklarasikan sebelumnya. Sesuaikan penggunaan waterfall dengan website yang telah kamu buat.

Demikian tutorial cara membuat animasi waterfall dengan Javascript. Semoga bermanfaat.

Komentar

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed

Copyright © 2020 Inwepo - All Rights Reserved.

To Top