Algorithma Starfield dengan HTML5 Canvas
Di bawah ini adalah kode animasi starfield dengan menggunakan 800 titik.
Idenya sederhana, mendeteksi posisi mouse sebagai titik tengah arah gerak, titik disebar secara random pada luasan canvas, dan digerakkan menjauhi titik tengah dengan kecepatan tertentu.
Titik tidak disebar begitu saja, tetapi secara kontinyu ditambahkan ke canvas tiap lima frame.
Selain itu, titik tidak digambarkan berupa titik, namun berupa garis, dengan lebar garis yang ukurannya bertambah 0.02 tiap framenya.
<html> <head> <title>Starfield</title> </head> <body> <canvas id="myCanvas" width="1024" height="500"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var points=[]; var n=0; var pox=0.5*canvas.width; var poy=0.5*canvas.height; var Ro=Math.sqrt(pox*pox+poy*poy); var mousePos={x:pox,y:poy}; function getMousePos(canvas, evt){ var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener('mousemove', function(evt) { mousePos = getMousePos(canvas, evt); }, false); function Menggambar() { var ctx = canvas.getContext("2d"); ctx.fillStyle = "black"; ctx.fillRect(0, 0, canvas.width, canvas.height); pox=mousePos.x; poy=mousePos.y; if(n<=0 && points.length<4*200){ points[points.length]=-1000; points[points.length]=-1000; points[points.length]=0; points[points.length]=0; n=5; }else n--; for(i=0;i<points.length/4;i++){ //points[4*i+2]+=0.1; var rx=points[4*i+0]-pox; var ry=points[4*i+1]-poy; var r=Math.sqrt(rx*rx+ry*ry); var ax=points[4*i+0]; var ay=points[4*i+1]; if(r<(2*Ro)){ points[4*i+0]=pox+(r+points[4*i+3])*rx/r; points[4*i+1]=poy+(r+points[4*i+3])*ry/r; points[4*i+2]+=0.02; points[4*i+3]+=0.3; }else{ points[4*i+0]=canvas.width*Math.random(); points[4*i+1]=canvas.height*Math.random(); ax=points[4*i+0]; ay=points[4*i+1]; points[4*i+2]=0; points[4*i+3]=0; } ctx.beginPath(); ctx.strokeStyle="white"; ctx.lineWidth = points[4*i+2]; ctx.moveTo(ax,ay); ctx.lineTo(points[4*i+0],points[4*i+1]); ctx.stroke(); ctx.closePath(); } window.requestAnimationFrame(Menggambar); } Menggambar(); </script> </body> </html>
Komentar
Posting Komentar