Skip to content
/algorithmic-artOfficial

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.

CreativeGenerative Artp5.jsInteractiveΒ· 2 min read

Quick import: Download the .md file and save it to .claude/commands/ (Claude Code), .cursorrules (Cursor), or paste as a system prompt in ChatGPT, Gemini, or any LLM API.

#What it does

The Algorithmic Art skill guides the creation of generative art through a two-phase process: first defining an algorithmic philosophy (a computational aesthetic movement), then expressing it through interactive p5.js sketches. It produces self-contained HTML artifacts with seeded randomness, parameter controls, and real-time exploration.

#How to use

Ask Claude to create algorithmic or generative art. The skill activates when you mention creating art using code, generative art, flow fields, particle systems, or similar creative coding topics.

Create a generative art piece inspired by ocean currents
Make an interactive algorithmic art sketch with particle systems

#Skill instructions

#Phase 1: Algorithmic Philosophy Creation

The skill begins by creating a named aesthetic movement (e.g., "Organic Turbulence", "Quantum Harmonics") with a 4-6 paragraph manifesto describing how the 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

#Phase 2: p5.js Implementation

The philosophy is then expressed as a self-contained HTML artifact featuring:

  • Seeded randomness for reproducible outputs (Art Blocks pattern)
  • Interactive parameter controls (sliders, color pickers) for real-time exploration
  • Seed navigation (previous, next, random, jump-to-seed)
  • Anthropic-branded UI with consistent sidebar layout
  • Download capability for saving generated artwork as PNG

#Technical Requirements

  • All code is inline in a single HTML file (p5.js loaded from CDN)
  • Canvas size: 1200x1200 pixels
  • Parameters emerge naturally from the algorithmic philosophy
  • Same seed always produces identical output
  • Performance-optimized for real-time rendering

#Output

  1. An algorithmic philosophy document (.md)
  2. A self-contained interactive HTML artifact

This skill is from the Anthropic Skills Repository.

AnthropicΒ·
View all skills