1+ < html >
2+
3+ < head >
4+ < style >
5+ /*basic reset */
6+
7+ *
8+ margin : 0 ;
9+ padding : 0 ;
10+ }
11+
12+ body {
13+ background : black;
14+ }
15+
16+ canvas {
17+ display : block;
18+ }
19+ </ style >
20+ </ head >
21+
22+ < body >
23+
24+ < canvas id ="c "> </ canvas >
25+
26+ < script >
27+ // geting canvas by id c
28+ var c = document . getElementById ( "c" ) ;
29+ var ctx = c . getContext ( "2d" ) ;
30+
31+ //making the canvas full screen
32+ c . height = window . innerHeight ;
33+ c . width = window . innerWidth ;
34+
35+ //chinese characters - taken from the unicode charset
36+ var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%" ;
37+ //converting the string into an array of single characters
38+ matrix = matrix . split ( "" ) ;
39+
40+ var font_size = 10 ;
41+ var columns = c . width / font_size ; //number of columns for the rain
42+ //an array of drops - one per column
43+ var drops = [ ] ;
44+ //x below is the x coordinate
45+ //1 = y co-ordinate of the drop(same for every drop initially)
46+ for ( var x = 0 ; x < columns ; x ++ )
47+ drops [ x ] = 1 ;
48+
49+ //drawing the characters
50+ function draw ( ) {
51+ //Black BG for the canvas
52+ //translucent BG to show trail
53+ ctx . fillStyle = "rgba(0, 0, 0, 0.04)" ;
54+ ctx . fillRect ( 0 , 0 , c . width , c . height ) ;
55+
56+ ctx . fillStyle = "#0F0" ; //green text
57+ ctx . font = font_size + "px arial" ;
58+ //looping over drops
59+ for ( var i = 0 ; i < drops . length ; i ++ ) {
60+ //a random chinese character to print
61+ var text = matrix [ Math . floor ( Math . random ( ) * matrix . length ) ] ;
62+ //x = i*font_size, y = value of drops[i]*font_size
63+ ctx . fillText ( text , i * font_size , drops [ i ] * font_size ) ;
64+
65+ //sending the drop back to the top randomly after it has crossed the screen
66+ //adding a randomness to the reset to make the drops scattered on the Y axis
67+ if ( drops [ i ] * font_size > c . height && Math . random ( ) > 0.975 )
68+ drops [ i ] = 0 ;
69+
70+ //incrementing Y coordinate
71+ drops [ i ] ++ ;
72+ }
73+ }
74+
75+ setInterval ( draw , 35 ) ;
76+ </ script >
77+ </ body >
78+
79+ </ html >
0 commit comments