Algorithmic philosophy is a computational aesthetics movement expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
This is done in two steps:
- Algorithmic Philosophy Creation (.md file)
- Generative Art Expression via p5.js (.html + .js files)
First, perform this task:
Algorithmic Philosophy Creation
To begin, create an algorithmic philosophy (not a static image or template) that will be interpreted through:
- Computational processes, emergent behavior, mathematical aesthetics
- Seeded randomness, noise fields, organic systems
- Particles, flows, fields, forces
- Parameter variation and controlled chaos
Key Understandings
- Received Content: Some subtle input or instructions from the user need to be considered, but used as a foundation; it should not restrict creative freedom.
- Created Content: An algorithmic philosophy/generative aesthetics movement.
- What Happens Next: The next iteration receives this philosophy and expresses it through code — creating a p5.js sketch that is 90% algorithmically generated and 10% necessary 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 aesthetics. Seed variation.
How to Generate Algorithmic Philosophy
Name the Movement (1-2 words): "Organic Turbulence" / "Quantum Harmony" / "Emergent Stillness"
Elaborate the Philosophy (4-6 paragraphs — concise yet complete):
To capture the algorithmic essence, express how this philosophy is embodied through:
- Computational processes and mathematical relationships?
- Noise functions and patterns of randomness?
- 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.
- Emphasize Craftsmanship Repeatedly: The philosophy must repeatedly emphasize that the final algorithm should feel like it has been developed over countless hours, meticulously refined, and comes from absolute top professionals in the field. This framing is crucial — repeat phrases like "exquisitely crafted algorithm", "product of deep computational expertise", "refined through painful optimization", "masterful implementation".
- Leave Creative Space: Be specific enough about the algorithm direction, but concise enough to leave room for the next Claude to make interpretive implementation choices at an extremely high craftsmanship level.
The philosophy must guide the next iteration to express ideas algorithmically, not through static images. Aesthetics lie in the process, not the final frame.
Philosophy Examples
"Organic Turbulence"
Philosophy: Chaos constrained by natural laws, emerging from disorder.
Algorithmic Expression: Flow fields driven by layered Perlin noise. Thousands of particles follow vector forces, their trajectories accumulating into organic density maps. Multiple noise octaves create regions of turbulence and calm. Color emerges from velocity and density — fast particles burn bright, slow particles fade to shadow. The algorithm runs until equilibrium — a finely tuned balance where every parameter has been refined through countless iterations, crafted by a master of computational aesthetics.
"Quantum Harmony"
Philosophy: Discrete entities exhibiting wave-like interference patterns.
Algorithmic Expression: Particles initialized on a grid, each carrying a phase value that evolves via sine waves. As particles approach, their phases interfere — constructive interference creates bright nodes, destructive interference creates voids. Simple harmonic motion produces complex emergent mandalas. The result of painful frequency calibration, where every ratio is carefully chosen to produce resonant aesthetics.
"Recursive Whispers"
Philosophy: Self-similarity across scales, infinite depth in finite space.
Algorithmic Expression: Recursively subdivided branching structures. Each branch is slightly randomized but constrained by the golden ratio. L-systems or recursive subdivision produce tree-like shapes that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weight decreases with each recursive level. Each branch angle is the product of deep mathematical exploration.
"Field Dynamics"
Philosophy: Making invisible forces visible through their effect 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. Visualization only shows traces — ghostly evidence of invisible forces. A computational dance of carefully orchestrated force balances.
"Random Crystallization"
Philosophy: Random processes crystallizing into ordered structures.
Algorithmic Expression: Randomized circle packing or Voronoi subdivision. Starting from random points, let them evolve via relaxation algorithms. Cells repel each other until equilibrium. Color is based on cell size, neighbor count, or distance to center. An organic tiling that feels both random and inevitable. Each seed produces a unique crystalline aesthetic — a hallmark of masterful generative algorithms.
These are condensed examples. Actual algorithmic philosophy should be 4-6 substantial paragraphs.
Fundamental Principles
- Algorithmic Philosophy: Create a computational worldview that will be expressed through code
- Process Over Product: Always emphasize that aesthetics emerge from the execution of the algorithm — every run is unique
- Parameter Expression: Ideas are conveyed through mathematical relationships, forces, behaviors — not static compositions
- Artistic Freedom: The next Claude interprets the philosophy algorithmically — provide space for creative implementation
- Pure Generative Art: This is about making living algorithms, not static images with randomness
- Expert Craftsmanship: Repeatedly emphasize that the final algorithm must feel exquisitely crafted, refined through countless iterations, and be the product of absolute top professionals in the field of computational aesthetics
The algorithmic philosophy should be 4-6 paragraphs long. Fill it with poetic computational philosophy that binds the intended vision together. Avoid repeating the same points. Output the algorithmic philosophy as a .md file.
Deriving Concepts
Key Step: Before implementing the algorithm, identify subtle conceptual threads from the original request.
Rationale:
A concept is a subtle, niche reference embedded within the algorithm itself — not always literal, always sophisticated. Someone familiar with the subject should intuitively feel it, while others just experience the masterful generative composition. The algorithmic philosophy provides the computational language. The derived concept provides the soul — quiet conceptual DNA woven into parameters, behaviors, and emergent patterns.
This is extremely important: The reference must be so refined that it enhances the depth of the work without announcing itself. Imagine a jazz musician quoting another song algorithmically through harmony — only those in the know will catch it, but everyone appreciates the generative aesthetics.
P5.JS Implementation
After the philosophy and conceptual framework are established, express it through code. Pause to gather ideas before proceeding. Use only the created algorithmic philosophy and the following instructions.
⚠️ Step 0: Read the Template First ⚠️
Critical: Before writing any HTML:
- Read using the Read tool
- Study the exact structure, styling, and Anthropic branding
- Use this file as a literal starting point — not just inspiration
- Keep all fixed sections exactly as shown (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
- Replace only the variable sections marked in the file's comments (algorithm, parameters, UI controls for parameters)
Avoid:
- ❌ Creating HTML from scratch
- ❌ Inventing custom styles or color schemes
- ❌ Using system fonts or dark themes
- ❌ Changing the sidebar structure
Follow These Practices:
- ✅ Copy the exact HTML structure of the template
- ✅ Maintain Anthropic branding (Poppins/Lora fonts, light theme, gradient background)
- ✅ Keep the sidebar layout (Seed → Parameters → Colors? → Actions)
- ✅ Replace only the p5.js algorithm and parameter controls
The template is the foundation. Build upon it, don't rebuild it.
To create living, breathing computational art, use the algorithmic philosophy as the foundation.
Technical Requirements
Seed Randomness (Art Block Pattern):
javascript
// 始终使用种子以实现可重现性
let seed = 12345; // 或来自用户输入的哈希
randomSeed(seed);
noiseSeed(seed);
Parameter Structure — Follow the Philosophy:
To establish parameters that naturally emerge from the algorithmic philosophy, consider: "Which qualities of this system should be tunable?"
javascript
let params = {
seed: 12345, // 始终包含种子以实现可重现性
// 颜色
// 添加控制YOUR算法的参数：
// - 数量（多少？）
// - 尺度（多大？多快？）
// - 概率（多可能？）
// - 比率（什么比例？）
// - 角度（什么方向？）
// - 阈值（行为何时改变？）
};
Design effective parameters focused on the properties the system needs to be tuned, rather than thinking in terms of "pattern types".
Core Algorithm — Express the Philosophy:
Key: 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 aesthetics, consider using:
- Geometric relationships and ratios
- Trigonometric functions and harmonics
- Precise calculations that produce unexpected patterns
The algorithm flows from the philosophy, not from a menu of options.
To guide implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision of this specific request.
Canvas Setup: Standard p5.js structure:
javascript
function setup() {
createCanvas(1200, 1200);
// 初始化你的系统
}
function draw() {
// 你的生成算法
// 可以是静态（无循环）或动画
}
Craftsmanship Requirements
Key: To achieve mastery, create algorithms that feel like they have been developed through countless iterations by a master generative artist. Tune each parameter carefully. Ensure every pattern emerges purposefully. This is not random noise — this is refined controlled chaos.
- Balance: Complexity without visual clutter, order without rigidity
- Color Harmony: Deliberate color palettes, not random RGB values
- Composition: Maintain visual hierarchy and flow even within randomness
- Performance: Smooth execution, optimized for real-time if animated
- Reproducibility: The same seed always produces the same output
Output Format
Output:
- Algorithmic Philosophy — as markdown or text explaining generative aesthetics
- Single HTML Artifact — self-contained interactive generative art built from (see Step 0 and next section)
The HTML artifact contains everything: p5.js (from CDN), 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:
should have been read (see Step 0). Use this 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.
Key: What's Fixed vs Variable
The
file is the foundation. It contains the exact structure and styling needed for it to work.
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/Random/Jump buttons
- Actions section in sidebar:
- Regenerate button
- Reset button
Variable (Customize for Each Piece):
- Entire p5.js algorithm (setup/draw/classes)
- Parameter object (define what the art needs)
- 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 uses fixed colors
- Some art is monochromatic (no color controls needed)
- Decide based on the art's needs
Every piece should have unique parameters and algorithms! Fixed sections provide consistent UX — everything else expresses a unique vision.
Required Features
1. Parameter Controls
- Sliders for numerical parameters (particle count, noise scale, velocity, etc.)
- Color pickers for palettes
- Real-time updates when parameters change
- Reset button to restore default values
2. Seed Navigation
- Display current seed number
- "Previous" and "Next" buttons to cycle through seeds
- Random button for random seeds
- Jump to specific seed input + Go button
- Generate 100 variations (seeds 1-100) when requested
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>
Key: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.
4. Implementation Details — Building 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:
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 needed.
3. Colors (Optional/Variable) — if the art needs adjustable palettes:
- Add color pickers if users should control the palette
- Skip this section if the art uses fixed colors
- Skip this section if the art is monochromatic (no color controls needed)
Decide based on the art's needs.
Every piece should have unique parameters and algorithms! Fixed sections provide consistent UX — everything else expresses a unique vision.
Required Features
1. Parameter Controls
- Sliders for numerical parameters (particle count, noise scale, velocity, etc.)
- Color pickers for palettes
- Real-time updates when parameters change
- Reset button to restore default values
2. Seed Navigation
- Display current seed number
- "Previous" and "Next" buttons to cycle through seeds
- Random button for random seeds
- Jump to specific seed input + Go button
- Generate 100 variations (seeds 1-100) when requested
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>
Key: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.
4. Implementation Details — Building 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:
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 needed.
3. Colors (Optional/Variable) — if the art needs adjustable palettes:
- Add color pickers if users should control the palette
- Skip this section if the art uses fixed colors
- Skip this section if the art is monochromatic (no color controls needed)
Decide based on the art's needs.
Every piece should have unique parameters and algorithms! Fixed sections provide consistent UX — everything else expresses a unique vision.
Required Features
1. Parameter Controls
- Sliders for numerical parameters (particle count, noise scale, velocity, etc.)
- Color pickers for palettes
- Real-time updates when parameters change
- Reset button to restore default values
2. Seed Navigation
- Display current seed number
- "Previous" and "Next" buttons to cycle through seeds
- Random button for random seeds
- Jump to specific seed input + Go button
- Generate 100 variations (seeds 1-100) when requested
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>
Key: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.
4. Implementation Details — Building 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:
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 needed.
3. Colors (Optional/Variable) — if the art needs adjustable palettes:
- Add color pickers if users should control the palette
- Skip this section if the art uses fixed colors
- Skip this section if the art is monochromatic (no color controls needed)
Decide based on the art's needs.
Every piece should have unique parameters and algorithms! Fixed sections provide consistent UX — everything else expresses a unique vision.
Requirements**
- Seed controls must work (previous/next/random/jump/display)
- All parameters must have UI controls
- Regenerate, reset, download buttons must work
- Maintain Anthropic branding (UI styling, not art colors)
Using the Artifact
The HTML artifact works immediately:
- In claude.ai: Displayed as an interactive artifact — runs instantly
- As a file: Save and open in any browser — no server needed
- Share: Send the HTML file — it's completely self-contained
Variations & Exploration
The artifact includes seed navigation (previous/next/random buttons) by default, allowing users to explore the seed space without creating multiple files. If users want specific highlighted variations:
- Include buttons for seed presets ("Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
- Add a "gallery mode" that displays multiple seed thumbnails side-by-side within the same single artifact
- 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 a different aspect of its potential. The interactive nature means users discover their favorites by exploring the seed space.
Creative Process
User Request → Algorithmic Philosophy → Implementation
Every request is unique. The process involves:
- Interpreting User Intent — What aesthetics are being sought?
- Creating Algorithmic Philosophy (4-6 paragraphs) describing the computational approach
- Implementing it in Code — building the algorithm that expresses this philosophy
- Designing Appropriate Parameters — what should be tunable?
- Building Matching UI Controls — sliders/inputs for those 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 results
For 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 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 parameters section UI controls
- Extensive comments in the file exactly mark 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 seed randomness, structure classes
- Not a pattern menu — use these principles to build unique algorithms
- Embed the algorithm inline in the HTML artifact (don't create a separate .js file)
- Key Reminders:
- Templates are starting points, not inspiration
- The algorithm is where unique content is created
- Don't copy flow field examples — build what the philosophy demands
- But keep the exact UI structure and Anthropic branding from the template
",