skills.rest
gtbauke
gtbaukeCOMMUNITY
Explore all skills by this author →
GitHub

algorithmic-art

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

Updated Feb 20, 2026
Search Tags:#seeded randomness#p5.js#creative coding#generative art#algorithmic art#flow fields#interactive html
One-click install
npx skills add https://github.com/gtbauke/bj-utils --skill algorithmic-art-gtbauke
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/gtbauke/bj-utils/tree/main/.agent/skills/algorithmic-art
Command: npx skills add https://github.com/gtbauke/bj-utils --skill algorithmic-art-gtbauke

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 guides the visual direction before any code is written. - Seeded p5.js Generation: Builds reproducible generative algorithms using randomSeed/noiseSeed so every seed yields identical output, Art Blocks style. - Interactive HTML Viewer: Outputs a single self-contained HTML artifact with seed navigation (prev/next/random/jump), parameter sliders, color pickers, and reset/download actions based on the Anthropic-branded viewer template. - Use Case: Ask for a flow-field artwork inspired by ocean currents; receive a philosophy document plus an interactive HTML page where you explore thousands of seed variations and tune particle count, noise scale, and palette in real time. ## 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 an algorithmic concept, then implement it in p5.js using setup() and draw() with seeded randomness via randomSeed() and noiseSeed(). This Skill automates both steps, producing a philosophy document and a working interactive HTML artifact.

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. It enables reproducible Art Blocks-style variations where each seed number maps to a unique but repeatable artwork.

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 build step or server required.

Can I explore different variations of the same algorithm?▼

Yes, the viewer includes seed navigation with previous, next, random, and jump-to-seed controls. Each seed generates a distinct variation of the same algorithm, and parameters like particle count and noise scale are adjustable via sliders.

Why does my generative art look like random noise instead of a composition?▼

Unconstrained randomness produces visual noise rather than structure. Effective generative art uses controlled chaos: noise fields, force constraints, curated color palettes, and tuned parameter ratios that create order emerging from randomness.

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
Veloxia-agencyVeloxia-agency

ckm:banner-design

Design platform-specific banners with safe-zone layout and PNG export.

Community
Advanced
nicepkgnicepkg
276

color-palette-extractor

Extract dominant and complementary color palettes from images and websites.

Official
Intermediate
auxi-wardrobeauxi-wardrobe
1

ck:shader

Author and refine GLSL fragment shaders for WebGL and Three.js applications.

Official
Advanced