-
Notifications
You must be signed in to change notification settings - Fork 0
/
particle.html
143 lines (117 loc) · 3.96 KB
/
particle.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="assets/images/CheerLights-Icon.png">
<title>CheerLights JavaScript Widget - Particle</title>
<meta name="description" content="A widget that displays a particle effect inspired by the current CheerLights color using the CheerLights JavaScript library." />
<style>
body {
margin: 0;
background-color: black;
overflow: hidden;
cursor: pointer;
}
#canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<!-- Include the CheerLights JavaScript library -->
<script src="https://cdn.jsdelivr.net/gh/cheerlights/[email protected]/cheerlights.js"></script>
<script>
const CHEERLIGHTS_URL = 'https://cheerlights.com/cheerlights-javascript-widgets/';
document.body.addEventListener('click', () => {
window.open(CHEERLIGHTS_URL, '_blank');
});
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Resize the canvas to fill the window
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// Define particles
const particles = [];
const numParticles = 150;
let particleColor = '#ffffff';
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * 1.5;
this.vy = (Math.random() - 0.5) * 1.5;
this.size = Math.random() * 9 + 1;
}
update() {
this.x += this.vx;
this.y += this.vy;
// Wrap around edges
if (this.x > canvas.width) this.x = 0;
if (this.x < 0) this.x = canvas.width;
if (this.y > canvas.height) this.y = 0;
if (this.y < 0) this.y = canvas.height;
}
draw() {
ctx.fillStyle = particleColor;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// Initialize particles
for (let i = 0; i < numParticles; i++) {
particles.push(new Particle());
}
// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animate);
}
animate();
// Function to update CheerLights color
function updateCheerLightsColor() {
CheerLights.getColor(function(color) {
if (color.hexValue) {
particleColor = color.hexValue;
} else {
console.error('Failed to retrieve CheerLights color');
}
});
}
// Initial color update
updateCheerLightsColor();
// Update the color every 5 seconds
const REFRESH_INTERVAL = 5000;
setInterval(updateCheerLightsColor, REFRESH_INTERVAL);
// Add interactivity: particles move away from mouse
canvas.addEventListener('mousemove', function(event) {
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
particles.forEach(particle => {
const dx = particle.x - mouseX;
const dy = particle.y - mouseY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
const angle = Math.atan2(dy, dx);
particle.vx += Math.cos(angle);
particle.vy += Math.sin(angle);
}
});
});
</script>
</body>
</html>