Canvas: Heart Particle Flow

Open In Editor Publish Your Code

<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;
  }
}

JS

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

Canvas: Heart Particle Flow

Recommended

CodePen Home Draw a Heart ❤️✍️

Three.js Particle System Shape Morphing Effect

flower

HTML

CSS

JS

Recommended

CodePen Home Draw a Heart ❤️✍️

Three.js Particle System Shape Morphing Effect

flower

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS