HTML5의 Canvas에서 초신성 폭발을 목표로

let canvas = null;
let ctx = null;

function drawRects(time, n, size, r, g, b, a, sx, sy) {
    if (n <= 0) {
        throw new Error('invalid number');
    }

    let piece = 360/n;
    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;

    for (let i = 0; i < n; ++i) {
        let dx = Math.cos(i*piece * Math.PI/180);
        let dy = Math.sin(i*piece * Math.PI/180);
        let x = canvas.width/2 + dx*time * sx;
        let y = canvas.height/2 + dy*time * sy;
        ctx.fillRect(x, y, size, size);
    }
}

function drawBomb(time) {
    let stime = Math.abs(Math.sin(time))*4;

    for (let i = 0; i < 4; ++i) {
        let r = 150+Math.cos(time*i)*100;
        let g = 50+Math.abs(Math.sin(time) * 100);
        let b = 20+Math.abs(Math.sin(i) * 20);
        let a = 255-Math.sin(time)*100;
        drawRects(time*4 + i*20, 48/Math.max(i, 1), 4+i, r, g, b, a, Math.cos(i)*2, 0.8);
    }
}

function run() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.width = 800;
    canvas.height = 600;

    ctx = canvas.getContext('2d');
    let time = 0;

    setInterval(() => {
        ctx.fillStyle = 'rgb(0, 0, 0)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        drawBomb(time);
        drawBomb(time/2);
        drawBomb(time/4);
        drawBomb(time/8);

        time += 1;
    }, 1000/60);
}

window.addEventListener('load', run, false);