Skip to content

Commit

Permalink
Update particle.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@nothans
nothans committed Oct 31, 2024
1 parent c74455f commit e2f7cae
Showing 1 changed file with 125 additions and 117 deletions.
242 changes: 125 additions & 117 deletions particle.html
View file
Original file line number Diff line number Diff line change
@@ -1,135 +1,143 @@
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>CheerLights Visualization</title>
<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();
<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;
}

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;
#canvas {
display: block;
}
</style>
</head>

update() {
this.x += this.vx;
this.y += this.vy;
<body>
<canvas id="canvas"></canvas>

// 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;
}
<!-- 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/';

draw() {
ctx.fillStyle = particleColor;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
document.body.addEventListener('click', () => {
window.open(CHEERLIGHTS_URL, '_blank');
});

// Initialize particles
for (let i = 0; i < numParticles; i++) {
particles.push(new Particle());
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Animation loop
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Resize the canvas to fill the window
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

particles.forEach(particle => {
particle.update();
particle.draw();
});
// Define particles
const particles = [];
const numParticles = 150;
let particleColor = '#ffffff';

class Particle {
constructor() {
this.reset();
}

requestAnimationFrame(animate);
}
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;
}

animate();
update() {
this.x += this.vx;
this.y += this.vy;

// 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');
// 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;
}
});
}

// 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);

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>
</script>
</body>
</html>

0 comments on commit e2f7cae

Please sign in to comment.