algorithmic-art

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

8|3|Updated Oct 20, 2025
One-click install
npx skills add https://github.com/chongdashu/claude-code-skills-demo --skill algorithmic-art-chongdashu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/chongdashu/claude-code-skills-demo/tree/main/.claude/skills/algorithmic-art
Command: npx skills add https://github.com/chongdashu/claude-code-skills-demo --skill algorithmic-art-chongdashu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating original generative art requires both a coherent aesthetic concept and working code, which is difficult to produce consistently from scratch. This Skill turns a creative request into a written algorithmic philosophy and then into a reproducible, interactive p5.js artwork. ## Core Features & Use Cases - Algorithmic Philosophy Generation: Produces a 4-6 paragraph manifesto defining a computational aesthetic movement before any code is written. - Seeded Generative Art: Implements p5.js sketches with seeded randomness so every seed reproduces identical output, following the Art Blocks pattern. - Interactive Viewer Template: Builds a self-contained HTML artifact from templates/viewer.html with seed navigation, parameter sliders, color pickers, and reset/download actions. - Use Case: Ask for a flow-field artwork inspired by ocean currents and receive a philosophy document plus a single HTML file you can open in any browser to explore thousands of seed variations. ## Quick Start Create an algorithmic art piece about urban rhythms as an interactive p5.js HTML page with adjustable parameters and seed controls.

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 describing the computational aesthetic, then implement it as a p5.js sketch with a params object, seeded randomness via randomSeed and noiseSeed, and setup/draw lifecycle functions. The result is a single self-contained HTML file.

What is seeded randomness in generative art?

Seeded randomness initializes randomSeed and noiseSeed with a fixed number so the same seed always produces identical output. This enables reproducible Art Blocks-style variations where users navigate seeds with previous, next, and random buttons.

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 opens directly in any modern browser or as a claude.ai artifact with no build step or server required.

Can I customize the parameters of the generated artwork?

Yes, each artwork defines its own params object exposed through sidebar sliders and optional color pickers. Changing a parameter updates the art in real time or triggers regeneration, and a reset button restores defaults.

Why does my generative art look different on each run?

If randomSeed and noiseSeed are not called with a fixed seed before generation, p5.js uses unseeded randomness and every run differs. Always initialize the seed at the start of setup to guarantee reproducibility.