Объяснение:

• Мы определяем элемент , в котором будет происходить вся наша анимация.
• Стиль.css будет связан со стилем холста.
• Основная логика анимации содержится в script.js.

2. Стилизация холста с помощью CSS

Давайте добавим простой стиль, чтобы придать нашему холсту черный фон и убедиться, что все отступы и поля удалены.

* {    margin: 0;    padding: 0;    box-sizing: border-box;}canvas {    background-color: black;}

Объяснение:

• Установка нулевых полей и отступов гарантирует, что холст заполнит весь экран.
• Черный фон обеспечивает приятный контраст с белыми частицами.

3. Класс частиц: творим волшебство

Класс Particle — это основа анимации. Каждая частица движется по холсту, оставляя след из своих прошлых местоположений, создавая эффект плавности.

class Particle {    constructor(effect) {        this.effect = effect;        this.x = Math.floor(Math.random() * this.effect.width);        this.y = Math.floor(Math.random() * this.effect.height);        this.speedModifier = Math.floor(Math.random() * 5   1);        this.history = [{ x: this.x, y: this.y }];        this.maxLength = Math.floor(Math.random() * 200   10);        this.timer = this.maxLength * 2;        this.colors = [\\'#4C026B\\', \\'#8E0E00\\', \\'#9D0208\\', \\'#BA1A1A\\', \\'#730D9E\\'];        this.color = this.colors[Math.floor(Math.random() * this.colors.length)];    }    draw(context) {        context.beginPath();        context.moveTo(this.history[0].x, this.history[0].y);        for (let i = 1; i < this.history.length; i  ) {            context.lineTo(this.history[i].x, this.history[i].y);        }        context.strokeStyle = this.color;        context.stroke();    }    update() {        this.timer--;        if (this.timer >= 1) {            let x = Math.floor(this.x / this.effect.cellSize);            let y = Math.floor(this.y / this.effect.cellSize);            let index = y * this.effect.cols   x;            let angle = this.effect.flowField[index];            this.speedX = Math.cos(angle);            this.speedY = Math.sin(angle);            this.x  = this.speedX * this.speedModifier;            this.y  = this.speedY * this.speedModifier;            this.history.push({ x: this.x, y: this.y });            if (this.history.length > this.maxLength) {                this.history.shift();            }        } else if (this.history.length > 1) {            this.history.shift();        } else {            this.reset();        }    }    reset() {        this.x = Math.floor(Math.random() * this.effect.width);        this.y = Math.floor(Math.random() * this.effect.height);        this.history = [{ x: this.x, y: this.y }];        this.timer = this.maxLength * 2;    }}

Объяснение:

• Конструктор: каждая частица инициализируется случайным положением и скоростью движения. Массив истории отслеживает прошлые позиции для создания следов.
• draw(): эта функция рисует путь частицы на основе ее истории. Частица оставляет красочный след, который усиливает визуальный эффект.
• update(): Здесь положение частицы обновляется путем расчета угла по полю потока. Скорость и направление контролируются тригонометрическими функциями.
• reset(): Когда частица завершает свой след, она перемещается в новое случайное место.

4. Класс эффектов: организация анимации

Класс Effect управляет созданием частиц и самим полем потока, которое управляет движением частиц.

class Effect {    constructor(canvas) {        this.canvas = canvas;        this.width = this.canvas.width;        this.height = this.canvas.height;        this.particles = [];        this.numberOfParticles = 3000;        this.cellSize = 20;        this.flowField = [];        this.curve = 5;        this.zoom = 0.12;        this.debug = true;        this.init();    }    init() {        this.rows = Math.floor(this.height / this.cellSize);        this.cols = Math.floor(this.width / this.cellSize);        for (let y = 0; y < this.rows; y  ) {            for (let x = 0; x < this.cols; x  ) {                let angle = (Math.cos(x * this.zoom)   Math.sin(y * this.zoom)) * this.curve;                this.flowField.push(angle);            }        }        for (let i = 0; i < this.numberOfParticles; i  ) {            this.particles.push(new Particle(this));        }    }    drawGrid(context) {        context.save();        context.strokeStyle = \\'white\\';        context.lineWidth = 0.3;        for (let c = 0; c < this.cols; c  ) {            context.beginPath();            context.moveTo(c * this.cellSize, 0);            context.lineTo(c * this.cellSize, this.height);            context.stroke();        }        for (let r = 0; r < this.rows; r  ) {            context.beginPath();            context.moveTo(0, r * this.cellSize);            context.lineTo(this.width, r * this.cellSize);            context.stroke();        }        context.restore();    }    render(context) {        if (this.debug) this.drawGrid(context);        this.particles.forEach(particle => {            particle.draw(context);            particle.update();        });    }}

Объяснение:

• Конструктор: инициализирует размеры холста, количество частиц и поле потока.
• init(): вычисляет углы поля потока путем объединения тригонометрических функций для каждой ячейки сетки. Это поле влияет на движение частиц.
• drawGrid(): рисует сетку, разделяющую холст на ячейки, используемые при отладке.
• render(): вызывает методы рисования и обновления для каждой частицы, чтобы анимировать частицы на холсте.

5. Оживление с помощью цикла анимации

Чтобы все работало, нам нужен цикл анимации, который постоянно очищает холст и повторно отображает частицы:

const effect = new Effect(canvas);function animate() {    ctx.clearRect(0, 0, canvas.width, canvas.height);    effect.render(ctx);    requestAnimationFrame(animate);}animate();

Объяснение:

• clearRect(): очищает холст в каждом кадре, чтобы избежать рисования поверх предыдущих кадров.
• requestAnimationFrame: обеспечивает плавность анимации за счет рекурсивного вызова функции animate().

Заключение

Разбив классы Particle и Effect, мы создали плавную и динамичную анимацию поля потока, используя только стандартный JavaScript. Простота HTML-холста в сочетании с тригонометрическими функциями JavaScript позволяет нам создавать эти завораживающие визуальные эффекты.

Не стесняйтесь экспериментировать с количеством частиц, цветами или формулой поля потока, чтобы создавать свои собственные уникальные эффекты!

титульная страница > программирование > Экран поля потока

Экран поля потока

Опубликовано 9 ноября 2024 г.

Просматривать:232

Динамические поля потока с использованием Vanilla JS и HTML Canvas

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

1. Настройка проекта

Для начала нам нужны три файла: файл HTML для настройки холста, файл CSS для стилизации и файл JavaScript для обработки логики.

Объяснение:

• Мы определяем элемент , в котором будет происходить вся наша анимация.
• Стиль.css будет связан со стилем холста.
• Основная логика анимации содержится в script.js.

---

2. Стилизация холста с помощью CSS

Давайте добавим простой стиль, чтобы придать нашему холсту черный фон и убедиться, что все отступы и поля удалены.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

canvas {
    background-color: black;
}

Объяснение:

• Установка нулевых полей и отступов гарантирует, что холст заполнит весь экран.
• Черный фон обеспечивает приятный контраст с белыми частицами.

---

3. Класс частиц: творим волшебство

Класс Particle — это основа анимации. Каждая частица движется по холсту, оставляя след из своих прошлых местоположений, создавая эффект плавности.

class Particle {
    constructor(effect) {
        this.effect = effect;
        this.x = Math.floor(Math.random() * this.effect.width);
        this.y = Math.floor(Math.random() * this.effect.height);
        this.speedModifier = Math.floor(Math.random() * 5   1);
        this.history = [{ x: this.x, y: this.y }];
        this.maxLength = Math.floor(Math.random() * 200   10);
        this.timer = this.maxLength * 2;
        this.colors = ['#4C026B', '#8E0E00', '#9D0208', '#BA1A1A', '#730D9E'];
        this.color = this.colors[Math.floor(Math.random() * this.colors.length)];
    }

    draw(context) {
        context.beginPath();
        context.moveTo(this.history[0].x, this.history[0].y);
        for (let i = 1; i = 1) {
            let x = Math.floor(this.x / this.effect.cellSize);
            let y = Math.floor(this.y / this.effect.cellSize);
            let index = y * this.effect.cols   x;
            let angle = this.effect.flowField[index];

            this.speedX = Math.cos(angle);
            this.speedY = Math.sin(angle);
            this.x  = this.speedX * this.speedModifier;
            this.y  = this.speedY * this.speedModifier;

            this.history.push({ x: this.x, y: this.y });
            if (this.history.length > this.maxLength) {
                this.history.shift();
            }
        } else if (this.history.length > 1) {
            this.history.shift();
        } else {
            this.reset();
        }
    }

    reset() {
        this.x = Math.floor(Math.random() * this.effect.width);
        this.y = Math.floor(Math.random() * this.effect.height);
        this.history = [{ x: this.x, y: this.y }];
        this.timer = this.maxLength * 2;
    }
}

Объяснение:

• Конструктор: каждая частица инициализируется случайным положением и скоростью движения. Массив истории отслеживает прошлые позиции для создания следов.
• draw(): эта функция рисует путь частицы на основе ее истории. Частица оставляет красочный след, который усиливает визуальный эффект.
• update(): Здесь положение частицы обновляется путем расчета угла по полю потока. Скорость и направление контролируются тригонометрическими функциями.
• reset(): Когда частица завершает свой след, она перемещается в новое случайное место.

---

4. Класс эффектов: организация анимации

Класс Effect управляет созданием частиц и самим полем потока, которое управляет движением частиц.

class Effect {
    constructor(canvas) {
        this.canvas = canvas;
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.particles = [];
        this.numberOfParticles = 3000;
        this.cellSize = 20;
        this.flowField = [];
        this.curve = 5;
        this.zoom = 0.12;
        this.debug = true;
        this.init();
    }

    init() {
        this.rows = Math.floor(this.height / this.cellSize);
        this.cols = Math.floor(this.width / this.cellSize);
        for (let y = 0; y  {
            particle.draw(context);
            particle.update();
        });
    }
}

Объяснение:

• Конструктор: инициализирует размеры холста, количество частиц и поле потока.
• init(): вычисляет углы поля потока путем объединения тригонометрических функций для каждой ячейки сетки. Это поле влияет на движение частиц.
• drawGrid(): рисует сетку, разделяющую холст на ячейки, используемые при отладке.
• render(): вызывает методы рисования и обновления для каждой частицы, чтобы анимировать частицы на холсте.

---

5. Оживление с помощью цикла анимации

Чтобы все работало, нам нужен цикл анимации, который постоянно очищает холст и повторно отображает частицы:

const effect = new Effect(canvas);

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    effect.render(ctx);
    requestAnimationFrame(animate);
}
animate();

Объяснение:

• clearRect(): очищает холст в каждом кадре, чтобы избежать рисования поверх предыдущих кадров.
• requestAnimationFrame: обеспечивает плавность анимации за счет рекурсивного вызова функции animate().

---

Заключение

Разбив классы Particle и Effect, мы создали плавную и динамичную анимацию поля потока, используя только стандартный JavaScript. Простота HTML-холста в сочетании с тригонометрическими функциями JavaScript позволяет нам создавать эти завораживающие визуальные эффекты.

Не стесняйтесь экспериментировать с количеством частиц, цветами или формулой поля потока, чтобы создавать свои собственные уникальные эффекты!

Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/ibra-kdbra/flow-field-screen-567c?1. Если есть какие-либо нарушения, свяжитесь с [email protected], чтобы удалить их.

Последний учебник Более>

• 

  Как я могу найти пользователей, у которых сегодня дни рождения, используя MySQL?

  Как определить пользователей с сегодняшним днем ​​рождения с помощью MySQLОпределение того, является ли сегодня день рождения пользователя с помощью M...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Помимо операторов if: где еще можно использовать тип с явным преобразованием bool без приведения?

  Контекстное преобразование в bool разрешено без приведения Ваш класс определяет явное преобразование в bool, что позволяет использовать его экземпляр ...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Когда следует использовать опцию -F jmap для дампов кучи?

  Невозможно открыть файл сокета во время операции jmap: опция -FОбнаружена проблема при попытке получить дамп кучи с помощью jmap , в результате чего п...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Как я могу заставить CSS-анимацию оставаться на месте после завершения в Webkit?

  Понимание устойчивости CSS-анимации WebkitПри использовании анимации CSS3 часто приходится сталкиваться со сценарием, когда анимированный элемент возв...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Как нажимать кнопки со сложной структурой HTML с помощью Selenium?

  Selenium Нажмите на кнопку со сложной структурой HTMLПри попытке нажать кнопку со сложной структурой HTML с помощью Selenium вы можете столкнуться иск...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Как удалить все после определенной подстроки в PHP?

  Как удалить часть строки после определенной подстроки в PHPВы можете удалить все после определенной подстроки в PHP, используя substr() функция. Функц...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Использование WebSockets в Go для общения в реальном времени

  Создание приложений, требующих обновлений в режиме реального времени, например приложений чата, живых уведомлений или инструментов для совместной рабо...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Как мы можем рассчитать приблизительный объем памяти, занимаемый объектом JavaScript?

  Определение объема памяти объектов JavaScriptВ JavaScript понимание потребления памяти объектами имеет решающее значение для оптимизации производитель...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Как я могу стилизовать области карты изображения с помощью CSS?

  Можете ли вы оформить наведение курсора мыши на карте изображения с помощью CSS?Карты изображений используются для разграничения кликабельных областей...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Множество

  Методы — это fns, которые можно вызывать на объектах Массивы — это объекты, поэтому в JS у них тоже есть методы. срез (начало): извлечь часть ...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Почему я не могу загрузить свою карту-листовку, когда она находится на вкладке переключения данных?

  Вкладка переключения данных препятствует загрузке карты листовкиЭтот вопрос возникает, когда карта листовки на вкладке переключения данных не загружае...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Как добиться отсрочки в стиле Go в C++ без ущерба для производительности?

  Реализация Defer на C Концепция defer в стиле Go, которая позволяет выполнять чистую и краткую очистку ресурсов, приобрела популярность в C . Однако н...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Как настроить демаршалинг JSON с помощью отражения в Go?

  Настройка демаршалинга JSON с отражениемВ Go демаршалинг JSON в структуру — это простой процесс. Однако при работе с полями, имеющими настраиваемые те...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Как я могу легко перенести код в интерпретатор Python без проблем с отступами?

  Удобная передача кода: обход чувствительности Python к пробеламКопирование кода непосредственно в интерпретатор Python может быть проблематичным из-за...

  программирование Опубликовано 16 ноября 2024 г.
• 

  Что случилось со смещением столбцов в бета-версии Bootstrap 4?

  Bootstrap 4 Beta: удаление и восстановление смещения столбцовBootstrap 4 в своей бета-версии 1 внес существенные изменения в способ столбцы были смеще...

  программирование Опубликовано 16 ноября 2024 г.

КлассификацияБолее>

изучать японский учить корейский учить китайский учить иностранный язык игра Общая проблема Технологическая периферия ИИ Учебник по программному обеспечению программирование статья

Изучайте китайский

• 1 Как сказать «гулять» по-китайски? 走路 Китайское произношение, 走路 Изучение китайского языка
• 2 Как сказать «Сесть на самолет» по-китайски? 坐飞机 Китайское произношение, 坐飞机 Изучение китайского языка
• 3 Как сказать «сесть на поезд» по-китайски? 坐火车 Китайское произношение, 坐火车 Изучение китайского языка
• 4 Как сказать «поехать на автобусе» по-китайски? 坐车 Китайское произношение, 坐车 Изучение китайского языка
• 5 Как сказать «Ездить» по-китайски? 开车 Китайское произношение, 开车 Изучение китайского языка
• 6 Как будет плавание по-китайски? 游泳 Китайское произношение, 游泳 Изучение китайского языка
• 7 Как сказать «кататься на велосипеде» по-китайски? 骑自行车 Китайское произношение, 骑自行车 Изучение китайского языка
• 8 Как поздороваться по-китайски? 你好Китайское произношение, 你好Изучение китайского языка
• 9 Как сказать спасибо по-китайски? 谢谢Китайское произношение, 谢谢Изучение китайского языка
• 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning

инструментБолее>

Декодирование изображения в формате base64

Китайский Пиньинь

Кодировка Юникод

JS-обфускация, шифрование, сжатие

Инструмент шестнадцатеричного шифрования URL-адресов

Инструмент преобразования кодировки UTF-8

Онлайн-инструменты кодирования и декодирования Ascii

Инструмент шифрования MD5

Онлайн-инструмент для шифрования и дешифрования хеша/хеш-текста

Онлайн-шифрование SHA