skills.rest
SESELOVSKYDarian
SESELOVSKYDarianCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

algorithmic-art

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

Updated Mar 31, 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/SESELOVSKYDarian/Vase --skill algorithmic-art-seselovskydarian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/SESELOVSKYDarian/Vase/tree/main/.agents/skills/algorithmic-art
Command: npx skills add https://github.com/SESELOVSKYDarian/Vase --skill algorithmic-art-seselovskydarian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires p5.js.

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 Algorithms: Implements p5.js sketches with randomSeed/noiseSeed so every seed produces identical, reproducible output. - Interactive Viewer Artifact: Builds a self-contained HTML file from templates/viewer.html with seed navigation, parameter sliders, color pickers, and reset/regenerate 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 seed variations and tunes particle count, noise scale, and trail length in real time. ## Quick Start Create an algorithmic art piece about emergent turbulence 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 randomness with randomSeed() and noiseSeed(), then implement your algorithm in setup() and draw(). This Skill generates the full algorithm plus an interactive HTML viewer with sliders and seed controls.

What is seeded randomness in generative art?▼

Seeded randomness initializes p5.js random and noise functions with a fixed seed value so the same seed always produces identical output. This enables reproducible Art Blocks-style variations where users explore seeds 1 through 100 or jump to specific values.

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 CDN and all code inline. It opens directly in any browser or as a claude.ai artifact with no build step or server required.

Can I customize the parameters of the generated artwork?▼

Yes, the viewer includes sliders for numeric parameters, optional color pickers, and seed navigation with previous, next, random, and jump-to-seed controls. A reset button restores default parameter values.

Why does the Skill write a philosophy document before coding?▼

The philosophy document defines the computational aesthetic direction so the algorithm expresses a coherent vision rather than a random pattern. It guides choices about noise fields, particle behaviors, and emergent structures during implementation.

Related Skills

Explore More Design & Creative Skills→
AIDotNetAIDotNet
634

creative-production-moodboard-explorer

Generates image-first mood boards with intake, batch image generation, and inline MCP review.

Official
Advanced
futureboardfutureboard
82

banner-design

Generates multi-format banner designs with AI visuals and exports them as PNG images.

Official
Advanced
pmksharpmkshar

color-palette-extractor

Extract dominant colors from images and generate complementary palettes.

Community
Intermediate
nexu-ionexu-io
93.2k

webgl-experience

Generate full-screen real-time WebGL and WebGL2 visual experiences using GPU-accelerated shader code.

Official
Intermediate