crazo7924/matrix.html

## matrix.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix rain</title>
</head>
<body style="width: 100vw; height: 100vh; margin: 0; background-color: black; overflow: hidden;">
    <canvas id="main" style="margin: 0; width: inherit; height: inherit;">
    </canvas>
    <script src="matrix.js"></script>
</body>
</html>

## matrix.js
const canvas = document.getElementById("main");
const ctx = canvas.getContext("2d");

let width = canvas.width = document.body.offsetWidth;
let height = canvas.height = document.body.offsetHeight;

let columns = Math.floor(width / 18) + 1;
let y_offsets = Array(columns).fill(0);

function update() {
    ctx.fillStyle = "#0002";
    ctx.fillRect(0, 0, width, height);

    ctx.font = '16pt monospace';
    y_offsets.forEach((y, idx) => {
        // generates a random character
        const text = String.fromCharCode(Math.random() * 127);

        ctx.fillStyle = "green";
        ctx.fillText(text, idx * 18, y);

        // randomly reset the end of the column if it's at least 90px high
        if (y > 90 + Math.random() * 10000) y_offsets[idx] = 0;
        // otherwise just move the y coordinate for the column 18px down,
        else y_offsets[idx] = y + 18;
    });
}

function setup() {
    width = canvas.width = document.body.offsetWidth;
    height = canvas.height = document.body.offsetHeight;

    columns = Math.floor(width / 18) + 1;
    y_offsets = Array(columns).fill(0);

    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, width, height);
}

window.addEventListener('resize', setup);
setup();
setInterval(update, 42);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Matrix rain</title>
	</head>
	<body style="width: 100vw; height: 100vh; margin: 0; background-color: black; overflow: hidden;">
	<canvas id="main" style="margin: 0; width: inherit; height: inherit;">
	</canvas>
	<script src="matrix.js"></script>
	</body>
	</html>
	const canvas = document.getElementById("main");
	const ctx = canvas.getContext("2d");

	let width = canvas.width = document.body.offsetWidth;
	let height = canvas.height = document.body.offsetHeight;

	let columns = Math.floor(width / 18) + 1;
	let y_offsets = Array(columns).fill(0);

	function update() {
	ctx.fillStyle = "#0002";
	ctx.fillRect(0, 0, width, height);

	ctx.font = '16pt monospace';
	y_offsets.forEach((y, idx) => {
	// generates a random character
	const text = String.fromCharCode(Math.random() * 127);

	ctx.fillStyle = "green";
	ctx.fillText(text, idx * 18, y);

	// randomly reset the end of the column if it's at least 90px high
	if (y > 90 + Math.random() * 10000) y_offsets[idx] = 0;
	// otherwise just move the y coordinate for the column 18px down,
	else y_offsets[idx] = y + 18;
	});
	}

	function setup() {
	width = canvas.width = document.body.offsetWidth;
	height = canvas.height = document.body.offsetHeight;

	columns = Math.floor(width / 18) + 1;
	y_offsets = Array(columns).fill(0);

	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, width, height);
	}

	window.addEventListener('resize', setup);
	setup();
	setInterval(update, 42);