MCP HubMCP Hub
← Back to Skills

Algorithmic Art Generation

lifangda
Updated Today
87 views
11
11
View on GitHub
Metaautomationdesign

About

This skill helps developers create algorithmic art using p5.js, focusing on generative art, computational aesthetics, and interactive visualizations. It automatically activates for topics like "generative art" or "p5.js visualization" and guides you through creating unique algorithms with features like seeded randomness, flow fields, and particle systems. Use it when you need to build reproducible, code-driven artistic patterns.

Documentation

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:

  1. Philosophy Creation - Generate a computational aesthetic movement
  2. Algorithm Design - Create unique generative art algorithms
  3. Technical Implementation - Build with p5.js in self-contained HTML
  4. 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 onclick="prevSeed()">← Previous</button>
    <span id="seed-display">Seed: 0</span>
    <button onclick="nextSeed()">Next →</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

  1. Beauty in Process - Focus on the algorithm, not just the result
  2. Seeded Reproducibility - Every artwork should be reproducible with a seed
  3. Parametric Control - Allow users to explore variations
  4. Emergent Behavior - Let complexity emerge from simple rules
  5. 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:

  1. Manifesto (Markdown) - 4-6 paragraphs describing the algorithmic philosophy
  2. 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
  3. Usage Instructions - How to explore variations and export

Resources

Libraries & Tools

Inspiration

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:

  1. Generates manifesto about "Fluid Dynamics Aesthetics"
  2. Creates algorithm using Perlin noise flow fields
  3. Implements particle system mimicking water movement
  4. Builds interactive HTML with:
    • Wave amplitude slider
    • Flow speed control
    • Seed navigation
    • Ocean color palette
  5. 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

Quick Install

/plugin add https://github.com/lifangda/claude-plugins/tree/main/algorithmic-art

Copy and paste this command in Claude Code to install this skill

GitHub 仓库

lifangda/claude-plugins
Path: cli-tool/skills-library/creative-ai/algorithmic-art

Related Skills

sglang

Meta

SGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.

View skill

langchain

Meta

LangChain is a framework for building LLM applications using agents, chains, and RAG pipelines. It supports multiple LLM providers, offers 500+ integrations, and includes features like tool calling and memory management. Use it for rapid prototyping and deploying production systems like chatbots, autonomous agents, and question-answering services.

View skill

llamaindex

Meta

LlamaIndex is a data framework for building RAG-powered LLM applications, specializing in document ingestion, indexing, and querying. It provides key features like vector indices, query engines, and agents, and supports over 300 data connectors. Use it for document Q&A, chatbots, and knowledge retrieval when building data-centric applications.

View skill

business-rule-documentation

Meta

This skill provides standardized templates for systematically documenting business logic and domain knowledge following Domain-Driven Design principles. It helps developers capture business rules, process flows, decision trees, and terminology glossaries to maintain consistency between requirements and implementation. Use it when documenting domain models, creating business rule repositories, or bridging communication between business and technical teams.

View skill