Create Matrix Animation using JavaScript
Tags: javascript, animation, html, css
Published: 2023-09-08 12:39:00



Do you ever wonder how can you add the matrix animation to your website. I do, so I create it.



![Matrix animation using javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aecv0d9y9sc7me7nk6sl.gif)

To recreate this you need a Canvas tag inside your HTML, few lines of CSS to style it as you want and few lines of JavaScript

## why canvas ?

First of all you might have this question in your mind - "Why canvas tag ? can't I do that without casvas tag ?"

Yes, you can do this without using canvas tag. But the canvas make it easy to do.

## Let's create it

First add a `canvas` tag in your html and then add some styling to it like height, width etc.

```html
<style>
	#canvas {
		width: 200px;
		height: 200px;
		/* more sytling if you want */
	}
</style>
<canvas id="canvas"></canvas>
```

And all the work is done for HTML & CSS. From here JS will do everything.

### Let's write some js

To make this easy to understand let's break it in few segments.

1) First, we get a reference to the canvas element and its 2D context, which we'll
   use to draw on the canvas:

```javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
```

In first line, we are selecting the canvas element. You can do this as you want, we can use `document.querySelector()` or we can use other library **JQuery** to this. You just have to select the element and create 2d context of it so you can edit it.

2) Next, we define some variables that will be used in the animation. The `fontSize` variable determines the size of the characters that will be drawn on the canvas. The `columns` variable calculates the number of columns that can fit on the canvas based on its width and the font size. The `drops` array will keep track of the y-coordinate of each column:

```javascript
const fontSize = 10;
const columns = canvas.width / fontSize;
const drops = new Array(columns).fill(1);
```

Since all the columns will be at the very top while the animation starts so fill it with 1 which will denote first row of each column.

3) Now create a function where the magic happens. I named it `draw` you can name it anything you want. This function will be called repeatedly to update the animation on the canvas. First, we set the fill style of the context to a semi-transparent black color and fill the entire canvas with it. This creates a fading effect for the characters as they fall down the canvas:

```javascript
function draw() {
	ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
}
```

4) Next, we set the fill style to green and the font to an Arial font with a size determined by the `fontSize` variable. This green fill style will be the color of the text. You can create another variable at `step 2` where you can store the color of the text so that you can change it easily on run time. Also the font **Arial** to your favourite font family.

```javascript
ctx.fillStyle = "#0f0";
ctx.font = fontSize + "px arial";
```

5) We then loop through each column and draw a random character at its current position. The character is chosen by generating a random number between 33 and 126 (the ASCII codes for printable characters) and converting it to a string using the `String.fromCharCode` method:

```javascript
for (let i = 0; i < drops.length; i++) {
	const text = String.fromCharCode(Math.floor(Math.random() * 94 + 33));
	ctx.fillText(text, i * fontSize, drops[i] * fontSize);
	/* arguments of ctx.fillText()*/
	/* ctx.fillText(textToAdd, xPositonOfTheText, yPositionOfTheText) */
}
```

In this `for loop` variable `i` stores the index of current column.<br/>
Therefore xPositionOfTheText = current column index (or i) x fontSize.<br/>
Simirally yPositionOfTheText = current row index of current column (or drop[i]) x fontSize.

6) After drawing the character, we check if it has reached the bottom of the canvas. If it has, and if a random number is greater than 0.975, we reset its position to 0 so that it starts falling from the top again:

```javascript
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
	drops[i] = 0;
}
```

**Why the random number ?**

So that all the columns have different row index, otherwise all columns are starting together and they will go on forever together. And a reminder - this if block will be inside the `for loop`

If you don't add that random number check then it will be this


![matrix animation without randomness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3oppu8mwi6152q5wqvc1.gif)


7) Finally, we increment the y-coordinate of each column so that the characters move down by one row on each iteration:

```javascript
drops[i]++;
```

This increment is also inside the for loop.

8) To start the animation, we use the `setInterval` function to call the `draw` function every 33 milliseconds:

```javascript
setInterval(draw, 33);
```

One thing I should clearify from step 4 to step 7 all the code blocks are inside the `draw` function


## The End

This animation is not only limited to matrix animation. You can replace that random text by 💧emoji to create rain effect. And much more can be done.

And 

Here is the full code

```html
<canvas id="canvas"> </canvas>

<script>
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");

	const fontSize = 10;
	const columns = canvas.width / fontSize;
	const drops = new Array(columns).fill(1);
	function draw() {
		ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		ctx.fillStyle = "#00f00077";
		ctx.font = fontSize + "px arial";

		for (let i = 0; i < drops.length; i++) {
			const text = String.fromCharCode(Math.floor(Math.random() * 94 + 33));
			ctx.fillText(text, i * fontSize, drops[i] * fontSize);

			if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
				drops[i] = 0;
			}

			drops[i]++;
		}
	}

	setInterval(draw, 33);
</script>

<style>
	#canvas {
		width: 100%;
		height: 100%;
	}
</style>
```

Read This at [my website](https://dshaw0004.netlify.app/blog/matrix-animation/)