Scribd
Upload
32 views

Matrix1 HTML

The document contains code to create a digital rain effect using HTML5 canvas. It initializes a canvas element and gets its 2D context. It then sets the canvas to be full screen and defines a character matrix to use for the rain drops. An array of drops is created, one per column. On an interval, it draws each drop by printing a random character at the x and y coordinates, then increments y. Drops are reset to the top randomly when they fall below the canvas.

Uploaded by

Prateek Gupta
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
32 views

Matrix1 HTML

The document contains code to create a digital rain effect using HTML5 canvas. It initializes a canvas element and gets its 2D context. It then sets the canvas to be full screen and defines a character matrix to use for the rain drops. An array of drops is created, one per column. On an interval, it draws each drop by printing a random character at the x and y coordinates, then increments y. Drops are reset to the top randomly when they fall below the canvas.

Uploaded by

Prateek Gupta
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
You are on page 1/ 4

<html>

<head>

<style>

/*basic reset */

*{

margin: 0;

padding: 0;

body {background: black;}

canvas {display:block;}

</style>

</head>

<body>

<canvas id="c"></canvas>

<script>

// geting canvas by id c
var c = document.getElementById("c");

var ctx = c.getContext("2d");

//making the canvas full screen

c.height = window.innerHeight;

c.width = window.innerWidth;

//chinese characters - taken from the unicode charset

var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";

//converting the string into an array of single characters

matrix = matrix.split("");

var font_size = 10;

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

//an array of drops - one 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.04)";

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 = matrix[Math.floor(Math.random()*matrix.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, 35);

</script>

</body>

</html>

You might also like