skills.rest
Cramer-69
Cramer-69COMMUNITY
Explore all skills by this author →
Website𝕏@cramerconsultGitHub

algorithmic-art

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

1|Updated Feb 18, 2026
Search Tags:#seeded randomness#p5.js#generative art#algorithmic art#flow fields#particle systems#interactive html
One-click install
npx skills add https://github.com/Cramer-69/skills-repository-3af2d1c7 --skill algorithmic-art-cramer-69
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/Cramer-69/skills-repository-3af2d1c7/tree/main/packages/claude/skills/algorithmic-art
Command: npx skills add https://github.com/Cramer-69/skills-repository-3af2d1c7 --skill algorithmic-art-cramer-69

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 consistently from scratch. This Skill guides the creation of algorithmic art through a two-step process: first writing an algorithmic philosophy, then expressing it as a self-contained interactive p5.js artwork. ## Core Features & Use Cases - Algorithmic Philosophy Generation: Produces a 4-6 paragraph generative art manifesto (.md) that defines the computational aesthetic before any code is written. - Seeded p5.js Implementation: Generates reproducible generative algorithms using randomSeed/noiseSeed, with parameters for counts, scales, probabilities, and ratios. - Interactive HTML Viewer: Outputs a single self-contained HTML artifact built from templates/viewer.html with seed navigation (prev/next/random/jump), parameter sliders, color pickers, and reset/download actions. - Use Case: A user asks for flow field art inspired by ocean currents. The Skill writes a philosophy document, then produces an interactive HTML page where the user explores thousands of seeded variations by adjusting particle count, noise scale, and flow speed. ## Quick Start Create an interactive generative art piece about organic turbulence using p5.js with seed controls and adjustable parameters.

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?▼

Start by defining 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 identical, reproducible output.

How to make p5.js generative art reproducible with seeds?▼

Call randomSeed(seed) and noiseSeed(seed) at the start of setup before any random() or noise() calls. This Art Blocks-style pattern guarantees the same seed always generates the same artwork, enabling variation galleries.

What is the viewer.html template used for in generative art?▼

The templates/viewer.html file is the mandatory starting point for the HTML artifact. It provides the fixed layout, sidebar structure, seed controls, and styling; you replace only the p5.js algorithm, parameters, and parameter UI controls.

Does the generative art HTML file need a server to run?▼

No, the output is a single self-contained HTML file with everything inline except the p5.js CDN script. It runs immediately in any browser or as a claude.ai artifact with no server or build step required.

Why does my p5.js sketch produce different results each run?▼

Results differ when randomSeed() and noiseSeed() are not called before generation, or when Math.random() is used instead of p5's seeded random(). Always initialize both seeds in setup for deterministic output.

Related Skills

Explore More Design & Creative Skills→
CatRabbit499CatRabbit499

branding-generator

Generate three branding directions with color palettes, typography, and voice guidance.

Community
Intermediate
polaris-dxzpolaris-dxz
1

algorithmic-art

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

Community
Advanced
leonardoacostaleonardoacosta

algorithmic-art

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

Community
Intermediate
rheadshrheadsh
38

td-glsl

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

Community
Intermediate