86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
// 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);
|
|
});
|