skills.rest
skyrocoster
skyrocosterCOMMUNITY
Explore all skills by this author →
GitHub

algorithmic-art

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

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

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, which is difficult to produce from scratch. 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: Generates a 4-6 paragraph generative art manifesto (markdown) that defines the computational aesthetic before any code is written. - Seeded Generative Art: Produces p5.js sketches with seeded randomness so every seed yields reproducible, unique output in the Art Blocks style. - Interactive HTML Viewer: Builds a single self-contained HTML artifact from a branded template with seed navigation (prev/next/random/jump), parameter sliders, color pickers, and reset/download actions. - Use Case: Ask for a flow-field artwork inspired by ocean currents and receive a philosophy document plus an interactive HTML page 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 organic 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 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 navigation.

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 yields 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 all JavaScript inline and p5.js loaded from a CDN. It opens directly in any browser or runs as an interactive artifact with no build step or 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 different variation of the same algorithm, and parameter sliders let you tune quantities, scales, and colors in real time.

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 should render once with noLoop(), and complex scenes may need simplified math or spatial hashing to stay performant.

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
polaris-dxzpolaris-dxz
1

algorithmic-art

Convert artistic intent into a seed-based p5.js generative art workflow in HTML.

Community
Advanced
pmksharpmkshar

color-palette-extractor

Extract dominant colors from images and generate complementary palettes.

Community
Intermediate
IoT-VNIoT-VN

shader

Generate GLSL fragment shaders for procedural graphics and animations.

Community
Advanced