Lienzo: Flujo de partículas del corazón

2,130 zegarkidawida

Abrir en el editor Publica tu código

Recomendado

10 January 2026

Plantilla de formulario de inicio de sesión HTML

21 July 2024

Formulario de inicio de sesión animado

28 May 2025

Un código de alejandrob.f2012

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