Matrix-Style Rain Patterns in HTML

I previously made a Matrix rain in Python. Now, I am going to use HTML for the MATRIX. As we know, HTML is a markup language. This speeds up the process, and makes it more realistic.

Supplies

You will need a HTML coding software. I use Visual Studio Code. In Visual Studio Code, create 3 files.

Main.html [The markup language]

Command.css [The description]

Main.js [The code]

The HTML Code

The HTML code basically connects the CSS and JS code and defines the canvas for the Matrix.

<!DOCTYPE html>: Defines the document type as HTML5.

<canvas></canvas>: An HTML canvas element where the animation is drawn.

The CSS Code

This CSS code makes the matrix more realistic to see and use.

* {margin: 0; padding: 0;}: Removes default margin and padding from all HTML elements to prevent unwanted spacing.

body {background: #000;}: Sets the background of the entire webpage to black (#000).

canvas {display: block;}: Ensures that the canvas fills its parent container, removing inline elements’ default behavior of having extra space around them.

JS - Canvas Initialization

We first grab the <canvas> element and set up its 2D drawing context. The canvas is like a blank sheet that we’ll be drawing the falling letters on.

• canvas: Refers to the <canvas> element.

• ctx: This is the 2D context, which allows us to draw 2D shapes and text.

JS - Set the Canvas Size

We set the size of the canvas to be equal to the size of the browser window. This ensures that the canvas fills the entire screen.

• canvas.width and canvas.height: These properties set the width and height of the canvas to the size of the browser window.

JS - Set Up the Letters

We define the characters (letters and numbers) that will be falling down the screen. We split this string into an array so we can easily pick random letters later on. This can have any character in the computer system!

• letters: This is an array containing all the characters that will be displayed on the screen.

JS - Set Up the Columns

Now we need to figure out how many vertical columns we can fit on the screen. This is done by dividing the canvas width by the size of each character (the font size).

• fontSize: This is the size of each character in pixels (10 pixels).

• columns: The number of columns on the canvas, calculated by dividing the canvas width by the font size. For example, if the canvas is 1000 pixels wide and the font size is 10, there will be 100 columns.

JS - Initialize the Drops

We create an array called drops where each element represents the vertical position of a falling letter in a particular column. At first, all drops are positioned at the top of the canvas (i.e., their position is set to 1).

• drops: An array where each element represents the vertical position of the drop (falling letter) in its column.

JS - Clear the Canvas With a Fading Effect

This is the most important part of the code. In the draw function, we update the canvas with new letters and move them down the screen. Before we draw the new frame of letters, we slightly cover the canvas with a semi-transparent black colour. This doesn’t fully erase the old letters but makes them fade out gradually, giving the illusion of motion trails behind the falling letters.

• ctx.fillStyle = 'rgba(0, 0, 0, .1)': Sets the fill color to a semi-transparent black. The .1 means 10% opacity, which makes the old letters fade slowly.

• ctx.fillRect(0, 0, canvas.width, canvas.height): This fills the entire canvas with the transparent black rectangle, “refreshing” the background while still allowing some of the previous frame to show through. This creates a smooth trail behind the falling letters.

JS - Loop Through Each Column

We loop through every column on the canvas. Each column is represented by its index in the drops array, which stores the vertical position of the falling letter for that column.

• for (var i = 0; i < drops.length; i++): This loop goes through every column (i.e., each element in the drops array). The number of columns is determined by the width of the canvas and the font size.

JS - Pick a Random Letter for Each Column

For each column, we randomly pick one letter or number from our letters array. This is the letter that will fall down that specific column during this frame of the animation.

• letters[Math.floor(Math.random() * letters.length)]: Math.random() generates a random number between 0 and 1 (decimal value). By multiplying it by letters.length, we get a random index from the letters array, and Math.floor ensures it’s a whole number. This gives us a randomly chosen character (like ‘A’, ‘B’, ‘9’, etc.) for that column.

JS - Draw the Letter

Now we draw the randomly chosen letter at its appropriate position on the canvas. The position is determined by the column number (i) and the drop’s current vertical position (stored in the drops array).

• ctx.fillStyle = '#0f0': Sets the color of the text to bright green (hex code #0f0).

• ctx.fillText(text, i * fontSize, drops[i] * fontSize):

• i * fontSize places the letter horizontally in its correct column (each column is fontSize wide).

• drops[i] * fontSize places the letter vertically at the current drop position (which increases as the letter falls).

JS - Move the Letter Down

After drawing the letter, we want it to move further down the screen in the next frame. To do that, we increase its position in the drops array by 1, so that in the next frame, it will be drawn lower on the screen.

• drops[i]++: Increases the vertical position of the letter in this column by 1, making it “fall” down in the next frame.

JS - Reset the Drop If It Reaches the Bottom

Once a letter reaches the bottom of the canvas, we reset its position back to the top. The Math.random() > .95 part ensures that the letters reset randomly, so not all letters reach the top at the same time, adding variation to the effect. This colses the function

• drops[i] * fontSize > canvas.height: This checks if the drop’s position has moved past the bottom of the canvas. If so, the drop needs to reset to the top.

• Math.random() > .95: This adds a small 5% chance for the drop to reset to the top. It ensures that not all the letters reset at the same time, making the animation feel more natural and staggered.

• drops[i] = 0: Resets the drop’s position back to the top of the screen, ready to start falling again.

Animate the Canvas

And thats it! The setInterval function calls the draw function every 50 milliseconds, making the animation continuous. Each call to draw updates the canvas with the falling letters at their new positions.

• Animation loop: Every 50 milliseconds (i.e., 20 times per second), the draw function is called to update the canvas and make the letters move down.

Summary

1. We set up the canvas to fill the screen.

2. We define the letters that will fall.

3. We determine how many columns can fit on the screen.

4. For each column, we create a drop that moves down the screen by increasing its position over time.

5. As each letter falls, it is drawn on the canvas and then slowly moved down. Once it reaches the bottom, it resets to the top to continue falling, creating a continuous stream of letters.

6. The setInterval keeps calling draw to update the animation, making it look like letters are constantly falling from top to bottom.

This has been an amazing experience for me, and I hope you try it. If you do, comment down below on how I can make it better! Bye now.