陌讯skills聚合平台

algorithmic art generation

📁 lifangda/claude-plugins 📅 Jan 1, 1970
1
总安装量
0
周安装量
#52240
全站排名
安装命令
npx skills add https://github.com/lifangda/claude-plugins --skill Algorithmic Art Generation

Skill 文档

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
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。