algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
npx skills add guanyang/open-agent-hub --skill algorithmic-art --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Translates an algorithmic philosophy into code and a self-contained visual artifact. It directs the agent to produce philosophy-driven generative art (e.g., organic turbulence, emergent patterns) using p5.js with seeded randomness, and to output a single HTML artifact that embeds the algorithm, parameter controls, and seed navigation.
How it works
- The skill describes creating an algorithmic philosophy and then implementing it in p5.js that expresses the philosophy through generative code. It emphasizes seeded randomness (seeded for reproducibility) and interactive parameter exploration to align with the philosophy.
- The implementation process requires producing two main outputs: a Markdown-aligned Algorithmic Philosophy and a Single HTML Artifact that is fully self-contained (no external files beyond the p5.js CDN). The HTML should follow a fixed template structure (header, sidebar with Seed and Parameters, actions) and replace only the variable sections (the algorithm, parameters, and UI controls).
- The HTML artifact must include: a seed navigation (Display, Previous/Next, Random, Jump), a Parameters section with sliders and color pickers as needed, and fixed UI elements per the template. It must be self-contained, with all p5.js code embedded inline, and load p5.js from the CDN.
- The generated code should implement an algorithmic philosophy such as Organic Turbulence, where flow fields, particles, and seeded randomness contribute to emergent visuals. The parameters should reflect qualities of the system (counts, scales, probabilities, angles, etc.).
When to use it
- Use when a user requests creating art using code, generative art, algorithmic art, flow fields, or particle systems. The output must provide interactive exploration and reproducible results via seeds.
What it can touch
- The skill references the following tooling and structure: the HTML template (templates/viewer.html) as a fixed starting point, p5.js from CDN, and a set of parameter controls inside the sidebar. The implementation must maintain the fixed parts of the template (layout, Anthropic branding, seed controls, and action buttons) and only vary the algorithm, parameters, and UI controls.
Caveats
- The philosophy and implementation must be explicitly created content; no copying of static artworks. The final artifact must be a single HTML document with all code inline and no external script dependencies beyond the p5.js CDN. It must produce reproducible results for a given seed and render interactive parameter-driven variations. The license is MIT, so attribution in the repository context should be observed.
Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms). This happens in two steps: 1. Algorithmic Philosophy Creation (.md file) 2. Express by creating p5.js generative art (.html + .js files) First, undertake this task: ## ALGORITHMIC PHILOSOPHY CREATION To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through: - Computational processes, emergent behavior, mathematical beauty - Seeded randomness, noise fields, organic systems - Particles, flows, fields, forces - Parametric variation and controlled chaos ### THE CRITICAL UNDERSTANDING - What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom. - What is created: An algorithmic philosophy/generative aesthetic movement. - What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters. Consider this approach: - Write a manifesto for a g
- ALGORITHMIC PHILOSOPHY CREATION
- THE CRITICAL UNDERSTANDING
- HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY
- PHILOSOPHY EXAMPLES
- ESSENTIAL PRINCIPLES
- DEDUCING THE CONCEPTUAL SEED
- P5.JS IMPLEMENTATION
- ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️
- TECHNICAL REQUIREMENTS
- CRAFTSMANSHIP REQUIREMENTS
- OUTPUT FORMAT
- INTERACTIVE ARTIFACT CREATION
- CRITICAL: WHAT'S FIXED VS VARIABLE
- REQUIRED FEATURES
What does the algorithmic-art skill do?
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
How do I install it?
Run `npx skills add guanyang/open-agent-hub --skill algorithmic-art --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From guanyang/open-agent-hub, a repository with 940 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.