mediar-ai/packages/skills/skills/algorithmic-art

Algorithmic Art

Create algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Generate original generative art through computational processes, emergent behavior, and mathematical beauty.

Prerequisites

• p5.js library (CDN or local)
• Modern web browser
• Basic understanding of JavaScript

Instructions

1. Create an Algorithmic Philosophy

   • Name the movement (1-2 words): "Organic Turbulence", "Quantum Harmonics"
   • Define the computational approach in 4-6 paragraphs
   • Emphasize: algorithmic expression, emergent behavior, seeded variation

2. Use Seeded Randomness (Art Blocks Pattern)

   let seed = 12345;
   randomSeed(seed);
   noiseSeed(seed);
   

3. Design Parameters from Philosophy

   let params = {
     seed: 12345,
     // Quantities, scales, probabilities, ratios, angles, thresholds
   };
   

4. Express Philosophy Through Code

   • Organic emergence: elements that accumulate, feedback loops
   • Mathematical beauty: geometric relationships, trigonometric functions
   • Controlled chaos: random variation within strict boundaries

5. Create Interactive HTML Artifact

   • Include p5.js from CDN
   • Add parameter controls (sliders, color pickers)
   • Seed navigation (prev/next/random buttons)
   • Download PNG button

6. Apply Craftsmanship

   • Balance: complexity without visual noise
   • Color harmony: thoughtful palettes, not random RGB
   • Performance: smooth execution, optimized for real-time
   • Reproducibility: same seed produces identical output

Error Handling

• If canvas doesn't render, check p5.js CDN availability
• If performance is poor, reduce particle count or frame rate
• Test with multiple seeds to ensure variety

Notes

• Philosophy examples: Flow Fields, Particle Systems, Recursive Structures
• Animation concepts: noise fields, particle behaviors, field dynamics
• Output: Single self-contained HTML file with all code inline

Source: anthropics/skills