🏠 Главная › user guide › creative p5js

{/ Эта страница автоматически генерируется из SKILL.md навыка с помощью website/scripts/generate-skill-docs.py. Редактируйте исходный SKILL.md, а не эту страницу. /}

P5Js

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

Метаданные навыка
Источник Встроенный (установлен по умолчанию)
Путь skills/creative/p5js
Версия 1.0.0
Платформы linux, macos, windows
Теги creative-coding, generative-art, p5js, canvas, interactive, visualization, webgl, shaders, animation
Связанные навыки ascii-video, manim-video, excalidraw

Справочник: полный SKILL.md

ℹ️ Info

Ниже приведено полное определение навыка, которое Hermes загружает при активации этого навыка. Это то, что агент видит в качестве инструкций, когда навык активен.

Производственный конвейер p5.js

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

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

Что внутри

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

Творческий стандарт

Это визуальное искусство, отображаемое в браузере. Холст — это среда; алгоритм — это кисть.

Прежде чем написать хотя бы одну строку кода, сформулируйте творческую концепцию. Что передаёт эта работа? Что заставляет зрителя остановить скроллинг? Что отличает её от примера из учебника по программированию? Запрос пользователя — это отправная точка; интерпретируйте его с творческой амбицией.

Превосходство при первом рендере — не обсуждается. Результат должен быть визуально впечатляющим при первой загрузке. Если он выглядит как упражнение из учебника p5.js, стандартная конфигурация или «сгенерированный ИИ креативный код», это неправильно. Переосмыслите, прежде чем отправлять.

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

Будьте проактивно креативны. Если пользователь просит «систему частиц», предоставьте систему частиц с эмерджентным стайным поведением, затухающими призрачными следами, туманом глубины со смещением палитры и фоновым полем шума, которое дышит. Включите как минимум одну визуальную деталь, о которой пользователь не просил, но оценит.

Плотно, многослойно, продуманно. Каждый кадр должен вознаграждать просмотр. Никогда не используйте плоские белые фоны. Всегда композиционная иерархия. Всегда намеренный цвет. Всегда микродетали, которые проявляются только при близком рассмотрении.

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

Режимы

Режим Вход Выход Справочник
Генеративное искусство Сид / параметры Процедурная визуальная композиция (статическая или анимированная) references/visual-effects.md
Визуализация данных Набор данных / API Интерактивные диаграммы, графики, пользовательские отображения данных references/interaction.md
Интерактивный опыт Нет (управляет пользователь) Скетч с управлением мышью/клавиатурой/тачскрином references/interaction.md
Анимация / моушн-графика Таймлайн / раскадровка Временные последовательности, кинетическая типографика, переходы references/animation.md
3D-сцена Описание концепции WebGL-геометрия, освещение, камера, материалы references/webgl-and-3d.md
Обработка изображений Файл(ы) изображений Манипуляция пикселями, фильтры, мозаика, пуантилизм references/visual-effects.md § Манипуляция пикселями
Аудиореактивное Аудиофайл / микрофон Генеративные визуалы, управляемые звуком references/interaction.md § Аудиовход

Стек

Один самодостаточный HTML-файл на проект. Этап сборки не требуется.

Слой Инструмент Назначение
Ядро p5.js 1.11.3 (CDN) Рендеринг canvas, математика, трансформации, обработка событий
3D p5.js WebGL режим 3D-геометрия, камера, освещение, GLSL-шейдеры
Аудио p5.sound.js (CDN) FFT-анализ, амплитуда, микрофонный вход, осцилляторы
Экспорт Встроенные saveCanvas() / saveGif() / saveFrames() Вывод PNG, GIF, последовательности кадров
Захват CCapture.js (опционально) Детерминированный захват видео с фиксированной частотой кадров (WebM, GIF)
Безголовый Puppeteer + Node.js (опционально) Автоматизированный рендеринг в высоком разрешении, MP4 через ffmpeg
SVG p5.js-svg 1.6.0 (опционально) Векторный вывод для печати — требует p5.js 1.x
Натуральные медиа p5.brush (опционально) Акварель, уголь, перо — требует p5.js 2.x + WEBGL
Текстура p5.grain (опционально) Зернистость плёнки, текстурные наложения
Шрифты Google Fonts / loadFont() Пользовательская типографика через OTF/TTF/WOFF2

Примечание о версиях

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.

Конвейер

Каждый проект проходит один и тот же 6-этапный путь:

КОНЦЕПЦИЯ → ДИЗАЙН → КОД → ПРЕДПРОСМОТР → ЭКСПОРТ → ПРОВЕРКА
  1. КОНЦЕПЦИЯ — Сформулируйте творческое видение: настроение, цветовой мир, словарь движения, что делает это уникальным
  2. ДИЗАЙН — Выберите режим, размер холста, модель взаимодействия, цветовую систему, формат экспорта. Сопоставьте концепцию с техническими решениями
  3. КОД — Напишите один HTML-файл со встроенным p5.js. Структура: глобалы → preload() → setup() → draw() → хелперы → классы → обработчики событий
  4. ПРЕДПРОСМОТР — Откройте в браузере, проверьте визуальное качество. Протестируйте в целевом разрешении. Проверьте производительность
  5. ЭКСПОРТ — Захватите вывод: saveCanvas() для PNG, saveGif() для GIF, saveFrames() + ffmpeg для MP4, Puppeteer для безголового пакетного рендеринга
  6. ПРОВЕРКА — Соответствует ли вывод концепции? Впечатляет ли визуально при предполагаемом размере отображения? Вы бы поместили это в рамку?

Творческое направление

Эстетические измерения

Измерение Варианты Справочник
Цветовая система HSB/HSL, RGB, именованные палитры, процедурная гармония, градиентная интерполяция references/color-systems.md
Словарь шума Шум Перлина, симплекс, фрактальный (октавный), деформация домена, curl-шум references/visual-effects.md § Шум
Системы частиц Физические, стайные, рисующие следы, управляемые аттракторами, следующие полю потока references/visual-effects.md § Частицы
Язык форм Геометрические примитивы, пользовательские вершины, кривые Безье, SVG-пути references/shapes-and-geometry.md
Стиль движения Сглаженное, пружинное, шумовое, физическая симуляция, lerp, ступенчатое references/animation.md
Типографика Системные шрифты, загруженные OTF, textToPoints() частичный текст, кинетическая references/typography.md
Шейдерные эффекты GLSL фрагментные/вершинные, фильтрующие шейдеры, постобработка, петли обратной связи references/webgl-and-3d.md § Шейдеры
Композиция Сетка, радиальная, золотое сечение, правило третей, органический разброс, плитка references/core-api.md § Композиция
Модель взаимодействия Следование за мышью, спавн по клику, перетаскивание, состояние клавиатуры, скролл, микрофонный вход references/interaction.md
Режимы наложения BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY references/color-systems.md § Режимы наложения
Наслоение Внеэкранные буферы createGraphics(), альфа-композитинг, маскирование references/core-api.md § Внеэкранные буферы
Текстура Перлиновая поверхность, пунктир, штриховка, полутон, сортировка пикселей references/visual-effects.md § Генерация текстур

Правила вариации для каждого проекта

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

Изобретение для конкретного проекта

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

Философия дизайна параметров

Параметры должны вытекать из алгоритма, а не из универсального меню. Спросите: «Какие свойства этой системы должны быть настраиваемыми?»

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

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

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

Рабочий процесс

Шаг 1: Творческое видение

До любого кода сформулируйте:

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

Шаг 2: Технический дизайн

Шаг 3: Напишите скетч

Для интерактивного генеративного искусства (исследование сидов, настройка параметров): начинайте с templates/viewer.html. Прочитайте шаблон сначала, сохраните фиксированные секции (навигация по сидам, действия), замените алгоритм и элементы управления параметрами. Это даёт пользователю навигацию по сидам (пред/след/случайный/переход), ползунки параметров с обновлением в реальном времени и загрузку PNG — всё готово.

Для анимаций, экспорта видео или простых скетчей: используйте чистый HTML:

Один HTML-файл. Структура:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Название проекта</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
  <!-- <script src="https://unpkg.com/p5.js-svg@1.6.0"></script> -->  <!-- Экспорт SVG -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- Захват видео -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Конфигурация ===
const CONFIG = {
  seed: 42,
  //... параметры проекта
};

// === Цветовая палитра ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  //...
};

// === Глобальное состояние ===
let particles = [];

// === Preload (шрифты, изображения, данные) ===
function preload() {
  // font = loadFont('...');
}

// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Инициализация состояния...
}

// === Цикл Draw ===
function draw() {
  // Рендеринг кадра...
}

// === Вспомогательные функции ===
//...

// === Классы ===
class Particle {
  //...
}

// === Обработчики событий ===
function mousePressed() { /*... */ }
function keyPressed() { /*... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

Ключевые шаблоны реализации: - Сидовая случайность: Всегда используйте randomSeed() + noiseSeed() для воспроизводимости. - Цветовой режим: Используйте colorMode(HSB, 360, 100, 100, 100) для настройки управления цветом. - Разделение состояния: КОНФИГ для параметров, ПАЛИТРА для цветов, глобальные параметры для изменяемого состояния. - Сущности на основе классов: Частицы, агенты, формы как классы с методами update() + display() - Внеэкранные буферы: createGraphics() для многослойной композиции, следования, масок

Шаг 4: Предпросмотр и итерация

Шаг 5: Экспорт

Формат Метод Команда
ПНГ saveCanvas('output', 'png') в keyPressed() Нажмите 's' для сохранения
Высокое разрешение PNG Безголовый захват Кукольник node scripts/export-frames.js Sketch.html --width 3840 --height 2160 --frames 1
Гифка saveGif('output', 5) — захватывает N секунд Нажмите «g» для сохранения
Последние кадры saveFrames('frame', 'png', 10, 30) — 10с при 30fps Затем ffmpeg -iframe-%04d.png -c:v libx264 output.mp4
MP4 Захват кадров Кукольник + ffmpeg bash scripts/render.sh Sketch.html output.mp4 --duration 30 --fps 30
SVG createCanvas(w, h, SVG) с p5.js-svg сохранить('output.svg')

Шаг 6: Проверка качества

Критические замечания по реализации

Производительность — сначала отключите FES

Система дружественных ошибок (FES) добавляется в 10-кратном размере накладных расходов. Отключите ее в каждом продакшн-скетче:

p5.disableFriendlyErrors = true;  // ДО setup()

function setup() {
  pixelDensity(1);  // предотвращает 2x-4x перерисовку на retina
  createCanvas(1920, 1080);
}

В самых глубоких циклах (частицы, пиксельные операции) используйте Math.* вместо обёрток p5 — измерим быстрее:

// В draw() или update() горячих путях:
let a = Math.sin(t);          // не sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // не dist() — или лучше: пропустите sqrt, сравнивайте magSq
let v = Math.random();        // не random() — когда сид не нужен
let m = Math.min(a, b);       // не min(a, b)

Никогда не воспользуйтесь console.log() внутри draw(). Никогда не манипулируйте DOM с помощью draw(). См. references/troubleshooting.md § Производительность.

Случайность с сидом — всегда

Каждый генеративный эскиз должен быть воспроизведен. Тот же сид — тот же вывод.

function setup() {
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  // Все вызовы random() и noise() теперь детерминированы
}

Никогда не используйте Math.random() для генеративного контента — только для критического по производительности невизуального кода. Всегда используйте random() для визуальных элементов. Если нужен случайный сид: CONFIG.seed =floor(random(99999)).

Поддержка платформы генеративного искусства (fxhash/Art Blocks)

Для платформы генеративного искусства замените PRNG p5 на детерминированную случайность платформы:

// Соглашение fxhash
const SEED = $fx.hash;              // уникальный для каждого минта
const rng = $fx.rand;               // детерминированный PRNG
$fx.features({ palette: 'warm', complexity: 'high' });

// В setup():
randomSeed(SEED);   // для noise() p5
noiseSeed(SEED);

// Замените random() на rng() для детерминизма платформы
let x = rng() * width;  // вместо random(width)

См. references/export-pipeline.md § Экспорт на платформу.

Цветовой режим — викор HSB

HSB (Оттенок, Насыщенность, Яркость) значительно проще в работе, чем RGB, для генеративного искусства:

colorMode(HSB, 360, 100, 100, 100);
// Теперь: fill(hue, sat, bri, alpha)
// Поворот оттенка: fill((baseHue + offset) % 360, 80, 90)
// Уменьшение насыщенности: fill(hue, sat * 0.3, bri)
// Затемнение: fill(hue, sat, bri * 0.5)

Никогда не хардкодируйте сырые значения RGB. Определите палитру объекта, выведите вариации процедур. См. ссылки/color-systems.md.

Шум — многооктавный, не сырой

Сырой noise(x, y) выглядит как гладкие пятна. Наслаивайте октавы для естественной текстуры:

function fbm(x, y, octaves = 4) {
  let val = 0, amp = 1, freq = 1, sum = 0;
  for (let i = 0; i < octaves; i++) {
    val += noise(x * freq, y * freq) * amp;
    sum += amp;
    amp *= 0.5;
    freq *= 2;
  }
  return val / sum;
}

Для текучих форм применяются деформация домена: подайте шум обратно, как координаты входа шума. См. references/visual-effects.md.

createGraphics() для слоев — необязательно

Плоский однослойный рендеринг выглядит плоско. Для композиции используйте внеэкранные буферы:

let bgLayer, fgLayer, trailLayer;
function setup() {
  createCanvas(1920, 1080);
  bgLayer = createGraphics(width, height);
  fgLayer = createGraphics(width, height);
  trailLayer = createGraphics(width, height);
}
function draw() {
  renderBackground(bgLayer);
  renderTrails(trailLayer);   // постоянные, затухающие
  renderForeground(fgLayer);  // очищается каждый кадр
  image(bgLayer, 0, 0);
  image(trailLayer, 0, 0);
  image(fgLayer, 0, 0);
}

Производительность — векторизуйте, где возможно

Вызовы отрисовки p5.js дороги. Для тысяч частиц:

// МЕДЛЕННО: отдельные фигуры
for (let p of particles) {
  ellipse(p.x, p.y, p.size);
}

// БЫСТРО: одна фигура с beginShape()
beginShape(POINTS);
for (let p of particles) {
  vertex(p.x, p.y);
}
endShape();

// САМОЕ БЫСТРОЕ: пиксельный буфер для массовых количеств
loadPixels();
for (let p of particles) {
  let idx = 4 * (floor(p.y) * width + floor(p.x));
  pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();

См. references/troubleshooting.md § Производительность.

Режим экземпляра для нескольких скетчей

Глобальный режим загрязнения образует «окно». Для продакшна воспользуйтесь режимом экземпляра:

const sketch = (p) => {
  p.setup = function() {
    p.createCanvas(800, 800);
  };
  p.draw = function() {
    p.background(0);
    p.ellipse(p.mouseX, p.mouseY, 50);
  };
};
new p5(sketch, 'canvas-container');

Требуется при встраивании нескольких эскизов на одну страницу или экспертов с фреймворками.

Особенности WebGL-режима

Экспорт — соглашение о ключах

Каждый эскиз должен включать эту клавиатуру в keyPressed():

function keyPressed() {
  if (key === 's' || key === 'S') saveCanvas('output', 'png');
  if (key === 'g' || key === 'G') saveGif('output', 5);
  if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
  if (key === ' ') CONFIG.paused =!CONFIG.paused;
}

Безголовый экспорт видео — викор noLoop()

Для безголового рендеринга через скетч Puppeteer обязан используйте noLoop() в настройке. Без этого цикла draw p5 работает свободно, пока скриншоты замедляются — эскиз убегает вперед, и вы постепенно пропустили/дублированные кадры.

function setup() {
  createCanvas(1920, 1080);
  pixelDensity(1);
  noLoop();                    // скрипт захвата управляет продвижением кадра
  window._p5Ready = true;      // сигнал готовности скрипту захвата
}

Встроенный scripts/export-frames.js обнаруживает _p5Ready и вызывает redraw() один раз за захват для точного соответствия кадров 1:1. См. references/export-pipeline.md § Детерминированный захват.

Для многокадровых видео используйте архитектуру по клипам: один HTML на сцену, рендерите независимо, склеивайте с помощью ffmpeg -f concat. См. references/export-pipeline.md § Архитектура по клипам.

Рабочий процесс агента

При создании p5.js скетчей:

  1. Напишите HTML-файл — один самодостаточный файл, весь код встроенный
  2. Откройте в браузере — open sketch.html (macOS) или xdg-open sketch.html (Linux)
  3. Локальные ресурсы (шрифты, изображения) требуют сервера: python3 -m http.server 8080 в директории проекта, затем откройте http://localhost:8080/sketch.html
  4. Экспорт PNG/GIF — добавьте сокращения keyPressed() как показано выше, скажите пользователю, какую клавишу нажать
  5. Безголовый экспорт — node scripts/export-frames.js sketch.html --frames 300 для автоматического захвата кадров (скетч должен использовать noLoop() + _p5Ready)
  6. Рендеринг MP4 — bash scripts/render.sh sketch.html output.mp4 --duration 30
  7. Итеративное улучшение — редактируйте HTML-файл, пользователь обновляет браузер, чтобы увидеть изменения
  8. Загружайте справочники по требованию — используйте skill_view(name="p5js", file_path="references/...") для загрузки конкретных справочных файлов по мере необходимости во время реализации

Целевые показатели производительности

Метрика Цель
Частота кадров (интерактивный) 60fps стабильно
Частота кадров (анимационный экспорт) Минимум 30fps
Количество частиц (P2D фигуры) 5 000-10 000 при 60fps
Количество частиц (пиксельный буфер) 50 000-100 000 при 60fps
Разрешение холста До 3840x2160 (экспорт), 1920x1080 (интерактивный)
Размер файла (HTML) < 100 КБ (без учёта CDN-библиотек)
Время загрузки < 2 с до первого кадра

Справочники

Файл Содержание
references/core-api.md Настройка холста, система координат, цикл draw, push()/pop(), внеэкранные буферы, паттерны композиции, pixelDensity(), адаптивный дизайн
references/shapes-and-geometry.md 2D-примитивы, beginShape()/endShape(), кривые Безье/Катмулла-Рома, системы vertex(), пользовательские фигуры, p5.Vector, поля расстояний со знаком, преобразование SVG-путей
references/visual-effects.md Шум (Перлин, фрактальный, деформация домена, curl), поля потоков, системы частиц (физика, стайность, следы), манипуляция пикселями, генерация текстур (пунктир, штриховка, полутон), петли обратной связи, реакция-диффузия
references/animation.md Покадровая анимация, функции сглаживания, lerp()/map(), пружинная физика, конечные автоматы, временная последовательность, тайминг на основе millis(), паттерны переходов
references/typography.md text(), loadFont(), textToPoints(), кинетическая типографика, текстовые маски, метрики шрифта, адаптивный размер текста
references/color-systems.md colorMode(), HSB/HSL/RGB, lerpColor(), paletteLerp(), процедурные палитры, цветовая гармония, blendMode(), рендеринг градиентов, библиотека курированных палитр
references/webgl-and-3d.md Рендерер WEBGL, 3D-примитивы, камера, освещение, материалы, пользовательская геометрия, GLSL-шейдеры (createShader(), createFilterShader()), фреймбуферы, постобработка
references/interaction.md События мыши, состояние клавиатуры, тач-ввод, DOM-элементы, createSlider()/createButton(), аудиовход (p5.sound FFT/амплитуда), анимация по скроллу, адаптивные события
references/export-pipeline.md saveCanvas(), saveGif(), saveFrames(), детерминированный безголовый захват, ffmpeg кадры-в-видео, CCapture.js, экспорт SVG, архитектура по клипам, экспорт на платформы (fxhash), особенности видео
references/troubleshooting.md Профилирование производительности, бюджеты на пиксель, распространённые ошибки, совместимость браузеров, отладка WebGL, проблемы загрузки шрифтов, ловушки плотности пикселей, утечки памяти, CORS
templates/viewer.html Шаблон интерактивного просмотрщика: навигация по сидам (пред/след/случайный/переход), ползунки параметров, загрузка PNG, адаптивный холст. Начинайте отсюда для исследуемого генеративного искусства

Творческое расхождение (используйте только когда пользователь запрашивает экспериментальный/креативный/уникальный вывод)

Если пользователь просит креативный, экспериментальный, удивительный или нетрадиционный вывод, выберите стратегию, которая лучше всего подходит, и продумайте её шаги ДО генерации кода.

Концептуальное смешение

  1. Назовите две различные визуальные системы (например, физика частиц + почерк)
  2. Сопоставьте соответствия (частицы = капли чернил, силы = давление пера, поля = формы букв)
  3. Смешивайте избирательно — сохраняйте отображения, которые дают интересные эмерджентные визуалы
  4. Закодируйте смесь как единую систему, а не две системы рядом

SCAMPER-трансформация

Возьмите известный генеративный паттерн (поле потоков, система частиц, L-система, клеточный автомат) и систематически трансформируйте его: - Substitute (Заменить): замените круги на текстовые символы, линии на градиенты - Combine (Объединить): слейте два паттерна (поле потоков + вороной) - Adapt (Адаптировать): примените 2D-паттерн к 3D-проекции - Modify (Модифицировать): преувеличьте масштаб, исказите координатное пространство - Purpose (Назначение): используйте физическую симуляцию для типографики, алгоритм сортировки для цвета - Eliminate (Удалить): уберите сетку, уберите цвет, уберите симметрию - Reverse (Обратить): запустите симуляцию задом наперёд, инвертируйте пространство параметров

Дистанционная ассоциация

  1. Заякоритесь на концепции пользователя (например, «одиночество»)
  2. Сгенерируйте ассоциации на трёх расстояниях:
  3. Близкое (очевидное): пустая комната, одинокая фигура, тишина
  4. Среднее (интересное): одна рыба в косяке, плывущая не в ту сторону, телефон без уведомлений, промежуток между вагонами метро
  5. Далёкое (абстрактное): простые числа, асимптотические кривые, цвет 3 часов ночи
  6. Разработайте ассоциации среднего расстояния — они достаточно конкретны, чтобы визуализировать, но достаточно неожиданны, чтобы быть интересными