Algorithmic Art

Algorithmic Art

This skill enables creation of generative art using p5.js with seeded randomness and interactive parameter exploration.

Trigger

• When user requests generative or algorithmic art
• Creating interactive visualizations with p5.js
• Building parametric design systems
• Developing art with mathematical foundations

Three-Step Process

1. Algorithmic Philosophy - Develop computational aesthetic manifesto

   • 4-6 paragraphs emphasizing emergent behavior
   • Mathematical beauty and controlled chaos
   • Craftsmanship focus

2. Conceptual Deduction - Identify thematic DNA

   • Sophisticated references in parameters
   • Behavioral design choices
   • Visual identity

3. p5.js Implementation - Single HTML artifact

   • Self-contained with inline code
   • Seeded randomness for reproducibility
   • Parametric tuning and interactive controls

Implementation Standards

Setup:

• Start from templates/viewer.html as foundation
• Keep Anthropic branding fixed
• Replace only variable sections

Requirements:

• Balance complexity with visual clarity
• Thoughtful color harmony
• Maintain visual hierarchy in randomness
• Optimize performance
• Ensure reproducibility (same seed = identical output)

Deliverable

Single self-contained HTML artifact with:

• All JavaScript inline
• p5.js loaded from CDN
• Interactive parameter controls
• Seeded randomness system
• Responsive design

Use When

• Creating generative visual art
• Building interactive algorithmic visualizations
• Developing parametric design systems
• Exploring computational aesthetics
• Building interactive mathematical visualizations