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.