# Algorithmic Art

> Algorithmic Art

- Skill: `mediar-ai/algorithmic-art` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add mediar-ai/algorithmic-art`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mediar-ai/algorithmic-art/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: mediar-ai (https://skillmd.com/u/mediar-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mediar-ai/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)**
   ```javascript
   let seed = 12345;
   randomSeed(seed);
   noiseSeed(seed);
   ```

3. **Design Parameters from Philosophy**
   ```javascript
   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