var canvas = document.getElementsByTagName("canvas")[0];

  var context = canvas.getContext("2d");
  var g = 0.000000003;
  var size = 0;


  function sleep(t){
    return new Promise(resolve => {
      setTimeout(resolve, t);
    });
  }
  function nextTick(){
    return new Promise(resolve => {
      requestAnimationFrame(resolve);
    });
  }
  async function createSprite(color, p, v, t){
    let begin = Date.now();
    let dt;
    while( (dt = Date.now() - begin) < t) {
      context.fillStyle = color;
      context.clearRect(p[0]-1, p[1]-1 , 7, 7); 
      context.fillRect(p[0] += (v[0] * dt), p[1] += (v[1] * dt), 5, 5); 
      v[1] += g * t 
      await nextTick();
    }
    context.clearRect(p[0]-1, p[1]-1 , 6, 6); 
  }
  

  function boom(p){
    let v = 0.001
    for(let i = 0; i < 15; i ++) {
      let angel = Math.random() * Math.PI * 2;
      createSprite(randomColor(), p.slice(), [Math.sin(angel) * v, Math.cos(angel)*v], 3000 + Math.random() * 1000);
    }
  }
  
  async function start(){
    let width = 1000;
    let height = 500;
    drawName()
    while(true) {
      await sleep(1500);
      for(let j = 0; j < 15; j ++) {
        boom([(Math.random()* width), (Math.random()* height)]);
      }    
    }
  }

  async function drawName(){
    while(true) {
      context.fillStyle = "pink";
      context.font = "bold 50px arial";
      context.fillText("Tang ❤ Maggie", 330, 300);
      await nextTick();
    }
  }

  start();


  function randomColor(){
    var r = Math.floor(Math.random() * 127 + 128).toString(16);
    r.length == 2 || (r = "0" + r);
    var g = Math.floor(Math.random() * 127 + 128).toString(16);
    g.length == 2 || (g = "0" + g);
    var b = Math.floor(Math.random() * 127 + 128).toString(16);
    b.length == 2 || (b = "0" + b);
    return "#" + r + g + b;
  }