majiayu000 Algorithmic Art Generation
When to Use This Skill
Use this skill when:
- Creating generative art with code
- Building interactive visualizations
- Exploring computational aesthetics
- Generating unique artistic patterns
- Creating reproducible art with seeds
- Implementing particle systems
- Designing flow field visualizations
How It Works
This skill guides Claude through a structured process:
- Philosophy Creation - Generate a computational aesthetic movement
- Algorithm Design - Create unique generative art algorithms
- Technical Implementation - Build with p5.js in self-contained HTML
- Interactive Features - Add seed navigation and parameter controls
Core Concepts
Algorithmic Philosophy
- Computational aesthetic movements
- Emergent behavior and mathematical beauty
- Process over final output
- "Living algorithms, not static images"
Technical Components
- p5.js Framework - JavaScript creative coding library
- Seeded Randomness - Reproducible random generation
- Parametric Variation - Interactive parameter controls
- Flow Fields - Vector field-based motion
- Particle Systems - Dynamic particle behaviors
Quick Start
Basic Generative Art
// Seeded random number generator
let seed = 12345;
function seededRandom() {
seed = (seed * 9301 + 49297) % 233280;
return seed / 233280;
}
function setup() {
createCanvas(800, 800);
background(20);
// Create generative pattern
for (let i = 0; i < 1000; i++) {
let x = seededRandom() * width;
let y = seededRandom() * height;
let size = seededRandom() * 50;
fill(255, 100);
noStroke();
circle(x, y, size);
}
}
Interactive Template
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
body { margin: 0; background: #1a1a1a; font-family: system-ui; }
#controls { position: absolute; top: 20px; left: 20px; color: white; }
button { padding: 10px; margin: 5px; cursor: pointer; }
</style>
</head>
<body>
<div id="controls">
<button Previous</button>
<span id="seed-display">Seed: 0</span>
<button →</button>
</div>
<script>
let currentSeed = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
regenerate();
}
function draw() {
// Animation loop if needed
}
function regenerate() {
randomSeed(currentSeed);
background(20);
// Your generative algorithm here
}
function prevSeed() {
currentSeed--;
document.getElementById('seed-display').innerText = `Seed: ${currentSeed}`;
regenerate();
}
function nextSeed() {
currentSeed++;
document.getElementById('seed-display').innerText = `Seed: ${currentSeed}`;
regenerate();
}
</script>
</body>
</html>
Advanced Patterns
Flow Field Visualization
let particles = [];
let flowField;
function setup() {
createCanvas(800, 800);
// Create particle system
for (let i = 0; i < 500; i++) {
particles.push(new Particle());
}
// Generate flow field
flowField = generateFlowField();
}
function generateFlowField() {
let field = [];
let resolution = 20;
for (let x = 0; x < width; x += resolution) {
let row = [];
for (let y = 0; y < height; y += resolution) {
let angle = noise(x * 0.01, y * 0.01) * TWO_PI * 2;
row.push(p5.Vector.fromAngle(angle));
}
field.push(row);
}
return field;
}
class Particle {
constructor() {
this.pos = createVector(random(width), random(height));
this.vel = createVector(0, 0);
this.acc = createVector(0, 0);
}
update() {
// Follow flow field
let x = floor(this.pos.x / 20);
let y = floor(this.pos.y / 20);
let force = flowField[x][y];
this.acc.add(force);
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(0);
// Wrap edges
if (this.pos.x > width) this.pos.x = 0;
if (this.pos.x < 0) this.pos.x = width;
if (this.pos.y > height) this.pos.y = 0;
if (this.pos.y < 0) this.pos.y = height;
}
show() {
stroke(255, 50);
point(this.pos.x, this.pos.y);
}
}
Guiding Principles
- Beauty in Process - Focus on the algorithm, not just the result
- Seeded Reproducibility - Every artwork should be reproducible with a seed
- Parametric Control - Allow users to explore variations
- Emergent Behavior - Let complexity emerge from simple rules
- Mathematical Beauty - Ground aesthetics in computational processes
Best Practices
Code Organization
- Keep algorithms modular and reusable
- Use classes for complex behaviors
- Separate setup, update, and render logic
- Document mathematical concepts
Performance
- Optimize particle counts for smooth animation
- Use object pooling for many particles
- Batch similar drawing operations
- Profile and optimize bottlenecks
User Experience
- Provide clear controls and feedback
- Show seed numbers for reproducibility
- Add parameter sliders for exploration
- Include reset and export functionality
Aesthetic Considerations
- Balance complexity and clarity
- Use color theory effectively
- Consider composition and negative space
- Test across different seeds
Common Patterns
Noise-Based Terrain
function drawTerrain() {
for (let x = 0; x < width; x += 5) {
for (let y = 0; y < height; y += 5) {
let n = noise(x * 0.01, y * 0.01);
fill(n * 255);
rect(x, y, 5, 5);
}
}
}
Recursive Patterns
function fractalTree(x, y, len, angle) {
if (len < 2) return;
let x2 = x + cos(angle) * len;
let y2 = y + sin(angle) * len;
line(x, y, x2, y2);
fractalTree(x2, y2, len * 0.67, angle - PI/6);
fractalTree(x2, y2, len * 0.67, angle + PI/6);
}
Agent-Based Systems
class Agent {
constructor() {
this.pos = createVector(random(width), random(height));
this.vel = p5.Vector.random2D();
}
interact(others) {
// Flocking behavior
let separation = this.separate(others);
let alignment = this.align(others);
let cohesion = this.cohere(others);
this.acc.add(separation);
this.acc.add(alignment);
this.acc.add(cohesion);
}
}
Output Format
When creating algorithmic art, always provide:
- Manifesto (Markdown) - 4-6 paragraphs describing the algorithmic philosophy
- Interactive HTML - Single self-contained file with:
- Seed navigation (previous/next buttons)
- Parameter sliders for key variables
- Anthropic-branded UI elements
- Full p5.js implementation
- Usage Instructions - How to explore variations and export
Resources
Libraries & Tools
- p5.js Reference
- The Coding Train - Tutorials
- Processing - Desktop alternative
Inspiration
- OpenProcessing - Community gallery
- Generative Artistry - Tutorials
- Tyler Hobbs - Professional generative artist
Theory
- "The Nature of Code" by Daniel Shiffman
- "Generative Design" by Benedikt Groß
- "Form+Code" by Casey Reas
Example Interaction
User: "Create generative art inspired by ocean waves"
Skill Activates:
- Generates manifesto about "Fluid Dynamics Aesthetics"
- Creates algorithm using Perlin noise flow fields
- Implements particle system mimicking water movement
- Builds interactive HTML with:
- Wave amplitude slider
- Flow speed control
- Seed navigation
- Ocean color palette
- Outputs manifesto + interactive artwork
Notes
- Always include seed for reproducibility
- Create self-contained HTML files
- Emphasize the algorithm, not just the visual
- Encourage exploration through parameters
- Balance aesthetic beauty with computational elegance