77 lines
2.8 KiB
JavaScript
77 lines
2.8 KiB
JavaScript
const canvas = document.getElementById('matrix');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
|
||
const chars = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん0123456789!#$%&'()*+,-./:;<=>?@";
|
||
const fontSize = 14;
|
||
let columns = Math.floor(canvas.width / fontSize);
|
||
let drops = Array.from({ length: columns }, () => Math.random() * canvas.height / fontSize);
|
||
|
||
// Récupère les zones à masquer : formulaire + tableau
|
||
function getMaskRects() {
|
||
const rects = [];
|
||
const form = document.getElementById('search-form');
|
||
if (form) rects.push(form.getBoundingClientRect());
|
||
const table = document.getElementById('results-table');
|
||
if (table) rects.push(table.getBoundingClientRect());
|
||
return rects;
|
||
}
|
||
|
||
// Calcul de l'opacité selon distance au centre de la zone
|
||
function opacityForPosition(x, y, rects) {
|
||
if (!rects || rects.length === 0) return 1;
|
||
let minOpacity = 1;
|
||
rects.forEach(rect => {
|
||
const cx = rect.left + rect.width / 2;
|
||
const cy = rect.top + rect.height / 2;
|
||
const dx = x - cx;
|
||
const dy = y - cy;
|
||
const distance = Math.sqrt(dx*dx + dy*dy);
|
||
const radius = Math.max(rect.width, rect.height) * 0.8;
|
||
|
||
let alpha;
|
||
const inner = radius * 0.3; // centre complètement transparent réduit
|
||
const outer = radius; // bord complet visible
|
||
|
||
if (distance < inner) alpha = 0;
|
||
else if (distance > outer) alpha = 1;
|
||
else alpha = (distance - inner) / (outer - inner); // transition plus large
|
||
|
||
if (alpha < minOpacity) minOpacity = alpha;
|
||
});
|
||
return minOpacity;
|
||
}
|
||
|
||
function draw() {
|
||
ctx.fillStyle = "rgba(0,0,0,0.05)";
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
ctx.font = fontSize + "px monospace";
|
||
|
||
const maskRects = getMaskRects();
|
||
|
||
for (let i = 0; i < drops.length; i++) {
|
||
const text = chars.charAt(Math.floor(Math.random() * chars.length));
|
||
const x = i * fontSize;
|
||
const y = drops[i] * fontSize;
|
||
|
||
const alpha = opacityForPosition(x, y, maskRects);
|
||
ctx.fillStyle = `rgba(0,255,65,${alpha})`;
|
||
ctx.fillText(text, x, y);
|
||
|
||
if (y > canvas.height && Math.random() > 0.98) drops[i] = 0;
|
||
drops[i]++;
|
||
}
|
||
}
|
||
|
||
setInterval(draw, 20);
|
||
|
||
window.addEventListener('resize', () => {
|
||
canvas.width = window.innerWidth;
|
||
canvas.height = window.innerHeight;
|
||
columns = Math.floor(canvas.width / fontSize);
|
||
drops = Array.from({ length: columns }, () => Math.random() * canvas.height / fontSize);
|
||
});
|