skills.rest
yeeehaooo
yeeehaoooCOMMUNITY
Explore all skills by this author →
GitHub

algorithmic-art

Generate reproducible p5.js generative art in a self-contained HTML artifact.

Updated Jan 8, 2026
Search Tags:#p5.js#creative-coding#algorithmic-design#generative-art#interactive-art#seeded-randomness#reproducible-art
One-click install
npx skills add https://github.com/yeeehaooo/agent-kit --skill algorithmic-art-yeeehaooo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/yeeehaooo/agent-kit/tree/main/.claude/skills/algorithmic-art
Command: npx skills add https://github.com/yeeehaooo/agent-kit --skill algorithmic-art-yeeehaooo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating reproducible, interactive generative art often requires scaffolding: seed control, a self-contained HTML artifact, and a clean workflow to iterate on algorithms. This Skill provides a ready-to-use blueprint for building p5.js-based generative art with seeded randomness, enabling you to reproduce output across runs and share a single-file artifact that runs in a browser.

Core Features & Use Cases

  • Seeded, reproducible output: Every seed yields a deterministic generative result, ideal for exhibitions or archivable studies.
  • Self-contained artifact: Produces a single HTML document with embedded algorithm, UI controls, and CDN-based p5.js, suitable for Claude/AIs.
  • Interactive exploration: Parameter controls and seed navigation let artists and developers experiment with real-time adjustments and variations.
  • Extensible architecture: A flexible blueprint to implement any algorithmic aesthetic with modular parameters and UI.

Quick Start

Open the generated HTML artifact in a browser, adjust the parameter sliders, and use the seed controls to explore variations. Save or export the canvas as PNG to capture a result.

Frequently Asked Questions about algorithmic-art

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create reproducible generative art with p5.js using seeded randomness?▼

Reproducible generative art uses a specific seed value to initialize p5.js randomness, ensuring the algorithm yields deterministic, identical output across multiple runs for archivable creative coding studies.

Can I generate a self-contained HTML artifact for browser-based interactive art?▼

Yes, the process generates a single-file HTML document embedding the p5.js library, algorithmic logic, and UI controls, producing a self-contained artifact that runs directly in any standard browser.

How do I add parameter controls to explore variations in algorithmic design?▼

You can add parameter controls by building a templated UI with sliders within the HTML artifact, allowing real-time adjustments to variables and immediate visual feedback for generative aesthetics.

Does p5.js support interactive installations and creative coding workflows without external dependencies?▼

Yes, p5.js supports interactive installations by loading via CDN directly into the HTML file, eliminating local dependencies while enabling full browser-based rendering and interactive algorithmic design.

What is the best way to share interactive art variations without losing the original design?▼

The best way is using seeded randomness to generate reproducible art, allowing you to share a single HTML file where recipients input the same seed to reproduce the exact interactive variations.

Why does my generative art output change every time I run the script?▼

Generative art output changes because the randomness is not seeded; implementing seeded randomness ensures the algorithm uses a fixed starting point to produce deterministic, reproducible results every run.

Related Skills

Explore More Design & Creative Skills→
FlyFireFFlyFireF

p5js

Create interactive and generative art with p5.js in the browser.

Community
Advanced
tokidev-aitokidev-ai

infografia-linkedin

Generate LinkedIn infographic HTML and export it as a 1080x1440 PNG.

Community
Intermediate
NeoLabs-SystemsNeoLabs-Systems
23

p5js

Create interactive generative visual art with p5.js code.

Official
Advanced
paxlabs-incpaxlabs-inc
7

p5js

Generate interactive visual art with p5.js in self-contained HTML.

Community
Advanced