# Algorithmic Art
> Creates generative algorithmic art using p5.js with seeded randomness and interactive HTML artifacts. Use when the user requests generative art, algorithmic art, computational aesthetics, flow fields, particle systems, or creative coding. Output is self-contained interactive HTML. Do NOT use for UI design, data visualization charts, or photo editing.
- Skill: `knuckles-team/algorithmic-art` (Agent Skill)
- Install (CLI): `npx skillmds@latest add knuckles-team/algorithmic-art`
- Raw SKILL.md: https://api.skillmd.com/api/skills/knuckles-team/algorithmic-art/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: Knuckles-Team (https://skillmd.com/u/knuckles-team)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/knuckles-team/algorithmic-art
---
# Algorithmic Art Creation
Create gallery-quality generative algorithmic art: define a computational philosophy, implement it in p5.js with seeded randomness, and output a self-contained interactive HTML artifact.
---
## Step 1: Define an Algorithmic Philosophy (write as `.md` file)
Before any code, articulate the **computational philosophy** — the generative aesthetic movement that will guide the implementation.
**The philosophy must express (4–6 paragraphs):**
- The computational process and mathematical relationships
- The role of randomness, noise, and emergence
- Particle behaviors, field dynamics, or system states
- Temporal evolution and parameter variation
- Emphasis on craftsmanship: the algorithm should feel meticulously refined
**Philosophy format:**
```
Name: [1-2 word movement name, e.g. "Organic Turbulence"]
[4-6 paragraphs describing:
- The conceptual core
- How it manifests algorithmically
- Seeded variation and emergent complexity
- The feeling of computational craftsmanship]
```
**Examples:**
- "Organic Turbulence": Flow fields from layered Perlin noise. Particles follow vector forces, trails accumulate into organic density maps. Color emerges from velocity — fast particles burn bright, slow ones fade to shadow.
- "Stochastic Crystallization": Random circle packing evolving through relaxation. Cells push to equilibrium. The organic tiling feels both random and inevitable.
**Anti-patterns:** Do not create static images, basic shapes, or templates. Everything must emerge through algorithmic process.
---
## Step 2: Implement in p5.js
### Technical Requirements
**Seeded Randomness (always):**
```javascript
let seed = 12345;
randomSeed(seed);
noiseSeed(seed);
```
**Parameter Structure:**
```javascript
let params = {
seed: 12345,
// Add parameters specific to this algorithm:
// quantities, scales, speeds, probabilities, ratios, thresholds
};
```
**Canvas:**
```javascript
function setup() {
createCanvas(1200, 1200);
// Initialize system
}
function draw() {
// Algorithm — can be static (noLoop) or animated
}
```
### Craftsmanship Requirements
- **Balance**: Complexity without visual noise; order without rigidity
- **Color**: Thoughtful palettes — not random RGB values
- **Composition**: Visual hierarchy and flow even within randomness
- **Performance**: Smooth execution, optimized for real-time if animated
- **Reproducibility**: Same seed MUST always produce identical output
---
## Step 3: Create Interactive HTML Artifact
Build a **single self-contained HTML file** with everything inline. No external files except the p5.js CDN.
**Structure:**
```html
1000
```
**Required interactive features:**
- Seed display + Previous / Next / Random / Jump-to-seed controls
- Sliders for each numeric parameter with live update
- Regenerate and Reset buttons
- Download PNG button
---
## Output
Deliver:
1. **Algorithmic Philosophy** — as a markdown file (Step 1)
2. **Interactive HTML Artifact** — single self-contained file (Step 3)