algorithmic-art

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

Updated Mar 28, 2026
One-click install
npx skills add https://github.com/whatswithavi/Ecchelon_project --skill algorithmic-art-whatswithavi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/whatswithavi/Ecchelon_project/tree/main/.agent/skills/algorithmic-art
Command: npx skills add https://github.com/whatswithavi/Ecchelon_project --skill algorithmic-art-whatswithavi

SYSTEM DOCUMENTATION & REQUIREMENTS

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 interactive 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 generative algorithms (flow fields, particle systems, recursive structures) using randomSeed/noiseSeed so every seed yields identical output. - 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: A user asks for art inspired by ocean currents; the Skill writes a philosophy about fluid emergence, then delivers an HTML artifact where the user explores thousands of seeded variations with tunable particle counts and noise scales. ## Quick Start Create an algorithmic art piece about urban rhythms as an interactive p5.js artifact with adjustable parameters and seed exploration.

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 a parameters object, seed the randomness with randomSeed and noiseSeed, then implement your algorithm in setup() and draw(). This Skill guides the process by first writing an algorithmic philosophy, then expressing it as a p5.js sketch inside a self-contained HTML viewer.

How to make generative art reproducible with seeds?▼

Call randomSeed(seed) and noiseSeed(seed) before any random or noise calls so the same seed always produces identical output. The generated viewer includes prev, next, random, and jump-to-seed controls for exploring the seed space.

Does the generated art work 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. It runs immediately in any browser or as a claude.ai artifact with no build step or server required.

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

Yes, the viewer template includes a sidebar with sliders for numeric parameters and optional color pickers. The Skill customizes these controls per artwork while keeping the fixed seed navigation and action buttons intact.

What are the limitations of this generative art approach?▼

The Skill targets p5.js 2D canvas sketches only, not WebGL shaders, 3D, or image-based synthesis. It also avoids copying existing artists' styles, so requests to replicate a specific artist's work are redirected toward original algorithmic expression.