Scribd
Upload
11 views3 pages

HTML

The document contains HTML and JavaScript code for creating a 'Matrix Rain' effect on a webpage. It sets up a full-screen canvas that displays random binary characters falling down the screen, with a translucent background to create a trailing effect. The script utilizes a loop to continuously draw the characters at random positions, simulating a rain-like appearance.

Uploaded by

reydensalapeo123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views3 pages

HTML

The document contains HTML and JavaScript code for creating a 'Matrix Rain' effect on a webpage. It sets up a full-screen canvas that displays random binary characters falling down the screen, with a translucent background to create a trailing effect. The script utilizes a loop to continuously draw the characters at random positions, simulating a rain-like appearance.

Uploaded by

reydensalapeo123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html>

<head>

<title>Matrix Rain</title>

<style>

 {margin: 0; padding: 0;}

Body {background: black;}<!-- 

Canvas {display: block;}

</style>

</head>

<body>

<canvas id=”c”></canvas>

</body>

<script>

Var c = document.getElementById(“c”);

Var ctx = c.getContext(“2d”);

//making the canvas full screen

c.height = window.innerHeight;

c.width = window.innerWidth;

//english characters

Var english =
“100101110101010101010010101000101011101111010101010110101010101010101110000101”;

//converting the string into an array of multiple characters

English = english.split(“”);

Var font_size = 15;


Var columns = c.width/font_size; //number of columns for the rain

//an array of drops – two per column

Var drops = [];

//x below is the x coordinate

//1 = y co-ordinate of the drop(same for every drop initially)

For(var x = 0; x < columns; x++)

Drops[x] = 1;

//drawing the characters

Function draw()

//Black BG for the canvas

//translucent BG to show trail<

Ctx.fillStyle = “rgba(0, 0, 0, 0.05)”;

Ctx.fillRect(0, 0, c.width, c.height);

Ctx.fillStyle = “#0F0”; //green text

Ctx.font = font_size + “px arial”;

//looping over drops

For(var I = 0; I < drops.length; i++)

//a random chinese character to print

Var text = english[Math.floor(Math.random()*english.length)];

//x = i*font_size, y = value of drops[i]*font_size

Ctx.fillText(text, i*font_size, drops[i]*font_size);

//sending the drop back to the top randomly after it has crossed the screen

//adding a randomness to the reset to make the drops scattered on the Y axis

If(drops[i]*font_size > c.height && Math.random() > 0.975)


Drops[i] = 0;

//incrementing Y coordinate

Drops[i]++;

setInterval(draw, 33);

</script>

<body>

</html>

You might also like