skills.rest
jasonzhu0922-sketch
jasonzhu0922-sketchCOMMUNITY
Explore all skills by this author →
GitHub

algorithmic-art

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

6|1|Updated Sep 3, 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/jasonzhu0922-sketch/agentloop --skill algorithmic-art-jasonzhu0922-sketch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/jasonzhu0922-sketch/agentloop/tree/main/packages/agentloop-skills/skills/algorithmic-art
Command: npx skills add https://github.com/jasonzhu0922-sketch/agentloop --skill algorithmic-art-jasonzhu0922-sketch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a creative idea into original generative art requires both an aesthetic concept and working code; this Skill bridges that gap by first writing an algorithmic philosophy and then expressing it as a self-contained p5.js artwork. ## Core Features & Use Cases - Algorithmic Philosophy Creation: Generates a 4-6 paragraph generative art manifesto (.md) that defines the computational aesthetic before any code is written. - p5.js Generative Art: Produces a single self-contained HTML artifact with seeded randomness, reproducible seeds, and an interactive sidebar for parameters, colors, and seed navigation. - Template-Based Viewer: Builds on templates/viewer.html with fixed Anthropic branding and seed controls while customizing the algorithm, parameters, and UI per artwork. - Use Case: A user asks for flow-field art inspired by ocean currents; the Skill writes a philosophy document, then delivers an HTML viewer where the user explores seeds 1-100 and tunes particle count, noise scale, and trail length. ## Quick Start Create an original piece of algorithmic art about emergent ocean currents as an interactive p5.js HTML page with adjustable parameters and seed navigation.

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 first, then implement it as a p5.js sketch with setup() and draw() functions. Use randomSeed() and noiseSeed() so every seed reproduces identical output, and expose tunable parameters through slider controls.

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

Call randomSeed(seed) and noiseSeed(seed) at the start of setup before any random() or noise() calls. The same seed then always produces identical output, enabling Art Blocks-style variation exploration across seeds.

What is an algorithmic philosophy in generative art?▼

It is a 4-6 paragraph written manifesto describing the computational aesthetic—noise fields, particle behaviors, emergent systems—before coding. The philosophy guides the implementation so the algorithm expresses a coherent artistic vision rather than a random pattern.

Does the generative art HTML work 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 runs directly in any browser or as a claude.ai artifact with no build step or server required.

Can I explore multiple variations of one generative algorithm?▼

Yes, the viewer template includes seed navigation with previous, next, random, and jump-to-seed controls. Each seed reveals a different variation of the same algorithm, and you can generate 100 variations using seeds 1 through 100.

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
luokai25luokai25

image-enhancer

Enhance image resolution, sharpness, and clarity through intelligent upscaling.

Community
Intermediate
rheadshrheadsh
38

td-glsl

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

Community
Intermediate