Esto es lo que vamos a crear, mueve el mouse sobre las partículas para ver el efecto.

En este artículo, te guiaré a través del proceso de creación de una animación de partículas cautivadora usando JavaScript y HTML5 Canvas. Este proyecto no sólo mejora la estética de su página web, sino que también constituye una oportunidad fantástica para profundizar en algunos conceptos de codificación interesantes. ¡Vamos a sumergirnos!

Descripción general del proyecto

La animación presenta partículas que se mueven en un patrón circular alrededor de un punto central. Cuando el mouse pasa sobre el lienzo, las partículas son atraídas por el cursor, creando un efecto dinámico y atractivo. Utilizaremos la biblioteca Simplex Noise para introducir algo de aleatoriedad y hacer que el movimiento de las partículas sea más orgánico y visualmente atractivo.

Tecnologías utilizadas

• HTML5 Canvas: Para renderizar la animación.
• JavaScript: Para gestionar la lógica de la animación.
• CSS: Para estilo y diseño.
• Ruido simplex: Para agregar aleatoriedad al movimiento de las partículas.

Configurar el entorno

Para comenzar, cree un archivo HTML e incluya la biblioteca Simplex Noise usando la siguiente etiqueta de secuencia de comandos:

Implementación de JavaScript

Aquí está la parte central de nuestra animación en JavaScript. Definiremos la configuración de las partículas y configuraremos el lienzo para dibujarlas.

'use strict'; // Enables strict mode to enforce stricter parsing and error handling in JavaScript

// Configuration object for particle system
const config = {
    particleCount: 100,                  // Total number of particles in the system
    particlePropCount: 9,                // Number of properties each particle has
    baseTTL: 1,                          // Base time-to-live for each particle (in seconds)
    rangeTTL: 2,                         // Range of time-to-live variation (in seconds)
    baseSpeed: 0.001,                    // Base speed of particle movement
    rangeSpeed: 0.002,                   // Variation in particle speed
    circularSpeed: 0.001,                // Speed of particles' circular motion
    baseRadius: 2,                       // Minimum radius of particles
    rangeRadius: 3,                      // Maximum variation in particle radius
    baseHue: 220,                        // Base hue (color) of particles
    rangeHue: 120,                       // Variation in hue for particle colors
    backgroundColor: '#111827',          // Color of the background
    circleRadius: 250,                   // Radius of the circular area in which particles move
    glowStrength: 10,                    // Strength of the glow effect around particles
    randomnessFactor: 4,                 // Factor to introduce randomness in particle behavior
    trailLength: 10.2,                   // Length of the trail left by particles
    mouseForce: 2,                       // Increased mouse attraction force to pull particles
    mouseRadius: 200                      // Radius within which mouse influence affects particles
};

// Additional JavaScript code goes here...

En el código anterior, configuramos varias propiedades para nuestras partículas, incluido su recuento, velocidad, radio, color (tono) y el color de fondo del lienzo.

Inicializando partículas

Inicializamos las partículas en un patrón circular y les asignamos propiedades aleatorias:

function initParticles() {
    particleProps = new Float32Array(config.particleCount * config.particlePropCount);
    const angleIncrement = TAU / config.particleCount;

    for (let i = 0; i 




  
  
  Partículas de dibujo


La lógica central de la animación se maneja en la función de dibujo, donde actualizamos y renderizamos las partículas continuamente:


function draw() {
    tick  ;
    ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
    ctx.b.fillStyle = config.backgroundColor;
    ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);

    drawParticles();
    renderGlow();
    renderToScreen();
    requestAnimationFrame(draw);
}








  
  
  Estilo CSS


Para garantizar que nuestra animación se vea pulida, usaremos algo de CSS para diseñar el cuerpo y el lienzo:


body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    margin: 0;
    background: #000; /* Optional: background color */
}

.content--canvas {
    position: absolute; 
    top: 0;
    z-index: 1;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
}

canvas {
    display: block; 
}





¡Siéntete libre de experimentar con las propiedades de las partículas en el objeto de configuración para crear tu animación única! Vea la demostración en vivo en CodePen y comparta sus ideas o mejoras en los comentarios a continuación.