algorithmic-art

Generates seeded p5.js generative art with interactive parameter controls in self-contained HTML.

Updated May 5, 2026
One-click install
npx skills add https://github.com/UlaYuga/promo-preflight --skill algorithmic-art-ulayuga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/UlaYuga/promo-preflight/tree/main/.agents/skills/algorithmic-art
Command: npx skills add https://github.com/UlaYuga/promo-preflight --skill algorithmic-art-ulayuga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating original generative art with code requires both a coherent aesthetic concept and careful p5.js implementation, which is difficult to produce consistently from a single prompt. ## Core Features & Use Cases - Algorithmic Philosophy Generation: Produces a 4-6 paragraph generative art manifesto that guides the visual direction before any code is written. - Seeded p5.js Implementation: Builds reproducible generative algorithms using randomSeed and noiseSeed so the same seed always yields identical output. - Interactive Viewer Artifact: Outputs a single self-contained HTML file with seed navigation, parameter sliders, color pickers, and reset/regenerate actions based on a fixed Anthropic-branded template. - Use Case: Ask for a flow-field artwork inspired by ocean currents and receive a philosophy document plus an interactive HTML viewer where you can browse seeds 1-100 and tune particle count, noise scale, and trail length. ## Quick Start Create an algorithmic art piece about organic turbulence with an interactive p5.js 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 concept, then implement it in p5.js using setup and draw functions with particles, flow fields, or noise. This Skill formalizes that by writing a philosophy document first, then coding a seeded sketch with parameter controls.

What is seeded randomness in generative art?▼

Seeded randomness uses randomSeed and noiseSeed in p5.js so every run with the same seed produces identical output. It enables reproducible Art Blocks-style variations where changing only the seed explores the algorithm's space.

Does the generated art viewer work without a server?▼

Yes, the output is a single self-contained HTML file with p5.js loaded from a CDN and all code inline. It opens directly in any browser or as a claude.ai artifact with no build step or server required.

Can I customize the parameters of the generated artwork?▼

Yes, the viewer includes sliders for numeric parameters, optional color pickers, and seed navigation with previous, next, random, and jump controls. A reset button restores default parameter values.

Why must the HTML start from the viewer template?▼

The template fixes the layout, Anthropic branding, seed controls, and action buttons so every artwork shares consistent UX. Only the p5.js algorithm, parameters, and parameter controls are replaced per artwork.