Как создать эффект анимации шума с помощью p5.js?

В этой статье мы увидим, как создать эффект анимации шума с помощью p5.js.

p5.js — это библиотека JavaScript, которая помогает создавать графику, с которой пользователи могут взаимодействовать, проста в использовании и помогает визуализировать различные виды графики и анимации. Эта статья покажет вам, как создать анимацию с шумовым эффектом с помощью p5.js.

Подход:

В первой строке объявляется глобальная переменная «xoff», которая будет использоваться для генерации значений шума.
Функция «setup()» вызывается один раз при создании холста. Он создает холст шириной 400 пикселей и высотой 400 пикселей, используя функцию «createCanvas()».
js неоднократно вызывает функцию «draw()» для отрисовки каждого кадра анимации.
Внутри функции «draw()» цвет фона устанавливается на 51 с помощью функции «background()».
Массив «noiseVal» создается для хранения случайных значений шума. Цикл for генерирует значения шума для каждой позиции «x» на холсте. Функция «noise()» генерирует случайные значения, на которые влияет значение «xoff», которое увеличивается на каждой итерации цикла.
Функция «stroke()» устанавливает цвет линий на «белый», функция «noFill()» делает линии незаполненными, а функции «beginShape()» и «endShape()» используются для рисования форму, используя вершины, заданные функцией «vertex()».
В каждой итерации цикла for функция «vertex()» добавляет новую вершину к рисуемой фигуре. Позиция «x» определяется переменной цикла «x», а позиция «y» определяется соответствующим значением в массиве «noiseVal».

Конечным результатом является непрерывно анимирующий эффект шума, который создает случайные линии на основе значений шума.

Используемые функции:

setup(): эта функция вызывается один раз при создании холста. Он настраивает холст с помощью функции «createCanvas()».
draw():js неоднократно вызывает эту функцию для отрисовки каждого кадра анимации. Он генерирует случайные значения шума и рисует линии на основе этих значений.
background(51): эта функция устанавливает цвет фона холста на 51, что является оттенком серого.
Noise(xoff): эта функция генерирует случайные значения, на которые влияет значение «xoff». Он возвращает значение от 0 до 1.
stroke(255): Эта функция устанавливает белый цвет линий.
noFill(): эта функция делает строки незаполненными.
beginShape()и endShape() : эти функции используются для рисования фигуры с использованием вершин, указанных функцией «vertex()».
vertex(x, NoiseVal[x]): эта функция добавляет новую вершину к рисуемой фигуре. Позиция «x» определяется переменной «loop» «x», а позиция «y» определяется соответствующим значением в массиве «noiseVal».

Пример: в этом примере мы собираемся создать анимацию с шумовым эффектом, используя p5.js.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible"

        content="IE=edge">

    <meta name="viewport" content=

"width=device-width, initial-scale=1.0">

    <title>Animation of Noise Effect</title>

    <script src=

"https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js">

    </script>

</head>

<body>

    <h2 style="color:green;">GeeksforGeeks</h2>

    <script>

        let xoff = 0;

        function setup() {

            createCanvas(250, 250);

        }

        function draw() {

            background(20);

            // create an array of random noise values

            let noiseVal = [];

            for (let i = 0; i < width; i++) {

                noiseVal[i] = noise(xoff) * height;

                xoff += 0.02;

            }

            // draw lines based on the noise values

            stroke(255);

            noFill();

            beginShape();

            for (let x = 0; x < width; x++) {

                vertex(x, noiseVal[x]);

            }

            endShape();

        }

    </script>

</body>

</html>

Выход: