On this page p5.js скетчи: генеративное искусство, шейдеры, интерактив, 3D.

Skill metadata​

| | |---|---| |Source| Bundled (installed by default) | |Path| skills/creative/p5js | |Version| 1.0.0 | |Tags| creative-coding, generative-art, p5js, canvas, interactive, visualization, webgl, shaders, animation | |Related skills| ascii-video, manim-video, excalidraw |

Reference: full SKILL.md​

info The following is the complete skill definition that Hermes loads when this skill is triggered. This is what the agent sees as instructions when the skill is active.

p5.js Production Pipeline

Когда использовать​

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

Что внутри​

Производственный пайплайн для интерактивного и генеративного визуального искусства с использованием p5.js. Создаёт браузерные скетчи, генеративное искусство, визуализации данных, интерактивные проекты, 3D-сцены, аудио-реактивные визуалы и моушн-графику — экспорт в HTML, PNG, GIF, MP4 или SVG. Охватывает: 2D/3D рендеринг, шум и системы частиц, поля потоков, шейдеры (GLSL), попиксельную обработку, кинетическую типографику, WebGL-сцены, анализ аудио, взаимодействие с мышью/клавиатурой и headless-экспорт высокого разрешения.

Creative Standard​

Это визуальное искусство, отображаемое в браузере. Холст — это среда; алгоритм — это кисть. Прежде чем написать хоть одну строку кода , сформулируй креативную концепцию. Что передаёт этот фрагмент? Что заставляет зрителя остановить скролл? Что отличает это от учебного примера кода? Запрос пользователя — это отправная точка; интерпретируй его с творческой амбицией. Превосходство при первом рендере обязательно. Результат должен быть визуально впечатляющим при первой загрузке. Если это выглядит как учебное упражнение по p5.js, конфигурация по умолчанию или «AI-сгенерированный креативный код», это неправильно. Передумай, прежде чем отправлять. Выйди за рамки эталонного словаря. Функции шума, системы частиц, цветовые палитры и шейдерные эффекты из документации — это начальный словарь. Для каждого проекта комбинируй, наслаивай и изобретай. Каталог — это палитра красок; ты пишешь картину. Будь проактивно креативным. Если пользователь просит «систему частиц», создай систему частиц с эмерджентным стайным поведением, шлейфовыми тенями, цвето-смещённым туманом глубины и дышащим фоновым шумовым полем. Включи как минимум одну визуальную деталь, о которой пользователь не просил, но которую оценит. Плотный, многослойный, продуманный. Каждый кадр должен вознаграждать просмотр. Никогда не используй плоские белые фоны. Всегда композиционная иерархия. Всегда осмысленный цвет. Всегда микродетали, которые проявляются только при близком рассмотрении. Целостная эстетика важнее количества функций. Все элементы должны служить единому визуальному языку — общая цветовая температура, единая словарная толщина штриха, гармоничные скорости движения. Скетч с десятью несвязанными эффектами хуже, чем один с тремя, которые сочетаются друг с другом.

Modes​

Mode| Input| Output| Reference
---|---|---|---|---
Generative art| Seed / параметры| Процедурная визуальная композиция (статическая или анимированная)| references/visual-effects.md
Data visualization| Набор данных / API| Интерактивные диаграммы, графики, пользовательские отображения данных| references/interaction.md
Interactive experience| Нет (управляет пользователь)| Скетч с управлением мышью/клавиатурой/тач-вводом| references/interaction.md
Animation / motion graphics| Таймлайн / раскадровка| Временные последовательности, кинетическая типографика, переходы| references/animation.md
3D scene| Описание концепции| WebGL геометрия, освещение, камера, материалы| references/webgl-and-3d.md
Image processing| Файл(ы) изображений| Попиксельная обработка, фильтры, мозаика, пуантилизм| references/visual-effects.md § Pixel Manipulation
Audio-reactive| Аудиофайл / микрофон| Звукоуправляемые генеративные визуалы| references/interaction.md § Audio Input

Stack​

Один самодостаточный HTML-файл на проект. Без шага сборки. Layer| Tool| Purpose
---|---|---|---
Core| p5.js 1.11.3 (CDN)| Рендеринг холста, математика, трансформации, обработка событий
3D| p5.js WebGL mode| 3D-геометрия, камера, освещение, GLSL-шейдеры
Audio| p5.sound.js (CDN)| FFT-анализ, амплитуда, микрофонный вход, осцилляторы
Export| Встроенный saveCanvas() / saveGif() / saveFrames()| Вывод PNG, GIF, последовательности кадров
Capture| CCapture.js (опционально)| Детерминированный захват видео с фиксированным FPS (WebM, GIF)
Headless| Puppeteer + Node.js (опционально)| Автоматизированный рендеринг высокого разрешения, MP4 через ffmpeg
SVG| p5.js-svg 1.6.0 (опционально)| Векторный вывод для печати — требует p5.js 1.x
Natural media| p5.brush (опционально)| Акварель, уголь, перо — требует p5.js 2.x + WEBGL
Texture| p5.grain (опционально)| Зернистость плёнки, текстурные наложения
Fonts| Google Fonts / loadFont()| Пользовательская типографика через OTF/TTF/WOFF2

Version Note​

p5.js 1.x (1.11.3) — стандарт по умолчанию: стабильный, хорошо документированный, широкая совместимость с библиотеками. Используй эту версию, если проект не требует функций 2.x. p5.js 2.x (2.2+) добавляет: async setup() вместо preload(), цветовые режимы OKLCH/OKLAB, splineVertex(), API .modify() для шейдеров, вариативные шрифты, textToContours(), указательные события. Требуется для p5.brush. См. references/core-api.md § p5.js 2.0.

Pipeline​

Каждый проект проходит один и тот же 6-этапный путь: [code] CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY

[/code] 1. CONCEPT — Сформулируй творческое видение: настроение, цветовой мир, словарь движения, что делает это уникальным 2. DESIGN — Выбери режим, размер холста, модель взаимодействия, цветовую систему, формат экспорта. Сопоставь концепцию с техническими решениями 3. CODE — Напиши один HTML-файл со встроенным p5.js. Структура: глобалы → preload() → setup() → draw() → хелперы → классы → обработчики событий 4. PREVIEW — Открой в браузере, проверь визуальное качество. Протестируй на целевом разрешении. Проверь производительность 5. EXPORT — Захвати вывод: saveCanvas() для PNG, saveGif() для GIF, saveFrames() + ffmpeg для MP4, Puppeteer для headless-пакетов 6. VERIFY — Соответствует ли результат концепции? Визуально ли он впечатляет при целевом размере отображения? Поставил бы ты его в рамку?

Creative Direction​

Aesthetic Dimensions​

Dimension| Options| Reference
---|---|---|---
Color system| HSB/HSL, RGB, именованные палитры, процедурная гармония, градиентная интерполяция| references/color-systems.md
Noise vocabulary| Perlin noise, simplex, fractal (octaved), domain warping, curl noise| references/visual-effects.md § Noise
Particle systems| Физические, стайные, рисующие следы, управляемые аттракторами, следующие полю потока| references/visual-effects.md § Particles
Shape language| Геометрические примитивы, пользовательские вершины, кривые Безье, SVG-пути| references/shapes-and-geometry.md
Motion style| Смягчённый, пружинный, шумовой, физическая симуляция, lerp, ступенчатый| references/animation.md
Typography| Системные шрифты, загруженные OTF, textToPoints() частичный текст, кинетический| references/typography.md
Shader effects| GLSL fragment/vertex, фильтр-шейдеры, постобработка, петли обратной связи| references/webgl-and-3d.md § Shaders
Composition| Сетка, радиальная, золотое сечение, правило третей, органический разброс, мозаика| references/core-api.md § Composition
Interaction model| Следование за мышью, клик-спавн, перетаскивание, состояние клавиатуры, скролл, микрофонный вход| references/interaction.md
Blend modes| BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY| references/color-systems.md § Blend Modes
Layering| createGraphics() внеэкранные буферы, альфа-композитинг, маскирование| references/core-api.md § Offscreen Buffers
Texture| Поверхность Перлина, стипплинг, штриховка, полутон, сортировка пикселей| references/visual-effects.md § Texture Generation

Per-Project Variation Rules​

Никогда не используй конфигурации по умолчанию. Для каждого проекта: * Пользовательская цветовая палитра — никогда сырое fill(255, 0, 0). Всегда продуманная палитра из 3–7 цветов * Пользовательский словарь толщины штриха — тонкие акценты (0.5), средняя структура (1–2), жирный акцент (3–5) * Обработка фона — никогда просто background(0) или background(255). Всегда текстурированный, градиентный или многослойный * Разнообразие движения — разные скорости для разных элементов. Основные на 1x, второстепенные на 0.3x, окружающие на 0.1x * Как минимум один изобретённый элемент — пользовательское поведение частиц, новое применение шума, уникальная реакция на взаимодействие

Project-Specific Invention​

Для каждого проекта придумай как минимум одно из: * Пользовательская цветовая палитра, соответствующая настроению (не предустановка) * Новая комбинация шумовых полей (например, curl noise + domain warp + feedback) * Уникальное поведение частиц (пользовательские силы, пользовательские следы, пользовательский спавн) * Механика взаимодействия, которую пользователь не запрашивал, но которая возвышает произведение * Композиционная техника, создающая визуальную иерархию

Parameter Design Philosophy​

Параметры должны вытекать из алгоритма, а не из универсального меню. Спроси: «Какие свойства этой системы должны быть настраиваемыми?» Хорошие параметры раскрывают характер алгоритма: * Количества — сколько частиц, ветвей, ячеек (управляет плотностью) * Масштабы — частота шума, размер элемента, интервалы (управляет текстурой) * Скорости — скорость, скорость роста, затухание (управляет энергией) * Пороги — когда поведение меняется? (управляет драматизмом) * Соотношения — пропорции, баланс между силами (управляет гармонией)

Плохие параметры — это общие элементы управления, не связанные с алгоритмом: * «color1», «color2», «size» — бессмысленно без контекста * Переключатели для несвязанных эффектов * Параметры, меняющие только косметику, а не поведение

Каждый параметр должен влиять на то, как алгоритм мыслит, а не только на то, как он выглядит. Параметр «турбулентность», меняющий октавы шума, — хорош. Ползунок «размер частиц», меняющий только радиус ellipse(), — поверхностен.

Workflow​

Step 1: Creative Vision​

Перед любым кодом сформулируй: * Настроение / атмосфера: Что должен чувствовать зритель? Задумчивость? Энергию? Беспокойство? Игривость? * Визуальная история: Что происходит со временем (или при взаимодействии)? Построение? Угасание? Трансформация? Колебание? * Цветовой мир: Тёплый/холодный? Монохромный? Комплементарный? Какой доминирующий оттенок? Акцент? * Язык форм: Органические кривые? Острые геометрические формы? Точки? Линии? Смешанный? * Словарь движения: Медленный дрейф? Взрывной выброс? Дышащий пульс? Механическая точность? * ЧТО ДЕЛАЕТ ЭТО ОСОБЕННЫМ: Что является той единственной вещью, которая делает этот скетч уникальным?

Сопоставь запрос пользователя с эстетическими выборами. «Расслабляющий генеративный фон» требует совсем другого подхода, чем «глитч-визуализация данных».

Step 2: Technical Design​

• Режим — какой из 7 режимов из таблицы выше
• Размер холста — альбомный 1920x1080, портретный 1080x1920, квадратный 1080x1080 или адаптивный windowWidth/windowHeight
• Рендерер — P2D (по умолчанию) или WEBGL (для 3D, шейдеров, продвинутых режимов смешивания)
• Частота кадров — 60fps (интерактив), 30fps (фоновая анимация) или noLoop() (статический генератив)
• Цель экспорта — отображение в браузере, PNG-кадр, GIF-цикл, MP4-видео, SVG-вектор
• Модель взаимодействия — пассивная (нет ввода), мышь, клавиатура, аудио-реактивная, скролл
• UI для зрителя — для интерактивного генеративного искусства начинай с templates/viewer.html, который предоставляет навигацию по seed, ползунки параметров и скачивание. Для простых скетчей или экспорта видео используй голый HTML

Step 3: Code the Sketch​

Для интерактивного генеративного искусства (исследование seed, настройка параметров): начинай с templates/viewer.html. Прочитай шаблон сначала, сохрани фиксированные секции (навигация по seed, действия), замени алгоритм и элементы управления параметрами. Это даёт пользователю навигацию prev/next/random/jump по seed, ползунки параметров с обновлением в реальном времени и скачивание PNG — всё готовое. Для анимаций, экспорта видео или простых скетчей: используй голый HTML: Один HTML-файл. Структура: [code] <!DOCTYPE html>