C'est ce que nous allons créer, déplacez votre souris sur les particules pour voir l'effet.

Dans cet article, je vais vous guider à travers le processus de création d'une animation de particules captivante à l'aide d'un canevas JavaScript et HTML5. Ce projet améliore non seulement l'esthétique de votre page Web, mais constitue également une fantastique opportunité d'approfondir certains concepts de codage intéressants. Allons-y !

Aperçu du projet

L'animation présente des particules qui se déplacent selon un motif circulaire autour d'un point central. Lorsque la souris survole la toile, les particules sont attirées vers le curseur, créant un effet dynamique et engageant. Nous utiliserons la bibliothèque Simplex Noise pour introduire un peu d'aléatoire et rendre le mouvement des particules plus organique et visuellement attrayant.

Technologies utilisées

• HTML5 Canvas : pour le rendu de l'animation.
• JavaScript : pour gérer la logique d'animation.
• CSS : pour le style et la mise en page.
• Simplex Noise : pour ajouter du caractère aléatoire au mouvement des particules.

Configuration de l'environnement

Pour commencer, créez un fichier HTML et incluez la bibliothèque Simplex Noise à l'aide de la balise de script suivante :

Implémentation JavaScript

Voici la partie centrale de notre animation en JavaScript. Nous définirons la configuration des particules et configurerons le canevas pour les dessiner.

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

Dans le code ci-dessus, nous configurons diverses propriétés de nos particules, notamment leur nombre, leur vitesse, leur rayon, leur couleur (teinte) et la couleur d'arrière-plan du canevas.

Initialisation des particules

Nous initialisons les particules selon un motif circulaire et leur attribuons des propriétés aléatoires :

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

    for (let i = 0; i 




  
  
  Dessiner des particules


La logique d'animation de base est gérée dans la fonction de dessin, où nous mettons à jour et restituons les particules en continu :


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








  
  
  Style CSS


Pour garantir que notre animation soit soignée, nous utiliserons du CSS pour styliser le corps et le canevas :


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





N'hésitez pas à expérimenter les propriétés des particules dans l'objet de configuration pour créer votre animation unique ! Découvrez la démo en direct sur CodePen et partagez vos réflexions ou améliorations dans les commentaires ci-dessous.