$Algorithmic Art with p5.js

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.

Views:
Rating:
Tags
#generative-art#p5js#algorithmic-art#creative-coding#interactive
Version
1.0.0
Category
Design
Source
path: skills/algorithmic-art
Install
clawd add anthropics/algorithmic-art

Algorithmic Art with p5.js

Overview

This skill enables the creation of computational aesthetic movements expressed through code. It guides the design and implementation of generative art pieces that produce unique variations based on algorithmic processes.

Key Principles

Beauty emerges from algorithmic process and execution, not static composition. Each seed produces unique variations of the same generative system.

Process

The skill operates in two primary phases:

1. Algorithmic Philosophy

Develop a 4-6 paragraph manifesto describing the generative vision through computational, mathematical, and emergent perspectives. This establishes the aesthetic direction before implementation.

2. p5.js Implementation

Create a self-contained interactive artwork with:

  • Seeded randomness for reproducibility
  • Real-time parameter controls (sliders, color pickers)
  • Seed navigation (prev/next/random/jump buttons)
  • Action buttons (regenerate, reset, download)
  • Anthropic branding maintained throughout

The implementation builds from the templates/viewer.html foundation, providing an interactive environment for parameter exploration and artwork generation.

Use Cases

Use this skill when users request:

  • Creating art using code
  • Generative art design
  • Algorithmic art systems
  • Flow fields or particle systems
  • Interactive art experiences

Note: Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.