-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (124 loc) · 4.72 KB
/
index.html
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
<body style="background-color: rgb(15, 15, 15)">
<main style="display: flex; flex-direction: column; align-items: center">
<canvas id="canvas" style="border-radius: 50px" width="1900" height="600"> </canvas>
<hr />
<p style="color: white">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo accusantium est tempore temporibus maxime optio,
error provident! Tempore omnis, dolore explicabo inventore totam temporibus incidunt error rem praesentium. Quos,
voluptates!
</p>
</main>
</body>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let DotsCords = [];
for (let i = 0; i < 50; i++) {
Data = [Random(0, canvas.width), Random(0, canvas.height), Random(-0.5, 0.5, true), Random(-0.5, 0.5, true)];
if (Data[2] == 0 && Data[3] == 0) {
Data = [Random(0, canvas.width), Random(0, canvas.height), Random(-0.5, 0.5, true), Random(-0.5, 0.5, true)];
}
DotsCords.push(Data);
}
function Random(start_range, end_range, FloorIt) {
if (FloorIt) {
return Math.random() * (end_range - start_range) + start_range;
} else {
return Math.floor(Math.random() * (end_range - start_range)) + start_range;
}
}
function RenderDot(x, y, x_offset, y_offset) {
ctx.fillStyle = "rgb(95, 95, 95)";
ctx.beginPath();
ctx.arc(x + x_offset, y + y_offset, 2, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
}
function Draw() {
for (let i = 0; i < DotsCords.length; i++) {
let x = DotsCords[i][0];
let y = DotsCords[i][1];
let x_offset = DotsCords[i][2];
let y_offset = DotsCords[i][3];
x += x_offset;
y += y_offset;
if (x > canvas.width + 20 || x < -20 || y > canvas.height + 20 || y < -20) {
x = Random(0, canvas.width);
y = Random(0, canvas.height);
x_offset = Random(-0.5, 0.5, true);
y_offset = Random(-0.5, 0.5, true);
if (x_offset == 0) {
x_offset += 1;
}
if (y_offset == 0) {
y_offset += 1;
}
}
RenderDot(x, y, x_offset, y_offset);
let first_lowest = 0;
let first_lowest_distance = 9999;
let second_lowest = 0;
let second_lowest_distance = 9999;
let third_lowest = 0;
let third_lowest_distance = 9999;
let fourth_lowest = 0;
let fourth_lowest_distance = 9999;
for (let j = 0; j < DotsCords.length; j++) {
if (i != j) {
if (
Math.sqrt(Math.pow(DotsCords[i][0] - DotsCords[j][0], 2) + Math.pow(DotsCords[i][1] - DotsCords[j][1], 2)) <
fourth_lowest_distance
) {
fourth_lowest = j;
fourth_lowest_distance = Math.sqrt(
Math.pow(DotsCords[i][0] - DotsCords[j][0], 2) + Math.pow(DotsCords[i][1] - DotsCords[j][1], 2)
);
if (fourth_lowest_distance < third_lowest_distance) {
let hold = third_lowest;
let hold_distance = third_lowest_distance;
third_lowest = fourth_lowest;
third_lowest_distance = fourth_lowest_distance;
fourth_lowest_distance = hold_distance;
fourth_lowest = hold;
}
if (third_lowest_distance < second_lowest_distance) {
let hold = second_lowest;
let hold_distance = second_lowest_distance;
second_lowest = third_lowest;
second_lowest_distance = third_lowest_distance;
third_lowest_distance = hold_distance;
thirdlowest = hold;
}
if (second_lowest_distance < first_lowest_distance) {
let hold = first_lowest;
let hold_distance = first_lowest_distance;
first_lowest = second_lowest;
first_lowest_distance = second_lowest_distance;
second_lowest_distance = hold_distance;
second_lowest = hold;
}
}
}
}
ctx.fillStyle = "rgb(20,20,20)";
ctx.beginPath(); // Start a new path
ctx.moveTo(DotsCords[i][0], DotsCords[i][1]);
ctx.lineTo(DotsCords[first_lowest][0], DotsCords[first_lowest][1]);
ctx.lineTo(DotsCords[second_lowest][0], DotsCords[second_lowest][1]);
ctx.lineTo(DotsCords[third_lowest][0], DotsCords[third_lowest][1]);
ctx.lineTo(DotsCords[fourth_lowest][0], DotsCords[fourth_lowest][1]);
ctx.closePath();
ctx.fill();
ctx.stroke(); // Render the path
DotsCords[i][0] = x;
DotsCords[i][1] = y;
DotsCords[i][2] = x_offset;
DotsCords[i][3] = y_offset;
}
}
window.setInterval(() => {
ctx.fillStyle = "rgba(15,15,15,0.6)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
Draw();
}, 40);
</script>