another fireworks attempt - wip

by Amanda Williamson

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var W = canvas.width = 500;
var H = canvas.height = 500;
var particlesNum = 50;
var arr = [];

var values = {x: 100, y: 400, w: 2, h: 50, s: 5};

function draw() {
  ctx.clearRect(0,0,500,500);
  for(var i = 0; i < 10; i++) {      
    ctx.fillRect(values.x,values.y,values.w,values.h);
  }
  move();
}

function move() {   
  for(var i = 0; i < 10; i++){ 
    values.y -= values.s;
    if(values.y < 100){
      explode();
      values.y += H;
    }
  }
}

for (var i = 0; i < particlesNum; i++) {
  arr.push({
    h: Math.random() * 50, //height 
    a: Math.PI / Math.random() * 180 //angle
  });
}

function explode() {
  //ctx.clearRect(0,0,W,H);
  for(var i = 0; i < particlesNum; i++) {
    ctx.translate(100, 100); 
    ctx.rotate(arr[i].a);
    ctx.translate(-100, -100);
    ctx.fillStyle = 'blue';
    ctx.fillRect(100, 100, 2, arr[i].h);
  }  
  //values.y = H;
  //console.log(values.y);
}

//setInterval(draw,100);

/*for(var i = 20; i > 0; i--){
    values.y += i;
    values.x += i;
    //ctx.fillRect(values.x,values.y,values.w,values.h);
    console.log(values.y, values.x);
  }*/