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)
- Expression through creating p5.js generative art (.html + .js files)
First, perform the following tasks:
Algorithmic Philosophy Creation
Start by creating an algorithmic philosophy (not a static image or template) that will interpret through:
- Computational processes, emergent behavior, mathematical beauty
- Seed-based randomness, noise fields, organic systems
- Particles, flow, fields, forces
- Parameter variation and controlled chaos
Key Understandings
- Received content: Some subtle input or instruction from the user as reference, but used as a foundation; it should not restrict creative freedom.
- Created content: 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 the 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. Seed variation.
How to Generate Algorithmic Philosophy
Name the Movement (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "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 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 only be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
- Emphasize Craft Repeatedly: The philosophy must repeatedly emphasize that the final algorithm should feel like it was developed over countless hours, meticulously polished, and the product of absolute top experts in the field. This framing is crucial — repeatedly use phrases like "craft algorithm", "product of deep computational expertise", "meticulously refined optimization", "masterful implementation".
- Leave Creative Space: Specify the algorithmic direction, but be concise enough to leave space for the next Claude to make interpretive implementation choices with the highest level of craft.
The philosophy must guide the next version to express ideas algorithmically, not through static images. Beauty lies in the process, not the final frame.
Philosophy Examples
"Organic Turbulence"
Philosophy: Chaos constrained by natural laws, order emerging from disorder.
Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles flow along 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 dimly. The algorithm runs until equilibrium is reached — a finely tuned balance, with each parameter refined through countless iterations by a master of computational aesthetics.
"Quantum Harmonics"
Philosophy: Discrete entities exhibit wave-like interference patterns.
Algorithmic expression: Particles initialized on a grid, each carrying a phase value evolving through sine waves. When particles approach, 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, with each ratio chosen deliberately to produce resonant beauty.
"Recursive Whispers"
Philosophy: Self-similarity across scales, infinite depth in finite space.
Algorithmic expression: Recursively subdivided branch structures. 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 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 effects on matter.
Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles are born at edges, flow along field lines, and perish when equilibrium or boundaries are reached. Multiple fields can attract, repel, or rotate particles. Visualization only shows trajectories — ghostly evidence of invisible forces. A computational dance choreographed through force balance.
"Random Crystallization"
Philosophy: Random processes crystallize into ordered structures.
Algorithmic expression: Random circle packing or Voronoi tessellation. Starting from random points, let them evolve through relaxation algorithms. Cells push each other 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. Each seed produces unique crystalline beauty — 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 expressed through code
- Process Over Product: Always emphasize that beauty emerges from algorithm execution — every run is unique
- Parametric Expression: Ideas are conveyed through mathematical relationships, forces, behaviors — not static compositions
- 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 Craft: Repeatedly emphasize that the final algorithm must feel meticulously crafted, refined through countless iterations, and created by absolute top experts in computational aesthetics with deep expertise
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.
Deriving Conceptual Seeds
Key Step: Before implementing the algorithm, identify subtle conceptual threads in the original request.
Fundamental Principle:
Concepts are subtle, niche references embedded within the algorithm itself — not always literal, always refined. Those familiar with the subject should intuitively sense it, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The derived concepts provide the soul — conceptual DNA quietly woven into parameters, behaviors, and emergent patterns.
This is extremely important: References must be so refined that they enhance the depth of the work without announcing themselves. Think of a jazz musician quoting 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 proceeding. Only use 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 the actual starting point — not just inspiration
- Keep all fixed sections exactly as shown (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
- Only replace variable sections as marked in the file 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)
- ✅ Preserve the sidebar layout (Seed → Parameters → Colors? → Actions)
- ✅ Only replace the p5.js algorithm and parameter controls
The template is the foundation. Build on it, don't rebuild it.
To create gallery-level computational art that comes alive and breathes, use the algorithmic philosophy as the foundation.
Technical Requirements
Seed Randomness (Art Blocks Mode):
javascript
// Always use seeds for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
Parameter Structure - Follow the Philosophy:
Establish parameters that naturally emerge from the algorithmic philosophy, considering: "Which properties of this system can be adjusted?"
javascript
let params = {
seed: 12345, // Always include seed for reproducibility
// Colors
// Add parameters that control your algorithm:
// - Quantity (how many?)
// - Scale (how big? how fast?)
// - Probability (how likely?)
// - Ratio (what proportion?)
// - Angle (what direction?)
// - Threshold (when does behavior change?)
};
When designing effective parameters, focus on the properties the system needs to be adjustable, rather than thinking about "pattern types".
Core Algorithm - Express the Philosophy:
Key: The algorithmic philosophy should dictate what to build.
Express the philosophy through code, avoiding thinking "Which pattern should I use?" and instead thinking "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 laws
- 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 an options menu.
To guide implementation, let the conceptual essence guide 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);
// Initialize your system
}
function draw() {
// Your generative algorithm
// Can be static (noLoop) or animated
}
Craft Requirements
Key: To achieve mastery, create algorithms that feel like they emerged from a master of generative art through countless iterations. Fine-tune each parameter carefully. Ensure each pattern emerges purposefully. This is not random noise — it's controlled chaos refined through deep expertise.
- Balance: Complexity without visual noise, order without rigidity
- Color Harmony: Thoughtful 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 - Generated as markdown or text explaining generative aesthetics
- Single HTML Artifact - Self-contained interactive generative art built based on (see Step 0 and the next section)
The HTML artifact contains everything: p5.js (from CDN), algorithm, parameter controls, and UI — all in one file, ready to work 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 generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser — no setup required. Embed all content inline.
Key: Fixed vs Variable Elements
The
file is the foundation. It contains the exact required structure and styling.
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 + execute button
- Actions section in sidebar:
- Regenerate button
- Reset button
Variable (Customize for Each Artwork):
- 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, input boxes, etc.)
- Colors section (optional):
- Some art requires color pickers
- Some art uses fixed colors
- Some art is monochromatic (no color controls needed)
- Decide based on the needs of the art
Every artwork should have unique parameters and algorithms! Fixed sections provide consistent user experience — everything else expresses a unique vision.
Required Features
1. Parameter Controls
- Sliders for numerical parameters (number of particles, noise scale, speed, etc.)
- Color pickers for palette colors
- 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 to get a random seed
- Input field to jump to a specific seed
- Generate 100 variants (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 styles 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 is 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 there are parameters.
3. Colors (Optional/Variable) - Include if the art requires adjustable colors:
- Add color pickers if users should control the palette
- Skip this section if the art uses fixed colors
- Skip if the art is monochromatic
- Decide based on 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
- Maintain Anthropic branding (UI styles, 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 required
- Share: Send the HTML file — it's completely self-contained
Variant Exploration
The artifact includes seed navigation by default (previous/next/random buttons), allowing users to explore variants without creating multiple files. If users want to highlight specific variants:
- Include seed presets (buttons for "Variant 1: Seed 42", "Variant 2: Seed 127", etc.)
- Add "gallery mode" to display 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 a different aspect of its potential. Interactivity means users discover their own favorites by exploring the seed space.
Creation Process
User Request → Algorithmic Philosophy → Implementation
Each request is unique. The process includes:
- Interpret User Intent - What aesthetic is being sought?
- Create Algorithmic 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/inputs 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 results
For best results, trust creativity and let the philosophy guide 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 UI controls in the parameters section
- Detailed comments in the file mark exactly what to keep vs what to replace
-
templates/generator_template.js: Reference for p5.js best practices and code structure principles.
- Shows how to organize parameters, use seed randomness, build 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:
- Templates are starting points, not inspiration
- The algorithm is where you create something unique
- Do not copy flow field examples - build what the philosophy demands
- But keep the exact UI structure and Anthropic branding from the template