algorithmic-art

Algorithmic philosophy is a computational aesthetics movement, then expressed through code. Output an .md file (philosophy), an .html file (interactive viewer), and a .js file (generative algorithm).

This happens in two steps:

Algorithmic philosophy creation (.md file)
Express it by creating p5.js generative art (.html + .js files)

First, perform the following tasks:

Algorithmic Philosophy Creation

At the start, create an algorithmic philosophy (not a static image or template) that will be interpreted through the following:

Computational processes, emergent behavior, mathematical beauty
Seeded randomness, noise fields, organic systems
Particles, flow, fields, forces
Parameter variation and controlled chaos

Key Understanding

What is received: Some subtle input or instruction provided by the user as a reference, but used as a foundation; it should not limit creative freedom.
What is created: An algorithmic philosophy/generative aesthetics movement.
What happens next: The same version receives the philosophy and expresses it in code—creating a p5.js sketch that is 90% algorithmically generated and 10% basic parameters.

Consider this approach:

Write a manifesto for a generative art movement
The next stage involves writing the algorithm that brings it to life

The philosophy must emphasize: algorithmic expression. Emergent behavior. Computational beauty. Seed 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 is embodied through the following:

Computational processes and mathematical relationships?
Noise functions and random patterns?
Particle behavior and field dynamics?
Temporal evolution and system states?
Parameter variation and emergent complexity?

Key Guidelines:

Avoid redundancy: Each algorithmic aspect should be mentioned only once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
Repeatedly emphasize craftsmanship: The philosophy must repeatedly emphasize that the final algorithm should look like it took countless hours to develop, meticulously polished, the work of the absolute top experts in the field. This framing is crucial—repeatedly use phrases such as "meticulously crafted algorithm," "the product of deep computational expertise," "finely honed optimization," "master-level implementation."
Leave room for creation: Specify the algorithmic direction specifically, but concisely enough that the next Claude has room to make interpretive implementation choices with an extremely high level of craftsmanship.

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

Philosophy Example

"Organic Turbulence" Philosophy: Chaos is constrained by natural laws, and order emerges from disorder. Algorithmic expression: A flow field driven by layered Perlin noise. Thousands of particles flow along vector forces, and their trajectories accumulate into an organic density map. Multiple noise octaves create turbulent regions and calm regions. Color emerges from speed and density—fast particles burn brightly, slow particles gradually dim. The algorithm runs until it reaches equilibrium—a carefully tuned balance, with every parameter refined by a master of computational aesthetics through countless iterations.

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

"Recursive Whispers" Philosophy: Self-similarity across scales, infinite depth within finite space. Algorithmic expression: A recursively subdivided branching structure. Each branch is slightly randomized but constrained by the golden ratio. L-systems or recursive subdivision generate tree-like forms that are both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line thickness decreases with each recursive level. Every branch angle is the product of deep mathematical exploration.

"Field Dynamics" Philosophy: Making invisible forces visible through their influence on matter. Algorithmic expression: A vector field constructed from mathematical functions or noise. Particles are born at the edges, flow along field lines, and die when they reach equilibrium or a boundary. Multiple fields can attract, repel, or rotate particles. The visualization shows only the trajectories—ghostly evidence of invisible forces. A computational dance carefully choreographed through force balance.

"Stochastic Crystallization" Philosophy: Random processes crystallize into ordered structures. Algorithmic expression: Random circle packing or Voronoi tessellation. Start from random points and let them evolve through a relaxation algorithm. Cells push each other apart until equilibrium. Color is based on cell size, number of neighbors, or distance from the center. The emergent organic tiling feels both random and inevitable. Every seed produces a unique crystalline beauty—the hallmark of a master-level generative algorithm.

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

Basic Principles

Algorithmic Philosophy: Create a computational worldview expressed through code
Process over Product: Always emphasize that beauty emerges from the execution of the algorithm—every run is unique
Parametric Expression: Ideas are conveyed through mathematical relationships, forces, and behaviors—not static composition
Artistic Freedom: The next Claude interprets the philosophy algorithmically—providing space for creative implementation
Pure Generative Art: This is about creating living algorithms, not static images with randomness
Expert Craftsmanship: Repeatedly emphasize that the final algorithm must feel meticulously crafted, refined through countless iterations, and created with deep expertise by the absolute top experts in the field of computational aesthetics

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

Derive Concept Seeds

Key Steps: Before implementing the algorithm, identify the subtle conceptual clues in the original request.

Basic Principles: The concept isa subtle, niche reference embedded in the algorithm itself—not always literal, always refined. Those familiar with the subject should intuitively feel it, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The derived concept provides the soul—conceptual DNA quietly woven into the parameters, behavior, and emergent patterns.

Thisis very important: The reference must be so refined that it enhances the depth of the work without announcing itself. Think of a jazz musician referencing another song through algorithmic harmony—only those in the know will catch it, but everyone appreciates the generative beauty.

P5.JS Implementation

Once the philosophy and conceptual framework are established, express it through code. Pause to organize your thoughts before continuing. Use only the created algorithmic philosophy and the following instructions.

⚠️ Step 0: First read the template ⚠️

Critical: Before writing any HTML:

Read templates/viewer.html using the Read tool
Study the exact structure, styling, and Anthropic branding
Use that file as the actual starting point - not just inspiration
Keep all fixed parts exactly as shown(header, sidebar structure, Anthropic colors/fonts, seed control, action buttons)
Replace only the variable parts, as marked in the file comments (algorithm, parameters, parameter UI controls)

Avoid:

❌ Creating HTML from scratch
❌ Inventing custom styles or color schemes
❌ Using system fonts or a dark theme
❌ Changing the sidebar structure

Follow these practices:

✅ Copy the template's exact HTML structure
✅ Maintain Anthropic branding (Poppins/Lora fonts, light colors, gradient background)
✅ 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, do not rebuild it.

To create gallery-level computational art that comes alive and breathes, use the algorithmic philosophy as the foundation.

Technical Requirements

Seeded Randomness (Art Blocks Pattern)：

// 始终使用种子以保证可重复性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);

Parameter Structure - Follow the Philosophy：

Establish parameters that naturally emerge from the algorithmic philosophy, considering: "Which characteristics of this system can be adjusted?"

let params = {
  seed: 12345,  // 始终包含种子以保证可重复性
  // 颜色
  // 添加控制你的算法的参数：
  // - 数量（多少个？）
  // - 比例（多大？多快？）
  // - 概率（可能性多大？）
  // - 比率（什么比例？）
  // - 角度（什么方向？）
  // - 阈值（行为何时改变？）
};

When designing effective parameters, focus on the properties of the system that need to be adjustable, rather than thinking about "pattern types."

Core Algorithm - Express the Philosophy：

Critical: The algorithmic philosophy should determine what to build.

Express the philosophy through code, avoiding thinking "Which pattern should I use?" and instead thinking "How can I express this philosophy through code?"

If the philosophy is aboutorganic emergence, consider using:

Elements that accumulate or grow over time
Random processes constrained by natural laws
Feedback loops and interactions

If the philosophy is aboutmathematical beauty, consider using:

Geometric relationships and ratios
Trigonometry and Harmonics
Precise calculations create unexpected patterns

If philosophy is aboutcontrolled chaos, consider using:

Random variation within strict boundaries
Bifurcation and phase transitions
Order emerging from disorder

Algorithms flow from philosophy, not from an options menu.

To guide the implementation, let the conceptual essence guide creative and original choices. Build something that expresses this specific requested vision.

Canvas setup: standard p5.js structure:

function setup() {
  createCanvas(1200, 1200);
  // 初始化你的系统
}

function draw() {
  // 你的生成算法
  // 可以是静态的（noLoop）或动画的
}

Craft requirements

Key: To achieve mastery, create algorithms that feel like they emerged from countless iterations by a master of generative art. Carefully tune every parameter. Ensure every pattern emerges purposefully. This is not random noise—this is controlled chaos refined through deep expertise.

Balance: complexity without visual noise, order without rigidity
Color harmony: a deliberate palette, not random RGB values
Composition: even within randomness, maintain visual hierarchy and flow
Performance: smooth execution, optimized for real time if animated
Reproducibility: the same seed always produces the same output

Output format

Output:

Algorithmic philosophy - explain the generative aesthetic as markdown or text
Single HTML artifact - based on templates/viewer.html self-contained interactive generative art (see step 0 and the next section)

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

Interactive artifact creation

Reminder:templates/viewer.html should already have been read (see step 0). Use that file as a starting point.

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

Key: what is fixed vs variable

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

Fixed (always included exactly as shown):

Layout structure (header, sidebar, main canvas area)
Anthropic branding (UI colors, fonts, gradients)
Seed section in the sidebar:
- Seed display
- Previous/Next buttons
- Random button
- Jump to seed input + execute button
Actions section in the sidebar:
- Regenerate button
- Reset button

Variable (customized for each artwork):

The entire p5.js algorithm (setup/draw/classes)
Parameter object (define what the art needs)
Parameters section in the sidebar:
- Number of parameter controls
- Parameter names
- Slider min/max/step values
- Control type (slider, input box, etc.)
Color section (optional):
- Some art needs a color picker
- Some art may use fixed colors
- Some art may be monochrome (no color controls needed)
- Decide according to the needs of the art

Each artwork should have unique parameters and algorithms! The fixed parts provide a consistent user experience—everything else expresses a 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 restores default values

2. Seed navigation

Display the current seed number
"Previous" and "Next" buttons cycle through seeds
"Random" button gets a random seed
Input field jumps to a specific seed
Generate 100 variants when requested (seeds 1-100)

3. Single artifact structure

<!DOCTYPE html>
<html>
<head>
  <!-- 来自 CDN 的 p5.js - 始终可用 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* 所有样式内联 - 干净、极简 */
    /* 画布在上，控件在下 */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- 所有参数控件 -->
  </div>
  <script>
    // 所有 p5.js 代码内联在这里
    // 参数对象、类、函数
    // setup() 和 draw()
    // UI 处理程序
    // 一切自包含
  </script>
</body>
</html>

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

4. Implementation details - Build the sidebar

Sidebar structure:

1. Seed (fixed) - Always include exactly as shown:

Seed display
Previous/Next/Random/Jump buttons

2. Parameters (variable) - Create controls for the art:

<div class="control-group">
    <label>参数名称</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 the same number of control-group divs as there are parameters.

3. Colors (optional/variable) - Include if the art needs adjustable colors:

If the user should control the palette, add color pickers
If the art uses fixed colors, skip this section
If the art is monochrome, skip
Decide according to the needs of the art

4. Actions (fixed) - Always include exactly as shown:

Regenerate button
Reset button
Download PNG button

Requirements：

Seed controls must work (Previous/Next/Random/Jump/Display)
All parameters must have UI controls
Regenerate, Reset, and Download buttons must work
Keep Anthropic branding (UI styling, not art colors)

Using the artifact

The HTML artifact works immediately:

In claude.ai: Displayed as an interactive artifact - runs immediately
As a file: Save and open in any browser - no server required
Share: Send the HTML file - it is fully self-contained

Variants and exploration

The artifact includes seed navigation by default (Previous/Next/Random buttons), allowing users to explore variants without creating multiple files. If the user wants to highlight specific variants:

Include seed presets ("Variant 1: Seed 42", "Variant 2: Seed 127", etc. buttons)
Add a "gallery mode" displaying thumbnails of multiple seeds side by side
All in the same single artifact

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

Creative Process

User Request → Algorithm Philosophy → Implementation

Every request is unique. The process includes:

Interpret user intent - What aesthetic is being sought?
Create an algorithm philosophy(4-6 paragraphs) describing the computational approach
Implement in code - Build an algorithm that expresses this philosophy
Design appropriate parameters - What should be adjustable?
Build matching UI controls - Sliders/input fields for these parameters

Constants：

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

Everything else is variable：

The algorithm itself
Parameters
UI controls
Visual result

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

Resources

This skill includes useful 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: p5.js algorithm, parameter definitions, and UI controls in the parameters section
- Detailed comments in the file mark exactly what to keep and what to replace
templates/generator_template.js: Reference for p5.js best practices and code structure principles.
- Shows how to organize parameters, use seeded randomness, and structure classes
- Not a pattern menu - use these principles to build unique algorithms
- Embed the algorithm inline in the HTML artifact (do not create a separate .js file)

Key Reminders：

The template is a starting point, not inspiration
The algorithm is where creation happensunique things
Do not copy the flow field example - build what the philosophy requires
But maintain the exact UI structure and Anthropic branding from the template