Algorithmic Art Generation

lifangda

Aktualisiert Yesterday

951 Ansichten

Metaautomationdesign

Über

Diese Fähigkeit unterstützt Entwickler dabei, algorithmische Kunst mit p5.js zu erstellen, mit Fokus auf generative Kunst, computergestützte Ästhetik und interaktive Visualisierungen. Sie aktiviert sich automatisch bei Themen wie "generative Kunst" oder "p5.js Visualisierung" und führt Sie durch die Erstellung einzigartiger Algorithmen mit Funktionen wie seed-basierter Zufälligkeit, Flussfeldern und Partikelsystemen. Nutzen Sie sie, wenn Sie reproduzierbare, code-gesteuerte künstlerische Muster erstellen müssen.

Schnellinstallation

Claude Code

Dokumentation

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 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

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

GitHub Repository

lifangda/claude-plugins

Pfad: cli-tool/skills-library/creative-ai/algorithmic-art

Algorithmic Art Generation

Über

Schnellinstallation

Claude Code

Dokumentation

Algorithmic Art Generation

When to Use This Skill

How It Works

Core Concepts

Algorithmic Philosophy

Technical Components

Quick Start

Basic Generative Art

Interactive Template

Advanced Patterns

Flow Field Visualization

Guiding Principles

Best Practices

Code Organization

Performance

User Experience

Aesthetic Considerations

Common Patterns

Noise-Based Terrain

Recursive Patterns

Agent-Based Systems

Output Format

Resources

Libraries & Tools

Inspiration

Theory

Example Interaction

Notes

GitHub Repository

Verwandte Skills

content-collections

polymarket

creating-opencode-plugins

sglang