p5 js - создание интерактивной графики и анимаций с помощью JavaScript

P5.js это библиотека JavaScript для рисования двухмерной графики и создания интерактивных визуализаций на веб-страницах. Она предоставляет простой и интуитивно понятный API для работы с графикой, анимацией, аудио и видео.

Пример кода:

javascript
// Создание холста размером 400x400 пикселей
function setup() {
  createCanvas(400, 400);
}
// Рисование на холсте
function draw() {
  background(220); // Заливка цветом фона
  // Нарисовать круг по центру холста
  fill(255, 0, 0); // Установка цвета закраски
  ellipse(width/2, height/2, 100, 100); // Рисование круга в центре холста
  // Нарисовать линию от верхнего левого угла до нижнего правого
  stroke(0, 0, 255); // Установка цвета линии
  line(0, 0, width, height); // Рисование линии
  // Вывести текст на холсте
  fill(0); // Установка цвета текста
  textSize(32); // Установка размера текста
  text('Hello, p5.js!', 10, 50); // Вывод текста на указанных координатах
}

В этом примере мы создаем холст размером 400x400 пикселей с помощью функции `setup()`, которая вызывается один раз в начале работы программы. Затем мы используем функцию `draw()`, которая вызывается каждый кадр, чтобы рисовать на холсте.

Внутри функции `draw()` мы сначала заполняем холст указанным цветом фона с помощью функции `background()`. Затем мы рисуем круг с помощью функции `ellipse()`, линию с помощью функции `line()` и выводим текст с помощью функции `text()`.

P5.js также предоставляет еще множество функций для работы с графикой, анимацией, аудио и видео. Например, можно использовать функции `rect()` для рисования прямоугольников, `arc()` для рисования дуг, и `image()` для отображения изображений. Можно также использовать функции `mouseX` и `mouseY` для получения текущих координат указателя мыши и создавать интерактивные визуализации.

P5.js является очень популярной библиотекой и имеет большое сообщество разработчиков. За счет своей простоты он подходит как для начинающих разработчиков, так и для профессионалов. Вы можете найти еще больше примеров кода и учебных ресурсов на [официальном веб-сайте p5.js](https://p5js.org/).