// Canvas Matrix

const hex = "0123456789ABCDEF".split("");
const jap = "阪熊奈岡鹿梨阜埼茨栃媛".split("");

const matrix = document.getElementById("matrix");
matrix.height = window.innerHeight;
matrix.width = window.innerWidth;
const ctx = matrix.getContext("2d", { alpha: false });

const font_size = 15;
let columns = 0;
let drops = [];
const color = '#FFFFFF';
let lastFrame = performance.now();

const gradient = ctx.createLinearGradient(0, 0, matrix.width, 0);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1 / 7, '#ff8000');
gradient.addColorStop(2 / 7, '#ffff00');
gradient.addColorStop(3 / 7, '#00ff00');
gradient.addColorStop(4 / 7, '#00ffff');
gradient.addColorStop(5 / 7, '#0000ff');
gradient.addColorStop(6 / 7, '#ff00ff');
gradient.addColorStop(1, '#ff0040');



function initDrop(pos) {
    return { pos, speed: Math.random() * 3 + 0.2, text: jap[Math.floor(Math.random()*jap.length)], red: Math.random() > 0.99 };
}

function init() {
    columns = matrix.width / font_size;
    drops = [];
    for(let x=0; x < columns; x++) drops[x] = initDrop(matrix.height);
}

function render() {
        // ctx.clearRect(0, 0, matrix.width, matrix.height);
        ctx.fillStyle = "#465e5e";
        ctx.globalAlpha = 0.1;
        ctx.fillRect(0, 0, matrix.width, matrix.height);
        ctx.globalAlpha = 1.0;
        
        ctx.font = font_size + "px arial";
        
        for(let i=0; i < drops.length; i++){
            const drop = drops[i];

            if (drop.red) {
                ctx.fillStyle = "red";
            } else {
                ctx.fillStyle = color;
            }

            ctx.fillText(jap[Math.floor(Math.random()*jap.length)], i*font_size, drop.pos*(font_size/2));
            
            if(drop.pos*(font_size/2) > matrix.height && Math.random() > 0.98) {
                drops[i] = initDrop(0);
            } else {
                drop.pos += drop.speed;
            }            
        }
}

function renderLoop() {
    const now = performance.now();

    if ((now - lastFrame) > (1000 / 60)) {
        render();
        lastFrame = now;
    }

    requestAnimationFrame(renderLoop);
}

window.addEventListener('resize', () => {
    init();
});

document.addEventListener('DOMContentLoaded', () => {
    init();
    requestAnimationFrame(renderLoop);
});