Hermes agent

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

инфо

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

p5.js Production Pipeline

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

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

Что внутри

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

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

Это визуальное искусство, рендерящееся в браузере. Canvas — среда, алгоритм — кисть.

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

Качество с первого рендера — не опция. Результат должен визуально захватывать при первой загрузке. Если выглядит как упражнение из p5.js-туториала, дефолтный конфиг или “AI-generated creative coding” — это брак. Переосмысли перед тем, как отдавать.

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

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

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

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

Режимы

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

Стек

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

СлойИнструментНазначение
Ядроp5.js 1.11.3 (CDN)Рендеринг на canvas, математика, трансформации, обработка событий
3Dp5.js WebGL mode3D-геометрия, камера, освещение, GLSL-шейдеры
Аудиоp5.sound.js (CDN)FFT-анализ, амплитуда, ввод с микрофона, осцилляторы
ЭкспортВстроенные saveCanvas() / saveGif() / saveFrames()PNG, GIF, последовательность кадров
ЗахватCCapture.js (опционально)Детерминированный захват видео с заданным фреймрейтом (WebM, GIF)
HeadlessPuppeteer + Node.js (опционально)Автоматизированный high-res рендеринг, MP4 через ffmpeg
SVGp5.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(), shader .modify() API, вариативные шрифты, textToContours(), pointer events. Обязательна для p5.brush. Смотри references/core-api.md § p5.js 2.0.

Пайплайн

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

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

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

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

ИзмерениеВариантыРеференс
Цветовая системаHSB/HSL, RGB, именованные палитры, процедурная гармония, градиентная интерполяцияreferences/color-systems.md
Словарь noisePerlin noise, simplex, фрактальный (октавный), domain warping, curl noisereferences/visual-effects.md § Noise
Системы частицФизические, флокинг, рисующие следы, управляемые аттрактором, следующие по flow fieldreferences/visual-effects.md § Particles
Язык формГеометрические примитивы, кастомные вершины, кривые Безье, SVG-путиreferences/shapes-and-geometry.md
Стиль движенияEased, на пружинах, noise-driven, физическое симулирование, lerped, ступенчатоеreferences/animation.md
ТипографикаСистемные шрифты, загруженные OTF, textToPoints() particle text, кинетикаreferences/typography.md
Шейдерные эффектыGLSL fragment/vertex, filter shaders, пост-обработка, feedback loopsreferences/webgl-and-3d.md § Shaders
КомпозицияСетка, радиальная, золотое сечение, правило третей, органическое рассеивание, тайлингreferences/core-api.md § Composition
Модель взаимодействияСледование мыши, спавн по клику, перетаскивание, состояние клавиатуры, scroll-driven, ввод с микрофонаreferences/interaction.md
Режимы смешенияBLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAYreferences/color-systems.md § Blend Modes
СлоистостьОфскрин-буферы createGraphics(), альфа-композитинг, маскированиеreferences/core-api.md § Offscreen Buffers
ТекстураPerlin surface, stippling, hatching, halftone, сортировка пикселейreferences/visual-effects.md § Texture Generation

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

Никогда не используй дефолтные конфигурации. В каждом проекте:

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

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

Для каждого проекта изобретай хотя бы одно из:

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

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

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

Хорошие параметры раскрывают характер алгоритма:

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

Плохие параметры — обобщённые переключатели, не связанные с алгоритмом:

  • “color1”, “color2”, “size” — бессмысленны без контекста
  • Toggle-переключатели для несвязанных эффектов
  • Параметры, влияющие только на косметику, но не на поведение

Каждый параметр должен менять то, как алгоритм думает, а не только то, как он выглядит. Параметр “turbulence”, изменяющий октавы noise, — хорош. Слайдер “particle size”, меняющий только радиус ellipse(), — мелковат.

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

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

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

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

Преобразуй промпт пользователя в эстетические выборы. “Relaxing generative background” требует совершенно других решений во всём, нежели “glitch data visualization.”

Шаг 2: Техническое проектирование

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

Шаг 3: Пишем скетч

Для интерактивного генеративного искусства (исследование сидов, подбор параметров): стартуй с templates/viewer.html. Прочитай шаблон сначала, сохрани фиксированные секции (навигация по сидам, действия), замени алгоритм и элементы управления параметрами. Это даёт пользователю prev/next/random/jump для сидов, слайдеры с live-обновлением и скачивание 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>Project Name</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 export -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- video capture -->
  <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);
  // Инициализация состояния...
}

// === Цикл отрисовки ===
function draw() {
  // Рендер кадра...
}

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

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

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

Ключевые паттерны реализации:

  • Сидированная случайность: всегда randomSeed() + noiseSeed() для воспроизводимости
  • Цветовой режим: используй colorMode(HSB, 360, 100, 100, 100) для интуитивного управления цветом
  • Разделение состояния: CONFIG для параметров, PALETTE для цветов, глобальные переменные для изменяемого состояния
  • Сущности на основе классов: частицы, агенты, формы как классы с методами update() + display()
  • Офскрин-буферы: createGraphics() для многослойной композиции, следов, масок

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

  • Открой HTML-файл напрямую в браузере — сервер не нужен для базовых скетчей
  • Для loadImage()/loadFont() из локальных файлов: используй scripts/serve.sh или python3 -m http.server
  • Вкладка Performance в Chrome DevTools для проверки 60fps
  • Тестируй в целевом разрешении экспорта, а не только в размере окна
  • Подбирай параметры, пока визуальный результат не совпадёт с концепцией из шага 1

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

ФорматМетодКоманда
PNGsaveCanvas('output', 'png') в keyPressed()Нажать ‘s’ для сохранения
High-res PNGPuppeteer headless capturenode scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1
GIFsaveGif('output', 5) — захватывает N секундНажать ‘g’ для сохранения
Последовательность кадровsaveFrames('frame', 'png', 10, 30) — 10с при 30fpsЗатем ffmpeg -i frame-%04d.png -c:v libx264 output.mp4
MP4Puppeteer frame capture + ffmpegbash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30
SVGcreateCanvas(w, h, SVG) с p5.js-svgsave('output.svg')

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

  • Соответствует ли видению? Сравни результат с творческой концепцией. Выглядит generic — возвращайся к шагу 1
  • Резкость: чёткое ли изображение при целевом размере отображения? Нет ли артефактов алиасинга?
  • Производительность: держит ли 60fps в браузере? (минимум 30fps для анимаций)
  • Цвет: хорошо ли работают цвета вместе? Проверь на светлом и тёмном мониторах
  • Граничные случаи: что происходит у краёв canvas? При ресайзе? После 10 минут работы?

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

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

Friendly Error System (FES) добавляет до 10x накладных расходов. Отключай в каждом production-скетче:

p5.disableFriendlyErrors = true;  // BEFORE setup()

function setup() {
  pixelDensity(1);  // prevent 2x-4x overdraw on retina
  createCanvas(1920, 1080);
}

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

// In draw() or update() hot paths:
let a = Math.sin(t);          // not sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
let v = Math.random();        // not random() — when seed not needed
let m = Math.min(a, b);       // not min(a, b)

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

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

Каждый генеративный скетч должен быть воспроизводимым. Один сид — один результат.

function setup() {
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  // All random() and noise() calls now deterministic
}

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

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

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

// fxhash convention
const SEED = $fx.hash;              // unique per mint
const rng = $fx.rand;               // deterministic PRNG
$fx.features({ palette: 'warm', complexity: 'high' });

// In setup():
randomSeed(SEED);   // for p5's noise()
noiseSeed(SEED);

// Replace random() with rng() for platform determinism
let x = rng() * width;  // instead of random(width)

Смотри references/export-pipeline.md § Platform Export.

Цветовой режим — используй HSB

HSB (Hue, Saturation, Brightness) в генеративном искусстве куда удобнее RGB:

colorMode(HSB, 360, 100, 100, 100);
// Now: fill(hue, sat, bri, alpha)
// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
// Desaturate: fill(hue, sat * 0.3, bri)
// Darken: fill(hue, sat, bri * 0.5)

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

Noise — мультиоктавный, не сырой

Сырой 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;
}

Для плавных органичных форм используй domain warping: подавай вывод noise обратно как координаты для следующего вызова noise. Смотри 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);   // persistent, fading
  renderForeground(fgLayer);  // cleared each frame
  image(bgLayer, 0, 0);
  image(trailLayer, 0, 0);
  image(fgLayer, 0, 0);
}

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

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

// SLOW: individual shapes
for (let p of particles) {
  ellipse(p.x, p.y, p.size);
}

// FAST: single shape with beginShape()
beginShape(POINTS);
for (let p of particles) {
  vertex(p.x, p.y);
}
endShape();

// FASTEST: pixel buffer for massive counts
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 § Performance.

Instance mode для нескольких скетчей

Глобальный режим засоряет window. В production используй instance mode:

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 Mode

  • createCanvas(w, h, WEBGL) — начало координат в центре, не в верхнем левом углу
  • Ось Y инвертирована (положительный Y идёт вверх в WEBGL, вниз в P2D)
  • translate(-width/2, -height/2) для получения координат как в P2D
  • push()/pop() вокруг каждой трансформации — переполнение матрицы происходит молча
  • texture() до rect()/plane() — не после
  • Кастомные шейдеры: createShader(vert, frag) — тестируй в нескольких браузерах

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

Каждый скетч должен включать эти привязки в 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;
}

Headless-экспорт видео — используй noLoop()

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

function setup() {
  createCanvas(1920, 1080);
  pixelDensity(1);
  noLoop();                    // capture script controls frame advance
  window._p5Ready = true;      // signal readiness to capture script
}

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

Для многосценных видео используй архитектуру per-clip: один HTML на сцену, независимый рендеринг, сшивка через ffmpeg -f concat. Смотри references/export-pipeline.md § Per-Clip Architecture.

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

При создании скетчей 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. Headless-экспорт — 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 shapes)5 000–10 000 при 60fps
Количество частиц (пиксельный буфер)50 000–100 000 при 60fps
Разрешение canvasдо 3840x2160 (экспорт), 1920x1080 (интерактивный)
Размер файла (HTML)< 100KB (без CDN-библиотек)
Время загрузки< 2с до первого кадра

Референсы

ФайлСодержание
references/core-api.mdНастройка canvas, система координат, цикл отрисовки, push()/pop(), офскрин-буферы, паттерны композиции, pixelDensity(), адаптивный дизайн
references/shapes-and-geometry.md2D-примитивы, beginShape()/endShape(), кривые Безье/Catmull-Rom, системы vertex(), кастомные формы, p5.Vector, signed distance fields, конвертация SVG-путей
references/visual-effects.mdNoise (Perlin, фрактальный, domain warp, curl), flow fields, системы частиц (физика, флокинг, следы), манипуляции с пикселями, генерация текстур (stipple, hatch, halftone), feedback loops, reaction-diffusion
references/animation.mdПокадровая анимация, функции ускорения, lerp()/map(), пружинная физика, конечные автоматы, последовательности по таймлайну, тайминг через millis(), паттерны переходов
references/typography.mdtext(), loadFont(), textToPoints(), кинетическая типографика, текстовые маски, метрики шрифтов, адаптивный размер текста
references/color-systems.mdcolorMode(), HSB/HSL/RGB, lerpColor(), paletteLerp(), процедурные палитры, цветовая гармония, blendMode(), рендеринг градиентов, курируемая библиотека палитр
references/webgl-and-3d.mdWEBGL-рендерер, 3D-примитивы, камера, освещение, материалы, кастомная геометрия, GLSL-шейдеры (createShader(), createFilterShader()), framebuffers, пост-обработка
references/interaction.mdСобытия мыши, состояние клавиатуры, тач-ввод, DOM-элементы, createSlider()/createButton(), аудиовход (p5.sound FFT/amplitude), scroll-driven анимация, адаптивные события
references/export-pipeline.mdsaveCanvas(), saveGif(), saveFrames(), детерминированный headless-захват, ffmpeg frame-to-video, CCapture.js, SVG-экспорт, per-clip архитектура, экспорт для платформ (fxhash), нюансы видео
references/troubleshooting.mdПрофилирование производительности, бюджеты на пиксель, распространённые ошибки, совместимость браузеров, отладка WebGL, проблемы загрузки шрифтов, ловушки pixel density, утечки памяти, CORS
templates/viewer.htmlШаблон интерактивного просмотрщика: навигация по сидам (prev/next/random/jump), слайдеры параметров, скачивание PNG, адаптивный canvas. Стартуй с этого для исследуемого генеративного искусства

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

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

  • Концептуальное смешение — когда пользователь называет две вещи для объединения или хочет гибридную эстетику
  • SCAMPER — когда пользователь хочет вариацию на известный паттерн генеративного искусства
  • Ассоциация на расстоянии — когда пользователь даёт одну концепцию и хочет исследования (“сделай что-нибудь про время”)

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

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

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

Возьми известный генеративный паттерн (flow field, система частиц, L-система, клеточный автомат) и трансформируй его систематически:

  • Substitute: замени круги текстовыми символами, линии — градиентами
  • Combine: соедини два паттерна (flow field + voronoi)
  • Adapt: примени 2D-паттерн к 3D-проекции
  • Modify: преувеличь масштаб, деформируй пространство координат
  • Purpose: используй физическое симулирование для типографики, алгоритм сортировки для цвета
  • Eliminate: убери сетку, цвет, симметрию
  • Reverse: прогони симуляцию назад, инвертируй пространство параметров

Ассоциация на расстоянии

  1. Отправная точка — концепция пользователя (например, “одиночество”)
  2. Генерируй ассоциации на трёх дистанциях:
    • Близкие (очевидные): пустая комната, одинокая фигура, тишина
    • Средние (интересные): одна рыба в стае, плывущая против течения, телефон без уведомлений, зазор между вагонами метро
    • Далёкие (абстрактные): простые числа, асимптотические кривые, цвет трёх часов ночи
  3. Разрабатывай ассоциации средней дистанции — они достаточно конкретны для визуализации, но неожиданны, чтобы быть интересными
⌕ ESC