Algorithmic Art

1---
2name: algorithmic-art
3description: Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
4license: Complete terms in LICENSE.txt
5---
6 
7Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
8 
9This happens in two steps:
101. Algorithmic Philosophy Creation (.md file)
112. Express by creating p5.js generative art (.html + .js files)
12 
13First, undertake this task:
14 
15## ALGORITHMIC PHILOSOPHY CREATION
16 
17To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
18- Computational processes, emergent behavior, mathematical beauty
19- Seeded randomness, noise fields, organic systems
20- Particles, flows, fields, forces
21- Parametric variation and controlled chaos
22 
23### THE CRITICAL UNDERSTANDING
24- 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.
25- What is created: An algorithmic philosophy/generative aesthetic movement.
26- 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.
27 
28Consider this approach:
29- Write a manifesto for a generative art movement
30- The next phase involves writing the algorithm that brings it to life
31 
32The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.
33 
34### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY
35 
36**Name the movement** (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
37 
38**Articulate the philosophy** (4-6 paragraphs - concise but complete):
39 
40To capture the ALGORITHMIC essence, express how this philosophy manifests through:
41- Computational processes and mathematical relationships?
42- Noise functions and randomness patterns?
43- Particle behaviors and field dynamics?
44- Temporal evolution and system states?
45- Parametric variation and emergent complexity?
46 
47**CRITICAL GUIDELINES:**
48- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
49- **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."
50- **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.
51 
52The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.
53 
54### PHILOSOPHY EXAMPLES
55 
56**"Organic Turbulence"**
57Philosophy: Chaos constrained by natural law, order emerging from disorder.
58Algorithmic 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.
59 
60**"Quantum Harmonics"**
61Philosophy: Discrete entities exhibiting wave-like interference patterns.
62Algorithmic 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.
63 
64**"Recursive Whispers"**
65Philosophy: Self-similarity across scales, infinite depth in finite space.
66Algorithmic 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.
67 
68**"Field Dynamics"**
69Philosophy: Invisible forces made visible through their effects on matter.
70Algorithmic 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.
71 
72**"Stochastic Crystallization"**
73Philosophy: Random processes crystallizing into ordered structures.
74Algorithmic 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.
75 
76*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.*
77 
78### ESSENTIAL PRINCIPLES
79- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code
80- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
81- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
82- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room
83- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness
84- **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
85 
86**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.
87 
88---
89 
90## DEDUCING THE CONCEPTUAL SEED
91 
92**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request.
93 
94**THE ESSENTIAL PRINCIPLE**:
95The 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.
96 
97This 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.
98 
99---
100 
101## P5.JS IMPLEMENTATION
102 
103With 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.
104 
105### ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️
106 
107**CRITICAL: BEFORE writing any HTML:**
108 
1091. **Read** `templates/viewer.html` using the Read tool
1102. **Study** the exact structure, styling, and Anthropic branding
1113. **Use that file as the LITERAL STARTING POINT** - not just inspiration
1124. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
1135. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters)
114 
115**Avoid:**
116- ❌ Creating HTML from scratch
117- ❌ Inventing custom styling or color schemes
118- ❌ Using system fonts or dark themes
119- ❌ Changing the sidebar structure
120 
121**Follow these practices:**
122- ✅ Copy the template's exact HTML structure
123- ✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)
124- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)
125- ✅ Replace only the p5.js algorithm and parameter controls
126 
127The template is the foundation. Build on it, don't rebuild it.
128 
129---
130 
131To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.
132 
133### TECHNICAL REQUIREMENTS
134 
135**Seeded Randomness (Art Blocks Pattern)**:
136```javascript
137// ALWAYS use a seed for reproducibility
138let seed = 12345; // or hash from user input
139randomSeed(seed);
140noiseSeed(seed);
141```
142 
143**Parameter Structure - FOLLOW THE PHILOSOPHY**:
144 
145To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"
146 
147```javascript
148let params = {
149  seed: 12345,  // Always include seed for reproducibility
150  // colors
151  // Add parameters that control YOUR algorithm:
152  // - Quantities (how many?)
153  // - Scales (how big? how fast?)
154  // - Probabilities (how likely?)
155  // - Ratios (what proportions?)
156  // - Angles (what direction?)
157  // - Thresholds (when does behavior change?)
158};
159```
160 
161**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".**
162 
163**Core Algorithm - EXPRESS THE PHILOSOPHY**:
164 
165**CRITICAL**: The algorithmic philosophy should dictate what to build.
166 
167To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"
168 
169If the philosophy is about **organic emergence**, consider using:
170- Elements that accumulate or grow over time
171- Random processes constrained by natural rules
172- Feedback loops and interactions
173 
174If the philosophy is about **mathematical beauty**, consider using:
175- Geometric relationships and ratios
176- Trigonometric functions and harmonics
177- Precise calculations creating unexpected patterns
178 
179If the philosophy is about **controlled chaos**, consider using:
180- Random variation within strict boundaries
181- Bifurcation and phase transitions
182- Order emerging from disorder
183 
184**The algorithm flows from the philosophy, not from a menu of options.**
185 
186To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.
187 
188**Canvas Setup**: Standard p5.js structure:
189```javascript
190function setup() {
191  createCanvas(1200, 1200);
192  // Initialize your system
193}
194 
195function draw() {
196  // Your generative algorithm
197  // Can be static (noLoop) or animated
198}
199```
200 
201### CRAFTSMANSHIP REQUIREMENTS
202 
203**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.
204 
205- **Balance**: Complexity without visual noise, order without rigidity
206- **Color Harmony**: Thoughtful palettes, not random RGB values
207- **Composition**: Even in randomness, maintain visual hierarchy and flow
208- **Performance**: Smooth execution, optimized for real-time if animated
209- **Reproducibility**: Same seed ALWAYS produces identical output
210 
211### OUTPUT FORMAT
212 
213Output:
2141. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic
2152. **Single HTML Artifact** - Self-contained interactive generative art built from `templates/viewer.html` (see STEP 0 and next section)
216 
217The 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.
218 
219---
220 
221## INTERACTIVE ARTIFACT CREATION
222 
223**REMINDER: `templates/viewer.html` should have already been read (see STEP 0). Use that file as the starting point.**
224 
225To 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.
226 
227### CRITICAL: WHAT'S FIXED VS VARIABLE
228 
229The `templates/viewer.html` file is the foundation. It contains the exact structure and styling needed.
230 
231**FIXED (always include exactly as shown):**
232- Layout structure (header, sidebar, main canvas area)
233- Anthropic branding (UI colors, fonts, gradients)
234- Seed section in sidebar:
235  - Seed display
236  - Previous/Next buttons
237  - Random button
238  - Jump to seed input + Go button
239- Actions section in sidebar:
240  - Regenerate button
241  - Reset button
242 
243**VARIABLE (customize for each artwork):**
244- The entire p5.js algorithm (setup/draw/classes)
245- The parameters object (define what the art needs)
246- The Parameters section in sidebar:
247  - Number of parameter controls
248  - Parameter names
249  - Min/max/step values for sliders
250  - Control types (sliders, inputs, etc.)
251- Colors section (optional):
252  - Some art needs color pickers
253  - Some art might use fixed colors
254  - Some art might be monochrome (no color controls needed)
255  - Decide based on the art's needs
256 
257**Every artwork should have unique parameters and algorithm!** The fixed parts provide consistent UX - everything else expresses the unique vision.
258 
259### REQUIRED FEATURES
260 
261**1. Parameter Controls**
262- Sliders for numeric parameters (particle count, noise scale, speed, etc.)
263- Color pickers for palette colors
264- Real-time updates when parameters change
265- Reset button to restore defaults
266 
267**2. Seed Navigation**
268- Display current seed number
269- "Previous" and "Next" buttons to cycle through seeds
270- "Random" button for random seed
271- Input field to jump to specific seed
272- Generate 100 variations when requested (seeds 1-100)
273 
274**3. Single Artifact Structure**
275```html
276<!DOCTYPE html>
277<html>
278<head>
279  <!-- p5.js from CDN - always available -->
280  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
281  <style>
282    /* All styling inline - clean, minimal */
283    /* Canvas on top, controls below */
284  </style>
285</head>
286<body>
287  <div id="canvas-container"></div>
288  <div id="controls">
289    <!-- All parameter controls -->
290  </div>
291  <script>
292    // ALL p5.js code inline here
293    // Parameter objects, classes, functions
294    // setup() and draw()
295    // UI handlers
296    // Everything self-contained
297  </script>
298</body>
299</html>
300```
301 
302**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.
303 
304**4. Implementation Details - BUILD THE SIDEBAR**
305 
306The sidebar structure:
307 
308**1. Seed (FIXED)** - Always include exactly as shown:
309- Seed display
310- Prev/Next/Random/Jump buttons
311 
312**2. Parameters (VARIABLE)** - Create controls for the art:
313```html
314<div class="control-group">
315    <label>Parameter Name</label>
316    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
317    <span class="value-display" id="param-value">...</span>
318</div>
319```
320Add as many control-group divs as there are parameters.
321 
322**3. Colors (OPTIONAL/VARIABLE)** - Include if the art needs adjustable colors:
323- Add color pickers if users should control palette
324- Skip this section if the art uses fixed colors
325- Skip if the art is monochrome
326 
327**4. Actions (FIXED)** - Always include exactly as shown:
328- Regenerate button
329- Reset button
330- Download PNG button
331 
332**Requirements**:
333- Seed controls must work (prev/next/random/jump/display)
334- All parameters must have UI controls
335- Regenerate, Reset, Download buttons must work
336- Keep Anthropic branding (UI styling, not art colors)
337 
338### USING THE ARTIFACT
339 
340The HTML artifact works immediately:
3411. **In claude.ai**: Displayed as an interactive artifact - runs instantly
3422. **As a file**: Save and open in any browser - no server needed
3433. **Sharing**: Send the HTML file - it's completely self-contained
344 
345---
346 
347## VARIATIONS & EXPLORATION
348 
349The 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:
350 
351- Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
352- Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
353- All within the same single artifact
354 
355This 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.
356 
357---
358 
359## THE CREATIVE PROCESS
360 
361**User request** → **Algorithmic philosophy** → **Implementation**
362 
363Each request is unique. The process involves:
364 
3651. **Interpret the user's intent** - What aesthetic is being sought?
3662. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach
3673. **Implement it in code** - Build the algorithm that expresses this philosophy
3684. **Design appropriate parameters** - What should be tunable?
3695. **Build matching UI controls** - Sliders/inputs for those parameters
370 
371**The constants**:
372- Anthropic branding (colors, fonts, layout)
373- Seed navigation (always present)
374- Self-contained HTML artifact
375 
376**Everything else is variable**:
377- The algorithm itself
378- The parameters
379- The UI controls
380- The visual outcome
381 
382To achieve the best results, trust creativity and let the philosophy guide the implementation.
383 
384---
385 
386## RESOURCES
387 
388This skill includes helpful templates and documentation:
389 
390- **templates/viewer.html**: REQUIRED STARTING POINT for all HTML artifacts.
391  - This is the foundation - contains the exact structure and Anthropic branding
392  - **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons
393  - **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
394  - The extensive comments in the file mark exactly what to keep vs replace
395 
396- **templates/generator_template.js**: Reference for p5.js best practices and code structure principles.
397  - Shows how to organize parameters, use seeded randomness, structure classes
398  - NOT a pattern menu - use these principles to build unique algorithms
399  - Embed algorithms inline in the HTML artifact (don't create separate .js files)
400 
401**Critical reminder**:
402- The **template is the STARTING POINT**, not inspiration
403- The **algorithm is where to create** something unique
404- Don't copy the flow field example - build what the philosophy demands
405- But DO keep the exact UI structure and Anthropic branding from the template