Algorithmic Art Skill logo

Algorithmic Art Skill

Visit

Algorithmic Art is an Anthropic example Claude Skill that writes an algorithmic philosophy, then builds a seeded, interactive p5.js generative-art page.

Share:
View alternatives

Algorithmic Art is an example skill in Anthropic's skills repository, containing a SKILL.md, a LICENSE.txt, and a templates/ folder. According to its SKILL.md, the skill covers creating generative art with p5.js, using seeded randomness and interactive parameter exploration. It is meant for requests such as generative art, algorithmic art, flow fields, and particle systems, and it requires original work rather than copying existing artists.

How It Works

The skill follows two steps.

  1. Algorithmic philosophy: write a one-to-two word movement name and a four-to-six paragraph manifesto as a .md file, covering computational aesthetics such as emergence, noise fields, particles, and parametric variation.
  2. p5.js implementation: express that philosophy in code, aiming for roughly 90% algorithmic generation and 10% essential parameters.

Key Features

  • Seeded randomness: the code calls randomSeed() and noiseSeed(), so the same seed always produces identical output.
  • Seed navigation: the interface shows the current seed with Previous, Next, Random, and jump-to-seed controls, and can generate seeds 1 to 100.
  • Live parameter controls: sliders and color pickers update the piece in real time, with a Reset button.
  • Viewer template: templates/viewer.html is the required starting point, with fixed layout, sidebar, Anthropic branding, seed controls, and action buttons. templates/generator_template.js is a reference for p5.js structure, not a menu of patterns.
  • Single-file output: the result is one self-contained HTML artifact with p5.js loaded from a CDN, which runs in claude.ai or any browser. The skill says not to create separate .js files.
  • Actions: Regenerate, Reset, and Download PNG.

Use Cases

  • Generating flow fields, particle systems, and other code-driven art with Claude.
  • Producing an explorable piece where you can step through seeds and tune parameters.
  • Studying how a skill can combine a written concept with working code.

Limitation: output quality depends on the model and on p5.js, and the skill's own guidelines keep the Anthropic-branded viewer layout fixed.

Getting Started

  1. Open the skill folder and read SKILL.md.
  2. Install it using the process described for Claude Skills.
  3. Ask Claude Code or Claude for a generative piece, for example a flow-field artwork, and review the philosophy it writes first.
  4. Open the generated HTML file and explore seeds and parameters.

FAQ

What does the Algorithmic Art skill do?

It has Claude write an algorithmic philosophy, then implement it as a seeded, interactive p5.js artifact.

Does it create separate JavaScript files?

No. The skill asks for a single self-contained HTML file.

Can it copy an existing artist's style?

No. The skill requires original work.

Does it cost anything?

The skill is a folder in a public GitHub repository. Using it requires a Claude product, whose pricing is separate.

Alternatives

  • Canvas Design: for static visual designs rather than interactive generative art.
  • Claude Skills: how skills are packaged and loaded.
  • Claude Code: a host for running skills from the terminal.

Conclusion

Algorithmic Art is a compact example of a skill that pairs a written concept with a working p5.js piece. Browse the skills category for related skills.

Comments

No comments yet. Be the first to comment!