---
name: algorithmic-art
description: Generate complex, visually captivating artwork using p5.js and generative algorithms. Creates fractals, particle systems, flow fields, geometric compositions, and other algorithmic art. Use when user asks for generative art, creative coding, mathematical visualizations, or abstract digital artwork.
triggers:
- generative art
- creative coding
- p5.js art
- fractal
- particle system
- flow field
- algorithmic art
- abstract digital art
- mathematical visualization
---
# Algorithmic Art
Generate complex, visually captivating artwork using p5.js. From fractals to generative geometric compositions, this skill produces unique, evolving visuals through mathematical logic, patterns, and controlled randomness.
## When to Use
Trigger when user asks for:
- Generative or algorithmic art
- Creative coding projects
- Mathematical visualizations
- Abstract digital artwork
- Particle systems or flow fields
- Fractal or recursive art
- Interactive visual experiences
## Design Philosophy Process
### Step 1: Establish Algorithmic Philosophy
Before writing code, define the computational worldview. Choose and commit to one:
**Harmonic Interference**: Particles on a grid with evolving phase values. Constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas.
**Recursive Whispers**: Self-similarity across scales. Branching structures subdivide recursively, constrained by golden ratios. L-systems generate tree-like forms that feel both mathematical and organic.
**Field Dynamics**: Invisible forces made visible. Vector fields from mathematical functions or noise. Particles flow along field lines, leaving ghost-like traces of invisible forces.
**Stochastic Crystallization**: Random processes crystallizing into order. Circle packing or Voronoi tessellation. Random points evolve through relaxation algorithms until equilibrium.
**Orbital Mechanics**: Bodies in gravitational dance. Multiple attractors create complex orbital paths. Traces accumulate into dense, beautiful patterns.
**Cellular Automata**: Simple rules, emergent complexity. Grid-based systems where local interactions produce global patterns. Conway's Game of Life variations, Langton's Ant, or custom rulesets.
### Step 2: Deduce the Conceptual Seed
Embed a subtle reference from the user's request into the algorithm itself. Someone familiar with the subject should feel it intuitively. Others simply experience beautiful generative art.
### Step 3: Implementation
Build as a self-contained HTML file with embedded p5.js:
```html
```
## Algorithm Patterns
### Flow Field
```javascript
let particles = [];
let flowField;
let cols, rows;
const scale = 20;
function setup() {
createCanvas(1080, 1080);
cols = floor(width / scale);
rows = floor(height / scale);
flowField = new Array(cols * rows);
for (let i = 0; i < 1000; i++) {
particles.push(createVector(random(width), random(height)));
}
background(10);
}
function draw() {
let yoff = frameCount * 0.001;
for (let y = 0; y < rows; y++) {
let xoff = 0;
for (let x = 0; x < cols; x++) {
let angle = noise(xoff, yoff) * TWO_PI * 2;
flowField[x + y * cols] = p5.Vector.fromAngle(angle);
xoff += 0.1;
}
yoff += 0.1;
}
for (let p of particles) {
let x = floor(p.x / scale);
let y = floor(p.y / scale);
let index = x + y * cols;
if (flowField[index]) {
p.add(flowField[index]);
}
stroke(255, 5);
strokeWeight(1);
point(p.x, p.y);
if (p.x > width || p.x < 0 || p.y > height || p.y < 0) {
p.set(random(width), random(height));
}
}
}
```
### Recursive Tree
```javascript
function setup() {
createCanvas(1080, 1080);
background(10);
stroke(255, 180);
translate(width/2, height);
branch(200, 0);
}
function branch(len, depth) {
if (len < 4 || depth > 12) return;
strokeWeight(map(len, 4, 200, 0.5, 3));
line(0, 0, 0, -len);
translate(0, -len);
let angle = PI/6 + random(-0.1, 0.1);
let shrink = 0.67 + random(-0.05, 0.05);
push();
rotate(angle);
branch(len * shrink, depth + 1);
pop();
push();
rotate(-angle);
branch(len * shrink, depth + 1);
pop();
}
```
## Essential Principles
- **Process over product**: Beauty emerges from the algorithm's execution. Each run is unique.
- **Parametric expression**: Ideas communicate through mathematical relationships, not static composition.
- **Controlled randomness**: Use noise and random with seeds for reproducibility.
- **Expert craftsmanship**: The algorithm should feel meticulously refined, the product of deep expertise.
- **Interactivity**: Include keyboard controls (S to save, R to regenerate, space to pause).
## Output
Deliver:
1. Self-contained HTML file with embedded p5.js
2. Brief explanation of the algorithm and its conceptual seed
3. Instructions for interaction (save, regenerate, parameters)
4. A saved PNG of one particularly beautiful generation