Skip to main content

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.

This guide walks you through cloning the repository, starting the development server, and creating your very first sketch — from an empty folder to a live running canvas in under five minutes. The Creative Coding playground uses Bun as its package manager for fast installs and script execution.
Prerequisites: You need Node.js 18+ and Bun installed on your machine. Install Bun with curl -fsSL https://bun.sh/install | bash or via the official installer at bun.sh.
1

Clone the repository

Clone the playground to your local machine:
git clone https://github.com/hetari/creative-coding.git
cd creative-coding
2

Install dependencies

Install all dependencies using Bun:
bun install
Bun resolves and installs the full dependency tree — Vue 3, PixiJS, p5.js, Three.js, GSAP, and all dev tooling — in a single fast pass.
3

Start the dev server

Launch the Vite development server with hot module replacement:
bun run dev
The server starts at http://localhost:5173. Vite uses hash-based routing (createWebHashHistory), so all sketch URLs look like http://localhost:5173/#/shader/learn.
4

Open the dashboard

Navigate to http://localhost:5173 in your browser. You’ll see the playground dashboard — a grid of sketch cards, each with a live iframe preview or a static image card. Clicking a card navigates to that sketch’s full-screen view.
5

Add your first sketch

Adding a new sketch takes two edits: one entry in the central registry and one new Vue file in src/sketches/.1. Register the sketch in src/config/sketches.tsOpen src/config/sketches.ts and append a new entry to the SKETCHES array:
// src/config/sketches.ts
{
  id: 'my-category-my-sketch',
  title: 'My Sketch',
  category: 'my-category',
  path: '/my-category/my-sketch',
  order: 40,
  previewMode: 'iframe',
  component: () => import('@/sketches/my-category/my-sketch/index.vue'),
}
FieldPurpose
idUnique kebab-case identifier
titleDisplay name on the dashboard card
categorySlash-separated category path (creates category dashboards automatically)
pathURL path served by the catch-all router
orderSort position on the dashboard (lower = first)
previewMode'iframe' for live canvas preview, 'image' for static screenshot
componentDynamic import returning the sketch Vue component
2. Create the sketch componentCreate the file src/sketches/my-category/my-sketch/index.vue:
<!-- src/sketches/my-category/my-sketch/index.vue -->
<script setup lang="ts">
import { tryOnMounted } from '@vueuse/core'
import { useTemplateRef } from 'vue'
import { useP5 } from '@/composables/useP5'
import Default from '@/layouts/default.vue'

const containerRef = useTemplateRef<HTMLElement>('container')
const { mountSketch } = useP5(containerRef)

tryOnMounted(() => {
  mountSketch((p) => {
    p.setup = () => {
      p.createCanvas(p.windowWidth, p.windowHeight)
      p.background(0)
    }
    p.draw = () => {
      p.background(0, 10)
      p.fill(255)
      p.ellipse(p.mouseX, p.mouseY, 20, 20)
    }
    p.windowResized = () => {
      p.resizeCanvas(p.windowWidth, p.windowHeight)
    }
  })
})
</script>

<template>
  <Default>
    <div ref="container" class="fixed inset-0 size-full" />
  </Default>
</template>
Save both files. The Vite dev server picks up the change instantly — navigate to http://localhost:5173/#/my-category/my-sketch to see your sketch running, and return to the dashboard to see the new card appear in its category group.
The useP5 composable handles dynamic import of p5.js, hot-reload-safe teardown via tryOnUnmounted, and re-creation on re-mount automatically. You never need to call p5.remove() manually.

​
Available Scripts

All scripts are run with bun run <script>:
ScriptCommandDescription
devbun run devStart the Vite dev server at localhost:5173
buildbun run buildType-check with vue-tsc then build optimized static output to dist/
previewbun run previewServe the production dist/ build locally for verification
lintbun run lintRun ESLint across all .js, .ts, and .vue files
lint:fixbun run lint:fixAuto-fix all ESLint errors and reformat staged files
deploybun run deployBuild then publish dist/ to GitHub Pages via gh-pages
The project enforces Conventional Commits via commitlint and auto-formats staged files via a Husky pre-commit hook running eslint --fix through nano-staged. Your commits must follow the format type: description (e.g. feat: add noise sketch, fix: teardown pixi app on unmount).

Build docs developers (and LLMs) love

Get started for freeTalk to us