Skill Claude Skill

algorithmic-art

A skill for creating original p5.js generative art: write an algorithmic philosophy, then build a self-contained interactive HTML viewer with seeded randomness and parameter controls.

View on GitHub (opens in a new tab) See examples
algorithmic-art preview image

What it is

algorithmic-art is a skill that guides a two-step process: first write an algorithmic philosophy (a manifesto for a generative art movement, output as a .md file), then express it as p5.js generative art. The result is a single self-contained HTML artifact built from a required template (templates/viewer.html). It includes seed navigation, parameter controls, and Anthropic-branded UI. The skill says to create original work rather than copying existing artists.

Who it's for

  • Users asking for art made with code, generative art, algorithmic art, flow fields, or particle systems
  • Developers who want interactive, reproducible p5.js sketches with tunable parameters
  • People who want to explore variations of a generative piece by navigating seeds

Requirements

Requirements

  • p5.js, loaded from a CDN (the source's example uses cdnjs p5.js 1.7.0)
  • templates/viewer.html as the required starting point for the HTML artifact
  • A browser or claude.ai artifacts to run the output; no server or setup needed
  • templates/generator_template.js as a reference for p5.js structure and best practices

Examples

Seeded randomness for reproducibility

javascript
javascript
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);

What it does: The source requires seeding so the same seed always produces identical output (the Art Blocks pattern).

Parameter object structure

javascript
javascript
let params = {
  seed: 12345,  // Always include seed for reproducibility
  // colors
  // 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?)
};

What it does: Parameters should come from what the system needs to be tunable, not from pattern types.

Canvas setup

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

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

What it does: The standard p5.js structure the skill specifies for the canvas.

Parameter slider control

html
html
<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>

What it does: Each parameter gets a control-group in the sidebar's Parameters section.

Pros & cons

Pros

  • Pro:Seeded randomness makes output reproducible, and seed navigation (prev/next/random/jump) lets users explore variations
  • Pro:Output is one self-contained HTML file that runs in any browser or claude.ai with no setup
  • Pro:A fixed template keeps the UI consistent (seed controls, Regenerate, Reset, Download PNG) while the algorithm and parameters vary per artwork
  • Pro:Guidance to create original work rather than copy existing artists' work helps avoid copyright issues

Cons

  • Con:Heavy reliance on templates/viewer.html and Anthropic branding limits UI customization
  • Con:The workflow is prescriptive and prose-heavy, with a mandatory philosophy step before any code
  • Con:Depends on the p5.js CDN being reachable, since the artifact loads p5.js from there

Images

algorithmic-art preview image
algorithmic-art preview image · anthropics/skills on GitHub
algorithmic-art preview image