Animasi Lingkaran Abstrak Futuristik dengan HTML5 Canvas


Salah satu fungsi menggambar yang menarik bagi penulis di HTML5 Canvas, adalah fungsi arc.

Fungsi arc dipergunakan untuk membuat gambar lingkaran.

Dengan menggambarnya dalam bentuk stroke, dan menggunakan setting lebar garis (lineWidth) yang berbeda-beda setiap lingkarannya akan di dapat gambar seperti di atas.

Sedangkan dengan animasinya diorientasikan pada dua hal, yaitu rotasi dan panjang dari arc.

Animasi rotasi dilakukan tiap frame, dengan arah sesuai nilai a di setiap lingkarannya, dan diperbaharui minimal tiap 50 frame.

Kemudian dalam tiap 50 frame itu juga, diperbaharui nilai panjang arc, jika panjang lebih kecil dari panjang lingkaran yang terbaru, maka panjang akan ditambah. Sebaliknya, jika panjang lebih besar, maka akan dikurangi.

Untuk melihat hasil animasinya dapat dilihat pada video dengan link di sini.

Kode berikut ini adalah kode HTML5 Canvas, generate animasi di atas:
<html> 
<head> 
<title>Circles Animation</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var jeda=50; 
 
class Lingkaran 
{ 
 constructor(x,y,rot) 
 { 
  this.x=x; 
  this.y=y; 
  this.rot=rot; 
  this.vec=0; 
  this.a=-10+20*Math.random(); 
  this.r=50+200*Math.random(); 
  this.lineWidth=Math.floor(2+150.0*Math.random()); 
  if(0.5*this.lineWidth>this.r)this.lineWidth=this.r; 
  this.panjang=Math.floor(10+260.0*Math.random()); 
  this.panjango=this.panjang; 
  this.jeda=jeda; 
 } 

 move() 
 { 
  this.vec+=this.a; 
  var bts=1; 
  if(this.vec<-bts)this.vec=-bts; 
  if(this.vec>bts)this.vec=bts; 
  if(this.panjango>this.panjang)this.panjango--; 
  if(this.panjango<this.panjang)this.panjango++; 
  this.rot+=this.vec; 
  this.jeda--; 
  if(this.jeda<=0)this.jeda=jeda+Math.floor(100.0*Math.random()); 
  if(this.jeda==1){ 
   this.a=-1+2.0*Math.random(); 
   this.panjang=Math.floor(5+155.0*Math.random()); 
  } 
 } 
} 
 
circle=[]; 
 
for(i=0;i<10;i++)circle[i]=new Lingkaran(0.5*canvas.width,0.5*canvas.height,-180+360.0*Math.random()); 
 
function Menggambar() 
{ 
 var ctx = canvas.getContext("2d"); 
 ctx.globalAlpha=1.0; 
 ctx.fillStyle = "#01579b"; 
 ctx.fillRect(0,0,canvas.width,canvas.height); 

 ctx.strokeStyle = "#03a9f4"; 
 ctx.lineWidth=10; 
 ctx.beginPath(); 
 ctx.arc(0.5*canvas.width,0.5*canvas.height,15,0,2*Math.PI); 
 ctx.stroke(); 
 ctx.closePath(); 

 ctx.lineWidth=4; 
 ctx.beginPath(); 
 ctx.arc(0.5*canvas.width,0.5*canvas.height,200,0,2*Math.PI); 
 ctx.stroke(); 
 ctx.closePath(); 

 ctx.lineWidth=4; 
 ctx.beginPath(); 
 ctx.arc(0.5*canvas.width,0.5*canvas.height,300,0,2*Math.PI); 
 ctx.stroke(); 
 ctx.closePath(); 
 
 for(i=0;i<circle.length;i++){ 
  circle[i].move(); 

  ctx.save(); 
  ctx.translate(circle[i].x,circle[i].y); 
  ctx.rotate(circle[i].rot* Math.PI / 180); 
  ctx.strokeStyle = "#01DCFC"; 
  ctx.globalAlpha=0.8; 
  ctx.lineWidth=circle[i].lineWidth; 
  ctx.beginPath(); 
  ctx.arc(0,0,circle[i].r,0,circle[i].panjango*Math.PI/180); 
  ctx.stroke(); 
  ctx.closePath(); 
  ctx.restore(); 
 } 
 window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html> 

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Cara Menentukan Arah Kiblat Menggunakan Google Maps

Algorithma FPB dan KPK dengan Javascript

Menampilkan Undetermined Circle Progressbar di Java

Tutorial Upload File ke Google Drive dari Website

Genetics Algorithm Method with Progressive Error Prediction

Kaidah Baku untuk Konsistensi Data (PT, Tbk, Pty., & Ltd.)

Menambahkan Random Key sebagai ID Pembeda di Google Sheet dengan Apps Script

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak