algorithmic-art

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

This happens in two steps:

算法ic Philosophy Creation (.md file)
Express by creating p5.js generative art (.html + .js files)

First, undertake this task:

算法IC PHILOSOPHY CREATION

To begin, create an 算法IC PHILOSOPHY (not static images or 模板s) that will be interpreted through:

Computational processes, emergent behavior, mathematical beauty
Seeded randomness, noise fields, organic 系统s
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 算法ic 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% 算法ic generation, 10% essential 参数s.

Consider this approach:

Write a manifesto for a generative art movement
The next phase involves writing the 算法 that brings it to life

The philosophy must emphasize: 算法ic expression. Emergent behavior. Computational beauty. Seeded variation.

HOW TO GENERATE AN 算法IC 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 算法IC essence, express how this philosophy manifests through:

Computational processes and mathematical relationships?
Noise 函数s and randomness 模式s?
Particle behaviors and field dynamics?
Temporal evolution and 系统 states?
Parametric variation and emergent complexity?

CRITICAL 指南LINES:

Avoid redundancy: Each 算法ic 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 算法 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 算法," "the product of deep computational expertise," "painstaking 优化," "master-level 实现."
Leave creative space: Be specific about the 算法ic direction, but concise enough that the next Claude has room to make interpretive 实现 choices at an extremely high level of craftsmanship.

The philosophy must 指南 the next version to express ideas 算法ICALLY, not through static images. Beauty lives in the process, not the final frame.

PHILOSOPHY 示例S

"Organic Turbulence" Philosophy: Chaos constrained by natural law, order emerging from disorder. 算法ic 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 算法 runs until equilibrium - a meticulously tuned balance where every 参数 was refined through countless iterations by a master of computational aesthetics.

"Quantum Harmonics" Philosophy: Discrete entities exhibiting wave-like interference 模式s. 算法ic 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. 算法ic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-系统s 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. 算法ic expression: Vector fields constructed from mathematical 函数s 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. 算法ic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation 算法s. 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 算法.

These are condensed 示例s. The actual 算法ic philosophy should be 4-6 substantial paragraphs.

ESSENTIAL PRINCIPLES

算法IC PHILOSOPHY: Creating a computational worldview to be expressed through code
PROCESS OVER PRODUCT: Always emphasize that beauty emerges from the 算法'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 算法ically - provide creative 实现 room
PURE GENERATIVE ART: This is about making LIVING 算法S, not static images with randomness
EXPERT CRAFTSMANSHIP: Repeatedly emphasize the final 算法 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 算法ic 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 算法ic philosophy as a .md file.

DEDUCING THE CONCEPTUAL SEED

CRITICAL STEP: Before implementing the 算法, identify the subtle conceptual thread from the original request.

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

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 算法ic harmony - only those who know will catch it, but everyone appreciates the generative beauty.

P5.JS 实现

With the philosophy AND conceptual 框架 established, express it through code. Pause to gather thoughts before proceeding. Use only the 算法ic philosophy created and the instructions below.

⚠️ STEP 0: READ THE 模板 FIRST ⚠️

CRITICAL: BEFORE writing any HTML:

Read 模板s/viewer.html using the Read tool
Study the exact structure, styling, and Anthropic branding
Use that file as the 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 变量 sections marked in the file's comments (算法, 参数s, UI controls for 参数s)

Avoid:

❌ Creating HTML from scratch
❌ Inventing custom styling or color schemes
❌ Using 系统 fonts or dark themes
❌ Changing the sidebar structure

Follow these practices:

✅ Copy the 模板's exact HTML structure
✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
✅ Maintain the sidebar layout (Seed → 参数s → Colors? → Actions)
✅ Replace only the p5.js 算法 and 参数 controls

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

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

TECHNICAL REQUIREMENTS

Seeded Randomness (Art Blocks 模式):

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

参数 Structure - FOLLOW THE PHILOSOPHY:

To establish 参数s that emerge naturally from the 算法ic philosophy, consider: "What qualities of this 系统 can be adjusted?"

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

To 设计 effective 参数s, focus on the properties the 系统 needs to be tunable rather than thinking in terms of "模式 types".

Core 算法 - EXPRESS THE PHILOSOPHY:

CRITICAL: The 算法ic philosophy should dictate what to build.

To express the philosophy through code, avoid thinking "which 模式 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 函数s and harmonics
Precise calculations creating unexpected 模式s

If the philosophy is about controlled chaos, consider using:

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

The 算法 flows from the philosophy, not from a menu of options.

To 指南 the 实现, 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:

函数 setup() {
  createCanvas(1200, 1200);
  // Initialize your 系统
}

函数 draw() {
  // Your generative 算法
  // Can be static (noLoop) or animated
}

CRAFTSMANSHIP REQUIREMENTS

CRITICAL: To achieve mastery, create 算法s that feel like they emerged through countless iterations by a master generative artist. Tune every 参数 carefully. Ensure every 模式 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
性能: Smooth execution, optimized for real-time if animated
Reproducibility: Same seed ALWAYS produces identical output

OUTPUT FORMAT

Output:

算法ic Philosophy - As markdown or text explaining the generative aesthetic
Single HTML Artifact - Self-contained interactive generative art built from 模板s/viewer.html (see STEP 0 and next section)

The HTML artifact contains everything: p5.js (from CDN), the 算法, 参数 controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the 模板 file, not from scratch.

INTERACTIVE ARTIFACT CREATION

REMINDER: 模板s/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 变量

The 模板s/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

变量 (customize for each artwork):

The entire p5.js 算法 (setup/draw/classes)
The 参数s object (define what the art needs)
The 参数s section in sidebar:
- Number of 参数 controls
- 参数 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 参数s and 算法! The fixed parts provide consistent UX - everything else expresses the unique vision.

REQUIRED FEATURES

1. 参数 Controls

Sliders for numeric 参数s (particle count, noise scale, speed, etc.)
Color pickers for palette colors
Real-time updates when 参数s 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

<!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 参数 controls -->
  </div>
  <script>
    // ALL p5.js code inline here
    // 参数 objects, classes, 函数s
    // 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. 实现 Details - BUILD THE SIDEBAR

The sidebar structure:

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

Seed display
Prev/Next/Random/Jump buttons

2. 参数s (变量) - Create controls for the art:

<div class="control-group">
    <label>参数 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 参数s.

3. Colors (OPTIONAL/变量) - 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 参数s 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:

In claude.ai: Displayed as an interactive artifact - runs instantly
As a file: Save and open in any browser - no server needed
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 算法 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 → 算法ic philosophy → 实现

Each request is unique. The process involves:

Interpret the user's intent - What aesthetic is being sought?
Create an 算法ic philosophy (4-6 paragraphs) describing the computational approach
Implement it in code - Build the 算法 that expresses this philosophy
设计 appropriate 参数s - What should be tunable?
Build matching UI controls - Sliders/inputs for those 参数s

The constants:

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

Everything else is 变量:

The 算法 itself
The 参数s
The UI controls
The visual outcome

To achieve the best results, trust creativity and let the philosophy 指南 the 实现.

RESOURCES

This skill includes helpful 模板s and 文档:

模板s/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 算法, 参数 definitions, and UI controls in 参数s section
- The extensive comments in the file mark exactly what to keep vs replace
模板s/generator_模板.js: Reference for p5.js best practices and code structure principles.
- Shows how to organize 参数s, use seeded randomness, structure classes
- NOT a 模式 menu - use these principles to build unique 算法s
- Embed 算法s inline in the HTML artifact (don't create separate .js files)

Critical reminder:

The 模板 is the STARTING POINT, not inspiration
The 算法 is where to create something unique
Don't copy the flow field 示例 - build what the philosophy demands
But DO keep the exact UI structure and Anthropic branding from the 模板

安装方式

CLI 安装（推荐）

手动下载安装

触发指令

使用指南