|
|
@@ -0,0 +1,455 @@
|
|
|
1
|
+var renderer,
|
|
|
2
|
+ stage,
|
|
|
3
|
+ screenWidth,
|
|
|
4
|
+ screenHeight,
|
|
|
5
|
+ counter,
|
|
|
6
|
+ totalScreenPixels,
|
|
|
7
|
+ cycleDuration,
|
|
|
8
|
+ connectionDistance,
|
|
|
9
|
+ connectionLimit,
|
|
|
10
|
+ pointShiftDistance,
|
|
|
11
|
+ colorShiftAmt,
|
|
|
12
|
+ disconnectedColorShiftAmt,
|
|
|
13
|
+ polygon,
|
|
|
14
|
+ startPoints,
|
|
|
15
|
+ polygonPoints,
|
|
|
16
|
+ tweeningFns,
|
|
|
17
|
+ lastLoop,
|
|
|
18
|
+ thisLoop,
|
|
|
19
|
+ fps,
|
|
|
20
|
+ fpsGraphic,
|
|
|
21
|
+ scrollDelta,
|
|
|
22
|
+ pointShiftBiasX,
|
|
|
23
|
+ pointShiftBiasY
|
|
|
24
|
+
|
|
|
25
|
+function randomInt (min, max) {
|
|
|
26
|
+ // inclusive of min and max
|
|
|
27
|
+ return Math.floor(Math.random() * (max - min + 1)) + min
|
|
|
28
|
+}
|
|
|
29
|
+
|
|
|
30
|
+function linearTweening (t, b, c, d) {
|
|
|
31
|
+ // t = current time
|
|
|
32
|
+ // b = start value
|
|
|
33
|
+ // c = change in value
|
|
|
34
|
+ // d = duration
|
|
|
35
|
+ return ((c * t) / d) + b
|
|
|
36
|
+}
|
|
|
37
|
+
|
|
|
38
|
+function easeOutBounce (t, b, c, d) {
|
|
|
39
|
+ if ((t /= d) < (1 / 2.75)) {
|
|
|
40
|
+ return c * (7.5625 * t * t) + b
|
|
|
41
|
+ } else if (t < (2 / 2.75)) {
|
|
|
42
|
+ return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
|
|
|
43
|
+ } else if (t < (2.5 / 2.75)) {
|
|
|
44
|
+ return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
|
|
|
45
|
+ } else {
|
|
|
46
|
+ return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
|
|
|
47
|
+ }
|
|
|
48
|
+}
|
|
|
49
|
+
|
|
|
50
|
+function easeInSine (t, b, c, d) {
|
|
|
51
|
+ return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
|
|
|
52
|
+}
|
|
|
53
|
+
|
|
|
54
|
+function easeOutSine (t, b, c, d) {
|
|
|
55
|
+ return c * Math.sin(t / d * (Math.PI / 2)) + b
|
|
|
56
|
+}
|
|
|
57
|
+
|
|
|
58
|
+function easeInOutSine (t, b, c, d) {
|
|
|
59
|
+ return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
|
|
|
60
|
+}
|
|
|
61
|
+
|
|
|
62
|
+function easeInQuad (t, b, c, d) {
|
|
|
63
|
+ return c * (t /= d) * t + b
|
|
|
64
|
+}
|
|
|
65
|
+
|
|
|
66
|
+function easeOutQuad (t, b, c, d) {
|
|
|
67
|
+ return -c * (t /= d) * (t - 2) + b
|
|
|
68
|
+}
|
|
|
69
|
+
|
|
|
70
|
+function easeInOutQuad (t, b, c, d) {
|
|
|
71
|
+ if ((t /= d / 2) < 1) return c / 2 * t * t + b
|
|
|
72
|
+ return -c / 2 * ((--t) * (t - 2) - 1) + b
|
|
|
73
|
+}
|
|
|
74
|
+
|
|
|
75
|
+function easeInCubic (t, b, c, d) {
|
|
|
76
|
+ return c * (t /= d) * t * t + b
|
|
|
77
|
+}
|
|
|
78
|
+
|
|
|
79
|
+function easeOutCubic (t, b, c, d) {
|
|
|
80
|
+ return c * ((t = t / d - 1) * t * t + 1) + b
|
|
|
81
|
+}
|
|
|
82
|
+
|
|
|
83
|
+function easeInOutCubic (t, b, c, d) {
|
|
|
84
|
+ if ((t /= d / 2) < 1) return c / 2 * t * t * t + b
|
|
|
85
|
+ return c / 2 * ((t -= 2) * t * t + 2) + b
|
|
|
86
|
+}
|
|
|
87
|
+
|
|
|
88
|
+function easeInExpo (t, b, c, d) {
|
|
|
89
|
+ return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
|
|
|
90
|
+}
|
|
|
91
|
+
|
|
|
92
|
+function easeOutExpo (t, b, c, d) {
|
|
|
93
|
+ return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
|
|
|
94
|
+}
|
|
|
95
|
+
|
|
|
96
|
+function easeInOutExpo (t, b, c, d) {
|
|
|
97
|
+ if (t == 0) return b
|
|
|
98
|
+ if (t == d) return b + c
|
|
|
99
|
+ if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b
|
|
|
100
|
+ return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
|
|
|
101
|
+}
|
|
|
102
|
+
|
|
|
103
|
+function easeInElastic (t, b, c, d) {
|
|
|
104
|
+ var s = 1.70158; var p = 0; var a = c
|
|
|
105
|
+ if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * 0.3
|
|
|
106
|
+ if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
|
|
107
|
+ return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
|
|
|
108
|
+}
|
|
|
109
|
+
|
|
|
110
|
+function easeOutElastic (t, b, c, d) {
|
|
|
111
|
+ var s = 1.70158; var p = 0; var a = c
|
|
|
112
|
+ if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * 0.3
|
|
|
113
|
+ if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
|
|
114
|
+ return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b
|
|
|
115
|
+}
|
|
|
116
|
+
|
|
|
117
|
+function easeInOutElastic (t, b, c, d) {
|
|
|
118
|
+ var s = 1.70158; var p = 0; var a = c
|
|
|
119
|
+ if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (0.3 * 1.5)
|
|
|
120
|
+ if (a < Math.abs(c)) { a = c; var s = p / 4 } else var s = p / (2 * Math.PI) * Math.asin(c / a)
|
|
|
121
|
+ if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
|
|
|
122
|
+ return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
|
|
|
123
|
+}
|
|
|
124
|
+
|
|
|
125
|
+function easeInCirc (t, b, c, d) {
|
|
|
126
|
+ return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
|
|
|
127
|
+}
|
|
|
128
|
+
|
|
|
129
|
+function easeOutCirc (t, b, c, d) {
|
|
|
130
|
+ return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
|
|
|
131
|
+}
|
|
|
132
|
+
|
|
|
133
|
+function easeInOutCirc (t, b, c, d) {
|
|
|
134
|
+ if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
|
|
|
135
|
+ return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
|
|
|
136
|
+}
|
|
|
137
|
+
|
|
|
138
|
+// from: http://stackoverflow.com/a/5624139
|
|
|
139
|
+// modified to return integer literal
|
|
|
140
|
+function rgbToHex (color) {
|
|
|
141
|
+ return parseInt(((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1), 16)
|
|
|
142
|
+}
|
|
|
143
|
+
|
|
|
144
|
+/* Choose a random RGB color */
|
|
|
145
|
+function randomColor () {
|
|
|
146
|
+ return {
|
|
|
147
|
+ r: Math.floor(Math.random() * (255 + 1)),
|
|
|
148
|
+ g: Math.floor(Math.random() * (255 + 1)),
|
|
|
149
|
+ b: Math.floor(Math.random() * (255 + 1))
|
|
|
150
|
+ }
|
|
|
151
|
+}
|
|
|
152
|
+
|
|
|
153
|
+/* Find the average of two RGB colors and return one RGB of that color */
|
|
|
154
|
+function averageColor (color1, color2) {
|
|
|
155
|
+ return {
|
|
|
156
|
+ r: Math.round((color1.r + color2.r) / 2),
|
|
|
157
|
+ g: Math.round((color1.g + color2.g) / 2),
|
|
|
158
|
+ b: Math.round((color1.b + color2.b) / 2)
|
|
|
159
|
+ }
|
|
|
160
|
+}
|
|
|
161
|
+
|
|
|
162
|
+/*
|
|
|
163
|
+ * Find the average of two RGB colors where color1 is weighted against color2 by the given weight.
|
|
|
164
|
+ * weight is a decimal between 0 and 1.
|
|
|
165
|
+ */
|
|
|
166
|
+function weightedAverageColor (color1, color2, weight) {
|
|
|
167
|
+ return {
|
|
|
168
|
+ r: Math.round(((color1.r * (2 * weight)) + (color2.r * (2 * (1 - weight)))) / 2),
|
|
|
169
|
+ g: Math.round(((color1.g * (2 * weight)) + (color2.g * (2 * (1 - weight)))) / 2),
|
|
|
170
|
+ b: Math.round(((color1.b * (2 * weight)) + (color2.b * (2 * (1 - weight)))) / 2)
|
|
|
171
|
+ }
|
|
|
172
|
+}
|
|
|
173
|
+
|
|
|
174
|
+/* Darken the color by a factor of 0 to 1, where 1 is black and 0 is white */
|
|
|
175
|
+function shadeColor (color, shadeFactor) {
|
|
|
176
|
+ return {
|
|
|
177
|
+ r: Math.round(color.r * (1 - shadeFactor)),
|
|
|
178
|
+ g: Math.round(color.g * (1 - shadeFactor)),
|
|
|
179
|
+ b: Math.round(color.b * (1 - shadeFactor))
|
|
|
180
|
+ }
|
|
|
181
|
+}
|
|
|
182
|
+
|
|
|
183
|
+/* Given a color component (red, green, or blue int), randomly shift by configurable amount */
|
|
|
184
|
+function shiftColorComponent (component, maxShiftAmt) {
|
|
|
185
|
+ var shiftAmt = randomInt(maxShiftAmt * -1, maxShiftAmt),
|
|
|
186
|
+ newComponent = component + shiftAmt
|
|
|
187
|
+ if ((newComponent < 0) || (newComponent > 255)) {
|
|
|
188
|
+ newComponent = component - shiftAmt
|
|
|
189
|
+ }
|
|
|
190
|
+ return newComponent
|
|
|
191
|
+}
|
|
|
192
|
+
|
|
|
193
|
+/* Randomly shift a RGB color by a configurable amount and return new RGB color */
|
|
|
194
|
+function shiftColor (color, maxShiftAmt) {
|
|
|
195
|
+ return {
|
|
|
196
|
+ r: shiftColorComponent(color.r, maxShiftAmt),
|
|
|
197
|
+ g: shiftColorComponent(color.g, maxShiftAmt),
|
|
|
198
|
+ b: shiftColorComponent(color.b, maxShiftAmt)
|
|
|
199
|
+ }
|
|
|
200
|
+}
|
|
|
201
|
+
|
|
|
202
|
+function distance (point1, point2) {
|
|
|
203
|
+ var a = point1[0] - point2[0]
|
|
|
204
|
+ var b = point1[1] - point2[1]
|
|
|
205
|
+ return Math.sqrt(a * a + b * b)
|
|
|
206
|
+}
|
|
|
207
|
+
|
|
|
208
|
+function getRandomPoints (numPoints, maxX, maxY, tweeningFns) {
|
|
|
209
|
+ var points = [],
|
|
|
210
|
+ i, x, y, cycleStart, easingFn
|
|
|
211
|
+ for (i = 0; i < numPoints; i++) {
|
|
|
212
|
+ x = randomInt(0, maxX - 1)
|
|
|
213
|
+ y = randomInt(0, maxY - 1)
|
|
|
214
|
+ cycleStart = randomInt(0, cycleDuration - 1)
|
|
|
215
|
+ color = randomColor()
|
|
|
216
|
+ easingFn = randomInt(0, tweeningFns.length - 1)
|
|
|
217
|
+ points[i] = [x, y, cycleStart, color, easingFn]
|
|
|
218
|
+ }
|
|
|
219
|
+ return points
|
|
|
220
|
+}
|
|
|
221
|
+
|
|
|
222
|
+function shiftPointCounter (original, maxShiftAmt) {
|
|
|
223
|
+ var shiftAmt = randomInt(maxShiftAmt * -1, 0),
|
|
|
224
|
+ newCounter = original + shiftAmt
|
|
|
225
|
+ if (newCounter < 0) {
|
|
|
226
|
+ newCounter = cycleDuration + shiftAmt
|
|
|
227
|
+ }
|
|
|
228
|
+ return newCounter
|
|
|
229
|
+}
|
|
|
230
|
+
|
|
|
231
|
+function shiftPoints (points, maxShiftAmt, counter, tweeningFns) {
|
|
|
232
|
+ var i, shiftX, shiftY, candidateX, candidateY
|
|
|
233
|
+ for (i = 0; i < points.original.length; i++) {
|
|
|
234
|
+ if (points.target[i][2] >= cycleDuration) {
|
|
|
235
|
+ // cycleDuration was reduced and now this point's cycle is out of bounds. Randomly pick a new valid one.
|
|
|
236
|
+ points.target[i][2] = randomInt(0, cycleDuration - 1)
|
|
|
237
|
+ }
|
|
|
238
|
+ if (points.target[i][2] === counter) {
|
|
|
239
|
+ points.original[i] = points.target[i].slice()
|
|
|
240
|
+ shiftX = randomInt(maxShiftAmt * -1, maxShiftAmt)
|
|
|
241
|
+ shiftY = randomInt(maxShiftAmt * -1, maxShiftAmt)
|
|
|
242
|
+ if (((shiftX < 0) && (pointShiftBiasX === 1)) || ((shiftX > 0) && (pointShiftBiasX === -1))) {
|
|
|
243
|
+ shiftX = shiftX * -1
|
|
|
244
|
+ }
|
|
|
245
|
+ if (((shiftY < 0) && (pointShiftBiasY === 1)) || ((shiftY > 0) && (pointShiftBiasY === -1))) {
|
|
|
246
|
+ shiftY = shiftY * -1
|
|
|
247
|
+ }
|
|
|
248
|
+ candidateX = points.original[i][0] + shiftX
|
|
|
249
|
+ candidateY = points.original[i][1] + shiftY
|
|
|
250
|
+ if ((candidateX > screenWidth) || (candidateX < 0)) {
|
|
|
251
|
+ candidateX = points.original[i][0] - shiftX
|
|
|
252
|
+ }
|
|
|
253
|
+ if ((candidateY > screenHeight) || (candidateY < 0)) {
|
|
|
254
|
+ candidateY = points.original[i][1] - shiftY
|
|
|
255
|
+ }
|
|
|
256
|
+ points.target[i][0] = candidateX
|
|
|
257
|
+ points.target[i][1] = candidateY
|
|
|
258
|
+ points.target[i][4] = randomInt(0, tweeningFns.length - 1)
|
|
|
259
|
+ // FIXME: buggy, makes points jump around too fast
|
|
|
260
|
+ // points.target[i][2] = shiftPointCounter(points.original[i][2], maxShiftAmt);
|
|
|
261
|
+ }
|
|
|
262
|
+ }
|
|
|
263
|
+ // clear pointShiftBiases now that they have been "used"
|
|
|
264
|
+ pointShiftBiasX = 0
|
|
|
265
|
+ pointShiftBiasY = 0
|
|
|
266
|
+
|
|
|
267
|
+ return points
|
|
|
268
|
+}
|
|
|
269
|
+
|
|
|
270
|
+function redistributeCycles (points) {
|
|
|
271
|
+ for (i = 0; i < points.original.length; i++) {
|
|
|
272
|
+ points.target[i][2] = randomInt(0, cycleDuration - 1)
|
|
|
273
|
+ }
|
|
|
274
|
+ return points
|
|
|
275
|
+}
|
|
|
276
|
+
|
|
|
277
|
+function relativeCounter (counter, targetStart) {
|
|
|
278
|
+ var relCounter = counter - targetStart
|
|
|
279
|
+ if (relCounter < 0) {
|
|
|
280
|
+ return cycleDuration + relCounter
|
|
|
281
|
+ }
|
|
|
282
|
+ return relCounter
|
|
|
283
|
+}
|
|
|
284
|
+
|
|
|
285
|
+function drawPolygon (polygon, points, counter, tweeningFns) {
|
|
|
286
|
+ var i, j, easingFn, avgColor, connectionCount, dist, proximity
|
|
|
287
|
+ // calculate vectors
|
|
|
288
|
+ for (i = 0; i < points.original.length; i++) {
|
|
|
289
|
+ easingFn = tweeningFns[points.target[i][4]]
|
|
|
290
|
+ points.tweened[i][0] = easingFn(relativeCounter(counter, points.target[i][2]), points.original[i][0], points.target[i][0] - points.original[i][0], cycleDuration)
|
|
|
291
|
+ points.tweened[i][1] = easingFn(relativeCounter(counter, points.target[i][2]), points.original[i][1], points.target[i][1] - points.original[i][1], cycleDuration)
|
|
|
292
|
+ }
|
|
|
293
|
+ // draw lines
|
|
|
294
|
+ for (i = 0; i < points.original.length; i++) {
|
|
|
295
|
+ connectionCount = 0
|
|
|
296
|
+ for (j = i + 1; j < points.original.length; j++) {
|
|
|
297
|
+ // TODO pick the N (connectionLimit) closest connections instead of the first N that occur sequentially.
|
|
|
298
|
+ if (connectionCount >= connectionLimit) break
|
|
|
299
|
+ dist = distance(points.tweened[i], points.tweened[j])
|
|
|
300
|
+ connectivity = dist / connectionDistance
|
|
|
301
|
+ if ((j !== i) && (dist <= connectionDistance)) {
|
|
|
302
|
+ // find average color of both points
|
|
|
303
|
+ if ((points.tweened[i][2] === counter) || (points.tweened[j][2] === counter)) {
|
|
|
304
|
+ // avgColor = shiftColor(avgColor, Math.round(colorShiftAmt * (1 - connectivity)));
|
|
|
305
|
+ points.tweened[i][3] = weightedAverageColor(points.tweened[i][3], points.tweened[j][3], connectivity)
|
|
|
306
|
+ points.tweened[j][3] = weightedAverageColor(points.tweened[j][3], points.tweened[i][3], connectivity)
|
|
|
307
|
+ }
|
|
|
308
|
+ avgColor = averageColor(points.tweened[i][3], points.tweened[j][3])
|
|
|
309
|
+ shadedColor = shadeColor(avgColor, connectivity)
|
|
|
310
|
+ polygon.lineStyle(1, rgbToHex(shadedColor), 1)
|
|
|
311
|
+
|
|
|
312
|
+ polygon.moveTo(points.tweened[i][0], points.tweened[i][1])
|
|
|
313
|
+ polygon.lineTo(points.tweened[j][0], points.tweened[j][1])
|
|
|
314
|
+ connectionCount = connectionCount + 1
|
|
|
315
|
+ }
|
|
|
316
|
+ }
|
|
|
317
|
+
|
|
|
318
|
+ if (connectionCount === 0) {
|
|
|
319
|
+ points.tweened[i][3] = shiftColor(points.tweened[i][3], disconnectedColorShiftAmt)
|
|
|
320
|
+ }
|
|
|
321
|
+
|
|
|
322
|
+ // draw vectors
|
|
|
323
|
+ polygon.lineStyle(1, rgbToHex(points.tweened[i][3]), 1)
|
|
|
324
|
+ polygon.drawCircle(points.tweened[i][0], points.tweened[i][1], 1)
|
|
|
325
|
+ }
|
|
|
326
|
+}
|
|
|
327
|
+
|
|
|
328
|
+function loop () {
|
|
|
329
|
+ screenWidth = document.documentElement.clientWidth
|
|
|
330
|
+ screenHeight = document.documentElement.clientHeight
|
|
|
331
|
+ renderer.resize(screenWidth, screenHeight)
|
|
|
332
|
+
|
|
|
333
|
+ polygon.clear()
|
|
|
334
|
+
|
|
|
335
|
+ drawPolygon(polygon, polygonPoints, counter, tweeningFns)
|
|
|
336
|
+
|
|
|
337
|
+ counter += 1
|
|
|
338
|
+ counter = counter % cycleDuration
|
|
|
339
|
+
|
|
|
340
|
+ if (counter === 0) {
|
|
|
341
|
+ thisLoop = new Date()
|
|
|
342
|
+ fps = Math.round((1000 / (thisLoop - lastLoop)) * cycleDuration)
|
|
|
343
|
+ fpsGraphic.setText(fps.toString())
|
|
|
344
|
+ lastLoop = thisLoop
|
|
|
345
|
+ }
|
|
|
346
|
+
|
|
|
347
|
+ polygonPoints = shiftPoints(polygonPoints, pointShiftDistance, counter, tweeningFns)
|
|
|
348
|
+
|
|
|
349
|
+ // var mousePosition = renderer.plugins.interaction.mouse.global;
|
|
|
350
|
+ // triangle.x = mousePosition.x;
|
|
|
351
|
+ // triangle.y = mousePosition.y;
|
|
|
352
|
+
|
|
|
353
|
+ // If user scrolled, modify cycleDuration by amount scrolled
|
|
|
354
|
+ if (scrollDelta !== 0) {
|
|
|
355
|
+ cycleDuration = cycleDuration + scrollDelta
|
|
|
356
|
+ if (cycleDuration < 1) {
|
|
|
357
|
+ cycleDuration = 1
|
|
|
358
|
+ }
|
|
|
359
|
+ scrollDelta = 0
|
|
|
360
|
+ polygonPoints = redistributeCycles(polygonPoints)
|
|
|
361
|
+ }
|
|
|
362
|
+
|
|
|
363
|
+ // Tell the `renderer` to `render` the `stage`
|
|
|
364
|
+ renderer.render(stage)
|
|
|
365
|
+ requestAnimationFrame(loop)
|
|
|
366
|
+}
|
|
|
367
|
+
|
|
|
368
|
+function loopStart () {
|
|
|
369
|
+ screenWidth = document.documentElement.clientWidth
|
|
|
370
|
+ screenHeight = document.documentElement.clientHeight
|
|
|
371
|
+ // Create the renderer
|
|
|
372
|
+ renderer = PIXI.autoDetectRenderer(screenWidth, screenHeight, {antialias: true, resolution: 2})
|
|
|
373
|
+
|
|
|
374
|
+ // Add the canvas to the HTML document
|
|
|
375
|
+ document.body.appendChild(renderer.view)
|
|
|
376
|
+
|
|
|
377
|
+ // Create a container object called the `stage`
|
|
|
378
|
+ stage = new PIXI.Container()
|
|
|
379
|
+
|
|
|
380
|
+ renderer.view.style.position = 'absolute'
|
|
|
381
|
+ renderer.view.style.display = 'block'
|
|
|
382
|
+ renderer.autoResize = true
|
|
|
383
|
+
|
|
|
384
|
+ counter = 0
|
|
|
385
|
+ totalScreenPixels = screenWidth + screenHeight
|
|
|
386
|
+ cycleDuration = 60
|
|
|
387
|
+ connectionDistance = Math.min(Math.round(totalScreenPixels / 16), 75)
|
|
|
388
|
+ connectionLimit = 10
|
|
|
389
|
+ pointShiftDistance = Math.round(totalScreenPixels / 45)
|
|
|
390
|
+ colorShiftAmt = 80
|
|
|
391
|
+ disconnectedColorShiftAmt = 10
|
|
|
392
|
+ polygon = new PIXI.Graphics()
|
|
|
393
|
+ tweeningFns = [
|
|
|
394
|
+ linearTweening,
|
|
|
395
|
+ easeInSine,
|
|
|
396
|
+ easeOutSine,
|
|
|
397
|
+ easeInOutSine,
|
|
|
398
|
+ easeInQuad,
|
|
|
399
|
+ easeOutQuad,
|
|
|
400
|
+ easeInOutQuad,
|
|
|
401
|
+ easeInCubic,
|
|
|
402
|
+ easeOutCubic,
|
|
|
403
|
+ easeInOutCubic
|
|
|
404
|
+ // easeOutBounce,
|
|
|
405
|
+ // easeInElastic,
|
|
|
406
|
+ // easeOutElastic,
|
|
|
407
|
+ // easeInOutElastic,
|
|
|
408
|
+ // easeInExpo,
|
|
|
409
|
+ // easeOutExpo,
|
|
|
410
|
+ // easeInOutExpo,
|
|
|
411
|
+ // easeInCirc,
|
|
|
412
|
+ // easeOutCirc,
|
|
|
413
|
+ // easeInOutCirc
|
|
|
414
|
+ ]
|
|
|
415
|
+ startPoints = getRandomPoints(Math.round(totalScreenPixels / 6), screenWidth, screenHeight, tweeningFns)
|
|
|
416
|
+ polygonPoints = {
|
|
|
417
|
+ original: startPoints,
|
|
|
418
|
+ target: JSON.parse(JSON.stringify(startPoints)),
|
|
|
419
|
+ tweened: JSON.parse(JSON.stringify(startPoints))
|
|
|
420
|
+ }
|
|
|
421
|
+ stage.addChild(polygon)
|
|
|
422
|
+
|
|
|
423
|
+ fpsGraphic = new PIXI.Text('0', {font: '25px monospace', fill: 'yellow'})
|
|
|
424
|
+ fpsGraphic.x = 0
|
|
|
425
|
+ fpsGraphic.y = 0
|
|
|
426
|
+ stage.addChild(fpsGraphic)
|
|
|
427
|
+
|
|
|
428
|
+ lastLoop = new Date()
|
|
|
429
|
+
|
|
|
430
|
+ scrollDelta = 0
|
|
|
431
|
+
|
|
|
432
|
+ requestAnimationFrame(loop)
|
|
|
433
|
+}
|
|
|
434
|
+
|
|
|
435
|
+window.onload = loopStart
|
|
|
436
|
+
|
|
|
437
|
+window.addEventListener('mousewheel', function (e) {
|
|
|
438
|
+ scrollDelta = scrollDelta + ((e.deltaY / 100) * 3)
|
|
|
439
|
+})
|
|
|
440
|
+
|
|
|
441
|
+// TODO: use jquery PEP to allow user to "pull" at a point elastically
|
|
|
442
|
+// window.addEventListener('click', function(e) {
|
|
|
443
|
+// });
|
|
|
444
|
+
|
|
|
445
|
+window.addEventListener('keydown', function (e) {
|
|
|
446
|
+ if (e.keyCode === 37) { // left
|
|
|
447
|
+ pointShiftBiasX = -1
|
|
|
448
|
+ } else if (e.keyCode === 38) { // up
|
|
|
449
|
+ pointShiftBiasY = -1
|
|
|
450
|
+ } else if (e.keyCode === 39) { // right
|
|
|
451
|
+ pointShiftBiasX = 1
|
|
|
452
|
+ } else if (e.keyCode === 40) { // down
|
|
|
453
|
+ pointShiftBiasY = 1
|
|
|
454
|
+ }
|
|
|
455
|
+})
|
