wintercn/tang.html

## tang.html
<meta charset="utf-8">
<body style="text-align:center">
<canvas width="1000" height="1000" style="background:black;margin:auto;">
</canvas>


<script src="tang.js">
</script>
</body>

## tang.js
  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;
  }
	<meta charset="utf-8">
	<body style="text-align:center">
	<canvas width="1000" height="1000" style="background:black;margin:auto;">
	</canvas>


	<script src="tang.js">
	</script>
	</body>
	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;
	}