skills.rest
sshekhar-04
sshekhar-04COMMUNITY
Explore all skills by this author →
Website𝕏@ShreyanshD44145GitHub

algorithmic-art

Generates seeded p5.js generative art with interactive parameter controls in self-contained HTML files.

Updated Sep 1, 2026
Search Tags:#seeded randomness#p5.js#creative coding#generative art#algorithmic art#particle systems#html artifact
One-click install
npx skills add https://github.com/sshekhar-04/SIH_PS_26151 --skill algorithmic-art-sshekhar-04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/sshekhar-04/SIH_PS_26151/tree/main/.agents/Skills/algorithmic-art
Command: npx skills add https://github.com/sshekhar-04/SIH_PS_26151 --skill algorithmic-art-sshekhar-04

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 p5.js Generation: Builds flow fields, particle systems, and noise-based compositions with seeded randomness so every seed reproduces identical output. - Interactive Viewer: Outputs a single self-contained HTML artifact with seed navigation (prev/next/random/jump), parameter sliders, color pickers, and reset/download actions. - Use Case: Ask for a generative artwork inspired by ocean currents, and receive a philosophy document plus an interactive HTML piece where you explore 100 seed variations and tune particle count, noise scale, and palette 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 an algorithmic philosophy describing the computational aesthetic, then implement it as a p5.js sketch with setup() and draw() functions. Use randomSeed() and noiseSeed() so every seed produces reproducible output, and expose tunable parameters through UI sliders.

What is seeded randomness in generative art?▼

Seeded randomness initializes p5.js random() and noise() functions with a fixed seed value, making the artwork fully reproducible. The same seed always generates identical output, while different seeds reveal unique variations of the same algorithm.

Can I run the generated HTML artifact 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 an interactive artifact in claude.ai with no setup required.

How do I explore different variations of a generative artwork?▼

Use the built-in seed navigation controls: previous and next buttons cycle through seeds sequentially, the random button jumps to an arbitrary seed, and the input field jumps to a specific seed number. Each seed produces a distinct composition from the same algorithm.

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

Large particle counts or expensive per-frame calculations can reduce frame rates in animated pieces. Performance depends on browser rendering, so complex systems may need reduced element counts or precomputed values to stay smooth.

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
organvm-i-theoriaorganvm-i-theoria

generative-art-deployment

Deploy generative artworks to web galleries, print production, exhibitions, and archives.

Official
Intermediate
GoogleCloudPlatformGoogleCloudPlatform
129

visual-direction

Generate cohesive marketing imagery by applying visual-direction guidelines.

Official
Intermediate
rheadshrheadsh
38

td-glsl

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

Community
Intermediate