# Creative Coding

> >

- **Type:** Skill
- **Install:** `agentstack add skill-npbuilds-skill-library-creative-coding`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [npbuilds](https://agentstack.voostack.com/s/npbuilds)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [npbuilds](https://github.com/npbuilds)
- **Source:** https://github.com/npbuilds/skill-library/tree/main/skills/artifacts/creative-coding
- **Website:** https://skill-library-prod.web.app/

## Install

```sh
agentstack add skill-npbuilds-skill-library-creative-coding
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Creative Coding — The Algorithm Palette

Algorithms are brushes. Noise is paint. The canvas is a computational space where simple rules produce infinite variety. This skill provides the technical vocabulary for building artifacts that generate, simulate, or compute their visual output.

## Core Concepts

### Noise — The Foundation of Organic Computation

Noise functions produce pseudo-random values that vary smoothly across space and time. They are the primary tool for creating organic, natural-feeling procedural output.

**Perlin noise:**
- `noise(x)` — 1D: smooth random values along a line
- `noise(x, y)` — 2D: smooth random values across a surface (terrain, textures)
- `noise(x, y, t)` — 3D: animated 2D noise (add time as third dimension)
- Scale controls frequency: small input range = smooth; large range = detailed
- Always returns values in a consistent range (0-1 in p5.js, -1 to 1 in raw implementations)

**Fractal Brownian Motion (fBm):**
Layer multiple octaves of noise for natural-looking detail:
```
value = 0
amplitude = 1
frequency = 1
for each octave:
  value += amplitude * noise(x * frequency, y * frequency)
  amplitude *= 0.5 (persistence)
  frequency *= 2 (lacunarity)
```
More octaves = more detail. 4-8 octaves is typical.

**Domain warping:**
Feed noise output back as input coordinates for surreal, organic effects:
```
warpedX = x + noise(x, y) * warpStrength
warpedY = y + noise(x + 5.2, y + 1.3) * warpStrength
finalValue = noise(warpedX, warpedY)
```
Multiple layers of warping produce increasingly psychedelic results.

### Randomness — Controlled vs. Chaotic

**Seeded randomness:**
- Use a seed value to make randomness reproducible
- Same seed = same output every time
- Different seed = different output, same character
- Essential for generative art: allows curation of output

**Distributions:**
- **Uniform** — Equal probability everywhere (raw random)
- **Gaussian/normal** — Clustered around center (use for natural variation)
- **Power law** — Few large values, many small (use for organic size variation)
- **Poisson disk** — Random but evenly spaced (use for point placement without clumping)

### The Animation Loop

All creative coding artifacts share a core structure:

```
setup():
  Initialize state (once)
  Create canvas/renderer
  Set initial parameters

draw() / update():
  Update simulation state (physics, rules, time)
  Render current state to canvas
  requestAnimationFrame(draw)
```

**Frame independence:** Use `deltaTime` to make animations frame-rate independent:
```
position += velocity * deltaTime
```

## Algorithm Families

Read `references/algorithm-catalog.md` for detailed algorithm specifications and implementation patterns.

**Quick reference:**

| Algorithm | Complexity | Visual output | Interactivity potential |
|-----------|-----------|---------------|----------------------|
| Flow field | Low | Streaming organic curves | High — noise parameters |
| Particle system | Low-Medium | Explosive, atmospheric, flowing | High — forces, emitters |
| Boids/flocking | Medium | Swarming, natural motion | Medium — obstacles, attractors |
| L-system | Low | Botanical, fractal, branching | Low — rule parameters |
| Reaction-diffusion | Medium-High | Organic patterns (spots, stripes) | Medium — feed/kill rates |
| Physarum | Medium | Network structures, organic growth | Medium — agent parameters |
| Cellular automata | Low | Geometric, evolving | High — rule editing, painting |
| Verlet physics | Medium | Cloth, ropes, soft bodies | High — direct manipulation |
| Rigid body physics | Medium-High | Stacking, collision | High — throwing, building |
| Ray marching | High | 3D SDF scenes | Low-Medium — camera, parameters |

## Rendering Technology Selection

Read `references/performance-guide.md` for detailed performance optimization.

**Decision tree:**

```
Is it 3D?
  YES → Three.js (WebGL). Consider WebGPU for compute-heavy.
  NO ↓

Is it pixel-level computation (shaders, reaction-diffusion)?
  YES → WebGL fragment shaders or Canvas ImageData
  NO ↓

How many moving elements?
   100K   → WebGPU compute
```

## Shader Basics (GLSL)

Shaders run per-pixel on the GPU. Key concepts:

**Fragment shader structure:**
```glsl
uniform vec2 u_resolution;  // Canvas size
uniform float u_time;       // Elapsed time
uniform vec2 u_mouse;       // Mouse position

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;  // Normalize to 0-1
  // ... compute color for this pixel ...
  gl_FragColor = vec4(r, g, b, 1.0);
}
```

**Key GLSL techniques:**
- **SDFs (Signed Distance Fields):** Define shapes as distance functions, combine with min/max/smooth operations
- **Ray marching:** Step through 3D space using SDFs to render scenes
- **Domain repetition:** `mod(position, cellSize)` repeats shapes infinitely
- **Noise in GLSL:** Implement Perlin/simplex noise for procedural textures
- **Smooth blending:** `smoothstep()` and `mix()` for gradual transitions

## When to Consult This Skill

The Master Artificer or Simulation Smith should consult this skill when:
- Selecting an algorithm for a generative or simulation artifact
- Choosing between rendering technologies
- Implementing noise-based effects
- Designing shader-based visual effects
- Optimizing computationally intensive artifacts
- Understanding parameter spaces for algorithmic art

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [npbuilds](https://github.com/npbuilds)
- **Source:** [npbuilds/skill-library](https://github.com/npbuilds/skill-library)
- **License:** MIT
- **Homepage:** https://skill-library-prod.web.app/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-npbuilds-skill-library-creative-coding
- Seller: https://agentstack.voostack.com/s/npbuilds
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.