Skip to main content
Create original algorithmic art and generative systems using p5.js. This skill enables creation of computational aesthetics through flow fields, particle systems, and mathematical beauty.

​
Overview

The algorithmic art skill follows a two-step creative process:
  1. Algorithmic Philosophy Creation - Define a computational aesthetic movement
  2. Express in Code - Implement the philosophy as interactive p5.js art
This skill creates living algorithms, not static images with randomness. Each piece is a unique computational aesthetic expressed through code.

​
Core Workflow

​
Step 1: Create an Algorithmic Philosophy

Before writing code, define a computational aesthetic movement that emphasizes:
  • Computational processes and emergent behavior
  • Seeded randomness and noise fields
  • Particles, flows, fields, and forces
  • Parametric variation and controlled chaos
  • Mathematical beauty
Name the movement (1-2 words):
  • “Organic Turbulence”
  • “Quantum Harmonics”
  • “Emergent Stillness”
  • “Recursive Whispers”
  • “Field Dynamics”
Articulate the philosophy (4-6 paragraphs) addressing:
  • How does this manifest through computational processes and mathematical relationships?
  • What noise functions and randomness patterns are used?
  • How do particle behaviors and field dynamics work?
  • How does temporal evolution and system state change?
  • What parametric variation and emergent complexity emerges?

​
Step 2: Express in p5.js Code

Implement the philosophy using p5.js with interactive parameters and seeded randomness.
Seeded Randomness (Art Blocks Pattern):
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
Parameter Structure:
let params = {
  seed: 12345,  // Always include seed for reproducibility
  // 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?)
};
Canvas Setup:
function setup() {
  createCanvas(1200, 1200);
  // Initialize your system
}

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

​
Philosophy Examples

Philosophy: Chaos constrained by natural law, order emerging from disorder.Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow.
Philosophy: Discrete entities exhibiting wave-like interference patterns.Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas.
Philosophy: Self-similarity across scales, infinite depth in finite space.Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry.
Philosophy: Invisible forces made visible through their effects on matter.Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces.
Philosophy: Random processes crystallizing into ordered structures.Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. Every seed produces unique crystalline beauty.

​
Interactive Artifacts

​
Using the Template

CRITICAL: Before writing any HTML, read templates/viewer.html and use it as the literal starting point.
The skill includes a viewer template that provides:
  • Anthropic branding (colors, fonts, layout)
  • Seed navigation controls (previous/next/random/jump)
  • Parameter sliders with live updates
  • Regenerate, reset, and download buttons
  • Self-contained HTML artifact structure
FIXED (keep exactly as shown):
  • Layout structure (header, sidebar, main canvas area)
  • Anthropic branding (UI colors, fonts, gradients)
  • Seed section (display, prev/next/random/jump buttons)
  • Actions section (regenerate, reset, download buttons)
VARIABLE (customize for each artwork):
  • The entire p5.js algorithm (setup/draw/classes)
  • The parameters object (define what the art needs)
  • Parameter controls in sidebar (sliders, ranges, labels)
  • Optional color pickers (if needed for the specific art)

​
Required Features

  1. Parameter Controls
    • Sliders for numeric parameters
    • Color pickers for palette colors
    • Real-time updates when parameters change
    • Reset button to restore defaults
  2. Seed Navigation
    • Display current seed number
    • Previous/Next buttons to cycle through seeds
    • Random button for random seed
    • Input field to jump to specific seed
  3. Single Artifact Structure
    • Self-contained HTML file
    • p5.js loaded from CDN
    • All code inline (no external files)
    • Works immediately in claude.ai or any browser
The artifact includes seed navigation by default, allowing users to explore variations without creating multiple files. Same seed ALWAYS produces identical output.

​
Craftsmanship Requirements

Create algorithms that feel like they emerged through countless iterations by a master generative artist.
Focus on:
  • Balance: Complexity without visual noise, order without rigidity
  • Color Harmony: Thoughtful palettes, not random RGB values
  • Composition: Visual hierarchy and flow even in randomness
  • Performance: Smooth execution, optimized for real-time if animated
  • Reproducibility: Same seed ALWAYS produces identical output

​
Design Principles

​
Algorithm Flows from Philosophy

Avoid thinking “which pattern should I use?” Instead ask “how do I express this philosophy through code?”
Consider using:
  • Elements that accumulate or grow over time
  • Random processes constrained by natural rules
  • Feedback loops and interactions
Consider using:
  • Geometric relationships and ratios
  • Trigonometric functions and harmonics
  • Precise calculations creating unexpected patterns
Consider using:
  • Random variation within strict boundaries
  • Bifurcation and phase transitions
  • Order emerging from disorder

​
The Creative Process

User request → Algorithmic philosophy → Implementation
  1. Interpret the user’s intent - What aesthetic is being sought?
  2. Create an algorithmic philosophy (4-6 paragraphs) describing the computational approach
  3. Implement it in code - Build the algorithm that expresses this philosophy
  4. Design appropriate parameters - What should be tunable?
  5. Build matching UI controls - Sliders/inputs for those parameters
Trust creativity and let the philosophy guide the implementation. The algorithm is where you create something unique - don’t copy examples, build what the philosophy demands.

​
Resources

This skill includes helpful templates and documentation:
  • templates/viewer.html: Required starting point for all HTML artifacts
    • Contains exact structure and Anthropic branding
    • Keep unchanged: Layout, sidebar, colors/fonts, seed controls, action buttons
    • Replace: The p5.js algorithm, parameter definitions, UI controls
  • templates/generator_template.js: Reference for p5.js best practices
    • Shows how to organize parameters, use seeded randomness, structure classes
    • NOT a pattern menu - use principles to build unique algorithms
    • Embed algorithms inline in HTML (don’t create separate .js files)

​
Output Files

  1. Algorithmic Philosophy (.md file) - The computational aesthetic manifesto
  2. Single HTML Artifact - Self-contained interactive generative art built from template
Create original algorithmic art rather than copying existing artists’ work to avoid copyright violations.

Build docs developers (and LLMs) love

Get started for freeTalk to us