Skip to content

Instantly share code, notes, and snippets.

@wintercn
Created Apr 21, 2019
Embed
What would you like to do?
tang.js
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment