skills.rest
QuestForTech-Investments
QuestForTech-InvestmentsOFFICIAL
Explore all skills by this author →
GitHub

algorithmic-art

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

5|Updated Nov 16, 2025
Search Tags:#p5.js#generate#generative-art#seeded-randomness#interactive-ui#seed-variations
One-click install
npx skills add https://github.com/QuestForTech-Investments/claude-code-skills --skill algorithmic-art-questfortech-investments
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/QuestForTech-Investments/claude-code-skills/tree/main/algorithmic-art
Command: npx skills add https://github.com/QuestForTech-Investments/claude-code-skills --skill algorithmic-art-questfortech-investments

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Algorithmic art creation often requires specialized tooling and complex setup to achieve reproducible visuals. This skill provides a seed-driven workflow and an inline viewer template to produce consistent generative art outputs.

Core Features & Use Cases

  • Seeded determinism: Each run uses a numeric seed to reproduce the exact result.
  • Self-contained artifacts: Generates a single HTML file embedding the viewer template and a minimal UI for seed and parameters.
  • Customizable aesthetics: Parameter controls (particle count, flow speed, noise scale, color palette) align with a philosophy of crafting living algorithms. Real-world usage: A designer can quickly generate dozens of variations by changing seeds and presets.

Quick Start

  • Open the self-contained HTML artifact in a browser.
  • Use the Seed controls to choose a seed and adjust Parameter sliders (Particle Count, Flow Speed, Noise Scale, Trail Length) to explore variants.
  • Use the color pickers to adjust the palette, click Regenerate to reinitialize, and click Download PNG to export 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 generate reproducible generative art using p5.js?▼

Reproducible generative art uses a numeric seed to drive a randomness engine, ensuring the exact visual output is recreated every time you run the same seed. This skill generates a self-contained HTML artifact using p5.js with seed-driven determinism for consistent results.

How do I create an interactive UI for exploring generative art variations?▼

You create an interactive UI by embedding parameter sliders for particle count, flow speed, and noise scale alongside color pickers within an HTML file. This skill provides a self-contained viewer template with UI controls to explore seed variations and customize aesthetics instantly.

Can I use p5.js to build a self-contained HTML artifact with no setup?▼

Yes, p5.js can be embedded directly into a single HTML file with UI controls and a viewer template for immediate browser use. This skill requires no setup, generating a self-contained artifact that includes a minimal UI for seed and parameter adjustments.

What is the best way to export generative art visuals from a browser?▼

The best way to export generative art visuals is to include a download function within the HTML artifact that captures the canvas output as a PNG file. This skill provides a downloadable export feature, allowing you to save the generated visual results directly from the viewer.

Does seeded randomness work with custom color palettes in generative art?▼

Seeded randomness works seamlessly with custom color palettes by mapping deterministic random values to specific color selections within your code. This skill allows you to adjust color palettes via color pickers and regenerate the visual output while maintaining the seeded determinism.

Related Skills

Explore More Design & Creative Skills→
lisposterlisposter
1

baoyu-markdown-to-html

Convert Markdown to WeChat-compatible styled HTML with inline CSS.

Community
Advanced
evolving-machines-labevolving-machines-lab
76

slides-as-code

Generate HTML slide decks and export them to PNG and PPTX.

Official
Intermediate
AndersCanAndersCan
2

react-flow

Creates custom node and edge diagrams with the React Flow library.

Community
Advanced
archibatearchibate
37

algorithmic-art

Generates seed-driven p5.js generative art in a self-contained HTML artifact.

Community
Advanced