azder/matrix.html

## matrix.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Matrix</title>
</head>
<body style="margin:0;padding:0;overflow:hidden">
<canvas id="matrix" width="1280" height="800">
    <script>
        ((canvas, screen, raf) => {

            const width = canvas.width = screen.width;
            const height = canvas.height = screen.height;
            const context = canvas.getContext("2d");

            //noinspection JSPotentiallyInvalidConstructorUsage
            let points = Array(256).fill('1');

            const paint = (
                () => {
                    context.fillStyle = 'rgba(0,0,0,0.05)';
                    context.fillRect(0, 0, width, height);
                    context.fillStyle = 'rgba(0,255,0,1)';
                    points = points.map(
                        (value, index) => {
                            const r = Math.random();
                            context.fillText(
                                String.fromCharCode(Math.floor(2720 + r * 33)),
                                index * 10, value
                            );
                            value += 10;
                            return ( 768 + r * 1e4 < value ) ? 0 : value
                        }
                    );
                }
            );

            const delay = 100;
            let before = 0;
            const loop = (
                time => {
                    if (delay < time - before) {
                        paint();
                        before = time;
                    }
                    raf(loop);
                }
            );

            loop(before);

        })(
            document.getElementById('matrix'),
            window.screen,
            window.requestAnimationFrame
        );
    </script>
</canvas>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Matrix</title>
	</head>
	<body style="margin:0;padding:0;overflow:hidden">
	<canvas id="matrix" width="1280" height="800">
	<script>
	((canvas, screen, raf) => {

	const width = canvas.width = screen.width;
	const height = canvas.height = screen.height;
	const context = canvas.getContext("2d");

	//noinspection JSPotentiallyInvalidConstructorUsage
	let points = Array(256).fill('1');

	const paint = (
	() => {
	context.fillStyle = 'rgba(0,0,0,0.05)';
	context.fillRect(0, 0, width, height);
	context.fillStyle = 'rgba(0,255,0,1)';
	points = points.map(
	(value, index) => {
	const r = Math.random();
	context.fillText(
	String.fromCharCode(Math.floor(2720 + r * 33)),
	index * 10, value
	);
	value += 10;
	return ( 768 + r * 1e4 < value ) ? 0 : value
	}
	);
	}
	);

	const delay = 100;
	let before = 0;
	const loop = (
	time => {
	if (delay < time - before) {
	paint();
	before = time;
	}
	raf(loop);
	}
	);

	loop(before);

	})(
	document.getElementById('matrix'),
	window.screen,
	window.requestAnimationFrame
	);
	</script>
	</canvas>
	</body>
	</html>