Animasi Hujan Text Matrix dengan HTML5 Canvas
Film The Matrix adalah salah satu film kesuakaan penulis.
Selain menceritakan seorang programmer, film tersebut merupakan film dengan animasi yang mewah ditahunnya.
Semenjak dulu, penulis ingin sekali membuat animasi hujan text, yang menjadi ciri khas film tersebut.
Dan ternyata, dengan teknologi HTML5 Canvas, animasi itu sangat mudah dibuat, dengan kode yang tidak terlalu rumit.
Algorithmanya terbagi menjadi dua, yaitu mencetak huruf yang diubah secara acak tiap frame, dan yang dicetak hanyalah pada huruf yang posisinya diijinkan dicetak.
Batas boleh dan tidaknya mencetak, penulis tandai dengan variable box, dengan kecepatan berjalan ke bawah minimal 0.02 pergeseran. Di mana jika posisi huruf ketinggiannya lebih kecil sampai sepanjang variabel tinggi, huruf itu dicetak.
Namun pencetakan juga menentukan nilai alpha, semakin jauh huruf dengan posisi box, maka nilai alphanya semakin kecil, yang berarti semakin tidak terlihat.
Berikut ini adalah kode program Javascript yang mengimplementasikan algorithma di atas:
<html> <head> <title>Raining Text</title> </head> <body> <canvas id="myCanvas" width="1024" height="768"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var characters="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; var d=20; var numx=Math.floor(canvas.width/d); var numy=Math.floor(canvas.height/d); var grid=[]; var box=[],tinggi=25,vec=[]; for(i=0;i<numx;i++){ box[i]=-Math.floor(2*numy*Math.random()); vec[i]=0.1+1.0*Math.random(); } var ctx = canvas.getContext("2d"); ctx.font = d+"px Arial"; function Menggambar() { ctx.fillStyle = "black"; ctx.fillRect(0,0,canvas.width,canvas.height); var x=0; while(x*d<canvas.width){ var y=0; while(y*d<canvas.height){ if(y<box[x] && y>box[x]-tinggi){ ctx.save(); var a=1.0-Math.abs(box[x]-y)/tinggi; ctx.fillStyle ="green"; ctx.globalAlpha=a; ctx.shadowColor="green"; ctx.shadowBlur=5; ctx.fillText(characters.charAt(Math.floor(characters.length*Math.random())),x*d,y*d); ctx.restore(); } y++; } box[x]+=vec[x]; if(box[x]-tinggi>numy+15){ box[x]=(Math.random()*100<2)?box[x]:-(Math.floor(numy*Math.random())); vec[i]=0.1+1.0*Math.random(); } x++; } window.requestAnimationFrame(Menggambar); } Menggambar(); </script> </body> </html>
Komentar
Posting Komentar