🧩 What it is / what it does
Core Concept
algorithmic-art is a skill for creating algorithmic/generative art using p5.js with randomness controlled by a seed and interactive parameter exploration. The skill starts from an "algorithmic philosophy" — not templates — to generate flows, fields, particles, and emerging shapes that exist as living systems, not static images.
What the skill creates
- →Flow fields — Perlin-noise-driven vector fields that guide particles along organic paths
- →Particle systems — particle clouds with their own physics: speed, acceleration, lifetime, color
- →Seeded art — same seed = same artwork. Fully reproducible for production use
- →Interactive exploration — sliders and controls for varying parameters in real time in the browser
What it ISN'T
- ✗Doesn't copy existing artists' styles (avoids copyright infringement)
- ✗Doesn't use ready-made templates — it always starts from an original philosophy
- ✗Isn't a static image — the canvas is active and animates in a loop
- ✗Isn't pure CSS — it requires JavaScript and the p5.js library
💡 Algorithmic philosophy: The skill starts by inferring an "algorithmic philosophy"—not a list of shapes, but a system of behavior: how particles relate, what forces exist, and what emerges from their interaction. That's what generates original art.
🎣 When it triggers
Claude Code invokes algorithmic-art when it detects terms related to computational or generative art in your requests. The skill description is precise:
Exact description triggers
At what point in the project do you activate:
Distinctive hero section
When the landing page needs a generative background, not a static image
Section background
"features" or "about" sections with subtly animated canvas in the background
Interactive visual identity
When the brand needs a "living symbol" — generative art as a signature
Standalone art artifact
Interactive exploration with sliders: you adjust the seed and parameters in real time
✓ REQUEST when:
- ✓Want a hero background that doesn't exist in stock image libraries
- ✓Need reproducible art (same seed = same result)
- ✓Want to explore variations in real time with sliders
- ✓Need a lightweight canvas that runs in the browser without a server
✗ AVOID when:
- ✗The client requires a specific illustration (use an image)
- ✗Performance is critical on low-powered devices
- ✗The background needs crisp text on top (difficult contrast)
- ✗Want just a CSS animation — use animation-designer
🚀 How it improves your pages
🎯 The direct impact: Well-executed algorithmic art transforms a generic page into something memorable — the canvas is alive, unique to that brand, and costs nothing in image licenses.
Generative hero backgrounds
A <canvas> positioned as position: absolute behind the hero. Smooth looping flow field, brand palette colors, fixed seed = always the same look. No external images.
Sections with animated backgrounds
Subtle particle systems behind feature cards. Low opacity, smooth movement — the section "breathes" without being distracting. Pause at prefers-reduced-motion.
Interactive exploration
User-facing parameter sliders: field speed, particle count, seed. Visitors co-create the art—high engagement on product pages.
✓ Applications that work:
- ✓Hero with full-width canvas + centered text on top (z-index)
- ✓Creative 404 page — full-screen generative art
- ✓Loading screen with particles while data loads
- ✓"About" section with a very opaque noise field background
✗ Common pitfalls:
- ✗Canvas behind white text on a light background = unreadable
- ✗p5.js without lazy loading on a heavy page — blocks LCP
- ✗Too many particles on mobile — use mediaQuery to reduce them
- ✗Random colors with no defined palette — chaotic visuals
Layer structure: generative canvas (absolute) + text (relative, higher z-index)
⚙️ How it works under the hood
Technical stack
p5.js
2D rendering engine — high-level canvas API. CDN or npm.
randomSeed() / noiseSeed()
Native p5.js functions. Integer seed → deterministic output.
noise(x, y, z)
Smooth Perlin noise. The basis for all flow fields and organic shapes.
createSlider() / createInput()
p5.dom HTML controls — real-time parameter sliders.
Generation process
Deducing the Conceptual Seed
Claude reads your request and builds an "algorithmic philosophy" — the behavioral metaphor that guides the system.
Algorithmic Philosophy Creation
Define forces, entities, and emergent behaviors—not shapes. The art emerges from the system, not the design.
P5.js Implementation
Code with setup() + draw() + Particle class + noise field. Configurable seed.
Interactive Artifact Creation
Exposed sliders. Fixed vs. variable parameters defined. Output: standalone HTML or an embed snippet.
⚠️ Fork context: The SKILL.md defines context: fork. This means the skill runs in a separate context instance — Claude reads its own template (STEP 0) before implementing. Don't interrupt the process with extra messages during generation.
let particles = [];
const SEED = 42;
const NUM_PARTICLES = 300;
function setup() {
createCanvas(windowWidth, windowHeight);
// seed determinístico
randomSeed(SEED);
noiseSeed(SEED);
for (let i = 0; i < NUM_PARTICLES; i++) {
particles.push(new Particle());
}
}
function draw() {
background(10, 22, 34, 25); // trail
particles.forEach(p => { p.update(); p.display(); });
}
class Particle {
constructor() {
this.pos = createVector(random(width), random(height));
this.vel = createVector(0, 0);
}
update() {
let angle = noise(this.pos.x * 0.003, this.pos.y * 0.003) * TWO_PI * 2;
this.vel = p5.Vector.fromAngle(angle).mult(1.5);
this.pos.add(this.vel);
if (this.pos.x < 0 || this.pos.x > width) this.pos.x = random(width);
if (this.pos.y < 0 || this.pos.y > height) this.pos.y = random(height);
}
display() {
stroke(56, 189, 248, 80); strokeWeight(1.2); point(this.pos.x, this.pos.y);
}
}💬 Practical example + Ready-to-use PROMPT
Scenario
You're building a fintech landing page. The hero section feels flat—a blue gradient with text. You want a generative background that conveys “data flow,” lively and controlled, using the brand colors (#1e40af, #38bdf8). It should work with a fixed seed so the visual is always the same.
Create a generative p5.js background for the hero section of my fintech landing page.
Philosophy: financial data flow — particles moving like data across a network, converging at processing nodes. A sense of order emerging from chaos.
Technical requirements:
- seed: 1847 (fixed, reproducible)
- colors: #1e40af (blue), #38bdf8 (cyan), background #0a0f1e
- ~200 particles, flow field with noise(x*0.003, y*0.003)
- absolute canvas behind the text (z-index: 0)
- respect prefers-reduced-motion
- sliders: speed and number of particles
- standalone HTML that I can embed as <section>
What the skill delivers:
Variations to explore
🌊 Classic flow field
Particles follow a Perlin vector field. Fluid, organic look.
🕸️ Connected network
Points connected by lines when close. A sense of a living graph.
🌀 Orbital
Particles orbiting attractors. Gravitational force system.
🧬 Works well with / limitations
As the final module of Track 2, algorithmic-art completes the visual identity cycle. It relates to the other skills in the course in a very specific way:
canvas-design
Module 2.3 · Track 2
canvas-design works with Plain Canvas API for static or semi-static compositions: logos, banners, exportable images. Algorithmic art complements this with living, animated systems.
Use together: canvas-design for exportable brand assets → algorithmic-art for the animated background that surrounds them on the page.
animation-designer
Module 3.1 · Track 3
animation-designer uses Framer Motion and CSS to animate UI elements with predefined, orchestrated motion. algorithmic-art generates emergent motion without explicit choreography.
Use together: generative canvas as the background → animation-designer for the UI elements that appear over it with spring animations.
theme-factory + brand-guidelines
Modules 2.1 and 2.2
theme-factory defines the brand palette. brand-guidelines codifies the visual standards. algorithmic-art use this palette as input — the flow field colors are the brand colors.
Ideal workflow: theme-factory → brand-guidelines → algorithmic-art. Generative art expresses the brand identity in motion.
Position in the skills ecosystem
algorithmic-art DOES
- ✓Original, system-driven generative art
- ✓Animated backgrounds for pages
- ✓Interactive Canvas with exposed parameters
- ✓Deterministic seed for production
Does NOT replace
- ✗canvas-design (exportable assets, compositions)
- ✗animation-designer (UI motion with Framer Motion)
- ✗remotion (frame-by-frame rendered video)
- ✗3d-animation-creator (Three.js, WebGL 3D)
🔗 Powerful combination: brand-guidelines → algorithmic-art → animation-designer. The brand defines the colors, generative art creates the living background, and Framer Motion animates the UI elements over the canvas. The result: a page with a cohesive visual identity in motion.
📋 Module 2.4 Summary
What you learned
- ✓algorithmic-art uses p5.js with randomness controlled by seed for original, reproducible art
- ✓The skill starts from a algorithmic philosophy — behavior system, not a template
- ✓Flow fields and particle systems create generative backgrounds for hero sections and sections
- ✓Interactive sliders expose parameters for real-time exploration
- ✓The canvas is in z-index: 0, the text on top — essential layer structure
- ✓canvas-design (static) and animation-designer (motion UI) complete the ecosystem
Track 3 — Next
🎞️ Media
You mastered Track 2: visual identity, palettes, brand guidelines, static canvas, and generative art. Now move on to Track 3 — Media: animation-designer, 3d-animation-creator, Remotion, and seedance+HyperFrames/FFmpeg to turn your pages into professional videos and animations.
Track 2 complete