fireworks - wip

by Amanda Williamson

HTML

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

CSS

canvas {
  border: solid 1px red;
}

JavaScript

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

var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W - 50;
canvas.height = H - 100;

var particlesNum = 50;
var arr1 = [];
var arr2 = [x:100,y:canvas.height,w:2,h:20,s:Math.random()*10+2];

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

function drawInitial() {
  moveUp();
}

function moveUp() { 
  //ctx.moveTo(200,200);
  /*for(var i = 0; i < 100; i++) {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.moveTo(100,canvas.height-20);
    ctx.fillStyle = 'green';
    ctx.fillRect(100,canvas.height-i,2,20); 
    ctx.moveTo(100,-100+i);     
  }*/
    

    ctx.fillStyle = 'green';
    ctx.fillRect(100,canvas.height-i,2,20);   
    
    for(var i = 0; i< 100; i++){ 
     arr2[i].y += arr[i].s;
     if(arr[i].y > H){
      arr[i].y =- arr[i].h;
     }
    }
}

function drawMany() {
  for(var i = 0; i < particlesNum; i++) {
    //ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.translate(100, 100); 
    ctx.rotate(arr1[i].a);
    ctx.translate(-100, -100);
    ctx.fillStyle = 'blue';
    ctx.fillRect(100, 100, 2, arr1[i].h);
  }
}


//drawInitial();
//drawMany();

//setInterval(drawInitial,500);