Algorithmic Art

What it does

Turns a short creative brief into a two-part deliverable: a written algorithmic philosophy in Markdown, then a self-contained HTML viewer running a p5.js sketch that expresses that philosophy. The sketch uses seeded randomness so every seed reproduces the same image exactly, and exposes parameters through sliders, color pickers, and seed navigation. It is most useful when a specific generative aesthetic is wanted (flow fields, particle systems, recursive structures, Voronoi tessellations) rather than a fixed illustration.

Use cases

• Prototype a generative art piece for a landing page by asking for a philosophy plus an HTML artifact, then tweaking sliders in the browser until the composition fits.
• Explore seed variations of one algorithm using the built-in prev/next/random/jump controls to find a specific frame worth exporting as PNG.
• Teach or demo computational aesthetics with a single-file HTML that shows both the code and interactive parameters, no build step or server required.

When to use it

• The request is for original generative or algorithmic art (flow fields, particles, noise, L-systems, tessellations).
• A reproducible piece is needed where the same seed always produces the same output.
• An interactive viewer with tunable parameters is wanted, not a static PNG.
• The output should run standalone in a browser or as a Claude artifact.

When NOT to use it

• The goal is to reproduce a specific existing artist’s style or a copyrighted work.
• Photorealistic or figurative imagery is required — this skill produces abstract computational art only.
• The target runtime is not a browser (e.g. a native mobile app, Processing Java, or a print-only pipeline).
• High-resolution raster export at print DPI matters more than interactivity — the viewer targets on-screen canvas rendering.

Installation

/plugin install algorithmic-art@anthropic-agent-skills

If you haven’t added the Anthropic marketplace yet, run this first:

/plugin marketplace add anthropics/skills

After install, just mention it in conversation:

Use the algorithmic-art skill to create a generative flow field piece inspired by ocean currents at dusk.

Troubleshooting

The viewer renders a blank canvas or throws in the browser console. The most common cause is that Claude wrote HTML from scratch instead of starting from templates/viewer.html. Ask it to re-read the template file first and rebuild the artifact using that structure, replacing only the p5.js algorithm and the Parameters section of the sidebar.

Different seeds produce nearly identical outputs. The algorithm is probably calling Math.random() or unseeded random() internally. Ask Claude to route every random call through p5’s random() and noise() after randomSeed(seed) and noiseSeed(seed) at the start of setup, and to move any initialization that uses randomness out of module scope into setup.

Sidebar controls do not update the artwork in real time. Each slider needs an oninput handler that writes into the params object and triggers a redraw (or restarts the particle system). Confirm the handler names match the parameter keys, and if the sketch uses noLoop(), call redraw() at the end of each handler.

The composition looks like random noise rather than a crafted piece. The algorithmic philosophy step was likely skipped or too generic. Prompt Claude to first output the 4-6 paragraph philosophy Markdown, name the movement, and only then implement — parameters and color palette should be derived from that philosophy instead of picked arbitrarily.