The code is different, I apologize may I didn’t ask the question the right way, you can understand well in principle, When I’m hovering the dots get colours and connect to each other, other dots are invisible, I want that all dots should be visible all time. live example available on codepen, https://codepen.io/tati420/pen/RwBamQo?editors=1111
JavaScript
x
203
203
1
(function () {
2
var width,
3
height,
4
largeHeader,
5
canvas,
6
ctx,
7
points,
8
target,
9
animateHeader = true;
10
11
// Main
12
initHeader();
13
initAnimation();
14
addListeners();
15
16
function initHeader() {
17
width = window.innerWidth;
18
height = window.innerHeight;
19
target = { x: width / 2, y: height / 2 };
20
21
largeHeader = document.getElementById("large-header");
22
largeHeader.style.height = height + "px";
23
24
canvas = document.getElementById("demo-canvas");
25
canvas.width = width;
26
canvas.height = height;
27
ctx = canvas.getContext("2d");
28
29
// create points
30
points = [];
31
for (var x = 0; x < width; x = x + width / 20) {
32
for (var y = 0; y < height; y = y + height / 20) {
33
var px = x + (Math.random() * width) / 20;
34
var py = y + (Math.random() * height) / 20;
35
var p = { x: px, originX: px, y: py, originY: py };
36
points.push(p);
37
}
38
}
39
40
// for each point find the 5 closest points
41
for (var i = 0; i < points.length; i++) {
42
var closest = [];
43
var p1 = points[i];
44
for (var j = 0; j < points.length; j++) {
45
var p2 = points[j];
46
if (!(p1 == p2)) {
47
var placed = false;
48
for (var k = 0; k < 5; k++) {
49
if (!placed) {
50
if (closest[k] == undefined) {
51
closest[k] = p2;
52
placed = true;
53
}
54
}
55
}
56
57
for (var k = 0; k < 5; k++) {
58
if (!placed) {
59
if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
60
closest[k] = p2;
61
placed = true;
62
}
63
}
64
}
65
}
66
}
67
p1.closest = closest;
68
}
69
70
// assign a circle to each point
71
for (var i in points) {
72
var c = new Circle(
73
points[i],
74
2 + Math.random() * 2,
75
"rgba(0,255,255,0.3)"
76
);
77
points[i].circle = c;
78
}
79
}
80
81
// Event handling
82
function addListeners() {
83
if (!("ontouchstart" in window)) {
84
window.addEventListener("mousemove", mouseMove);
85
}
86
window.addEventListener("scroll", scrollCheck);
87
window.addEventListener("resize", resize);
88
}
89
90
function mouseMove(e) {
91
var posx = (posy = 0);
92
if (e.pageX || e.pageY) {
93
posx = e.pageX;
94
posy = e.pageY;
95
} else if (e.clientX || e.clientY) {
96
posx =
97
e.clientX +
98
document.body.scrollLeft +
99
document.documentElement.scrollLeft;
100
posy =
101
e.clientY +
102
document.body.scrollTop +
103
document.documentElement.scrollTop;
104
}
105
target.x = posx;
106
target.y = posy;
107
}
108
109
function scrollCheck() {
110
if (document.body.scrollTop > height) animateHeader = false;
111
else animateHeader = true;
112
}
113
114
function resize() {
115
width = window.innerWidth;
116
height = window.innerHeight;
117
largeHeader.style.height = height + "px";
118
canvas.width = width;
119
canvas.height = height;
120
}
121
122
// animation
123
function initAnimation() {
124
animate();
125
for (var i in points) {
126
shiftPoint(points[i]);
127
}
128
}
129
130
function animate() {
131
if (animateHeader) {
132
ctx.clearRect(0, 0, width, height);
133
for (var i in points) {
134
// detect points in range
135
if (Math.abs(getDistance(target, points[i])) < 4000) {
136
points[i].active = 0.3;
137
points[i].circle.active = 0.6;
138
} else if (Math.abs(getDistance(target, points[i])) < 20000) {
139
points[i].active = 0.1;
140
points[i].circle.active = 0.3;
141
} else if (Math.abs(getDistance(target, points[i])) < 40000) {
142
points[i].active = 0.02;
143
points[i].circle.active = 0.1;
144
} else {
145
points[i].active = 0;
146
points[i].circle.active = 0;
147
}
148
149
drawLines(points[i]);
150
points[i].circle.draw();
151
}
152
}
153
requestAnimationFrame(animate);
154
}
155
156
function shiftPoint(p) {
157
TweenLite.to(p, 1 + 1 * Math.random(), {
158
x: p.originX - 50 + Math.random() * 100,
159
y: p.originY - 50 + Math.random() * 100,
160
ease: Circ.easeInOut,
161
onComplete: function () {
162
shiftPoint(p);
163
},
164
});
165
}
166
ctx.strokeStyle = "rgba(255,0,0," + p.active + ")";
167
168
// Canvas manipulation
169
function drawLines(p) {
170
if (!p.active) return;
171
for (var i in p.closest) {
172
ctx.beginPath();
173
ctx.moveTo(p.x, p.y);
174
ctx.lineTo(p.closest[i].x, p.closest[i].y);
175
ctx.strokeStyle = "rgba(0,255,255," + p.active + ")";
176
ctx.stroke();
177
}
178
}
179
180
function Circle(pos, rad, color) {
181
var _this = this;
182
// constructor
183
(function () {
184
_this.pos = pos || null;
185
_this.radius = rad || null;
186
_this.color = color || null;
187
})();
188
this.draw = function () {
189
if (!_this.active) return;
190
ctx.beginPath();
191
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
192
ctx.fillStyle = "rgba(0,255,0," + _this.active + ")";
193
ctx.fill();
194
};
195
}
196
197
// Util
198
function getDistance(p1, p2) {
199
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
200
}
201
})();
202
203
Advertisement
Answer
If I understand your question correctly, you just want to make sure that every point.active = 1
and point.circle.active = 1
:
JavaScript
1
13
13
1
function animate() {
2
if (animateHeader) {
3
ctx.clearRect(0, 0, width, height);
4
for (var i in points) {
5
points[i].active = 1;
6
points[i].circle.active = 1;
7
drawLines(points[i]);
8
points[i].circle.draw();
9
}
10
}
11
requestAnimationFrame(animate);
12
}
13