@quasarbright/projection
Version:
A static site generator that creates a beautiful, interactive gallery to showcase your coding projects. Features search, filtering, tags, responsive design, and an admin UI.
82 lines (70 loc) • 1.96 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js Background Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Include the mouse listener for background mode -->
<script src="scripts/background-mouse-listener.js"></script>
<script>
// p5.js sketch with mouse interaction
let particles = [];
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
}
function draw() {
// Fade effect
fill(0, 10);
rect(0, 0, width, height);
// Add new particle at mouse position
if (frameCount % 3 === 0) {
particles.push({
x: mouseX,
y: mouseY,
vx: random(-2, 2),
vy: random(-2, 2),
life: 255
});
}
// Update and draw particles
for (let i = particles.length - 1; i >= 0; i--) {
let p = particles[i];
// Update
p.x += p.vx;
p.y += p.vy;
p.life -= 2;
// Draw
noStroke();
fill(100, 150, 255, p.life);
circle(p.x, p.y, 5);
// Remove dead particles
if (p.life <= 0) {
particles.splice(i, 1);
}
}
// Draw mouse cursor indicator
noFill();
stroke(100, 150, 255, 128);
strokeWeight(2);
circle(mouseX, mouseY, 30);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
console.log('🎨 p5.js background loaded');
console.log('Move your mouse to create particles!');
console.log('mouseX and mouseY are automatically updated by background-mouse-listener.js');
</script>
</body>
</html>