Это то, что мы собираемся создать, наведите указатель мыши на частицы, чтобы увидеть эффект.

В этой статье я покажу вам процесс создания захватывающей анимации частиц с использованием JavaScript и холста HTML5. Этот проект не только улучшает эстетику вашей веб-страницы, но и предоставляет фантастическую возможность углубиться в некоторые интересные концепции кодирования. Давайте погрузимся!

Обзор проекта

В анимации представлены частицы, которые движутся по кругу вокруг центральной точки. Когда мышь наводится на холст, частицы притягиваются к курсору, создавая динамичный и привлекательный эффект. Мы воспользуемся библиотекой Simplex Noise, чтобы внести некоторую хаотичность и сделать движение частиц более органичным и визуально привлекательным.

Используемые технологии

• HTML5 Canvas: для рендеринга анимации.
• JavaScript: для управления логикой анимации.
• CSS: для стилизации и макета.
• Симплексный шум: добавление случайности движению частиц.

Настройка среды

Чтобы начать, создайте HTML-файл и включите библиотеку Simplex Noise, используя следующий тег скрипта:

Реализация JavaScript

Вот основная часть нашей анимации на JavaScript. Мы определим конфигурацию частиц и настроим холст для их рисования.

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

В приведенном выше коде мы настраиваем различные свойства наших частиц, включая их количество, скорость, радиус, цвет (оттенок) и цвет фона холста.

Инициализация частиц

Мы инициализируем частицы по круговому шаблону и присваиваем им случайные свойства:

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

    for (let i = 0; i 




  
  
  Рисование частиц


Основная логика анимации обрабатывается в функции рисования, где мы постоянно обновляем и визуализируем частицы:


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








  
  
  CSS-стиль


Чтобы наша анимация выглядела безупречно, мы воспользуемся CSS для стилизации тела и холста:


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





Не стесняйтесь экспериментировать со свойствами частиц в объекте конфигурации, чтобы создать свою уникальную анимацию! Посмотрите живую демонстрацию на CodePen и поделитесь своими мыслями или улучшениями в комментариях ниже.