Toile : Flux de particules cardiaques

2,549 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 January 2026

Jeu de moteur Funkin' Kade du vendredi soir

10 November 2024

Barre de navigation

12 May 2026

Bouton de jeu plein écran HTML/JS

HTML

<div id="controls-container">
  <button id="toggle-controls">Controls</button>
  <button id="toggle-fullscreen">Full Screen</button>
  <div id="controls">
    <div class="control-group">
      <label for="colorScheme">Colors:</label>
      <select id="colorScheme">
        <option value="rainbow">Rainbow</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
        <option value="monochrome">Monochrome</option>
      </select>
    </div>
    <div class="control-group">
      <label for="particleSize">Size:</label>
      <input type="range" id="particleSize" min="1" max="20" value="10">
      <span id="particleSizeValue">10</span>
    </div>
    <div class="control-group">
      <label for="particleCount">Particles:</label>
      <input type="range" id="particleCount" min="10" max="100" value="32">
      <span id="particleCountValue">32</span>
    </div>
    <div class="control-group">
      <label for="speed">Speed:</label>
      <input type="range" id="speed" min="0.1" max="2" step="0.1" value="1">
      <span id="speedValue">1</span>
    </div>
    <div class="control-group">
      <label for="mouseInfluence">Mouse Follow:</label>
      <input type="range" id="mouseInfluence" min="0" max="100" value="50">
      <span id="mouseInfluenceValue">50</span>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
  font-family: "Archivo Black", sans-serif;
  color: white;
}

#c {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#controls-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
}

#toggle-controls {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 5px;
  backdrop-filter: blur(5px);
}

#controls {
  background: rgba(100, 100, 100, 0.2);
  padding: 15px;
  border-radius: 10px;
  max-width: 300px;
  backdrop-filter: blur(5px);
  display: block;
}

.control-group {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.control-group label {
  width: 100px;
  font-size: 14px;
  margin-right: 10px;
}

.control-group input[type="range"] {
  flex-grow: 1;
  margin-right: 10px;
}

.control-group span {
  width: 30px;
  text-align: right;
  font-size: 14px;
}

.control-group select {
  flex-grow: 1;
  padding: 5px;
  border-radius: 4px;
  background: #333;
  color: white;
  border: none;
}

.heart-outline {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 320px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
  pointer-events: none;
  z-index: 10;
}

#intro-controls {
  margin-top: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

#intro-controls h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

#intro-controls ul {
  list-style-type: none;
  padding: 0;
}

#intro-controls li {
  margin-bottom: 5px;
  font-size: 1em;
}

#toggle-fullscreen {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 100;
  backdrop-filter: blur(5px);
}

@media (max-width: 600px) {
  #controls-container {
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
  }

.control-group label {
    width: 80px;
    font-size: 12px;
  }
}

// Configuration
const config = {
    particleCount: 32,
    speed: 1,
    colorScheme: 'rainbow',
    mouseInfluence: 50,
    showHeartOutline: true,
    particleSize: 10
};

// Canvas setup
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let canvasWidth = canvas.width = window.innerWidth;
let canvasHeight = canvas.height = window.innerHeight;

// Animation state
let trails = [];
let heartPath = [];
let mouseX = canvasWidth / 2;
let mouseY = canvasHeight / 2;
let mouseActive = false;
let animationRunning = false;

// Initialize heart path points (fixed formula)
function initHeartPath() {
    heartPath = [];
    const PI2 = 6.28318; // 2*PI approximation
    const steps = Math.max(32, config.particleCount);
    
    for (let i = 0; i < steps; i++) {
        const t = (i / steps) * PI2;
        heartPath.push([
            canvasWidth/2 + 180 * Math.pow(Math.sin(t), 3),
            canvasHeight/2 + 10 * (-(15 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)))
        ]);
    }
}

// Initialize particles with proper bounds checking
function initParticles() {
    trails = [];
    if (heartPath.length === 0) initHeartPath();

for (let i = 0; i < config.particleCount; i++) {
        const particles = [];
        const x = Math.random() * canvasWidth;
        const y = Math.random() * canvasHeight;

for (let k = 0; k < config.particleCount; k++) {
            // Color generation
            let hue, saturation = Math.random() * 40 + 60;
            let brightness = Math.random() * 60 + 20;
            
            switch(config.colorScheme) {
                case 'red': hue = Math.random() * 20 + 350; break;
                case 'blue': hue = Math.random() * 20 + 200; break;
                case 'green': hue = Math.random() * 20 + 100; break;
                case 'monochrome': hue = 0; saturation = 0; break;
                default: hue = i/config.particleCount * 360; // rainbow
            }

particles.push({
                x, y,
                velX: 0, velY: 0,
                radius: ((1 - k/config.particleCount) + 1) * config.particleSize/2,
                speed: Math.random() + 1,
                targetIndex: Math.floor(Math.random() * heartPath.length),
                direction: i % 2 * 2 - 1,
                friction: Math.random() * 0.2 + 0.7,
                color: `hsla(${hue},${saturation}%,${brightness}%,0.1)`
            });
        }
        trails.push(particles);
    }
}

// Render a single particle
function renderParticle(particle) {
    ctx.fillStyle = particle.color;
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
    ctx.fill();
}

// Main animation loop with robust error handling
function animationLoop() {
    if (!animationRunning) return; // Stop the animation if not running

try {
        // Clear with trail effect
        ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);

trails.forEach(trail => {
            if (!trail || !trail.length) return;
            
            const leader = trail[0];
            const target = heartPath[leader.targetIndex % heartPath.length];
            if (!target) return;

// Mouse influence
            if (mouseActive && config.mouseInfluence > 0) {
                const dx = mouseX - leader.x;
                const dy = mouseY - leader.y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                
                if (dist < 300) {
                    const force = (1 - dist/300) * (config.mouseInfluence/20);
                    leader.velX += dx/dist * force;
                    leader.velY += dy/dist * force;
                }
            }

// Move toward target
            const dx = leader.x - target[0];
            const dy = leader.y - target[1];
            const dist = Math.sqrt(dx*dx + dy*dy);

if (dist < 10) {
                if (Math.random() > 0.95) {
                    leader.targetIndex = Math.floor(Math.random() * heartPath.length);
                } else {
                    if (Math.random() > 0.99) leader.direction *= -1;
                    leader.targetIndex += leader.direction;
                    leader.targetIndex = (leader.targetIndex + heartPath.length) % heartPath.length;
                }
            }

// Update physics
            leader.velX += -dx/dist * leader.speed * config.speed;
            leader.velY += -dy/dist * leader.speed * config.speed;
            leader.x += leader.velX;
            leader.y += leader.velY;
            leader.velX *= leader.friction;
            leader.velY *= leader.friction;

// Render trail
            renderParticle(leader);
            for (let k = 1; k < trail.length; k++) {
                trail[k].x -= (trail[k].x - trail[k-1].x) * 0.7;
                trail[k].y -= (trail[k].y - trail[k-1].y) * 0.7;
                renderParticle(trail[k]);
            }
        });
    } catch (error) {
        console.error("Animation error:", error);
    }

requestAnimationFrame(animationLoop);
}

// Control handlers
function setupControls() {
    const controls = document.getElementById('controls');
    let controlsVisible = true;

document.getElementById('toggle-controls').addEventListener('click', () => {
        controlsVisible = !controlsVisible;
        controls.style.display = controlsVisible ? 'block' : 'none';
    });

const updateParticles = () => {
        config.particleCount = Math.min(100, Math.max(10, 
            parseInt(document.getElementById('particleCount').value)));
        document.getElementById('particleCountValue').textContent = config.particleCount;
        initHeartPath();
        initParticles();
    };

// Mouse tracking
    document.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
        mouseActive = true;
    });
    document.addEventListener('mouseleave', () => mouseActive = false);

// Window resize
    window.addEventListener('resize', () => {
        canvasWidth = canvas.width = window.innerWidth;
        canvasHeight = canvas.height = window.innerHeight;
        initHeartPath();
    });
}

// Initialize everything
function init() {
    const controls = document.getElementById('controls');
    const canvas = document.getElementById('c');

controls.style.display = 'block';
    canvas.style.display = 'block';
    animationRunning = true;
    setupControls();
    animationLoop(); // Start the animation loop

// Initialize everything
    initHeartPath();
    initParticles();
}

// Start the animation
init();