-
-
Save XanderPSON/94795e39fd201d5177236f27159dd8d0 to your computer and use it in GitHub Desktop.
Creates a canvas in the body to draw a Matrix-style rain effect. Generated by ChatGPT. Free to reuse with no attribution required.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function matrixRain() { | |
| const canvas = document.createElement("canvas"); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| canvas.style.position = "fixed"; | |
| canvas.style.top = 0; | |
| canvas.style.left = 0; | |
| canvas.style.zIndex = -1; | |
| document.body.appendChild(canvas); | |
| const context = canvas.getContext("2d"); | |
| const fontSize = 14; | |
| const columns = canvas.width / fontSize; | |
| const drops = []; | |
| for (let i = 0; i < columns; i++) { | |
| drops[i] = 1; | |
| } | |
| function drawMatrixRain() { | |
| context.fillStyle = "rgba(0, 0, 0, 0.1)"; | |
| context.fillRect(0, 0, canvas.width, canvas.height); | |
| context.fillStyle = "#00FF00"; | |
| context.font = fontSize + "px Courier"; | |
| for (let i = 0; i < drops.length; i++) { | |
| const text = String.fromCharCode(Math.random() * 128); | |
| const x = i * fontSize; | |
| const y = drops[i] * fontSize; | |
| context.fillText(text, x, y); | |
| if (y > canvas.height && Math.random() > 0.975) { | |
| drops[i] = 0; | |
| } | |
| drops[i]++; | |
| } | |
| } | |
| setInterval(drawMatrixRain, 50); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment