MATRIX EFFECT YAY

matrix.js

// Init
function matrix({
	selector = "canvas",
	el = null,
	color = "#0e0",
	font = "15pt monospace",
	fps = 40,
	size = 20,
	width = null,
	height = null,
	getChar = () => String.fromCharCode(Math.random() * 128),
} = {}) {
	const canvas = el || document.querySelector(selector);
	if (window.MATRIX_INTERVAL) {
		clearInterval(window.MATRIX_INTERVAL);
	}
	const ctx = canvas.getContext("2d");
	const w = (canvas.width = width || canvas.parentElement.offsetWidth);
	const h = (canvas.height = width || canvas.parentElement.offsetHeight);
	const cols = Math.floor(w / size) + 1;
	const ypos = Array(cols).fill(0);

	// Clear it
	ctx.clearRect(0, 0, w, h);
	ctx.fillStyle = "#000";
	ctx.fillRect(0, 0, w, h);

	function _matrix() {
		ctx.fillStyle = "#0001";
		ctx.fillRect(0, 0, w, h);
		ctx.font = font;
		ypos.forEach((y, ind) => {
			const x = ind * size;
			// This is what gets passed to the functions
			let args = {
				x,
				y,
				width: w,
				height: h
			};
			const text = getChar(args);
			let col;
			if (typeof color === "function") {
				col = color(args);
			} else {
				col = color;
			}
			ctx.fillStyle = col;
			ctx.fillText(text, x, y);
			if (y > 100 + Math.random() * 10000) ypos[ind] = 0;
			else ypos[ind] = y + size;
		});
	}

	window.MATRIX_INTERVAL = setInterval(_matrix, 1000 / fps);
}

matrix({
	selector: "canvas",
	color: ({
		x,
		y,
		width,
		height
	}) => {
		// Nice diagonal gradient:
		// y / height = percentage down, toString(16) = hex char
		return `#${Math.floor((y / height) * 16).toString(16)}f${Math.floor(
			(x / width) * 16
		).toString(16)}`;
	},
	font: "8px monospace",
	fps: 20,
	size: 8,
	width: window.innerWidth,
	height: window.innerHeight,
});