algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
Best use case
algorithmic-art is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
Teams using algorithmic-art should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/algorithmic-art/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How algorithmic-art Compares
| Feature / Agent | algorithmic-art | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Algorithmic Art
Create generative art with code using p5.js, featuring seeded randomness for reproducibility.
## Core Concepts
### Seeded Randomness
```javascript
// Use seed for reproducible results
function setup() {
randomSeed(42);
noiseSeed(42);
}
```
### Noise Functions
```javascript
// Perlin noise for organic patterns
let x = noise(frameCount * 0.01) * width;
let y = noise(frameCount * 0.01 + 1000) * height;
```
## Common Patterns
### Flow Fields
```javascript
let cols, rows, scale = 20;
let particles = [];
let flowfield;
function setup() {
createCanvas(800, 800);
cols = floor(width / scale);
rows = floor(height / scale);
flowfield = new Array(cols * rows);
for (let i = 0; i < 1000; i++) {
particles.push(new Particle());
}
}
function draw() {
let yoff = 0;
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;
let v = p5.Vector.fromAngle(angle);
flowfield[x + y * cols] = v;
xoff += 0.1;
}
yoff += 0.1;
}
particles.forEach(p => {
p.follow(flowfield);
p.update();
p.show();
});
}
```
### Recursive Trees
```javascript
function branch(len) {
line(0, 0, 0, -len);
translate(0, -len);
if (len > 4) {
push();
rotate(PI / 6);
branch(len * 0.67);
pop();
push();
rotate(-PI / 6);
branch(len * 0.67);
pop();
}
}
```
### Particle Systems
```javascript
class Particle {
constructor() {
this.pos = createVector(random(width), random(height));
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
this.maxSpeed = 4;
}
follow(flowfield) {
let x = floor(this.pos.x / scale);
let y = floor(this.pos.y / scale);
let force = flowfield[x + y * cols];
this.acc.add(force);
}
update() {
this.vel.add(this.acc);
this.vel.limit(this.maxSpeed);
this.pos.add(this.vel);
this.acc.mult(0);
}
show() {
stroke(255, 5);
point(this.pos.x, this.pos.y);
}
}
```
## Color Palettes
```javascript
// Define palette
const palette = ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'];
// Random from palette
fill(random(palette));
```
## Best Practices
- Use `noLoop()` for static pieces, save with `save('art.png')`
- Experiment with blend modes: `blendMode(ADD)`
- Layer transparency for depth
- Use frameCount for animation