Saker.cc
返回 Skill Wardrobe
🎬 CORE · 创意生产图像生成

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

Saker · 用法翻译

生成式海报底图 — 算法哲学驱动独一无二视觉
动态分镜背景 — p5.js 种子随机出可复现的抽象场景
漫画风格纹理 — 流场/粒子系统生成装饰图案

Install · 安装

claude skill add anthropics/skills algorithmic-art
# 或:cp -r SKILL.md ~/.claude/skills/algorithmic-art/

Skill 文档 · 原文

Algorithmic Art — 算法哲学驱动的生成式艺术

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

This happens in two steps:

  1. Algorithmic Philosophy Creation (.md file)
  2. Express by creating p5.js generative art (.html + .js files)

First, undertake this task:

ALGORITHMIC PHILOSOPHY CREATION

To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:

  • Computational processes, emergent behavior, mathematical beauty
  • Seeded randomness, noise fields, organic systems
  • Particles, flows, fields, forces
  • Parametric variation and controlled chaos

THE CRITICAL UNDERSTANDING

  • What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
  • What is created: An algorithmic philosophy/generative aesthetic movement.
  • What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE — creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.

Consider this approach:

  • Write a manifesto for a generative art movement
  • The next phase involves writing the algorithm that brings it to life

The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.

HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY

Name the movement (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

Articulate the philosophy (4-6 paragraphs — concise but complete):

To capture the ALGORITHMIC essence, express how this philosophy manifests through:

  • Computational processes and mathematical relationships?
  • Noise functions and randomness patterns?
  • Particle behaviors and field dynamics?
  • Temporal evolution and system states?
  • Parametric variation and emergent complexity?

CRITICAL GUIDELINES:

  • Avoid redundancy: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
  • Emphasize craftsmanship REPEATEDLY: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field.
  • Leave creative space: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.

The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.

PHILOSOPHY EXAMPLES

"Organic Turbulence" Philosophy: Chaos constrained by natural law, order emerging from disorder. Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density — fast particles burn bright, slow ones fade to shadow.

"Quantum Harmonics" Philosophy: Discrete entities exhibiting wave-like interference patterns. Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere — constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas.

"Recursive Whispers" Philosophy: Self-similarity across scales, infinite depth in finite space. Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry.

"Field Dynamics" Philosophy: Invisible forces made visible through their effects on matter. Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces — ghost-like evidence of invisible forces.

"Stochastic Crystallization" Philosophy: Random processes crystallizing into ordered structures. Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable.

ESSENTIAL PRINCIPLES

  • ALGORITHMIC PHILOSOPHY: Creating a computational worldview to be expressed through code
  • PROCESS OVER PRODUCT: Always emphasize that beauty emerges from the algorithm's execution — each run is unique
  • PARAMETRIC EXPRESSION: Ideas communicate through mathematical relationships, forces, behaviors — not static composition
  • ARTISTIC FREEDOM: The next Claude interprets the philosophy algorithmically — provide creative implementation room
  • PURE GENERATIVE ART: This is about making LIVING ALGORITHMS, not static images with randomness
  • EXPERT CRAFTSMANSHIP: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations

The algorithmic philosophy should be 4-6 paragraphs long. Fill it with poetic computational philosophy that brings together the intended vision. Output this algorithmic philosophy as a .md file.


DEDUCING THE CONCEPTUAL SEED

CRITICAL STEP: Before implementing the algorithm, identify the subtle conceptual thread from the original request.

THE ESSENTIAL PRINCIPLE: The concept is a subtle, niche reference embedded within the algorithm itself — not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul — the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.

This is VERY IMPORTANT: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony — only those who know will catch it, but everyone appreciates the generative beauty.


P5.JS IMPLEMENTATION

With the philosophy AND conceptual framework established, express it through code. Use the algorithmic philosophy created and the instructions below.

Technical Requirements

Seeded Randomness (Art Blocks Pattern):

let seed = 12345;
randomSeed(seed);
noiseSeed(seed);

Parameter Structure:

let params = {
  seed: 12345,
  // Add parameters that control YOUR algorithm:
  // - Quantities (how many?)
  // - Scales (how big? how fast?)
  // - Probabilities (how likely?)
  // - Ratios (what proportions?)
  // - Angles (what direction?)
  // - Thresholds (when does behavior change?)
};

Core Algorithm — EXPRESS THE PHILOSOPHY:

CRITICAL: The algorithmic philosophy should dictate what to build.

If the philosophy is about organic emergence, consider using:

  • Elements that accumulate or grow over time
  • Random processes constrained by natural rules
  • Feedback loops and interactions

If the philosophy is about mathematical beauty, consider using:

  • Geometric relationships and ratios
  • Trigonometric functions and harmonics
  • Precise calculations creating unexpected patterns

If the philosophy is about controlled chaos, consider using:

  • Random variation within strict boundaries
  • Bifurcation and phase transitions
  • Order emerging from disorder

The algorithm flows from the philosophy, not from a menu of options.

Canvas Setup: Standard p5.js structure:

function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

function draw() {
  // Your generative algorithm
  // Can be static (noLoop) or animated
}

Craftsmanship Requirements

CRITICAL: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise — this is CONTROLLED CHAOS refined through deep expertise.

  • Balance: Complexity without visual noise, order without rigidity
  • Color Harmony: Thoughtful palettes, not random RGB values
  • Composition: Even in randomness, maintain visual hierarchy and flow
  • Performance: Smooth execution, optimized for real-time if animated
  • Reproducibility: Same seed ALWAYS produces identical output

Output Format

Output:

  1. Algorithmic Philosophy — As markdown explaining the generative aesthetic
  2. Single HTML Artifact — Self-contained interactive generative art with p5.js (from CDN), the algorithm, parameter controls, and UI — all in one file that works immediately in any browser.
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* All styling inline */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- Parameter controls: sliders, inputs -->
    <!-- Seed controls: prev/next/random/jump -->
    <!-- Actions: regenerate/reset/download -->
  </div>
  <script>
    // ALL p5.js code inline here
  </script>
</body>
</html>

CRITICAL: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.


Variations & Exploration

The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:

  • Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
  • Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
  • All within the same single artifact

This is like creating a series of prints from the same plate — the algorithm is consistent, but each seed reveals different facets of its potential.

Related · 同类技能