53 lines
1.3 KiB
React
53 lines
1.3 KiB
React
|
import { useEffect } from 'react';
|
||
|
|
import styles from '../styles/Matrix.module.css'
|
||
|
|
|
||
|
|
export default function Matrix({ height, width }) {
|
||
|
|
useEffect(() => {
|
||
|
|
console.log(height, width);
|
||
|
|
const canvas = document.getElementById('waterfall');
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
const w = canvas.width = document.body.offsetWidth;
|
||
|
|
const h = canvas.height = document.body.offsetHeight;
|
||
|
|
const cols = Math.floor(w / 20) + 1;
|
||
|
|
const ypos = Array(cols).fill(0);
|
||
|
|
|
||
|
|
ctx.fillStyle = '#000';
|
||
|
|
ctx.fillRect(0, 0, w, h);
|
||
|
|
|
||
|
|
function matrix() {
|
||
|
|
ctx.fillStyle = '#0001';
|
||
|
|
ctx.fillRect(0, 0, w, h);
|
||
|
|
|
||
|
|
ctx.fillStyle = '#0f0';
|
||
|
|
ctx.font = '15pt monospace';
|
||
|
|
let runningIndex = 0;
|
||
|
|
|
||
|
|
ypos.forEach((y, ind) => {
|
||
|
|
const randVal = Math.random()
|
||
|
|
let text = "";
|
||
|
|
if(randVal > 0.6) {
|
||
|
|
text = String.fromCharCode(Math.random() * 128);
|
||
|
|
} else {
|
||
|
|
const items = ["p", "n", "h"]
|
||
|
|
text = items[runningIndex];
|
||
|
|
runningIndex++;
|
||
|
|
if(runningIndex >= 3) {
|
||
|
|
runningIndex = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const x = ind * 20;
|
||
|
|
ctx.fillText(text, x, y);
|
||
|
|
if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
|
||
|
|
else ypos[ind] = y + 20;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
setInterval(matrix, 50);
|
||
|
|
}, []);
|
||
|
|
return (
|
||
|
|
<canvas height={height} width={width} id={"waterfall"} className={styles.Matrix}>
|
||
|
|
|
||
|
|
</canvas>
|
||
|
|
)
|
||
|
|
}
|