Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Algorithmic Art (p5.js Generative Art)

Generates original p5.js generative artworks with seeded randomness, parameter sliders, and a self-contained interactive HTML viewer.

Image & VideoIntermediate★ 1,451⑂ 258AI score 8/10Last updated: Jul 14, 2026

What it does

Triggered by requests like "make art with code", "generative art", "flow field", or "particle system", the skill works in two stages:

  1. Algorithmic philosophy (.md) – a 4–6 paragraph manifesto naming and defining the aesthetic movement (e.g. "Organic Turbulence", "Stochastic Crystallization").
  2. p5.js implementation (.html) – the philosophy is translated into an actual algorithm and packaged as one self-contained HTML artifact (p5.js via CDN) with a sidebar containing seed navigation (prev/next/random/jump), parameter sliders, optional color pickers, and Regenerate / Reset / Download PNG buttons.

It enforces randomSeed/noiseSeed reproducibility (Art Blocks style) so the same seed always yields the same image, and explicitly asks for original algorithms rather than imitating existing artists.

Who it's for

  • Creative coding beginners who want runnable p5.js examples
  • Designers needing parametric visuals for posters, backgrounds, or prints
  • Developers who want a ready-made parameter UI for graphics experiments
  • Educators demonstrating noise fields, vector fields, or L-systems visually

Examples

  • Example 1: "Build a flow field that feels like ocean currents" → layered Perlin-noise vector field, thousands of trailing particles, sliders for particle count and noise scale.
  • Example 2: "Voronoi crystallization piece, let me browse 100 variations" → relaxation/packing algorithm plus seed navigation across seeds 1–100 in a single file.
  • Example 3: "Recursive branching tree forms I can export as PNG" → L-system/recursive subdivision with branch-angle and depth parameters and a working download button.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the algorithmic-art folder from the GitHub repo Prat011/awesome-llm-skills into my ~/.claude/skills/prat011-algorithmic-art/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Prat011/awesome-llm-skills.git && mkdir -p ~/.claude/skills && cp -r awesome-llm-skills/algorithmic-art ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal (Terminal on macOS/Linux, Git Bash or WSL on Windows).
  2. Create the skills folder if needed: mkdir -p ~/.claude/skills
  3. Clone the repository: git clone https://github.com/Prat011/awesome-llm-skills.git
  4. Copy the skill in place: cp -r awesome-llm-skills/algorithmic-art ~/.claude/skills/
  5. Verify the templates/ folder (viewer.html, generator_template.js) came along — the skill treats viewer.html as the mandatory starting point for the UI.
  6. Restart Claude Code and try: "create generative art with p5.js" or "make a flow field artwork".
  7. Open the generated HTML in any browser and explore seeds and sliders; use Download PNG to export a frame.
View source on GitHub ↗