Last active
January 14, 2019 12:47
-
-
Save prashant-shahi/86dd9026b88c24d86ee29225cde20008 to your computer and use it in GitHub Desktop.
Devnagari Matrix-like Screen - Hacker's Screen - Nepali/Hindi
This file contains 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
<!--/* | |
Live Demo : https://bl.ocks.org/CoolBoi567/raw/86dd9026b88c24d86ee29225cde20008 | |
*/--> | |
<html> | |
<head> | |
<title>Devnagari - Matrix Land</title> | |
<style> | |
*{ | |
margin: 0; | |
padding: 0; | |
} | |
body { background: black; } | |
canvas { display:block; } | |
</style> | |
</head> | |
</html> | |
<body> | |
<canvas id="can"></canvas> | |
<script> | |
// geting canvas by id c | |
var c = document.getElementById("can"); | |
var ctx = c.getContext("2d"); | |
//making the canvas full screen | |
c.height = window.innerHeight; | |
c.width = window.innerWidth; | |
// devnagari characters - taken from the unicode charset | |
var matrix = "कखगघङचछजझञटठडढणतथदधनपफबभमयरलवशषसहक्षत्रज्ञ@#$%^&*()*&^%"; | |
//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 devnagari 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> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment