HTML5 Particles Colliding v.2

Readme
JavaScript 169 lines
HTML 1 lines
CSS 3 lines

HTML5 Particles Colliding v.2

var SCREEN_WIDTH = 900;
var SCREEN_HEIGHT = 500;

var RADIUS = 110;

var RADIUS_SCALE = 1;
var RADIUS_SCALE_MIN = 1;
var RADIUS_SCALE_MAX = 1.5;

var QUANTITY = 100;

var canvas;
var context;
var particles;

var mouseX = (window.innerWidth - SCREEN_WIDTH);
var mouseY = (window.innerHeight - SCREEN_HEIGHT);

var targetX = 0;
var targetY = 0;

var PARTICLE_SIZE = 10;

init();

function init(){

canvas = document.getElementById('world');

if(canvas && canvas.getContext){
       context = canvas.getContext('2d');
       context.globalCompositeOperation = 'destination-over';
       //document.addEventListener('mousemove', documentMouseMoveHandler, false);
       //document.addEventListener('mousedown', documentMouseDownHandler, false);
       //document.addEventListener('mouseup', documentMouseUpHandler, false);
       window.addEventListener('resize', windowResizeHandler, false);
       //canvas.addEventListener('touchmove', canvasTouchMoveHandler, false);
       windowResizeHandler();

createParticles();

setInterval(loop, 1000/60);
   }

}

function createParticles(){

particles = [];
        var depth = 0;

for (var i = 0; i < QUANTITY; i++) {

var posX = PARTICLE_SIZE/2 + Math.random() * (window.innerWidth - PARTICLE_SIZE/2)
                var posY = PARTICLE_SIZE/2 + Math.random() * (window.innerHeight - PARTICLE_SIZE/2);

var speed = 2;
                var directionX = -speed + (Math.random() * speed*2);
                var directionY = -speed + (Math.random()* speed*2);

var particle = {
                        position: { x: posX, y: posY },
                        size: PARTICLE_SIZE,
                        directionX: directionX,
                        directionY: directionY,
                        speed: speed,
                        targetX: posX,
                        targetY: posY,
                        depth: depth,
                        index:i,
                        //fillColor: '#ccc'
                        fillColor: '#' + (Math.random() * 0x00eaff + 0xff0000 | 0).toString(16)
                };

particles.push( particle );
        }
}

function documentMouseMoveHandler(event) {
        mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * .5;
        mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * .5;
        targetX = mouseX - window.innerWidth / 2;
        targetY = mouseY - window.innerHeight / 2;
}

function loop(){

context.fillStyle = 'rgba(0,0,0,0.2)';
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);

var z = 0;
        var xdist = 0;
        var ydist = 0;
        var dist = 0;

for (var i=0; i < particles.length; i++){

var particle = particles[i];

var lp = { x: particle.position.x, y: particle.position.y };

if(particle.position.x <=particle.size/2 || particle.position.x >= SCREEN_WIDTH - PARTICLE_SIZE/2){
                particle.directionX *= -1;
            }

if(particle.position.y <=particle.size/2 || particle.position.y >= SCREEN_HEIGHT - PARTICLE_SIZE/2){
                particle.directionY *= -1;
            }

particle.position.x -= particle.directionX;
            particle.position.y -= particle.directionY;

context.beginPath();
            context.fillStyle = particle.fillColor;
            context.lineWidth = particle.size;
            context.moveTo(lp.x, lp.y);
            context.arc(particle.position.x, particle.position.y, particle.size/2, 0, Math.PI*2, true);
            context.closePath();
            context.fill();

}
}

function randomiseDirection (particle) {

//pick a random deg
    var d = 0;
    while((d == 0) || (d == 90) || (d == 180) || (d == 360)) {
        d = Math.floor(Math.random() * 360);
    }
    //convert to r
    var r = (d * 180)/Math.PI;

//use to calculate vectors
    particle.directionX = Math.sin(r) * particle.speed;
    particle.directionY = Math.cos(r) * particle.speed;

//check
    // if ((Math.abs(this.xspeed) < 2) || (Math.abs(this.yspeed) < 2)) {
    //  this.randomiseDirection();
    // }

}

function canvasTouchMoveHandler(event) {
        if(event.touches.length == 1) {
            event.preventDefault();

mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;
            mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;

targetX = event.touches[0].pageX - window.innerWidth / 2;
            targetY = event.touches[0].pageY - window.innerHeight / 2;

}
}

function windowResizeHandler() {
        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;
        canvas.width = SCREEN_WIDTH;
        canvas.height = SCREEN_HEIGHT;
}