Creative Coding is a structured, high-performance workspace for reproducing, experimenting with, and learning from creative coding techniques. Built on Vue 3, Vite 8, and TypeScript, it unifies rendering libraries — PixiJS 8, p5.js 2, Three.js 0.184 / TresJS, and GSAP 3 — under a single consistent architecture: composable-based lifecycle management, a central typed registry, and a two-file dynamic routing shell. Rather than scattering sketches across a file-router’s folder tree, the playground separates what you build (Documentation Index
Fetch the complete documentation index at: https://mintlify.com/hetari/creative-coding/llms.txt
Use this file to discover all available pages before exploring further.
src/sketches/) from how it gets discovered (src/config/sketches.ts) and how it gets served (src/pages/), so adding a new experiment is always a one-step edit.
Quickstart
Clone the repo, install dependencies, and have your first sketch running in under five minutes.
Project Structure
Understand the three-layer architecture: sketches, registry, and routing shell.
Adding a Sketch
Step-by-step guide to creating a new sketch from scratch and registering it.
usePixiApp Composable
API reference for the PixiJS lifecycle composable used by every canvas sketch.
Core Architecture
The playground is built around three distinct layers that each carry one responsibility and one responsibility only.src/sketches/— Creative implementations live here. A sketch folder can contain a Vue component, GLSL.vert/.fragshaders, textures, math helpers, and any domain-specific utilities. This directory is never touched by the router generator.src/config/sketches.ts— A single typedSKETCHESarray is the sole source of truth for every experiment in the playground. Each entry declares anid,title,category,path,order,previewMode, optionalresources, and a dynamiccomponentloader. Adding or removing a sketch means editing exactly this one file.src/pages/— A two-file routing shell:index.vuerenders the root dashboard, and[...all].vueis a catch-all that dynamically resolves both category dashboards and leaf sketch components from the registry at runtime.
You never create
.vue files inside src/pages/ when adding a new sketch or category. The entire sub-route tree is generated dynamically by [...all].vue from the SKETCHES registry. New pages appear instantly — no imports, no menu updates, no boilerplate.What’s Included
The playground ships with a set of composables and overlay components that handle all the repetitive scaffold work so each sketch file can focus purely on creative logic.Composables
usePixiApp — PixiJS application lifecycle with hot-reload-safe teardown.useP5 — p5.js sketch mounting with lazy dynamic import.useGsap — GSAP + ScrollTrigger setup and cleanup.useAsciiRasterizer — ASCII art image composable for rasterized effects.Overlay Components
StatsPanel.vue — Floating FPS / MS / MB overlay powered by stats.js. Iframe-aware: auto-hides inside dashboard preview cards.LilGui.vue — Reactive lil-gui parameter controller. Closed by default, skips init in iframe previews.ResourcesList.vue — Collapsible reference-links pill, glassmorphic panel, also iframe-aware.Zero-Config Routing
Register a sketch once in
src/config/sketches.ts and it immediately appears on the dashboard with a card preview, a correct URL, and full navigation — no manual route definitions required.GLSL Shader Support
Import
.vert and .frag files directly as strings via Vite’s asset pipeline. Shader sources live alongside their Vue component inside src/sketches/, keeping the entire shader domain self-contained.Tech Stack
The following packages are declared inpackage.json and form the foundation of the playground:
| Package | Version | Role |
|---|---|---|
vue | 3.5 | Reactive component framework |
vite | 8 | Build tool and dev server |
typescript | ~6.0 | Static type checking |
pixi.js | 8 | 2D WebGL renderer |
p5 | 2 | Creative coding canvas API |
three | 0.184 | 3D WebGL renderer |
@tresjs/core | 5 | Declarative Three.js for Vue |
gsap | 3 | Animation and ScrollTrigger |
vue-router | 5 | Hash-based SPA routing |
@vueuse/core | 14 | Composable utilities (tryOnMounted, tryOnUnmounted, etc.) |
tailwindcss | 4 | Utility-first CSS framework |
lenis | 1 | Smooth scroll with Vue integration |
lil-gui | 0.21 | Lightweight parameter controller |
stats.js | 0.17 | Real-time performance monitor |