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
Posting Komentar