MCP HubMCP Hub
← スキル一覧に戻る

Algorithmic Art Generation

lifangda
更新日 Today
178 閲覧
11
11
GitHubで表示
メタautomationdesign

について

このスキルは、p5.jsを使用してアルゴリズミックアートを作成する開発者を支援し、ジェネレーティブアート、計算論的美学、インタラクティブな可視化に焦点を当てています。「ジェネレーティブアート」や「p5.jsビジュアライゼーション」といったトピックに対して自動的に起動し、シーデッドランダムネス（種付け乱数）、フローフィールド、パーティクルシステムなどの機能を用いて独自のアルゴリズムを作成する手順を案内します。再現可能なコード駆動の芸術的パターンを構築する必要がある際にご利用ください。

ドキュメント

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

クイックインストール

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

このコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします

GitHub 仓库

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

関連スキル

sglang

メタ

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.

スキルを見る

langchain

メタ

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.

スキルを見る

webapp-testing

テスト

This Claude Skill provides a Playwright-based toolkit for testing local web applications through Python scripts. It enables frontend verification, UI debugging, screenshot capture, and log viewing while managing server lifecycles. Use it for browser automation tasks but run scripts directly rather than reading their source code to avoid context pollution.

スキルを見る

csv-data-summarizer

メタ

This skill automatically analyzes CSV files to generate comprehensive statistical summaries and visualizations using Python's pandas and matplotlib/seaborn. It should be triggered whenever a user uploads or references CSV data without prompting for analysis preferences. The tool provides immediate insights into data structure, quality, and patterns through automated analysis and visualization.

スキルを見る