Last Good Quote: Son's are the seasoning on our lives. - Someone on Facebook

Saturday, November 2

Particle Emitters - Part I

I've been playing around with Particle Emitters. Those are the cool little animations like star bursts and flowing bubbles that you see in games.

I used the following as a blank canvas for me to work with:

(notice you will need particleFunctions,js and particleEffects.js which are coming in part II and III)

<html>
  <head>
    <script language=javascript src="particleFunctions.js"></script>
    <script language=javascript src="particleEffects.js"></script>
  </head>
  <body>
    <canvas    style="width:300px; height:300px;border:1px solid black;background:black;" width=300 height=300></canvas>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var particles = [];
emitters = new Array();
emitters.push(new WhirlEmitter(new Vector(canvas.width/2+5,canvas.height/2),'green'));
emitters.push(new BeamEmitter(new Vector(canvas.width/2,canvas.height/2),'green'));
    
function loop() {
    clear();
    update();
    draw();
    queue();
}

function clear() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}

function queue() {
  window.requestAnimationFrame(loop);
}

function update() {
  addNewParticles();
  plotParticles(canvas.width, canvas.height);
}

function draw() {
    drawParticles();
}

loop();
</script>

    </body>
</html>










Posted by
mobeamer


at
3:46 PM


























Labels:
,
,



















0
comments:
        












Post a Comment


























Followers