Skip to content

Algorithmic Art

Purpose: Create generative art using p5.js with seeded randomness and interactive parameter exploration. Produces algorithmic philosophies, interactive HTML viewers, and JavaScript generative algorithms.

When to Use

Trigger Description
Generative Art Creating art using code, flow fields, or particle systems
Algorithmic Art Building computational aesthetic pieces with seeded randomness
Interactive Visuals Producing parameterized p5.js sketches with real-time controls
Creative Coding Exploring emergent behavior and mathematical beauty through code

Process

Step 1: Create an Algorithmic Philosophy

Define a computational aesthetic movement expressed through code:

  1. Name the movement (1-2 words) - e.g., "Organic Turbulence", "Quantum Harmonics"
  2. Articulate the philosophy (4-6 paragraphs) covering:
    • Computational processes and mathematical relationships
    • Noise functions and randomness patterns
    • Particle behaviors and field dynamics
    • Temporal evolution and system states
    • Parametric variation and emergent complexity
  3. Output the philosophy as a .md file

Step 2: Deduce the Conceptual Seed

Identify a subtle conceptual thread from the original request — a niche reference embedded within the algorithm itself, not literal but sophisticated. The reference should enhance depth without announcing itself.

Step 3: Implement with p5.js

Build the generative art using the skill's HTML viewer template:

  1. Read assets/viewer.html as the literal starting point
  2. Keep fixed sections exactly as shown (header, sidebar, seed controls, actions)
  3. Replace variable sections (algorithm, parameters, UI controls)
  4. Use seeded randomness for reproducibility (Art Blocks pattern)
  5. Output a single self-contained HTML file

Step 4: Tune and Refine

Ensure gallery-quality output:

  • Balance: Complexity without visual noise
  • Color Harmony: Thoughtful palettes, not random RGB
  • Composition: Visual hierarchy even in randomness
  • Performance: Smooth real-time execution
  • Reproducibility: Same seed always produces identical output

Key Principles

  • Process over product — beauty emerges from the algorithm's execution
  • Parametric expression — ideas communicate through mathematical relationships
  • Artistic freedom — interpret the philosophy algorithmically
  • Expert craftsmanship — the algorithm must feel meticulously crafted
  • Original work — create original algorithmic art to avoid copyright violations

See Also