Isso é o que vamos criar, passe o mouse sobre as partículas para ver o efeito.

Neste artigo, orientarei você no processo de criação de uma animação de partículas cativante usando JavaScript e tela HTML5. Este projeto não apenas melhora a estética da sua página web, mas também serve como uma oportunidade fantástica para se aprofundar em alguns conceitos interessantes de codificação. Vamos mergulhar!

Visão geral do projeto

A animação apresenta partículas que se movem em um padrão circular em torno de um ponto central. Quando o mouse passa sobre a tela, as partículas são atraídas pelo cursor, criando um efeito dinâmico e envolvente. Utilizaremos a biblioteca Simplex Noise para introduzir alguma aleatoriedade e tornar o movimento das partículas mais orgânico e visualmente atraente.

Tecnologias Utilizadas

• HTML5 Canvas: para renderizar a animação.
• JavaScript: Para gerenciar a lógica de animação.
• CSS: para estilo e layout.
• Ruído Simplex: Para adicionar aleatoriedade ao movimento das partículas.

Configurando o Ambiente

Para começar, crie um arquivo HTML e inclua a biblioteca Simplex Noise usando a seguinte tag de script:

Implementação de JavaScript

Aqui está a parte central da nossa animação em JavaScript. Definiremos a configuração das partículas e montaremos a tela para desenhá-las.

'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...

No código acima, configuramos várias propriedades para nossas partículas, incluindo contagem, velocidade, raio, cor (matiz) e a cor de fundo da tela.

Inicializando Partículas

Inicializamos as partículas em um padrão circular e atribuímos a elas propriedades aleatórias:

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

    for (let i = 0; i 




  
  
  Desenhando Partículas


A lógica principal da animação é tratada na função draw, onde atualizamos e renderizamos as 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 garantir que nossa animação tenha uma aparência elegante, usaremos CSS para estilizar o corpo e a tela:



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





Sinta-se à vontade para experimentar as propriedades das partículas no objeto de configuração para criar sua animação exclusiva! Confira a demonstração ao vivo no CodePen e compartilhe suas idéias ou melhorias nos comentários abaixo.