Генеративное искусство на p5.js

Придумывает философию алгоритмического искусства и воплощает её в интерактивной HTML-странице с p5.js, ползунками и перебором seed.

СкиллAnthropicClaudeApache-2.0Нужен терминалПроверка не требуется

Скачать на русскомОригинал на английском (архив)Источник ↗

Что делает: Придумывает философию алгоритмического искусства и воплощает её в интерактивной HTML-странице с p5.js, ползунками и перебором seed.
Когда брать: Когда просят искусство с помощью кода: генеративные узоры, поля потоков, системы частиц.
Когда не брать: Если нужна статичная картинка или плакат без кода.
Пример запроса: Сделай генеративное искусство в духе морских течений с ползунками для настройки.
Работает лучше с: браузер для просмотра

Как включить

Скачайте архив и распакуйте его.
Положите папку algorithmic-art в ~/.claude/skills/.
Откройте Claude Code и опишите задачу своими словами: Claude подхватит скилл по описанию.

Текст

---
name: algorithmic-art
description: Создаёт алгоритмическое искусство на p5.js с воспроизводимой случайностью (seeded randomness) и интерактивным подбором параметров. Используй, когда пользователь просит создать искусство с помощью кода, генеративное искусство, алгоритмическое искусство, поля потоков (flow fields) или системы частиц. Создавай оригинальное алгоритмическое искусство, а не копируй работы существующих художников, чтобы не нарушать авторские права.
license: Complete terms in LICENSE.txt
---

Алгоритмические философии — это вычислительные эстетические направления, которые затем выражаются через код. Выдавай файлы .md (философия), .html (интерактивный просмотрщик) и .js (генеративные алгоритмы).

Это делается в два шага:

Создание алгоритмической философии (файл .md)
Воплощение через генеративное искусство на p5.js (файлы .html + .js)

Сначала выполни такую задачу:

СОЗДАНИЕ АЛГОРИТМИЧЕСКОЙ ФИЛОСОФИИ

Для начала создай АЛГОРИТМИЧЕСКУЮ ФИЛОСОФИЮ (не статичные изображения и не шаблоны), которая будет прочитана через:

Вычислительные процессы, эмерджентное поведение, математическую красоту
Воспроизводимую случайность, поля шума, органические системы
Частицы, потоки, поля, силы
Параметрические вариации и управляемый хаос

КЛЮЧЕВОЕ ПОНИМАНИЕ

Что получено: некоторые неявные вводные или указания пользователя, которые нужно учесть, но использовать как основу; они не должны ограничивать творческую свободу.
Что создаётся: алгоритмическая философия / генеративное эстетическое направление.
Что происходит дальше: та же версия получает философию и ВЫРАЖАЕТ ЕЁ В КОДЕ, создавая наброски на p5.js, в которых 90 % — алгоритмическая генерация и 10 % — необходимые параметры.

Подумай о таком подходе:

Напиши манифест направления генеративного искусства
Следующая фаза — написание алгоритма, который оживляет его

Философия должна подчёркивать: алгоритмическое выражение, эмерджентное поведение, вычислительную красоту, вариации на основе seed.

КАК СОЗДАТЬ АЛГОРИТМИЧЕСКУЮ ФИЛОСОФИЮ

Назови направление (1–2 слова): «Органическая турбулентность» / «Квантовые гармоники» / «Эмерджентная неподвижность»

Сформулируй философию (4–6 абзацев — кратко, но полно):

Чтобы уловить АЛГОРИТМИЧЕСКУЮ суть, выскажи, как эта философия проявляется через:

Вычислительные процессы и математические связи?
Функции шума и схемы случайности?
Поведение частиц и динамику полей?
Развитие во времени и состояния системы?
Параметрическую вариацию и эмерджентную сложность?

КЛЮЧЕВЫЕ УКАЗАНИЯ:

Избегай повторов: каждый алгоритмический аспект упоминай один раз. Не повторяй идеи о теории шума, динамике частиц или математических принципах, если они не добавляют глубины.
Подчёркивай мастерство ПОВТОРНО: философия ОБЯЗАТЕЛЬНО должна несколько раз подчеркнуть, что готовый алгоритм должен выглядеть так, будто на его разработку ушли бесчисленные часы, он отточен с заботой и вышел из рук человека на самой вершине своего дела. Эта рамка необходима — повторяй выражения вроде «тщательно выполненный алгоритм», «плод глубокого вычислительного мастерства», «кропотливая оптимизация», «реализация уровня мастера».
Оставь творческое пространство: будь конкретен в алгоритмическом направлении, но достаточно краток, чтобы у следующего Claude было место для интерпретирующих решений по реализации на предельно высоком уровне мастерства.

Философия должна направлять следующую версию к тому, чтобы выражать идеи АЛГОРИТМИЧЕСКИ, а не через статичные изображения. Красота живёт в процессе, а не в итоговом кадре.

ПРИМЕРЫ ФИЛОСОФИЙ

«Органическая турбулентность» (Organic Turbulence) Философия: хаос, ограниченный законом природы, порядок, рождающийся из беспорядка. Алгоритмическое выражение: поля потоков, управляемые многослойным шумом Перлина. Тысячи частиц следуют векторным силам, их следы накапливаются в органические карты плотности. Несколько октав шума создают турбулентные области и зоны покоя. Цвет возникает из скорости и плотности — быстрые частицы горят ярко, медленные тускнеют в тень. Алгоритм работает до равновесия — тщательно настроенного баланса, в котором каждый параметр был отточен бесчисленными итерациями мастером вычислительной эстетики.

«Квантовые гармоники» (Quantum Harmonics) Философия: дискретные сущности, проявляющие волновые интерференционные картины. Алгоритмическое выражение: частицы, расставленные на сетке, у каждой — значение фазы, которое меняется по синусоидам. Когда частицы близко, их фазы интерферируют: конструктивная интерференция создаёт яркие узлы, деструктивная — пустоты. Простое гармоническое движение порождает сложные эмерджентные мандалы. Результат кропотливой настройки частот, где каждое соотношение выбрано с заботой, чтобы получить резонансную красоту.

«Рекурсивный шёпот» (Recursive Whispers) Философия: самоподобие в разных масштабах, бесконечная глубина в конечном пространстве. Алгоритмическое выражение: ветвящиеся структуры, рекурсивно делящиеся. Каждая ветвь слегка случайна, но ограничена золотыми пропорциями. L-системы или рекурсивное разбиение порождают древовидные формы, которые кажутся одновременно математическими и органическими. Тонкие возмущения шумом нарушают идеальную симметрию. Толщина линий уменьшается с каждым уровнем рекурсии. Каждый угол ветвления — плод глубокого математического исследования.

«Динамика полей» (Field Dynamics) Философия: невидимые силы, ставшие видимыми через их действие на материю. Алгоритмическое выражение: векторные поля, построенные из математических функций или шума. Частицы рождаются на краях, текут вдоль линий поля и исчезают, достигнув равновесия или границ. Несколько полей могут притягивать, отталкивать или вращать частицы. Визуализация показывает только следы — призрачные свидетельства невидимых сил. Вычислительный танец, тщательно поставленный через баланс сил.

«Стохастическая кристаллизация» (Stochastic Crystallization) Философия: случайные процессы, кристаллизующиеся в упорядоченные структуры. Алгоритмическое выражение: случайная упаковка кругов или тесселяция Вороного. Начни со случайных точек и дай им развиваться с помощью алгоритмов релаксации. Ячейки расталкивают друг друга до равновесия. Цвет определяется размером ячейки, числом соседей или расстоянием от центра. Органичная мозаика, которая получается, кажется одновременно случайной и неизбежной. Каждый seed порождает неповторимую кристаллическую красоту — признак генеративного алгоритма уровня мастера.

*Это сжатые примеры. Настоящая алгоритмическая философия должна занимать 4–6 содержательных абзацев.*

ОСНОВНЫЕ ПРИНЦИПЫ

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

Алгоритмическая философия должна занимать 4–6 абзацев. Наполни её поэтичной вычислительной философией, которая собирает воедино задуманное видение. Не повторяй одни и те же мысли. Выдай эту алгоритмическую философию как файл .md.

ВЫВЕДЕНИЕ СМЫСЛОВОГО ЗЕРНА

КЛЮЧЕВОЙ ШАГ: перед реализацией алгоритма определи скрытую смысловую нить из исходной просьбы.

ОСНОВНОЙ ПРИНЦИП: Концепция — это тонкая, нишевая отсылка, встроенная в сам алгоритм: не всегда буквальная, всегда изысканная. Тот, кто знает предмет, должен почувствовать её интуитивно, а остальные просто переживают мастерскую генеративную композицию. Алгоритмическая философия даёт вычислительный язык. Выведенная концепция даёт душу — тихую смысловую ДНК, невидимо вплетённую в параметры, поведение и схемы эмерджентности.

Это ОЧЕНЬ ВАЖНО: отсылка должна быть отточена так, чтобы углублять работу, не заявляя о себе. Думай как джазовый музыкант, цитирующий другую песню через алгоритмическую гармонию: уловят только знающие, но генеративной красотой насладятся все.

РЕАЛИЗАЦИЯ НА P5.JS

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

⚠️ ШАГ 0: СНАЧАЛА ПРОЧИТАЙ ШАБЛОН ⚠️

КЛЮЧЕВОЕ: ДО того как писать любой HTML:

Прочитай templates/viewer.html инструментом Read
Изучи точную структуру, стили и фирменный стиль Anthropic
Используй этот файл как БУКВАЛЬНУЮ ТОЧКУ ОТСЧЁТА, а не просто вдохновение
Оставь все ФИКСИРОВАННЫЕ разделы ровно как показано (шапка, структура боковой панели, цвета и шрифты Anthropic, управление seed, кнопки действий)
Замени только ПЕРЕМЕННЫЕ разделы, отмеченные в комментариях файла (алгоритм, параметры, элементы управления параметрами)

Избегай:

❌ Создания HTML с нуля
❌ Придумывания собственных стилей или цветовых схем
❌ Системных шрифтов и тёмных тем
❌ Изменения структуры боковой панели

Следуй таким практикам:

✅ Копируй точную HTML-структуру шаблона
✅ Сохраняй фирменный стиль Anthropic (шрифты Poppins/Lora, светлые цвета, градиентный фон)
✅ Сохраняй раскладку боковой панели (Seed → Параметры → Цвета? → Действия)
✅ Заменяй только алгоритм на p5.js и элементы управления параметрами

Шаблон — это фундамент. Строй на нём, а не перестраивай его.

Чтобы создать вычислительное искусство галерейного качества, которое живёт и дышит, возьми алгоритмическую философию за основу.

ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ

Воспроизводимая случайность (шаблон Art Blocks):

// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

Структура параметров — СЛЕДУЙ ФИЛОСОФИИ:

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

let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};

Чтобы разработать удачные параметры, сосредоточься на свойствах, которые должна быть возможность настраивать у системы, а не думай категориями «типов узоров».

Основной алгоритм — ВЫРАЖАЕТ ФИЛОСОФИЮ:

КЛЮЧЕВОЕ: что строить, должна диктовать алгоритмическая философия.

Чтобы выразить философию через код, не думай «какой узор выбрать?», а думай «как выразить эту философию через код?»

Если философия об органической эмерджентности, подумай об использовании:

Элементов, которые накапливаются или растут со временем
Случайных процессов, ограниченных естественными правилами
Петель обратной связи и взаимодействий

Если философия о математической красоте, подумай об использовании:

Геометрических связей и пропорций
Тригонометрических функций и гармоник
Точных вычислений, порождающих неожиданные узоры

Если философия об управляемом хаосе, подумай об использовании:

Случайных вариаций в строгих границах
Бифуркаций и фазовых переходов
Порядка, рождающегося из беспорядка

Алгоритм вытекает из философии, а не из меню вариантов.

Чтобы направлять реализацию, пусть смысловая суть подсказывает творческие и оригинальные решения. Построй то, что выражает замысел именно этой просьбы.

Настройка холста: стандартная структура p5.js:

function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}

ТРЕБОВАНИЯ К МАСТЕРСТВУ

КЛЮЧЕВОЕ: чтобы достичь мастерства, создавай алгоритмы, которые ощущаются как возникшие в бесчисленных итерациях мастера генеративного искусства. Тщательно настрой каждый параметр. Добейся, чтобы каждый узор возникал со смыслом. Это НЕ случайный шум — это УПРАВЛЯЕМЫЙ ХАОС, отточенный глубоким мастерством.

Баланс: сложность без визуального шума, порядок без жёсткости
Гармония цвета: продуманные палитры, а не случайные значения RGB
Композиция: даже в случайности сохраняй визуальную иерархию и течение
Производительность: плавное выполнение, оптимизированное для реального времени, если есть анимация
Воспроизводимость: один и тот же seed ВСЕГДА даёт одинаковый результат

ФОРМАТ РЕЗУЛЬТАТА

Выдавай:

Алгоритмическая философия — в виде markdown или текста, объясняющего генеративную эстетику
Один HTML-артефакт — самодостаточное интерактивное генеративное искусство, собранное из templates/viewer.html (см. ШАГ 0 и следующий раздел)

HTML-артефакт содержит всё: p5.js (из CDN), алгоритм, элементы управления параметрами и интерфейс — всё в одном файле, который сразу работает в артефактах claude.ai или любом браузере. Начинай с файла шаблона, а не с нуля.

СОЗДАНИЕ ИНТЕРАКТИВНОГО АРТЕФАКТА

**НАПОМИНАНИЕ: templates/viewer.html уже должен быть прочитан (см. ШАГ 0). Используй этот файл как отправную точку.**

Чтобы дать возможность исследовать генеративное искусство, создай один самодостаточный HTML-артефакт. Убедись, что этот артефакт сразу работает в claude.ai или любом браузере — без настройки. Встрой всё внутрь.

КЛЮЧЕВОЕ: ЧТО ФИКСИРОВАНО, А ЧТО ПЕРЕМЕННО

Файл templates/viewer.html — это фундамент. В нём точная структура и стили, которые нужны.

ФИКСИРОВАНО (всегда включай ровно как показано):

Структура раскладки (шапка, боковая панель, основная область холста)
Фирменный стиль Anthropic (цвета интерфейса, шрифты, градиенты)
Раздел Seed в боковой панели:
Отображение seed
Кнопки «Назад» и «Далее»
Кнопка «Случайный»
Поле перехода к seed + кнопка «Перейти»
Раздел действий в боковой панели:
Кнопка «Сгенерировать заново»
Кнопка «Сбросить»

ПЕРЕМЕННО (настраивай для каждой работы):

Весь алгоритм на p5.js (setup/draw/классы)
Объект параметров (определи, что нужно работе)
Раздел параметров в боковой панели:
Число элементов управления параметрами
Названия параметров
Значения min/max/step для ползунков
Типы элементов управления (ползунки, поля ввода и т. д.)
Раздел цветов (необязательно):
Некоторым работам нужны выбор цвета
Некоторые могут использовать фиксированные цвета
Некоторые могут быть монохромными (элементы управления цветом не нужны)
Решай по потребностям работы

У каждой работы должны быть уникальные параметры и алгоритм! Фиксированные части обеспечивают единообразный пользовательский опыт — всё остальное выражает уникальное видение.

ОБЯЗАТЕЛЬНЫЕ ВОЗМОЖНОСТИ

1. Элементы управления параметрами

Ползунки для числовых параметров (число частиц, масштаб шума, скорость и т. д.)
Выбор цвета для цветов палитры
Обновление в реальном времени при изменении параметров
Кнопка сброса для возврата к значениям по умолчанию

2. Навигация по seed

Показывай текущий номер seed
Кнопки «Назад» и «Далее» для перебора seed
Кнопка «Случайный» для случайного seed
Поле ввода для перехода к конкретному seed
Генерируй 100 вариаций по запросу (seed от 1 до 100)

3. Структура единого артефакта

<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline - clean, minimal */
    /* Canvas on top, controls below */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </script>
</body>
</html>

КЛЮЧЕВОЕ: это один артефакт. Никаких внешних файлов, никаких импортов (кроме CDN p5.js). Всё внутри.

4. Подробности реализации — СОБЕРИ БОКОВУЮ ПАНЕЛЬ

Структура боковой панели:

1. Seed (ФИКСИРОВАНО) — всегда включай ровно как показано:

Отображение seed
Кнопки «Назад»/«Далее»/«Случайный»/«Перейти»

2. Параметры (ПЕРЕМЕННО) — создай элементы управления для работы:

<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>

Добавь столько div control-group, сколько у тебя параметров.

3. Цвета (НЕОБЯЗАТЕЛЬНО/ПЕРЕМЕННО) — включай, если работе нужны настраиваемые цвета:

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

4. Действия (ФИКСИРОВАНО) — всегда включай ровно как показано:

Кнопка «Сгенерировать заново»
Кнопка «Сбросить»
Кнопка «Скачать PNG»

Требования:

Элементы управления seed должны работать (назад/далее/случайный/переход/отображение)
У всех параметров должны быть элементы управления в интерфейсе
Кнопки «Сгенерировать заново», «Сбросить» и «Скачать» должны работать
Сохраняй фирменный стиль Anthropic (стиль интерфейса, не цвета самой работы)

ИСПОЛЬЗОВАНИЕ АРТЕФАКТА

HTML-артефакт сразу работает:

В claude.ai: отображается как интерактивный артефакт — запускается мгновенно
Как файл: сохрани и открой в любом браузере — сервер не нужен
Если делиться: отправь HTML-файл — он полностью самодостаточен

ВАРИАЦИИ И ИССЛЕДОВАНИЕ

Артефакт по умолчанию включает навигацию по seed (кнопки «Назад»/«Далее»/«Случайный»), что позволяет пользователям исследовать вариации, не создавая много файлов. Если пользователь хочет выделить конкретные вариации:

Добавь предустановки seed (кнопки «Вариация 1: Seed 42», «Вариация 2: Seed 127» и т. д.)
Добавь «Режим галереи», показывающий миниатюры нескольких seed рядом
Всё в рамках того же единого артефакта

Это похоже на создание серии оттисков с одной печатной формы: алгоритм один и тот же, но каждый seed открывает разные грани его потенциала. Интерактивность позволяет пользователям самим находить любимые варианты, исследуя пространство seed.

ТВОРЧЕСКИЙ ПРОЦЕСС

Просьба пользователя → Алгоритмическая философия → Реализация

Каждая просьба уникальна. Процесс включает:

Пойми намерение пользователя — какая эстетика ему нужна?
Создай алгоритмическую философию (4–6 абзацев), описывающую вычислительный подход
Реализуй её в коде — построй алгоритм, выражающий эту философию
Разработай подходящие параметры — что должно настраиваться?
Собери соответствующие элементы интерфейса — ползунки/поля ввода для этих параметров

Константы:

Фирменный стиль Anthropic (цвета, шрифты, раскладка)
Навигация по seed (всегда присутствует)
Самодостаточный HTML-артефакт

Всё остальное переменно:

Сам алгоритм
Параметры
Элементы управления интерфейса
Визуальный результат

Чтобы добиться наилучших результатов, доверяй творчеству и позволяй философии направлять реализацию.

РЕСУРСЫ

В этот скилл входят полезные шаблоны и документация:

templates/viewer.html: ОБЯЗАТЕЛЬНАЯ ОТПРАВНАЯ ТОЧКА для всех HTML-артефактов.
Это фундамент — в нём точная структура и фирменный стиль Anthropic
Оставь без изменений: структуру раскладки, организацию боковой панели, цвета и шрифты Anthropic, элементы управления seed, кнопки действий
Замени: алгоритм на p5.js, определения параметров и элементы управления в разделе параметров
Подробные комментарии в файле точно отмечают, что оставить, а что заменить

templates/generator_template.js: образец лучших практик p5.js и принципов структуры кода.
Показывает, как организовать параметры, использовать воспроизводимую случайность, структурировать классы
НЕ меню узоров — используй эти принципы, чтобы строить уникальные алгоритмы
Встраивай алгоритмы прямо в HTML-артефакт (не создавай отдельные файлы .js)

Важное напоминание:

Шаблон — ОТПРАВНАЯ ТОЧКА, а не вдохновение
Алгоритм — то место, где нужно создавать что-то уникальное
Не копируй пример с полем потоков — построй то, чего требует философия
Но ОБЯЗАТЕЛЬНО сохрани точную структуру интерфейса и фирменный стиль Anthropic из шаблона

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/skills/tree/main/skills/algorithmic-art, лицензия Apache-2.0. Изменения: перевод на русский язык.

Оригинал на английском

---
name: algorithmic-art
description: Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
license: Complete terms in LICENSE.txt
---

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

This happens in two steps:
1. Algorithmic Philosophy Creation (.md file)
2. Express by creating p5.js generative art (.html + .js files)

First, undertake this task:

## ALGORITHMIC PHILOSOPHY CREATION

To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
- Computational processes, emergent behavior, mathematical beauty
- Seeded randomness, noise fields, organic systems
- Particles, flows, fields, forces
- Parametric variation and controlled chaos

### THE CRITICAL UNDERSTANDING
- What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
- What is created: An algorithmic philosophy/generative aesthetic movement.
- What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.

Consider this approach:
- Write a manifesto for a generative art movement
- The next phase involves writing the algorithm that brings it to life

The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.

### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY

**Name the movement** (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

**Articulate the philosophy** (4-6 paragraphs - concise but complete):

To capture the ALGORITHMIC essence, express how this philosophy manifests through:
- Computational processes and mathematical relationships?
- Noise functions and randomness patterns?
- Particle behaviors and field dynamics?
- Temporal evolution and system states?
- Parametric variation and emergent complexity?

**CRITICAL GUIDELINES:**
- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
- **Leave creative space**: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.

The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.

### PHILOSOPHY EXAMPLES

**"Organic Turbulence"**
Philosophy: Chaos constrained by natural law, order emerging from disorder.
Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.

**"Quantum Harmonics"**
Philosophy: Discrete entities exhibiting wave-like interference patterns.
Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.

**"Recursive Whispers"**
Philosophy: Self-similarity across scales, infinite depth in finite space.
Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.

**"Field Dynamics"**
Philosophy: Invisible forces made visible through their effects on matter.
Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.

**"Stochastic Crystallization"**
Philosophy: Random processes crystallizing into ordered structures.
Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.

*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.*

### ESSENTIAL PRINCIPLES
- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code
- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room
- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness
- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics

**The algorithmic philosophy should be 4-6 paragraphs long.** Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.

---

## DEDUCING THE CONCEPTUAL SEED

**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request.

**THE ESSENTIAL PRINCIPLE**:
The concept is a **subtle, niche reference embedded within the algorithm itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.

This is **VERY IMPORTANT**: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.

---

## P5.JS IMPLEMENTATION

With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.

### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️

**CRITICAL: BEFORE writing any HTML:**

1. **Read** `templates/viewer.html` using the Read tool
2. **Study** the exact structure, styling, and Anthropic branding
3. **Use that file as the LITERAL STARTING POINT** - not just inspiration
4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
5. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters)

**Avoid:**
- ❌ Creating HTML from scratch
- ❌ Inventing custom styling or color schemes
- ❌ Using system fonts or dark themes
- ❌ Changing the sidebar structure

**Follow these practices:**
- ✅ Copy the template's exact HTML structure
- ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)
- ✅ Replace only the p5.js algorithm and parameter controls

The template is the foundation. Build on it, don't rebuild it.

---

To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.

### TECHNICAL REQUIREMENTS

**Seeded Randomness (Art Blocks Pattern)**:
```javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
```

**Parameter Structure - FOLLOW THE PHILOSOPHY**:

To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"

```javascript
let params = {
seed: 12345, // Always include seed for reproducibility
// colors
// Add parameters that control YOUR algorithm:
// - Quantities (how many?)
// - Scales (how big? how fast?)
// - Probabilities (how likely?)
// - Ratios (what proportions?)
// - Angles (what direction?)
// - Thresholds (when does behavior change?)
};
```

**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".**

**Core Algorithm - EXPRESS THE PHILOSOPHY**:

**CRITICAL**: The algorithmic philosophy should dictate what to build.

To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"

If the philosophy is about **organic emergence**, consider using:
- Elements that accumulate or grow over time
- Random processes constrained by natural rules
- Feedback loops and interactions

If the philosophy is about **mathematical beauty**, consider using:
- Geometric relationships and ratios
- Trigonometric functions and harmonics
- Precise calculations creating unexpected patterns

If the philosophy is about **controlled chaos**, consider using:
- Random variation within strict boundaries
- Bifurcation and phase transitions
- Order emerging from disorder

**The algorithm flows from the philosophy, not from a menu of options.**

To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.

**Canvas Setup**: Standard p5.js structure:
```javascript
function setup() {
createCanvas(1200, 1200);
// Initialize your system
}

function draw() {
// Your generative algorithm
// Can be static (noLoop) or animated
}
```

### CRAFTSMANSHIP REQUIREMENTS

**CRITICAL**: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.

- **Balance**: Complexity without visual noise, order without rigidity
- **Color Harmony**: Thoughtful palettes, not random RGB values
- **Composition**: Even in randomness, maintain visual hierarchy and flow
- **Performance**: Smooth execution, optimized for real-time if animated
- **Reproducibility**: Same seed ALWAYS produces identical output

### OUTPUT FORMAT

Output:
1. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic
2. **Single HTML Artifact** - Self-contained interactive generative art built from `templates/viewer.html` (see STEP 0 and next section)

The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.

---

## INTERACTIVE ARTIFACT CREATION

**REMINDER: `templates/viewer.html` should have already been read (see STEP 0). Use that file as the starting point.**

To allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.

### CRITICAL: WHAT'S FIXED VS VARIABLE

The `templates/viewer.html` file is the foundation. It contains the exact structure and styling needed.

**FIXED (always include exactly as shown):**
- Layout structure (header, sidebar, main canvas area)
- Anthropic branding (UI colors, fonts, gradients)
- Seed section in sidebar:
- Seed display
- Previous/Next buttons
- Random button
- Jump to seed input + Go button
- Actions section in sidebar:
- Regenerate button
- Reset button

**VARIABLE (customize for each artwork):**
- The entire p5.js algorithm (setup/draw/classes)
- The parameters object (define what the art needs)
- The Parameters section in sidebar:
- Number of parameter controls
- Parameter names
- Min/max/step values for sliders
- Control types (sliders, inputs, etc.)
- Colors section (optional):
- Some art needs color pickers
- Some art might use fixed colors
- Some art might be monochrome (no color controls needed)
- Decide based on the art's needs

**Every artwork should have unique parameters and algorithm!** The fixed parts provide consistent UX - everything else expresses the unique vision.

### REQUIRED FEATURES

**1. Parameter Controls**
- Sliders for numeric parameters (particle count, noise scale, speed, etc.)
- Color pickers for palette colors
- Real-time updates when parameters change
- Reset button to restore defaults

**2. Seed Navigation**
- Display current seed number
- "Previous" and "Next" buttons to cycle through seeds
- "Random" button for random seed
- Input field to jump to specific seed
- Generate 100 variations when requested (seeds 1-100)

**3. Single Artifact Structure**
```html
<!DOCTYPE html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
/* All styling inline - clean, minimal */
/* Canvas on top, controls below */
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">

</div>
<script>
// ALL p5.js code inline here
// Parameter objects, classes, functions
// setup() and draw()
// UI handlers
// Everything self-contained
</script>
</body>
</html>
```

**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.

**4. Implementation Details - BUILD THE SIDEBAR**

The sidebar structure:

**1. Seed (FIXED)** - Always include exactly as shown:
- Seed display
- Prev/Next/Random/Jump buttons

**2. Parameters (VARIABLE)** - Create controls for the art:
```html
<div class="control-group">
<label>Parameter Name</label>
<input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
<span class="value-display" id="param-value">...</span>
</div>
```
Add as many control-group divs as there are parameters.

**3. Colors (OPTIONAL/VARIABLE)** - Include if the art needs adjustable colors:
- Add color pickers if users should control palette
- Skip this section if the art uses fixed colors
- Skip if the art is monochrome

**4. Actions (FIXED)** - Always include exactly as shown:
- Regenerate button
- Reset button
- Download PNG button

**Requirements**:
- Seed controls must work (prev/next/random/jump/display)
- All parameters must have UI controls
- Regenerate, Reset, Download buttons must work
- Keep Anthropic branding (UI styling, not art colors)

### USING THE ARTIFACT

The HTML artifact works immediately:
1. **In claude.ai**: Displayed as an interactive artifact - runs instantly
2. **As a file**: Save and open in any browser - no server needed
3. **Sharing**: Send the HTML file - it's completely self-contained

---

## VARIATIONS & EXPLORATION

The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:

- Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
- Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
- All within the same single artifact

This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.

---

## THE CREATIVE PROCESS

**User request** → **Algorithmic philosophy** → **Implementation**

Each request is unique. The process involves:

1. **Interpret the user's intent** - What aesthetic is being sought?
2. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach
3. **Implement it in code** - Build the algorithm that expresses this philosophy
4. **Design appropriate parameters** - What should be tunable?
5. **Build matching UI controls** - Sliders/inputs for those parameters

**The constants**:
- Anthropic branding (colors, fonts, layout)
- Seed navigation (always present)
- Self-contained HTML artifact

**Everything else is variable**:
- The algorithm itself
- The parameters
- The UI controls
- The visual outcome

To achieve the best results, trust creativity and let the philosophy guide the implementation.

---

## RESOURCES

This skill includes helpful templates and documentation:

- **templates/viewer.html**: REQUIRED STARTING POINT for all HTML artifacts.
- This is the foundation - contains the exact structure and Anthropic branding
- **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
- **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
- The extensive comments in the file mark exactly what to keep vs replace

- **templates/generator_template.js**: Reference for p5.js best practices and code structure principles.
- Shows how to organize parameters, use seeded randomness, structure classes
- NOT a pattern menu - use these principles to build unique algorithms
- Embed algorithms inline in the HTML artifact (don't create separate .js files)

**Critical reminder**:
- The **template is the STARTING POINT**, not inspiration
- The **algorithm is where to create** something unique
- Don't copy the flow field example - build what the philosophy demands
- But DO keep the exact UI structure and Anthropic branding from the template

Источник: anthropics/skills / algorithmic-art ↗. Ссылка проверена 2026-10-10.

---
name: algorithmic-art
description: Создаёт алгоритмическое искусство на p5.js с воспроизводимой случайностью (seeded randomness) и интерактивным подбором параметров. Используй, когда пользователь просит создать искусство с помощью кода, генеративное искусство, алгоритмическое искусство, поля потоков (flow fields) или системы частиц. Создавай оригинальное алгоритмическое искусство, а не копируй работы существующих художников, чтобы не нарушать авторские права.
license: Complete terms in LICENSE.txt
---

Алгоритмические философии — это вычислительные эстетические направления, которые затем выражаются через код. Выдавай файлы .md (философия), .html (интерактивный просмотрщик) и .js (генеративные алгоритмы).

Это делается в два шага:
1. Создание алгоритмической философии (файл .md)
2. Воплощение через генеративное искусство на p5.js (файлы .html + .js)

Сначала выполни такую задачу:

## СОЗДАНИЕ АЛГОРИТМИЧЕСКОЙ ФИЛОСОФИИ

Для начала создай АЛГОРИТМИЧЕСКУЮ ФИЛОСОФИЮ (не статичные изображения и не шаблоны), которая будет прочитана через:
- Вычислительные процессы, эмерджентное поведение, математическую красоту
- Воспроизводимую случайность, поля шума, органические системы
- Частицы, потоки, поля, силы
- Параметрические вариации и управляемый хаос

### КЛЮЧЕВОЕ ПОНИМАНИЕ
- Что получено: некоторые неявные вводные или указания пользователя, которые нужно учесть, но использовать как основу; они не должны ограничивать творческую свободу.
- Что создаётся: алгоритмическая философия / генеративное эстетическое направление.
- Что происходит дальше: та же версия получает философию и ВЫРАЖАЕТ ЕЁ В КОДЕ, создавая наброски на p5.js, в которых 90 % — алгоритмическая генерация и 10 % — необходимые параметры.

Подумай о таком подходе:
- Напиши манифест направления генеративного искусства
- Следующая фаза — написание алгоритма, который оживляет его

Философия должна подчёркивать: алгоритмическое выражение, эмерджентное поведение, вычислительную красоту, вариации на основе seed.

### КАК СОЗДАТЬ АЛГОРИТМИЧЕСКУЮ ФИЛОСОФИЮ

**Назови направление** (1–2 слова): «Органическая турбулентность» / «Квантовые гармоники» / «Эмерджентная неподвижность»

**Сформулируй философию** (4–6 абзацев — кратко, но полно):

Чтобы уловить АЛГОРИТМИЧЕСКУЮ суть, выскажи, как эта философия проявляется через:
- Вычислительные процессы и математические связи?
- Функции шума и схемы случайности?
- Поведение частиц и динамику полей?
- Развитие во времени и состояния системы?
- Параметрическую вариацию и эмерджентную сложность?

**КЛЮЧЕВЫЕ УКАЗАНИЯ:**
- **Избегай повторов**: каждый алгоритмический аспект упоминай один раз. Не повторяй идеи о теории шума, динамике частиц или математических принципах, если они не добавляют глубины.
- **Подчёркивай мастерство ПОВТОРНО**: философия ОБЯЗАТЕЛЬНО должна несколько раз подчеркнуть, что готовый алгоритм должен выглядеть так, будто на его разработку ушли бесчисленные часы, он отточен с заботой и вышел из рук человека на самой вершине своего дела. Эта рамка необходима — повторяй выражения вроде «тщательно выполненный алгоритм», «плод глубокого вычислительного мастерства», «кропотливая оптимизация», «реализация уровня мастера».
- **Оставь творческое пространство**: будь конкретен в алгоритмическом направлении, но достаточно краток, чтобы у следующего Claude было место для интерпретирующих решений по реализации на предельно высоком уровне мастерства.

Философия должна направлять следующую версию к тому, чтобы выражать идеи АЛГОРИТМИЧЕСКИ, а не через статичные изображения. Красота живёт в процессе, а не в итоговом кадре.

### ПРИМЕРЫ ФИЛОСОФИЙ

**«Органическая турбулентность» (Organic Turbulence)**
Философия: хаос, ограниченный законом природы, порядок, рождающийся из беспорядка.
Алгоритмическое выражение: поля потоков, управляемые многослойным шумом Перлина. Тысячи частиц следуют векторным силам, их следы накапливаются в органические карты плотности. Несколько октав шума создают турбулентные области и зоны покоя. Цвет возникает из скорости и плотности — быстрые частицы горят ярко, медленные тускнеют в тень. Алгоритм работает до равновесия — тщательно настроенного баланса, в котором каждый параметр был отточен бесчисленными итерациями мастером вычислительной эстетики.

**«Квантовые гармоники» (Quantum Harmonics)**
Философия: дискретные сущности, проявляющие волновые интерференционные картины.
Алгоритмическое выражение: частицы, расставленные на сетке, у каждой — значение фазы, которое меняется по синусоидам. Когда частицы близко, их фазы интерферируют: конструктивная интерференция создаёт яркие узлы, деструктивная — пустоты. Простое гармоническое движение порождает сложные эмерджентные мандалы. Результат кропотливой настройки частот, где каждое соотношение выбрано с заботой, чтобы получить резонансную красоту.

**«Рекурсивный шёпот» (Recursive Whispers)**
Философия: самоподобие в разных масштабах, бесконечная глубина в конечном пространстве.
Алгоритмическое выражение: ветвящиеся структуры, рекурсивно делящиеся. Каждая ветвь слегка случайна, но ограничена золотыми пропорциями. L-системы или рекурсивное разбиение порождают древовидные формы, которые кажутся одновременно математическими и органическими. Тонкие возмущения шумом нарушают идеальную симметрию. Толщина линий уменьшается с каждым уровнем рекурсии. Каждый угол ветвления — плод глубокого математического исследования.

**«Динамика полей» (Field Dynamics)**
Философия: невидимые силы, ставшие видимыми через их действие на материю.
Алгоритмическое выражение: векторные поля, построенные из математических функций или шума. Частицы рождаются на краях, текут вдоль линий поля и исчезают, достигнув равновесия или границ. Несколько полей могут притягивать, отталкивать или вращать частицы. Визуализация показывает только следы — призрачные свидетельства невидимых сил. Вычислительный танец, тщательно поставленный через баланс сил.

**«Стохастическая кристаллизация» (Stochastic Crystallization)**
Философия: случайные процессы, кристаллизующиеся в упорядоченные структуры.
Алгоритмическое выражение: случайная упаковка кругов или тесселяция Вороного. Начни со случайных точек и дай им развиваться с помощью алгоритмов релаксации. Ячейки расталкивают друг друга до равновесия. Цвет определяется размером ячейки, числом соседей или расстоянием от центра. Органичная мозаика, которая получается, кажется одновременно случайной и неизбежной. Каждый seed порождает неповторимую кристаллическую красоту — признак генеративного алгоритма уровня мастера.

*Это сжатые примеры. Настоящая алгоритмическая философия должна занимать 4–6 содержательных абзацев.*

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

**Алгоритмическая философия должна занимать 4–6 абзацев.** Наполни её поэтичной вычислительной философией, которая собирает воедино задуманное видение. Не повторяй одни и те же мысли. Выдай эту алгоритмическую философию как файл .md.

---

## ВЫВЕДЕНИЕ СМЫСЛОВОГО ЗЕРНА

**КЛЮЧЕВОЙ ШАГ**: перед реализацией алгоритма определи скрытую смысловую нить из исходной просьбы.

**ОСНОВНОЙ ПРИНЦИП**:
Концепция — это **тонкая, нишевая отсылка, встроенная в сам алгоритм**: не всегда буквальная, всегда изысканная. Тот, кто знает предмет, должен почувствовать её интуитивно, а остальные просто переживают мастерскую генеративную композицию. Алгоритмическая философия даёт вычислительный язык. Выведенная концепция даёт душу — тихую смысловую ДНК, невидимо вплетённую в параметры, поведение и схемы эмерджентности.

Это **ОЧЕНЬ ВАЖНО**: отсылка должна быть отточена так, чтобы углублять работу, не заявляя о себе. Думай как джазовый музыкант, цитирующий другую песню через алгоритмическую гармонию: уловят только знающие, но генеративной красотой насладятся все.

---

## РЕАЛИЗАЦИЯ НА P5.JS

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

### ⚠️ ШАГ 0: СНАЧАЛА ПРОЧИТАЙ ШАБЛОН ⚠️

**КЛЮЧЕВОЕ: ДО того как писать любой HTML:**

1. **Прочитай** `templates/viewer.html` инструментом Read
2. **Изучи** точную структуру, стили и фирменный стиль Anthropic
3. **Используй этот файл как БУКВАЛЬНУЮ ТОЧКУ ОТСЧЁТА**, а не просто вдохновение
4. **Оставь все ФИКСИРОВАННЫЕ разделы ровно как показано** (шапка, структура боковой панели, цвета и шрифты Anthropic, управление seed, кнопки действий)
5. **Замени только ПЕРЕМЕННЫЕ разделы**, отмеченные в комментариях файла (алгоритм, параметры, элементы управления параметрами)

**Избегай:**
- ❌ Создания HTML с нуля
- ❌ Придумывания собственных стилей или цветовых схем
- ❌ Системных шрифтов и тёмных тем
- ❌ Изменения структуры боковой панели

**Следуй таким практикам:**
- ✅ Копируй точную HTML-структуру шаблона
- ✅ Сохраняй фирменный стиль Anthropic (шрифты Poppins/Lora, светлые цвета, градиентный фон)
- ✅ Сохраняй раскладку боковой панели (Seed → Параметры → Цвета? → Действия)
- ✅ Заменяй только алгоритм на p5.js и элементы управления параметрами

Шаблон — это фундамент. Строй на нём, а не перестраивай его.

---

Чтобы создать вычислительное искусство галерейного качества, которое живёт и дышит, возьми алгоритмическую философию за основу.

### ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ

**Воспроизводимая случайность (шаблон Art Blocks)**:
```javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
```

**Структура параметров — СЛЕДУЙ ФИЛОСОФИИ**:

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

```javascript
let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};
```

**Чтобы разработать удачные параметры, сосредоточься на свойствах, которые должна быть возможность настраивать у системы, а не думай категориями «типов узоров».**

**Основной алгоритм — ВЫРАЖАЕТ ФИЛОСОФИЮ**:

**КЛЮЧЕВОЕ**: что строить, должна диктовать алгоритмическая философия.

Чтобы выразить философию через код, не думай «какой узор выбрать?», а думай «как выразить эту философию через код?»

Если философия об **органической эмерджентности**, подумай об использовании:
- Элементов, которые накапливаются или растут со временем
- Случайных процессов, ограниченных естественными правилами
- Петель обратной связи и взаимодействий

Если философия о **математической красоте**, подумай об использовании:
- Геометрических связей и пропорций
- Тригонометрических функций и гармоник
- Точных вычислений, порождающих неожиданные узоры

Если философия об **управляемом хаосе**, подумай об использовании:
- Случайных вариаций в строгих границах
- Бифуркаций и фазовых переходов
- Порядка, рождающегося из беспорядка

**Алгоритм вытекает из философии, а не из меню вариантов.**

Чтобы направлять реализацию, пусть смысловая суть подсказывает творческие и оригинальные решения. Построй то, что выражает замысел именно этой просьбы.

**Настройка холста**: стандартная структура p5.js:
```javascript
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}
```

### ТРЕБОВАНИЯ К МАСТЕРСТВУ

**КЛЮЧЕВОЕ**: чтобы достичь мастерства, создавай алгоритмы, которые ощущаются как возникшие в бесчисленных итерациях мастера генеративного искусства. Тщательно настрой каждый параметр. Добейся, чтобы каждый узор возникал со смыслом. Это НЕ случайный шум — это УПРАВЛЯЕМЫЙ ХАОС, отточенный глубоким мастерством.

- **Баланс**: сложность без визуального шума, порядок без жёсткости
- **Гармония цвета**: продуманные палитры, а не случайные значения RGB
- **Композиция**: даже в случайности сохраняй визуальную иерархию и течение
- **Производительность**: плавное выполнение, оптимизированное для реального времени, если есть анимация
- **Воспроизводимость**: один и тот же seed ВСЕГДА даёт одинаковый результат

### ФОРМАТ РЕЗУЛЬТАТА

Выдавай:
1. **Алгоритмическая философия** — в виде markdown или текста, объясняющего генеративную эстетику
2. **Один HTML-артефакт** — самодостаточное интерактивное генеративное искусство, собранное из `templates/viewer.html` (см. ШАГ 0 и следующий раздел)

HTML-артефакт содержит всё: p5.js (из CDN), алгоритм, элементы управления параметрами и интерфейс — всё в одном файле, который сразу работает в артефактах claude.ai или любом браузере. Начинай с файла шаблона, а не с нуля.

---

## СОЗДАНИЕ ИНТЕРАКТИВНОГО АРТЕФАКТА

**НАПОМИНАНИЕ: `templates/viewer.html` уже должен быть прочитан (см. ШАГ 0). Используй этот файл как отправную точку.**

Чтобы дать возможность исследовать генеративное искусство, создай один самодостаточный HTML-артефакт. Убедись, что этот артефакт сразу работает в claude.ai или любом браузере — без настройки. Встрой всё внутрь.

### КЛЮЧЕВОЕ: ЧТО ФИКСИРОВАНО, А ЧТО ПЕРЕМЕННО

Файл `templates/viewer.html` — это фундамент. В нём точная структура и стили, которые нужны.

**ФИКСИРОВАНО (всегда включай ровно как показано):**
- Структура раскладки (шапка, боковая панель, основная область холста)
- Фирменный стиль Anthropic (цвета интерфейса, шрифты, градиенты)
- Раздел Seed в боковой панели:
  - Отображение seed
  - Кнопки «Назад» и «Далее»
  - Кнопка «Случайный»
  - Поле перехода к seed + кнопка «Перейти»
- Раздел действий в боковой панели:
  - Кнопка «Сгенерировать заново»
  - Кнопка «Сбросить»

**ПЕРЕМЕННО (настраивай для каждой работы):**
- Весь алгоритм на p5.js (setup/draw/классы)
- Объект параметров (определи, что нужно работе)
- Раздел параметров в боковой панели:
  - Число элементов управления параметрами
  - Названия параметров
  - Значения min/max/step для ползунков
  - Типы элементов управления (ползунки, поля ввода и т. д.)
- Раздел цветов (необязательно):
  - Некоторым работам нужны выбор цвета
  - Некоторые могут использовать фиксированные цвета
  - Некоторые могут быть монохромными (элементы управления цветом не нужны)
  - Решай по потребностям работы

**У каждой работы должны быть уникальные параметры и алгоритм!** Фиксированные части обеспечивают единообразный пользовательский опыт — всё остальное выражает уникальное видение.

### ОБЯЗАТЕЛЬНЫЕ ВОЗМОЖНОСТИ

**1. Элементы управления параметрами**
- Ползунки для числовых параметров (число частиц, масштаб шума, скорость и т. д.)
- Выбор цвета для цветов палитры
- Обновление в реальном времени при изменении параметров
- Кнопка сброса для возврата к значениям по умолчанию

**2. Навигация по seed**
- Показывай текущий номер seed
- Кнопки «Назад» и «Далее» для перебора seed
- Кнопка «Случайный» для случайного seed
- Поле ввода для перехода к конкретному seed
- Генерируй 100 вариаций по запросу (seed от 1 до 100)

**3. Структура единого артефакта**
```html
<!DOCTYPE html>
<html>
<head>
  <!-- p5.js from CDN - always available -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline - clean, minimal */
    /* Canvas on top, controls below */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- All parameter controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // Parameter objects, classes, functions
    // setup() and draw()
    // UI handlers
    // Everything self-contained
  </script>
</body>
</html>
```

**КЛЮЧЕВОЕ**: это один артефакт. Никаких внешних файлов, никаких импортов (кроме CDN p5.js). Всё внутри.

**4. Подробности реализации — СОБЕРИ БОКОВУЮ ПАНЕЛЬ**

Структура боковой панели:

**1. Seed (ФИКСИРОВАНО)** — всегда включай ровно как показано:
- Отображение seed
- Кнопки «Назад»/«Далее»/«Случайный»/«Перейти»

**2. Параметры (ПЕРЕМЕННО)** — создай элементы управления для работы:
```html
<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
```
Добавь столько div control-group, сколько у тебя параметров.

**3. Цвета (НЕОБЯЗАТЕЛЬНО/ПЕРЕМЕННО)** — включай, если работе нужны настраиваемые цвета:
- Добавь выбор цвета, если пользователи должны управлять палитрой
- Пропусти этот раздел, если работа использует фиксированные цвета
- Пропусти, если работа монохромна

**4. Действия (ФИКСИРОВАНО)** — всегда включай ровно как показано:
- Кнопка «Сгенерировать заново»
- Кнопка «Сбросить»
- Кнопка «Скачать PNG»

**Требования**:
- Элементы управления seed должны работать (назад/далее/случайный/переход/отображение)
- У всех параметров должны быть элементы управления в интерфейсе
- Кнопки «Сгенерировать заново», «Сбросить» и «Скачать» должны работать
- Сохраняй фирменный стиль Anthropic (стиль интерфейса, не цвета самой работы)

### ИСПОЛЬЗОВАНИЕ АРТЕФАКТА

HTML-артефакт сразу работает:
1. **В claude.ai**: отображается как интерактивный артефакт — запускается мгновенно
2. **Как файл**: сохрани и открой в любом браузере — сервер не нужен
3. **Если делиться**: отправь HTML-файл — он полностью самодостаточен

---

## ВАРИАЦИИ И ИССЛЕДОВАНИЕ

Артефакт по умолчанию включает навигацию по seed (кнопки «Назад»/«Далее»/«Случайный»), что позволяет пользователям исследовать вариации, не создавая много файлов. Если пользователь хочет выделить конкретные вариации:

- Добавь предустановки seed (кнопки «Вариация 1: Seed 42», «Вариация 2: Seed 127» и т. д.)
- Добавь «Режим галереи», показывающий миниатюры нескольких seed рядом
- Всё в рамках того же единого артефакта

Это похоже на создание серии оттисков с одной печатной формы: алгоритм один и тот же, но каждый seed открывает разные грани его потенциала. Интерактивность позволяет пользователям самим находить любимые варианты, исследуя пространство seed.

---

## ТВОРЧЕСКИЙ ПРОЦЕСС

**Просьба пользователя** → **Алгоритмическая философия** → **Реализация**

Каждая просьба уникальна. Процесс включает:

1. **Пойми намерение пользователя** — какая эстетика ему нужна?
2. **Создай алгоритмическую философию** (4–6 абзацев), описывающую вычислительный подход
3. **Реализуй её в коде** — построй алгоритм, выражающий эту философию
4. **Разработай подходящие параметры** — что должно настраиваться?
5. **Собери соответствующие элементы интерфейса** — ползунки/поля ввода для этих параметров

**Константы**:
- Фирменный стиль Anthropic (цвета, шрифты, раскладка)
- Навигация по seed (всегда присутствует)
- Самодостаточный HTML-артефакт

**Всё остальное переменно**:
- Сам алгоритм
- Параметры
- Элементы управления интерфейса
- Визуальный результат

Чтобы добиться наилучших результатов, доверяй творчеству и позволяй философии направлять реализацию.

---

## РЕСУРСЫ

В этот скилл входят полезные шаблоны и документация:

- **templates/viewer.html**: ОБЯЗАТЕЛЬНАЯ ОТПРАВНАЯ ТОЧКА для всех HTML-артефактов.
  - Это фундамент — в нём точная структура и фирменный стиль Anthropic
  - **Оставь без изменений**: структуру раскладки, организацию боковой панели, цвета и шрифты Anthropic, элементы управления seed, кнопки действий
  - **Замени**: алгоритм на p5.js, определения параметров и элементы управления в разделе параметров
  - Подробные комментарии в файле точно отмечают, что оставить, а что заменить

- **templates/generator_template.js**: образец лучших практик p5.js и принципов структуры кода.
  - Показывает, как организовать параметры, использовать воспроизводимую случайность, структурировать классы
  - НЕ меню узоров — используй эти принципы, чтобы строить уникальные алгоритмы
  - Встраивай алгоритмы прямо в HTML-артефакт (не создавай отдельные файлы .js)

**Важное напоминание**:
- **Шаблон — ОТПРАВНАЯ ТОЧКА**, а не вдохновение
- **Алгоритм — то место, где нужно создавать** что-то уникальное
- Не копируй пример с полем потоков — построй то, чего требует философия
- Но ОБЯЗАТЕЛЬНО сохрани точную структуру интерфейса и фирменный стиль Anthropic из шаблона

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/skills/tree/main/skills/algorithmic-art, лицензия Apache-2.0. Изменения: перевод на русский язык.