-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
129 lines (129 loc) · 4.34 KB
/
main.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
var SCREEN_WIDTH = document.documentElement.clientWidth;
var SCREEN_HEIGHT = document.documentElement.clientHeight;
var RADIUS = Math.floor(Math.min(SCREEN_HEIGHT, SCREEN_WIDTH) * 0.275);
var MIN_PARTICLE_RADIUS = 1;
var MAX_PARTICLE_RADIUS = 12;
var HUE_SHIFT = 0.1;
var PARTICLE_COUNT = 500;
var AUTO_FADE = false;
var hue = 0;
var canvas = document.getElementById('visual');
var ctx = canvas.getContext('2d');
var controls = document.getElementById('controls');
canvas.setAttribute("width", String(SCREEN_WIDTH));
canvas.setAttribute("height", String(SCREEN_HEIGHT));
ctx.globalCompositeOperation = "hard-light";
var controllers = document.querySelectorAll('.js-controller');
[].forEach.call(controllers, function (controller) {
controller.addEventListener('change', function (changeEvent) {
var value = changeEvent.target.value;
switch (changeEvent.target.id) {
case "max-size":
MAX_PARTICLE_RADIUS = parseFloat(value);
break;
case "min-size":
MIN_PARTICLE_RADIUS = parseFloat(value);
break;
case "hue-shift":
HUE_SHIFT = parseFloat(value);
break;
case "particle-count":
PARTICLE_COUNT = parseFloat(value);
break;
case "auto-fade":
AUTO_FADE = changeEvent.target.checked;
break;
}
});
});
document.addEventListener('keypress', function (keyEvent) {
if (keyEvent.charCode === 63) {
controls.classList.toggle('js-hidden');
}
});
var HSLAColor = (function () {
function HSLAColor(h, s, l, a) {
if (a === void 0) { a = 0.8; }
this.h = h;
this.s = s;
this.l = l;
this.a = a;
}
HSLAColor.prototype.toString = function () {
return "hsla(" + this.h + ", " + this.s + "%, " + this.l + "%, " + this.a + ")";
};
return HSLAColor;
}());
var Particle = (function () {
function Particle(x, y) {
this.radius = 1;
this.x = Math.floor(x);
this.y = Math.floor(y);
}
Particle.prototype.diff = function (p) {
var dx = Math.abs(this.x - p.x);
var dy = Math.abs(this.y - p.y);
return Math.sqrt(dx * dx + dy * dy);
};
Particle.prototype.delta = function (p, r) {
var diff = this.diff(p);
return diff >= r ? r / diff : diff / r;
};
return Particle;
}());
function randomParticleFactory(maxWidth, maxHeight) {
var x = Math.floor(Math.random() * maxWidth);
var y = Math.floor(Math.random() * maxHeight);
return new Particle(x, y);
}
function createLightnessFromDelta(delta) {
return Math.floor(delta * 40 + 10);
}
var CENTRUM = new Particle(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
function drawParticle(particle, color) {
var s = Math.random() * (2 * Math.PI);
var e = Math.random() * (2 * Math.PI);
ctx.beginPath();
ctx.fillStyle = color.toString();
ctx.arc(particle.x, particle.y, particle.radius, s, e);
ctx.closePath();
ctx.fill();
}
function drawLine(particle, color, start) {
if (start === void 0) { start = CENTRUM; }
ctx.beginPath();
ctx.strokeStyle = color.toString();
ctx.lineWidth = 2;
ctx.moveTo(start.x, start.y);
ctx.lineTo(particle.x, particle.y);
ctx.closePath();
ctx.stroke();
}
function draw() {
var MAX_PARTICLES = PARTICLE_COUNT;
while (MAX_PARTICLES--) {
var particle = randomParticleFactory(SCREEN_WIDTH, SCREEN_HEIGHT);
var delta = particle.delta(CENTRUM, RADIUS);
var sat = delta * 50 + 10;
particle.radius = delta * (MAX_PARTICLE_RADIUS - MIN_PARTICLE_RADIUS) + MIN_PARTICLE_RADIUS;
if (MAX_PARTICLES % 10 === 0) {
var alpha = delta * 0.1 + 0.2;
var lightness = createLightnessFromDelta(alpha);
var lineColor = new HSLAColor(hue, sat, lightness, alpha);
drawLine(particle, lineColor);
}
else {
var lightness = createLightnessFromDelta(delta);
var fillColor = new HSLAColor(hue, sat, lightness, delta * 0.6 + 0.2);
drawParticle(particle, fillColor);
}
}
hue += HUE_SHIFT;
if (AUTO_FADE) {
ctx.fillStyle = "rgba(0, 0, 0, 0.025)";
ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}
requestAnimationFrame(draw);
}
draw();
//# sourceMappingURL=main.js.map