-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathspace.js
209 lines (192 loc) · 9.06 KB
/
space.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
var svg = `
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 508 508" style="enable-background:new 0 0 508 508;" xml:space="preserve">
<g>
<g>
<path d="M289.774,368.764V321.5c0-2.212-1.792-4-4-4s-4,1.788-4,4v48.7c0,0.94,0.332,1.848,0.932,2.568
c5.584,6.672,14.948,20.108,14.948,35.188v28.604l-87.08-0.008l-0.06-28.596c0.004-15.248,9.272-28.596,14.796-35.192
c0.6-0.72,0.932-1.632,0.932-2.568v-36.784c0-2.212-1.792-4-4-4s-4,1.788-4,4v35.352c-6.276,7.772-15.728,22.28-15.732,39.2
l0.068,32.596c0.004,2.208,1.792,3.992,4,3.992l95.072,0.008c1.06,0,2.08-0.428,2.832-1.176c0.752-0.748,1.172-1.764,1.172-2.828
v-32.604C305.654,391.192,296.106,376.6,289.774,368.764z" class="brainPath"/>
</g>
</g>
<g>
<g>
<path d="M254.202,79.24h-0.004c-9.7,0-18.788,4.26-25.592,11.996c-6.68,7.596-10.36,17.672-10.36,28.372v182.04
c0,2.212,1.792,4,4,4s4-1.788,4-4v-182.04c0-8.752,2.972-16.952,8.368-23.088c5.264-5.984,12.216-9.28,19.584-9.28h0.004
c15.356,0,27.392,14.26,27.4,32.46l-0.02,200.248c0,2.208,1.792,4,4,4s4-1.788,4-4l0.02-200.248
C289.594,97.012,274.042,79.24,254.202,79.24z" class="brainPath"/>
</g>
</g>
<g>
<g>
<path d="M257.978,43.536h-23.824c-2.208,0-4,1.792-4,4s1.792,4,4,4h23.824c2.208,0,4-1.792,4-4S260.186,43.536,257.978,43.536z" class="brainPath"/>
</g>
</g>
<g>
<g>
<path d="M285.77,365.144h-63.528c-2.208,0-4,1.788-4,4c0,2.212,1.792,4,4,4h63.528c2.212,0,4-1.788,4-4
C289.77,366.932,287.978,365.144,285.77,365.144z" class="brainPath"/>
</g>
</g>
<g>
<g>
<path d="M253.754,359.684c-2.208,0-4,1.788-4,4L249.746,504c0,2.208,1.792,4,4,4c2.208,0,4-1.788,4-4l0.008-140.316
C257.754,361.476,255.962,359.684,253.754,359.684z" class="brainPath"/>
</g>
</g>
<g>
<g>
<path d="M352.51,308.504c-5.456-4.556-10.168-8.496-12.764-10.92c-7.676-7.164-25.984-27.52-30.108-61.704l-0.44-3.68
c-4.584-38.32-8.584-64.788-19.428-69.98v-42.612c0-9.688-9.084-119.604-35.824-119.608
c-26.652,0.008-35.708,109.916-35.708,119.604v42.56c-11.06,5.304-15.332,33.484-19.928,71.696l-0.244,2.016
c-4.112,34.084-22.5,54.504-30.216,61.704c-2.548,2.38-7.124,6.22-12.416,10.664c-30.5,25.604-60.28,51.924-60.28,67.688V412.8
c0,2.032,1.52,3.736,3.536,3.972l107.332,12.544c0.16,0.02,0.316,0.028,0.472,0.028c2,0,3.728-1.5,3.96-3.54
c0.256-2.192-1.316-4.18-3.508-4.436L103.15,409.24v-33.308c0-13.356,38.784-45.916,57.424-61.564
c5.604-4.7,10.028-8.416,12.732-10.936c8.36-7.796,28.276-29.896,32.7-66.596l0.244-2.016c2.36-19.616,7.884-65.556,15.984-65.556
c1.06,0,2.076-0.424,2.828-1.172c0.752-0.748,1.172-1.768,1.172-2.828v-45.656c0-9.98,2.928-38.704,8.228-64.536
c9.384-45.744,18.476-47.068,19.48-47.068c13.672,0,27.82,82.88,27.82,111.608v45.68c0,2.168,1.728,3.944,3.896,4
c7.976,0.212,13.312,44.816,15.592,63.864l0.44,3.684c4.44,36.804,24.272,58.832,32.592,66.592
c2.756,2.576,7.32,6.388,13.096,11.216c18.652,15.58,57.468,48.012,57.468,61.292v33.504l-103.744,11.928
c-2.192,0.248-3.768,2.232-3.516,4.428s2.268,3.784,4.432,3.516l107.284-12.336c2.02-0.228,3.544-1.94,3.544-3.972v-37.072
C412.846,360.228,383.042,334.012,352.51,308.504z" class="brainPath"/>
</g>
</g>
<g>
<g>
<path d="M289.738,438.06c-2.244-0.176-4.164,1.372-4.392,3.572l-3.18,30.716h-56.824l-3.172-30.684
c-0.228-2.196-2.16-3.74-4.392-3.572c-2.2,0.232-3.796,2.196-3.568,4.392l3.544,34.272c0.212,2.036,1.932,3.588,3.98,3.588h64.036
c2.052,0,3.768-1.552,3.984-3.588l3.552-34.304C293.534,440.256,291.934,438.292,289.738,438.06z" class="brainPath" />
</g>
</g>
</svg>
`;
/*Helper functions*/
/******************/
function complimentary(x){
return 255 - Math.abs((x - 127.5));
}
function complimentary2(x){
return 255 - Math.abs((x - 63.75));
}
function complimentary3(x){
return 255 - Math.abs((x - 191.25));
}
//correct for numbers over 255 and under 0
function corrected(x){
var val = (x*1);
if(val > 255){
return 255;
} else if (val < 0){
return 0;
} else {
return Math.round(val);
}
}
function addClass(query, theClass) {
var x = document.querySelectorAll(query);
for (var i = 0; i < x.length; i++) {
x[i].classList.add(theClass);
}
}
//random number generator
function randNum(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
/******************/
/*Helper functions*/
function setColors(param){
var r,g,b;
//get new random color
//lighter if "light" is passed
//or if it's day vs. night
//get hours
var d = new Date();
var hh = d.getHours();
/*param == "light"*/
if( hh > 5 && hh < 19 ){
r = randNum(200,255);
g = randNum(200,255);
b = randNum(200,255);
//darker if "dark" is passed
/*param == "dark"*/
} else if ( hh < 6 || hh > 18 ){
r = randNum(0,50);
g = randNum(0,50);
b = randNum(0,50);
//or else use default lime and black styling
} else {
return;
}
//set background color
var bgColor = "rgb(" + r + "," + g + "," + b + ")";
//get a complimentary color 1
var r1 = corrected(Math.round(complimentary(r)));
var g1 = corrected(Math.round(complimentary(g)));
var b1 = corrected(Math.round(complimentary(b)));
var brainColor ="#111";
//get a complimentary color 2
var r2 = corrected(Math.round(complimentary2(r)));
var g2 = corrected(Math.round(complimentary2(g)));
var b2 = corrected(Math.round(complimentary2(b)));
var brainColor2 ="#fff";
//get a complimentary color 3
var r3 = corrected(Math.round(complimentary3(r)));
var g3 = corrected(Math.round(complimentary3(g)));
var b3 = corrected(Math.round(complimentary3(b)));
var brainColor3 = "#fff";
var bp = document.getElementsByClassName("brainPath");
for (var i=0; i<bp.length; i++){
bp[i].style.stroke = brainColor;
}
var br = document.getElementsByClassName("brainRect");
for (var i=0; i<br.length; i++){
br[i].style.stroke = brainColor;
br[i].style.fill = brainColor;
}
var bc = document.getElementsByClassName("brainCircle");
for (var i=0; i<bc.length; i++){
bc[i].style.stroke = brainColor2;
bc[i].style.fill = brainColor2;
}
var bc = document.getElementsByClassName("brainEllipse");
for (var i=0; i<bc.length; i++){
bc[i].style.stroke = brainColor3;
bc[i].style.fill = brainColor3;
}
}
//gets the current line length of the svg
function animateSVGs() {
var allPaths = document.querySelectorAll("path");
for (var i = 0; i < allPaths.length; i++) {
var lineLength = allPaths[i].getTotalLength();
allPaths[i].style.strokeDasharray = lineLength;
allPaths[i].style.strokeDashoffset = lineLength;
//neg animation times start the animation midway
allPaths[i].style.animationDelay = randNum(-50, 50) / 10 + "s";
}
var allRects = document.querySelectorAll("rect");
for (var i = 0; i < allRects.length; i++) {
allRects[i].style.animationDelay = randNum(-50, 50) / 10 + "s";
}
var allCircles = document.querySelectorAll("circle");
for (var i = 0; i < allCircles.length; i++) {
allCircles[i].style.animationDelay = randNum(-50, 50) / 10 + "s";
}
var allEllipses = document.querySelectorAll("ellipse");
for (var i = 0; i < allEllipses.length; i++) {
allEllipses[i].style.animationDelay = randNum(-50, 50) / 10 + "s";
}
}
function neuralize() {
document.querySelector(".spaceContainer").innerHTML = "";
document.querySelector(".spaceContainer").innerHTML = svg;
animateSVGs();
addClass("path", "animatePaths");
addClass("rect", "animateRects");
addClass("circle", "animateCircles");
addClass("ellipse", "animateCircles");
}
document.querySelector(".spaceContainer").addEventListener("click", function(){setColors("dark")});
neuralize();
setColors("dark");