-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
119 lines (105 loc) · 3.65 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
var root = {
wavecolor: {
r: 125,
g: 52,
b: 253
},
rainbowSpeed: 0.5,
rainbow: true,
matrixspeed: 50
};
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var hueFw = false;
var hue = -0.01;
// making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;
// the characters
var konkani = "゠アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレワヰヱヲンヺ・ーヽヿ0123456789"
// converting the string into an array of single characters
var characters = konkani.split("");
var font_size = 14;
var columns = c.width/font_size; // number of columns for the rain
// var gradient = ctx.createLinearGradient(0,10, 0,200);
// var gradient = ctx.createLinearGradient(10,0, 200,0);
// an array of drops - one per column
var drops = [];
// x below is the x coordinate
// 1 = y-coordinate of the drop (same for every drop initially)
for (var x = 0; x < columns; x++)
drops[x] = 1;
// drops[x] = c.height / font_size;
var x_offset = 0;
// drawing the characters
function draw() {
// Get the BG color based on the current time i.e. rgb(hh, mm, ss)
// translucent BG to show trail
x_offset = (x_offset + 5) % c.width;
ctx.fillStyle = "rgba(0,0,0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#BBB"; // grey text
ctx.font = font_size + "px arial";
// looping over drops
for (var i = 0; i < drops.length; i++)
{
// background color
// ctx.fillStyle = "rgba(10,10,10, 1)";
// ctx.fillRect(i * font_size, drops[i] * font_size,font_size,font_size);
// a random character to print
var text = characters[Math.floor(Math.random() * characters.length)];
// x = i * font_size, y = value of drops[i] * font_size
if (root.rainbow) {
hue += (hueFw) ? 0.01 : -0.01;
var rr = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 0) + 128);
var rg = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 2) + 128);
var rb = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 4) + 128);
ctx.fillStyle = 'rgba(' + rr + ',' + rg + ',' + rb + ')';
} else {
ctx.fillStyle = 'rgba(' + root.wavecolor.r + ',' + root.wavecolor.g + ',' + root.wavecolor.b + ')';
}
ctx.fillText(text, ((i)* font_size+x_offset) % c.width, (drops[i]) * font_size);
// Incrementing Y coordinate
drops[i]++;
// if (i > 0)
// drops[i] = drops[i-1]+1;
// else {
// drops[i] = drops[drops.length-1]+1;
// }
// sending the drop back to the top randomly after it has crossed the screen
// adding randomness to the reset to make the drops scattered on the Y axis
if (drops[i] * font_size > c.height && Math.random() > 0.99) // * font_size > c.height 0.975
drops[i] = 1;
}
// var tmp = drops[0];
// for (var i = 0; i < drops.length - 1; i++){
// drops[i] = drops[i+1];
// }
// drops[drops.length-1] = tmp;
}
window.onresize=()=>{
location.reload();
}
setInterval(draw, root.matrixspeed);
function livelyPropertyListener(name, val)
{
switch(name) {
case "matrixColor":
root.wavecolor = hexToRgb(val);
break;
case "rainBow":
root.rainbow = val;
break;
case "rainbowSpeed":
root.rainbowSpeed = val/100;
break;
}
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}