algorithmic-art

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

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/quangtuyennguyen/loan-application-workflow --skill algorithmic-art-quangtuyennguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/quangtuyennguyen/loan-application-workflow/tree/main/.claude/skills/algorithmic-art
Command: npx skills add https://github.com/quangtuyennguyen/loan-application-workflow --skill algorithmic-art-quangtuyennguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires p5.js.

What problem does it solve? Creating original generative art requires both a coherent aesthetic concept and working code; this Skill bridges that gap by first authoring an algorithmic philosophy and then expressing it as a self-contained p5.js artwork. ## Core Features & Use Cases - Algorithmic Philosophy Authoring: Produces a 4-6 paragraph generative art manifesto (.md) that guides the visual direction before any code is written. - Seeded p5.js Generation: Builds reproducible artworks using randomSeed/noiseSeed so every seed yields identical output, with flow fields, particle systems, and emergent behaviors. - Interactive HTML Viewer: Outputs a single self-contained HTML artifact with seed navigation (prev/next/random/jump), parameter sliders, color pickers, and reset/download actions based on the Anthropic-branded template. - Use Case: Ask for a generative piece inspired by ocean currents, and receive a philosophy document plus an interactive viewer where you explore hundreds of seed variations and tune particle count, noise scale, and palette in real time. ## Quick Start Create an algorithmic art piece about urban movement with an interactive viewer I can explore with different seeds.

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 first, then implement it as a p5.js sketch with setup() and draw() functions. Use randomSeed() and noiseSeed() for reproducibility, organize tunable values in a params object, and expose them through slider controls in the HTML viewer.

What is seeded randomness in generative art?▼

Seeded randomness initializes p5.js random() and noise() with a fixed seed value so the same seed always produces identical output. This enables Art Blocks-style reproducibility where collectors can regenerate exact artworks and explore variations by changing the seed number.

Does the generated art work outside claude.ai artifacts?▼

Yes, the output is a single self-contained HTML file with p5.js loaded from CDN and all code inline. It opens directly in any browser without a server, build step, or additional dependencies, and can be shared as a standalone file.

Can I customize the parameters and colors of the artwork?▼

Yes, the viewer template includes a Parameters section with sliders for numeric values and an optional Colors section with color pickers. Parameter controls update the artwork in real time, and a Reset button restores default values.

Why does my generative art look different on each run?▼

The artwork changes between runs when randomSeed() and noiseSeed() are not called with a fixed value during initialization. Set params.seed and call both seed functions at the start of setup to guarantee deterministic, reproducible output.