algorithmic-art

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

Это происходит в два этапа:

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

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

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

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

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

КРИТИЧЕСКОЕ ПОНИМАНИЕ

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

Рассмотрите следующий подход:

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

Философия должна подчеркивать: алгоритмическое самовыражение. Эмерджентное поведение. Вычислительная красота. Вариации на основе исходных данных.

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

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

Изложите философию (4–6 абзацев — лаконично, но полно):

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

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

ВАЖНЫЕ РЕКОМЕНДАЦИИ:

• Избегайте избыточности: каждый аспект алгоритма следует упоминать только один раз. Не повторяйте концепции теории шума, динамики частиц или математических принципов, если это не привносит новой глубины.
• НЕУСТАННО подчеркивайте мастерство: в философии ДОЛЖНО неоднократно подчеркиваться, что конечный алгоритм должен выглядеть так, будто на его разработку ушло бесчисленное количество часов, он был тщательно доработан и создан человеком, стоящим на самой вершине своей области. Такая постановка вопроса имеет решающее значение — повторяйте такие фразы, как «тщательно проработанный алгоритм», «результат глубоких знаний в области вычислений», «кропотливая оптимизация», «реализация на уровне мастера».
• Оставьте пространство для творчества: будьте конкретны в отношении алгоритмического направления, но достаточно лаконичны, чтобы у следующего «Клода» было пространство для интерпретационных решений при реализации на чрезвычайно высоком уровне мастерства.

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

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

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

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

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

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

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

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

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

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

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

ВЫВОД КОНЦЕПТУАЛЬНОГО ЗАРОДЫША

КЛЮЧЕВОЙ ЭТАП: Перед реализацией алгоритма выявите тонкую концептуальную нить, проходящую через исходный запрос.

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

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

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

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

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

ВАЖНО: ПЕРЕД тем как писать HTML:

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

Не допускайте:

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

Следуйте следующим рекомендациям:

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

Шаблон — это основа. Развивайте его, а не переделывайте заново.

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

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

Случайность с начальным значением (шаблон Art Blocks):

// ВСЕГДА используйте начальное число для воспроизводимости
let seed = 12345; // или хеш из пользовательского ввода
randomSeed(seed);
noiseSeed(seed);

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

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

let params = {
  seed: 12345,  // Всегда включайте начальное число для воспроизводимости
  // цвета
  // Добавьте параметры, управляющие ВАШИМ алгоритмом:
  // - Количества (сколько?)
  // - Масштабы (насколько велико? насколько быстро?)
  // - Вероятности (насколько вероятно?)
  // - Соотношения (в каких пропорциях?)
  // - Углы (в каком направлении?)
  // - Пороги (когда меняется поведение?)
};

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

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

КРИТИЧЕСКИ ВАЖНО: Философия алгоритма должна определять, что именно нужно создавать.

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

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

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

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

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

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

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

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

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

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

function setup() {
  createCanvas(1200, 1200);
  // Инициализируйте вашу систему
}

function draw() {
  // Ваш генеративный алгоритм
  // Может быть статическим (noLoop) или анимированным
}

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

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

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

ФОРМАТ ВЫВОДА

Вывод:

1. Философия алгоритмов — в формате Markdown или текста, объясняющего генеративную эстетику
2. Единый HTML-артефакт — автономное интерактивное генеративное искусство, построенное на основе шаблонов/viewer.html (см. ШАГ 0 и следующий раздел)

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

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

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

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

ВАЖНО: ЧТО ЯВЛЯЕТСЯ ФИКСИРОВАННЫМ, А ЧТО — ПЕРЕМЕННЫМ

Файл templates/viewer.html является основой. Он содержит необходимую структуру и стили.

ФИКСИРОВАННЫЕ ЭЛЕМЕНТЫ (всегда включайте именно так, как показано):

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

ПЕРЕМЕННАЯ (настраивается для каждого произведения искусства):

• Весь алгоритм p5.js (настройка/рисование/классы)
• Объект параметров (определяет требования к произведению)
• Раздел «Параметры» в боковой панели:
  • Количество элементов управления параметрами
  • Названия параметров
  • Минимальные, максимальные и шаговые значения для ползунков
  • Типы элементов управления (ползунки, поля ввода и т. д.)
• Раздел «Цвета» (опционально):
  • Для некоторых иллюстраций требуются палитры цветов
  • В некоторых изображениях могут использоваться фиксированные цвета
  • Некоторые изображения могут быть монохромными (элементы управления цветом не требуются)
  • Принимайте решение исходя из требований иллюстраций

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

ОБЯЗАТЕЛЬНЫЕ ФУНКЦИИ

1. Регуляторы параметров

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

2. Навигация по начальным значениям

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

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

ВАЖНО: Это единый артефакт. Никаких внешних файлов, никаких импортов (кроме CDN p5.js). Всё в коде.

4. Детали реализации — СОЗДАНИЕ БОКОВОЙ ПАНЕЛИ

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

1. Исходные данные (ФИКСИРОВАННЫЕ) — Всегда включайте именно так, как показано:

• Отображение седа
• Кнопки «Назад», «Вперёд», «Случайный выбор» и «Переход»

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

   Название параметра
    <input type="range" id="param" min="..." max="..." step="..." value="..." this.value)">
    <span class="value-display" id="param-value">...</span>
</div>
</code></pre>
<p>Добавьте столько div-элементов с группами элементов управления, сколько есть параметров.</p>
<p><strong>3. Цвета (ОПЦИОНАЛЬНО/ПЕРЕМЕННАЯ)</strong> — Включите, если для иллюстрации требуется настраиваемая цветовая палитра:</p>
<ul>
<li>Добавьте палитры цветов, если пользователи должны управлять палитрой</li>
<li>Пропустите этот раздел, если в иллюстрации используются фиксированные цвета</li>
<li>Пропустите, если изображение монохромное</li>
</ul>
<p><strong>4. Действия (ФИКСИРОВАННЫЕ)</strong> — Всегда включайте именно так, как показано:</p>
<ul>
<li>Кнопка «Перегенерировать»</li>
<li>Кнопка «Сброс»</li>
<li>Кнопка «Скачать PNG»</li>
</ul>
<p><strong>Требования</strong>:</p>
<ul>
<li>Элементы управления седом должны работать (предыдущий/следующий/случайный/переход/отображение)</li>
<li>Все параметры должны иметь элементы управления в интерфейсе</li>
<li>Кнопки «Обновить», «Сбросить» и «Скачать» должны работать</li>
<li>Сохраните брендинг Anthropic (стиль интерфейса, а не цвета графики)</li>
</ul>
<h3>ИСПОЛЬЗОВАНИЕ АРТЕФАКТА</h3>
<p>HTML-артефакт работает сразу:</p>
<ol>
<li><strong>В claude.ai</strong>: отображается как интерактивный артефакт — запускается мгновенно</li>
<li><strong>В виде файла</strong>: Сохраните и откройте в любом браузере — сервер не требуется</li>
<li><strong>Совместное использование</strong>: Отправьте HTML-файл — он полностью автономный</li>
</ol>

<h2>ВАРИАЦИИ И ИССЛЕДОВАНИЕ</h2>
<p>Артефакт по умолчанию включает навигацию по стартовым значениям (кнопки «Предыдущий», «Следующий», «Случайный»), что позволяет пользователям исследовать вариации без создания множества файлов. Если пользователь хочет выделить конкретные вариации:</p>
<ul>
<li>Включить предустановки начальных значений (кнопки «Вариант 1: начальное значение 42», «Вариант 2: начальное значение 127» и т. д.)</li>
<li>Добавить «режим галереи», в котором миниатюры нескольких начальных значений отображаются рядом</li>
<li>Всё в рамках одного артефакта</li>
</ul>
<p>Это похоже на создание серии оттисков с одной и той же печатной формы — алгоритм остаётся неизменным, но каждое начальное число раскрывает разные грани его потенциала. Благодаря интерактивности пользователи могут открывать для себя свои любимые варианты, исследуя пространство начальных чисел.</p>

<h2>ТВОРЧЕСКИЙ ПРОЦЕСС</h2>
<p><strong>Запрос пользователя</strong> → <strong>Философия алгоритма</strong> → <strong>Реализация</strong></p>
<p>Каждый запрос уникален. Процесс включает в себя:</p>
<ol>
<li><strong>Интерпретацию намерения пользователя</strong> — Какая эстетика ищется?</li>
<li><strong>Создание алгоритмической философии</strong> (4–6 абзацев), описывающей вычислительный подход</li>
<li><strong>Реализация в коде</strong> — Создание алгоритма, воплощающего эту философию</li>
<li><strong>Разработка подходящих параметров</strong> — Что должно быть настраиваемым?</li>
<li><strong>Создание соответствующих элементов управления пользовательского интерфейса</strong> — ползунки/поля ввода для этих параметров</li>
</ol>
<p><strong>Константы</strong>:</p>
<ul>
<li>Антропный брендинг (цвета, шрифты, макет)</li>
<li>Навигация по семенам (всегда присутствует)</li>
<li>Автономный HTML-артефакт</li>
</ul>
<p><strong>Всё остальное является переменным</strong>:</p>
<ul>
<li>Сам алгоритм</li>
<li>Параметры</li>
<li>Элементы управления интерфейсом</li>
<li>Визуальный результат</li>
</ul>
<p>Чтобы добиться наилучших результатов, доверьтесь творчеству и позвольте философии направлять реализацию.</p>

<h2>РЕСУРСЫ</h2>
<p>Этот навык включает полезные шаблоны и документацию:</p>
<ul>
<li><p><strong>templates/viewer.html</strong>: ОБЯЗАТЕЛЬНАЯ ОТРАЗОЧНАЯ ТОЧКА для всех HTML-артефактов.</p>
<ul>
<li>Это основа — содержит точную структуру и брендинг Anthropic</li>
<li><strong>Оставить без изменений</strong>: структура макета, организация боковой панели, цвета и шрифты Anthropic, элементы управления начальными значениями, кнопки действий</li>
<li><strong>Заменить</strong>: алгоритм p5.js, определения параметров и элементы управления интерфейсом в разделе «Параметры»</li>
<li>Подробные комментарии в файле точно указывают, что следует сохранить, а что заменить</li>
</ul>
</li>
<li><p><strong>templates/generator_template.js</strong>: Справочник по лучшим практикам p5.js и принципам структуры кода.</p>
<ul>
<li>Показывает, как организовывать параметры, использовать случайные числа с начальным значением, структурировать классы</li>
<li>ЭТО НЕ меню шаблонов — используйте эти принципы для создания уникальных алгоритмов</li>
<li>Встраивайте алгоритмы непосредственно в HTML-артефакт (не создавайте отдельных файлов .js)</li>
</ul>
</li>
</ul>
<p><strong>Важное напоминание</strong>:</p>
<ul>
<li>Шаблон <strong>является ОТРАЗОЧНОЙ ТОЧКОЙ</strong>, а не источником вдохновения</li>
<li>Именно в <strong>алгоритме нужно создавать</strong> что-то уникальное</li>
<li>Не копируйте пример с полем потока — создавайте то, чего требует философия</li>
<li>Но ОБЯЗАТЕЛЬНО сохраняйте точную структуру пользовательского интерфейса и брендинг Anthropic из шаблона</li>
</ul>                                
                                

                                    
                                        Посмотреть на GitHub
                                        
                                    
                                    
---
name: algorithmic-art
description: Create algorithmic art by first writing a generative philosophy, then expressing it as p5.js sketches with seeded randomness and interactive parameter exploration.
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>
  <!-- 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>
```

**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