skills.rest
Clay-HHK
Clay-HHKCOMMUNITY
Explore all skills by this author →
GitHub

algorithmic-art

Creates generative art with p5.js using seeded randomness and interactive parameter controls.

1|Updated Mar 5, 2026
Search Tags:#seeded randomness#p5.js#creative coding#generative art#algorithmic art#particle systems#html artifact
One-click install
npx skills add https://github.com/Clay-HHK/claude-skills --skill algorithmic-art-clay-hhk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/Clay-HHK/claude-skills/tree/main/algorithmic-art
Command: npx skills add https://github.com/Clay-HHK/claude-skills --skill algorithmic-art-clay-hhk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating original generative art requires both an artistic concept and working code; this Skill bridges that gap by first defining an algorithmic philosophy and then expressing it as a self-contained interactive p5.js artwork. ## Core Features & Use Cases - Algorithmic Philosophy Generation: Produces a 4-6 paragraph manifesto defining a computational aesthetic movement before any code is written. - Seeded Generative Art: Builds p5.js sketches with seeded randomness so every seed produces reproducible, unique output. - Interactive HTML Viewer: Outputs a single self-contained HTML artifact with parameter sliders, color pickers, seed navigation, and download controls based on a branded template. - Use Case: Ask for a generative artwork inspired by ocean currents, and receive a philosophy document plus an interactive flow-field piece where you can explore thousands of seed variations and tune particle behavior live. ## Quick Start Create an algorithmic art piece about emergent complexity with an interactive viewer I can open in my browser.

Frequently Asked Questions about algorithmic-art

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create generative art with p5.js?▼

Define an algorithmic philosophy describing the computational aesthetic, then implement it as a p5.js sketch with setup and draw functions. Use randomSeed and noiseSeed for reproducible output, and expose tunable parameters through UI controls.

What is seeded randomness in generative art?▼

Seeded randomness initializes p5.js random and noise functions with a fixed seed value so the same seed always produces identical output. This enables reproducible Art Blocks-style variations where each seed generates a unique but deterministic artwork.

Can I run the generated art in a browser without a server?▼

Yes, the output is a single self-contained HTML file with p5.js loaded from a CDN and all code inline. Open it directly in any browser or use it as a claude.ai artifact with no setup required.

How do I make p5.js art reproducible across runs?▼

Call randomSeed(seed) and noiseSeed(seed) at the start of setup before any random or noise calls. Every subsequent random value becomes deterministic, so the same seed always regenerates the identical composition.

What are the limitations of algorithmic art generation?▼

The skill creates original generative algorithms rather than copying existing artists' styles, and output quality depends on the philosophy guiding implementation. Complex particle systems may require performance tuning to maintain smooth real-time animation.

Related Skills

Explore More Design & Creative Skills→
mike-coulbournmike-coulbourn
37

visual-identity-direction

Translate brand strategy into visual identity direction with mood boards and logo briefs.

Community
Advanced
GetFresh-VenturesGetFresh-Ventures

logo-creator

Generate logo variations with style controls and export SVG assets.

Official
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
SriRamkunamsettySriRamkunamsetty

stable-diffusion-image-generation

Generate images from text prompts using Stable Diffusion pipelines.

Community
Advanced