Algorithmic Art
A systematic approach for creating generative art using p5.js with computational aesthetics as the foundation.
Process Overview
Two primary phases:
- Philosophical Framework — Develop an algorithmic philosophy articulating the computational aesthetic vision
- Code Expression — Implement that vision through p5.js generative algorithms
Phase 1: Algorithmic Philosophy
Core Components
An algorithmic philosophy articulates:
- How computational processes generate visual beauty
- What mathematical or natural systems inspire the approach
- How randomness, noise, and emergence create variation
- What parametric controls unlock the system's potential
Philosophy Structure (4–6 paragraphs)
- Conceptual Vision — The aesthetic movement or computational worldview
- Mathematical Foundation — Underlying algorithms (noise fields, particle systems, recursive structures)
- Emergent Behavior — How complexity arises from simple rules
- Craftsmanship Emphasis — "The result feels meticulously refined through countless iterations by a master"
Key Principle
"Beauty emerges from the algorithm's execution — each run produces unique output; the mark of mastery lies in elegant parameter tuning and balanced complexity."
Phase 2: P5.js Implementation
Technical Foundation
All implementations require:
- Seeded Randomness —
randomSeed()andnoiseSeed()for reproducible variation - Parameter Structure — A parameters object defining tunable system properties
- Canvas Setup — Standard p5.js setup/draw pattern
- Performance Optimization — Smooth execution prioritizing visual quality
Parameter Design
Identify system properties worth tuning:
- Quantities (particle counts, iteration depths)
- Scales (sizes, speeds, magnitudes)
- Probabilities (likelihood thresholds)
- Ratios (proportional relationships)
- Angles (directional constraints)
- Thresholds (behavioral transition points)
Quality Standards
- Visual Balance — Complexity without noise; order without rigidity
- Thoughtful Color — Harmonious palettes reflecting the algorithm's character
- Compositional Hierarchy — Even randomness maintains visual flow
- Reproducibility — Identical seeds produce identical outputs
Output Format
A single, self-contained HTML file embedding:
- p5.js library (via CDN)
- Complete algorithm implementation
- Parameter controls with sliders
- Seed navigation system (Previous/Next/Random/Jump-to)
- Download PNG action
- Anthropic-branded sidebar layout (Poppins + Lora fonts)
Template
Start from templates/viewer.html — preserve the exact structure and styling. Only the algorithm, parameters, and parameter UI controls vary per artwork.
Conceptual Integration
The most sophisticated implementations embed subtle conceptual references — "not literal, always sophisticated." Someone familiar with the reference feels it intuitively; others simply experience masterful generative composition.
Installation
npx skills add https://github.com/anthropics/skills --skill algorithmic-art
Mirrored from https://github.com/anthropics/skills — original author: anthropics, license: Apache-2.0. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.