skills.rest
chhpt
chhptCOMMUNITY
Explore all skills by this author →
GitHub

algorithmic-art

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

Updated Aug 23, 2026
Search Tags:#seeded randomness#p5.js#creative coding#generative art#algorithmic art#flow fields#particle systems
One-click install
npx skills add https://github.com/chhpt/skills --skill algorithmic-art-chhpt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/chhpt/skills/tree/main/skills/algorithmic-art
Command: npx skills add https://github.com/chhpt/skills --skill algorithmic-art-chhpt

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 reproducible p5.js artwork. ## Core Features & Use Cases - Algorithmic Philosophy Authoring: Produces a 4-6 paragraph generative art manifesto (.md) that guides the visual direction before any code is written. - Seeded Generative Art: Implements p5.js sketches with randomSeed/noiseSeed so every seed produces identical, reproducible output in the Art Blocks style. - Interactive Viewer: Builds a self-contained HTML artifact from templates/viewer.html with seed navigation (prev/next/random/jump), parameter sliders, color pickers, and reset/download actions. - Use Case: A user asks for flow-field art inspired by ocean currents; the Skill writes a philosophy document, then delivers a single HTML file where the user explores thousands of seeded variations with tunable particle counts and noise scales. ## Quick Start Create an algorithmic art piece about emergent flocking behavior with an interactive viewer I can open in my browser.

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 a parameters object, seed the randomness with randomSeed() and noiseSeed(), then implement your algorithm in setup() and draw(). This Skill generates the full p5.js sketch plus an interactive HTML viewer with sliders and seed controls.

What is seeded randomness in generative art?▼

Seeded randomness initializes the random and noise generators with a fixed seed value so the same seed always produces identical output. This enables Art Blocks-style reproducibility where collectors can reference and regenerate exact variations.

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 browser or runs as a claude.ai artifact with no setup or local server required.

Can I explore different variations of the same algorithm?▼

Yes, the viewer template includes seed navigation with previous, next, random, and jump-to-seed controls. Each seed produces a unique variation of the same algorithm, and parameter sliders allow further real-time tuning.

What are the limitations of p5.js generative art?▼

Very large particle counts or expensive per-frame calculations can reduce frame rates in animated sketches. Static high-resolution pieces avoid this by rendering once with noLoop(), and performance improves by pre-calculating values and limiting trig operations.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
234

inspiration-scouting

Generate curated inspiration boards with cross-domain references from project briefs.

Community
Intermediate
pengelbrechtpengelbrecht
6

SVG Logo Designer

Generate scalable SVG logo concepts from descriptive briefs with layout variations.

Community
Intermediate
pmksharpmkshar

color-palette-extractor

Extract dominant colors from images and generate complementary palettes.

Community
Intermediate
rheadshrheadsh
38

td-glsl

Create and modify GLSL shaders for TouchDesigner's visual programming environment.

Community
Intermediate