algorithmic-art

Generate seeded p5.js algorithmic art with an HTML viewer and parameter controls.

190|27|Updated Apr 22, 2026
One-click install
npx skills add https://github.com/linxuan-sys/opencode-skills-chinese --skill algorithmic-art-linxuan-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-art
Source: https://github.com/linxuan-sys/opencode-skills-chinese/tree/main/algorithmic-art
Command: npx skills add https://github.com/linxuan-sys/opencode-skills-chinese --skill algorithmic-art-linxuan-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you turn a creative prompt into an original, seed-reproducible generative art workflow using p5.js, producing both an algorithmic art philosophy and an interactive HTML viewer you can explore immediately.

Core Features & Use Cases

  • Algorithmic Art Philosophy Authoring: Converts subtle user intent into a 4–6 paragraph “computational aesthetic movement” centered on process, emergence, and craft-level optimization.
  • Seeded Interactive p5.js Implementation: Builds a single-file, self-contained p5.js artwork using deterministic randomSeed()/noiseSeed() so the same seed reproduces the same output.
  • Parameter Exploration UI: Generates a viewer template with Seed navigation plus live adjustable parameters (and optional color controls) so users can discover variations safely within the intended creative space.
  • Production-Style Output Bundle: Produces philosophy (.md) plus a ready-to-run interactive .html that embeds the algorithm, UI controls, and p5 runtime.

Quick Start

Ask: “Create an original algorithmic-art piece in the style of controlled emergence and parameterized motion, and output the philosophy plus a single-file p5.js interactive HTML viewer with seeded controls.”

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 that is reproducible?▼

Reproducible generative art with p5.js requires deterministic seed handling using randomSeed() and noiseSeed() functions, ensuring the same input parameters always reproduce the exact same visual output across sessions.

What is a flow field in creative coding and how do I parameterize it?▼

A flow field in creative coding is a visual technique using a grid of vectors to guide particle movement. You parameterize it by building a UI with adjustable controls to manipulate noise scales and particle behaviors safely within the intended space.

Can I generate an interactive HTML viewer for particle systems without external dependencies?▼

Yes, you can generate a single self-contained HTML viewer for particle systems that embeds the p5.js runtime, algorithm logic, and UI controls entirely in one file without requiring external dependencies or separate script loading.

How do I turn a creative prompt into a computational aesthetic philosophy?▼

Turning a creative prompt into a computational aesthetic philosophy involves translating user intent into a 4-6 paragraph text focusing on process, emergence, and craft-level optimization to guide the generative system's visual rules and execution.

How do I add live adjustable parameters to a p5.js sketch?▼

You add live adjustable parameters to a p5.js sketch by generating an HTML viewer template with built-in UI controls, allowing users to navigate seeds and discover visual variations safely within the intended creative space.

What is the best way to explore seeded randomness in generative art?▼

The best way to explore seeded randomness in generative art is to use a parameterized p5.js implementation with seed navigation, allowing you to discover visual variations safely within the intended creative space while maintaining deterministic reproducibility.