algorithmic-art

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

1|Updated Jul 1, 2026
One-click install
npx skills add https://github.com/ginaecho/skill-achievability-compiler --skill algorithmic-art-ginaecho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/ginaecho/skill-achievability-compiler/tree/main/demo/real-skill-cases/natural-language/algorithmic-art
Command: npx skills add https://github.com/ginaecho/skill-achievability-compiler --skill algorithmic-art-ginaecho

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 defines the computational aesthetic before any code is written. - Seeded p5.js Implementation: Builds reproducible generative algorithms using randomSeed/noiseSeed, flow fields, particles, noise, and parametric variation. - Interactive HTML Artifact: Outputs a single self-contained HTML file (built from templates/viewer.html) with seed navigation, parameter sliders, color pickers, and download controls that runs in claude.ai artifacts or any browser. - Use Case: A user asks for art inspired by ocean currents; the Skill writes a philosophy about fluid emergence, then delivers an interactive flow-field piece where the user explores seeds and tunes parameters live. ## Quick Start Use the algorithmic-art skill to create an interactive generative artwork about organic turbulence with explorable seeds and parameters.

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 in p5.js using setup() and draw() with seeded randomness via randomSeed() and noiseSeed(). The Skill outputs a single self-contained HTML file with the algorithm, parameter sliders, and seed controls inline.

How to make generative art reproducible with seeds?▼

Call randomSeed(seed) and noiseSeed(seed) at the start of the p5.js sketch so the same seed always produces identical output. The artifact includes previous, next, random, and jump-to-seed controls for exploring the seed space.

Does the p5.js artwork work in claude.ai artifacts?▼

Yes, the output is a single self-contained HTML file with p5.js loaded from a CDN and all code inline. It runs immediately as a claude.ai artifact or when opened directly in any browser without a server.

What parameters can be controlled in the generative art?▼

Parameters emerge from the algorithmic philosophy and typically include quantities, scales, probabilities, ratios, angles, and thresholds. Each parameter gets a slider or input control in the sidebar with real-time updates and a reset button.

Why start from the viewer.html template instead of scratch?▼

The template provides the fixed layout, Anthropic branding, seed navigation, and action buttons so every artwork has consistent UX. Only the p5.js algorithm, parameter definitions, and parameter controls are replaced for each piece.