$( document ).ready(function() {
var space = document.getElementById("surface");
var surface = space.getContext("2d");
var partState = "lighter";
$('#changer').on('click', function() {
var particle_count = 150;
for(var i = 0; i < particle_count; i++) {
particles.push(new particle());
$(".wrapper").css({width:canvasWidth,height:canvasHeight});
$("#surface").css({width:canvasWidth,height:canvasHeight});
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.setTimeout(callback, 6000 / 60);
this.speed = {x: -1+Math.random()*2, y: -5+Math.random()*5};
canvasWidth = (document.getElementById("surface").width);
canvasHeight= (document.getElementById("surface").height);
this.location = {x: canvasWidth/2, y: (canvasHeight/2)+35};
this.radius = .5+Math.random()*1;
this.life = 10+Math.random()*10;
if (partState==="lighter"){
this.g = Math.round(Math.random()*155);
this.r = Math.round(Math.random()*255);
this.g = Math.round(Math.random()*255);
this.b = Math.round(Math.random()*255);
function ParticleAnimation(){
surface.globalCompositeOperation = "source-over";
surface.fillStyle = "black";
surface.fillRect(0, 0, canvasWidth, canvasHeight);
surface.globalCompositeOperation = partState;
for(var i = 0; i < particles.length; i++)
p.opacity = Math.round(p.death/p.life*100)/100
var gradient = surface.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
surface.fillStyle = gradient;
surface.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
p.location.x += (p.speed.x);
p.location.y += (p.speed.y);
if(p.death < 0 || p.radius < 0){
particles[i] = new particle();
requestAnimFrame(ParticleAnimation);