skills.rest
Syedyasir001
Syedyasir001COMMUNITY
Explore all skills by this author →
GitHub

algorithmic-art

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

Updated Apr 17, 2026
Search Tags:#seeded randomness#p5.js#creative coding#generative art#algorithmic art#flow fields#interactive viewer
One-click install
npx skills add https://github.com/Syedyasir001/RVULibPass --skill algorithmic-art-syedyasir001
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/Syedyasir001/RVULibPass/tree/main/.agent/skills/library/algorithmic-art
Command: npx skills add https://github.com/Syedyasir001/RVULibPass --skill algorithmic-art-syedyasir001

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires p5.js.

What problem does it solve? Creating original generative art requires both a coherent creative concept and working code; this Skill bridges that gap by first authoring an algorithmic philosophy and then expressing it as a reproducible, 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 artworks using randomSeed/noiseSeed so the same seed always yields identical output, Art Blocks style. - Interactive Viewer Artifact: Outputs a single self-contained HTML file with seed navigation (prev/next/random/jump), parameter sliders, color pickers, and reset/download actions, built from the Anthropic-branded viewer template. - Use Case: Ask for a flow-field piece inspired by ocean currents and receive a philosophy document plus an interactive HTML artifact where you can 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 a seeded parameter set, call randomSeed and noiseSeed in setup, 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 from a single request.

How do I make p5.js output reproducible with seeds?▼

Call randomSeed(seed) and noiseSeed(seed) before any random or noise calls so every run with the same seed produces identical output. The generated viewer includes prev, next, random, and jump-to-seed controls for exploring 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 and also runs as an interactive artifact in claude.ai.

Can I customize the parameters and colors of the generated artwork?▼

Yes, the viewer sidebar includes sliders for each algorithm parameter and optional color pickers, all wired to update the artwork in real time. A reset button restores the default parameter values.

What are the limitations of seeded generative art?▼

Reproducibility only holds within the same p5.js version and browser environment, since random implementations can differ. Very high particle counts or expensive per-frame calculations can also reduce animation frame rates.

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
hontauadrianhontauadrian

ckm:banner-design

Generates multi-style banner designs for social media, ads, web, and print platforms.

Community
Advanced
RuanBuitendag42RuanBuitendag42

linux-ricing

Codify color theory, typography, and animation principles for Linux desktop ricing.

Community
Advanced
CoRLab-TechCoRLab-Tech

figma-illustration-import

Import Figma vector illustrations into React components with SVG/PNG assets and Storybook stories.

Official
Intermediate