`4b1b2b6`

init. quacking merrily

Authored by

espadonne 4 months ago

SHA: 4b1b2b6a8a07c3f17a375b18421e87a55785e00c
Tree: 955275a

18 changed files

Status	File	+
A	`.gitignore`	5
A	`DOUGK.md`	18
A	`deploy.sh`	29
A	`dougk.musicsian.com.conf`	20
A	`index.html`	29
A	`package-lock.json`	958
A	`package.json`	18
A	`src/main.js`	108
A	`src/renderers/p5/bread.js`	86
A	`src/renderers/p5/duck.js`	215
A	`src/renderers/p5/index.js`	96
A	`src/renderers/p5/pond.js`	131
A	`src/renderers/three/bread.js`	105
A	`src/renderers/three/duck.js`	279
A	`src/renderers/three/index.js`	179
A	`src/renderers/three/main.js`	167
A	`src/renderers/three/pond.js`	211
A	`vite.config.js`	9

.gitignoreadded

 +node_modules/
 +dist/
 +.DS_Store
 +*.log
 +.vite/

DOUGK.mdadded

 +# dougk
++
 +a cozy pond simulator on the web. featuring doug the duck
++
 +the premise is simple: dougk is a simple pond rendering with a happy duck named doug that wanders around the pond and surrounding shores, featuring a preset of seamless fun and quirky animations to engage the user with doug.
++
 +i'm envisioning the pond having a rickety wooden fence on one side, and aside from that we're striving for simplicity and mindfulness-maxxing. it should be quirky though. the duck should be quirky.
++
 +if the user clicks anywhere within the water, it would drop little bits of bread into the pond, and dougk will waddle over to the location and eat the bits.
 +if you're not giving any clicks for bread drops. the dougk should just mill about the pond at its leisure. the duck should just be vibing. moving slowly, just chilling. but if you click
 +if you click. as long as its within the water area of the visual, will drop a few bits of bread and when you do that the duck will after a short lag to emphasize the duck's quirky laziness, meander over to the bread
++
 +we want the whole thing to feel natural, seamless. no hitches.
++
 +Don't go overboard! Simple duck moving about responding to stimuli as described above.
++
 +what stack are we using? I have no idea the best framework/s for animations that are interactive.
++

deploy.shadded

 +#!/usr/bin/env bash
 +set -euo pipefail
++
 +STAMP=$(date +%Y-%m-%d-%H%M%S)
 +OUTDIR=~/builds/$STAMP
 +SITE=/var/www/dougk.musicsian.com
++
 +echo "▶ npm ci"
 +npm ci
++
 +echo "▶ npm run build"
 +npm run build
 +mv dist "$OUTDIR"
++
 +echo "▶ copy into releases"
 +sudo mkdir -p "$SITE/releases"
 +sudo rsync -az --delete "$OUTDIR"/ "$SITE/releases/$STAMP/"
++
 +echo "▶ fix selinux context"
 +sudo restorecon -Rv "$SITE/releases/$STAMP"
++
 +echo "▶ flip current symlink"
 +sudo rm -rf "$SITE/current"
 +sudo ln -s "$SITE/releases/$STAMP" "$SITE/current"
++
 +echo "▶ reload nginx"
 +sudo systemctl reload nginx
++
 +echo "✓ Deployed dougk $STAMP"

dougk.musicsian.com.confadded

 +server {
 +    server_name dougk.musicsian.com;
 +    root  /var/www/dougk.musicsian.com/current;
 +    index index.html;
++
 +    access_log /var/log/nginx/dougk.access.log;
 +    error_log  /var/log/nginx/dougk.error.log;
++
 +    add_header X-Frame-Options "SAMEORIGIN" always;
 +    add_header X-Content-Type-Options "nosniff" always;
 +    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
++
 +    location /assets/ {
 +        access_log off;
 +        expires 30d;
 +        add_header Cache-Control "public";
 +    }
++
 +    listen 80;
 +}

index.htmladded

 +<!DOCTYPE html>
 +<html lang="en">
 +<head>
 +  <meta charset="UTF-8">
 +  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +  <title>dougk - a cozy pond</title>
 +  <style>
 +    * {
 +      margin: 0;
 +      padding: 0;
 +      box-sizing: border-box;
 +    }
 +    body {
 +      overflow: hidden;
 +      background: #2d5a3d;
 +      display: flex;
 +      justify-content: center;
 +      align-items: center;
 +      min-height: 100vh;
 +    }
 +    canvas {
 +      display: block;
 +    }
 +  </style>
 +</head>
 +<body>
 +  <script type="module" src="/src/main.js"></script>
 +</body>
 +</html>

package-lock.jsonadded

 +{
 +  "name": "dougk",
 +  "version": "0.1.0",
 +  "lockfileVersion": 3,
 +  "requires": true,
 +  "packages": {
 +    "": {
 +      "name": "dougk",
 +      "version": "0.1.0",
 +      "dependencies": {
 +        "p5": "^1.9.0",
 +        "three": "^0.170.0"
 +      },
 +      "devDependencies": {
 +        "vite": "^5.0.0"
 +      }
 +    },
 +    "node_modules/@esbuild/aix-ppc64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
 +      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
 +      "cpu": [
 +        "ppc64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "aix"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/android-arm": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
 +      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
 +      "cpu": [
 +        "arm"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "android"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/android-arm64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
 +      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "android"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/android-x64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
 +      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "android"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/darwin-arm64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
 +      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "darwin"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/darwin-x64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
 +      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "darwin"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/freebsd-arm64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
 +      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "freebsd"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/freebsd-x64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
 +      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "freebsd"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-arm": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
 +      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
 +      "cpu": [
 +        "arm"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-arm64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
 +      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-ia32": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
 +      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
 +      "cpu": [
 +        "ia32"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-loong64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
 +      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
 +      "cpu": [
 +        "loong64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-mips64el": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
 +      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
 +      "cpu": [
 +        "mips64el"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-ppc64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
 +      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
 +      "cpu": [
 +        "ppc64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-riscv64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
 +      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
 +      "cpu": [
 +        "riscv64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-s390x": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
 +      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
 +      "cpu": [
 +        "s390x"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/linux-x64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
 +      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/netbsd-x64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
 +      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "netbsd"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/openbsd-x64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
 +      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "openbsd"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/sunos-x64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
 +      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "sunos"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/win32-arm64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
 +      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "win32"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/win32-ia32": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
 +      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
 +      "cpu": [
 +        "ia32"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "win32"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@esbuild/win32-x64": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
 +      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "win32"
 +      ],
 +      "engines": {
 +        "node": ">=12"
 +      }
 +    },
 +    "node_modules/@rollup/rollup-android-arm-eabi": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.5.tgz",
 +      "integrity": "sha512-iDGS/h7D8t7tvZ1t6+WPK04KD0MwzLZrG0se1hzBjSi5fyxlsiggoJHwh18PCFNn7tG43OWb6pdZ6Y+rMlmyNQ==",
 +      "cpu": [
 +        "arm"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "android"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-android-arm64": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.5.tgz",
 +      "integrity": "sha512-wrSAViWvZHBMMlWk6EJhvg8/rjxzyEhEdgfMMjREHEq11EtJ6IP6yfcCH57YAEca2Oe3FNCE9DSTgU70EIGmVw==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "android"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-darwin-arm64": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.5.tgz",
 +      "integrity": "sha512-S87zZPBmRO6u1YXQLwpveZm4JfPpAa6oHBX7/ghSiGH3rz/KDgAu1rKdGutV+WUI6tKDMbaBJomhnT30Y2t4VQ==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "darwin"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-darwin-x64": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.5.tgz",
 +      "integrity": "sha512-YTbnsAaHo6VrAczISxgpTva8EkfQus0VPEVJCEaboHtZRIb6h6j0BNxRBOwnDciFTZLDPW5r+ZBmhL/+YpTZgA==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "darwin"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-freebsd-arm64": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.5.tgz",
 +      "integrity": "sha512-1T8eY2J8rKJWzaznV7zedfdhD1BqVs1iqILhmHDq/bqCUZsrMt+j8VCTHhP0vdfbHK3e1IQ7VYx3jlKqwlf+vw==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "freebsd"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-freebsd-x64": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.5.tgz",
 +      "integrity": "sha512-sHTiuXyBJApxRn+VFMaw1U+Qsz4kcNlxQ742snICYPrY+DDL8/ZbaC4DVIB7vgZmp3jiDaKA0WpBdP0aqPJoBQ==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "freebsd"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.5.tgz",
 +      "integrity": "sha512-dV3T9MyAf0w8zPVLVBptVlzaXxka6xg1f16VAQmjg+4KMSTWDvhimI/Y6mp8oHwNrmnmVl9XxJ/w/mO4uIQONA==",
 +      "cpu": [
 +        "arm"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.5.tgz",
 +      "integrity": "sha512-wIGYC1x/hyjP+KAu9+ewDI+fi5XSNiUi9Bvg6KGAh2TsNMA3tSEs+Sh6jJ/r4BV/bx/CyWu2ue9kDnIdRyafcQ==",
 +      "cpu": [
 +        "arm"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-arm64-gnu": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.5.tgz",
 +      "integrity": "sha512-Y+qVA0D9d0y2FRNiG9oM3Hut/DgODZbU9I8pLLPwAsU0tUKZ49cyV1tzmB/qRbSzGvY8lpgGkJuMyuhH7Ma+Vg==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-arm64-musl": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.5.tgz",
 +      "integrity": "sha512-juaC4bEgJsyFVfqhtGLz8mbopaWD+WeSOYr5E16y+1of6KQjc0BpwZLuxkClqY1i8sco+MdyoXPNiCkQou09+g==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-loong64-gnu": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.5.tgz",
 +      "integrity": "sha512-rIEC0hZ17A42iXtHX+EPJVL/CakHo+tT7W0pbzdAGuWOt2jxDFh7A/lRhsNHBcqL4T36+UiAgwO8pbmn3dE8wA==",
 +      "cpu": [
 +        "loong64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.5.tgz",
 +      "integrity": "sha512-T7l409NhUE552RcAOcmJHj3xyZ2h7vMWzcwQI0hvn5tqHh3oSoclf9WgTl+0QqffWFG8MEVZZP1/OBglKZx52Q==",
 +      "cpu": [
 +        "ppc64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.5.tgz",
 +      "integrity": "sha512-7OK5/GhxbnrMcxIFoYfhV/TkknarkYC1hqUw1wU2xUN3TVRLNT5FmBv4KkheSG2xZ6IEbRAhTooTV2+R5Tk0lQ==",
 +      "cpu": [
 +        "riscv64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-riscv64-musl": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.5.tgz",
 +      "integrity": "sha512-GwuDBE/PsXaTa76lO5eLJTyr2k8QkPipAyOrs4V/KJufHCZBJ495VCGJol35grx9xryk4V+2zd3Ri+3v7NPh+w==",
 +      "cpu": [
 +        "riscv64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-s390x-gnu": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.5.tgz",
 +      "integrity": "sha512-IAE1Ziyr1qNfnmiQLHBURAD+eh/zH1pIeJjeShleII7Vj8kyEm2PF77o+lf3WTHDpNJcu4IXJxNO0Zluro8bOw==",
 +      "cpu": [
 +        "s390x"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-x64-gnu": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.5.tgz",
 +      "integrity": "sha512-Pg6E+oP7GvZ4XwgRJBuSXZjcqpIW3yCBhK4BcsANvb47qMvAbCjR6E+1a/U2WXz1JJxp9/4Dno3/iSJLcm5auw==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-linux-x64-musl": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.5.tgz",
 +      "integrity": "sha512-txGtluxDKTxaMDzUduGP0wdfng24y1rygUMnmlUJ88fzCCULCLn7oE5kb2+tRB+MWq1QDZT6ObT5RrR8HFRKqg==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "linux"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-openharmony-arm64": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.5.tgz",
 +      "integrity": "sha512-3DFiLPnTxiOQV993fMc+KO8zXHTcIjgaInrqlG8zDp1TlhYl6WgrOHuJkJQ6M8zHEcntSJsUp1XFZSY8C1DYbg==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "openharmony"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-win32-arm64-msvc": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.5.tgz",
 +      "integrity": "sha512-nggc/wPpNTgjGg75hu+Q/3i32R00Lq1B6N1DO7MCU340MRKL3WZJMjA9U4K4gzy3dkZPXm9E1Nc81FItBVGRlA==",
 +      "cpu": [
 +        "arm64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "win32"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-win32-ia32-msvc": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.5.tgz",
 +      "integrity": "sha512-U/54pTbdQpPLBdEzCT6NBCFAfSZMvmjr0twhnD9f4EIvlm9wy3jjQ38yQj1AGznrNO65EWQMgm/QUjuIVrYF9w==",
 +      "cpu": [
 +        "ia32"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "win32"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-win32-x64-gnu": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.5.tgz",
 +      "integrity": "sha512-2NqKgZSuLH9SXBBV2dWNRCZmocgSOx8OJSdpRaEcRlIfX8YrKxUT6z0F1NpvDVhOsl190UFTRh2F2WDWWCYp3A==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "win32"
 +      ]
 +    },
 +    "node_modules/@rollup/rollup-win32-x64-msvc": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.5.tgz",
 +      "integrity": "sha512-JRpZUhCfhZ4keB5v0fe02gQJy05GqboPOaxvjugW04RLSYYoB/9t2lx2u/tMs/Na/1NXfY8QYjgRljRpN+MjTQ==",
 +      "cpu": [
 +        "x64"
 +      ],
 +      "dev": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "win32"
 +      ]
 +    },
 +    "node_modules/@types/estree": {
 +      "version": "1.0.8",
 +      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
 +      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
 +      "dev": true,
 +      "license": "MIT"
 +    },
 +    "node_modules/esbuild": {
 +      "version": "0.21.5",
 +      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
 +      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
 +      "dev": true,
 +      "hasInstallScript": true,
 +      "license": "MIT",
 +      "bin": {
 +        "esbuild": "bin/esbuild"
 +      },
 +      "engines": {
 +        "node": ">=12"
 +      },
 +      "optionalDependencies": {
 +        "@esbuild/aix-ppc64": "0.21.5",
 +        "@esbuild/android-arm": "0.21.5",
 +        "@esbuild/android-arm64": "0.21.5",
 +        "@esbuild/android-x64": "0.21.5",
 +        "@esbuild/darwin-arm64": "0.21.5",
 +        "@esbuild/darwin-x64": "0.21.5",
 +        "@esbuild/freebsd-arm64": "0.21.5",
 +        "@esbuild/freebsd-x64": "0.21.5",
 +        "@esbuild/linux-arm": "0.21.5",
 +        "@esbuild/linux-arm64": "0.21.5",
 +        "@esbuild/linux-ia32": "0.21.5",
 +        "@esbuild/linux-loong64": "0.21.5",
 +        "@esbuild/linux-mips64el": "0.21.5",
 +        "@esbuild/linux-ppc64": "0.21.5",
 +        "@esbuild/linux-riscv64": "0.21.5",
 +        "@esbuild/linux-s390x": "0.21.5",
 +        "@esbuild/linux-x64": "0.21.5",
 +        "@esbuild/netbsd-x64": "0.21.5",
 +        "@esbuild/openbsd-x64": "0.21.5",
 +        "@esbuild/sunos-x64": "0.21.5",
 +        "@esbuild/win32-arm64": "0.21.5",
 +        "@esbuild/win32-ia32": "0.21.5",
 +        "@esbuild/win32-x64": "0.21.5"
 +      }
 +    },
 +    "node_modules/fsevents": {
 +      "version": "2.3.3",
 +      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 +      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
 +      "dev": true,
 +      "hasInstallScript": true,
 +      "license": "MIT",
 +      "optional": true,
 +      "os": [
 +        "darwin"
 +      ],
 +      "engines": {
 +        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 +      }
 +    },
 +    "node_modules/nanoid": {
 +      "version": "3.3.11",
 +      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
 +      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
 +      "dev": true,
 +      "funding": [
 +        {
 +          "type": "github",
 +          "url": "https://github.com/sponsors/ai"
 +        }
 +      ],
 +      "license": "MIT",
 +      "bin": {
 +        "nanoid": "bin/nanoid.cjs"
 +      },
 +      "engines": {
 +        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 +      }
 +    },
 +    "node_modules/p5": {
 +      "version": "1.11.11",
 +      "resolved": "https://registry.npmjs.org/p5/-/p5-1.11.11.tgz",
 +      "integrity": "sha512-k58mfexvavFb+KNRpi70PbkKE2gCNiWQkzS4kVOyC2F9SKGgYy1jSO+JXZ24ikXV9OvZIAxGusiSVWEijYrmNg==",
 +      "license": "LGPL-2.1"
 +    },
 +    "node_modules/picocolors": {
 +      "version": "1.1.1",
 +      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
 +      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
 +      "dev": true,
 +      "license": "ISC"
 +    },
 +    "node_modules/postcss": {
 +      "version": "8.5.6",
 +      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
 +      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
 +      "dev": true,
 +      "funding": [
 +        {
 +          "type": "opencollective",
 +          "url": "https://opencollective.com/postcss/"
 +        },
 +        {
 +          "type": "tidelift",
 +          "url": "https://tidelift.com/funding/github/npm/postcss"
 +        },
 +        {
 +          "type": "github",
 +          "url": "https://github.com/sponsors/ai"
 +        }
 +      ],
 +      "license": "MIT",
 +      "dependencies": {
 +        "nanoid": "^3.3.11",
 +        "picocolors": "^1.1.1",
 +        "source-map-js": "^1.2.1"
 +      },
 +      "engines": {
 +        "node": "^10 || ^12 || >=14"
 +      }
 +    },
 +    "node_modules/rollup": {
 +      "version": "4.53.5",
 +      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.5.tgz",
 +      "integrity": "sha512-iTNAbFSlRpcHeeWu73ywU/8KuU/LZmNCSxp6fjQkJBD3ivUb8tpDrXhIxEzA05HlYMEwmtaUnb3RP+YNv162OQ==",
 +      "dev": true,
 +      "license": "MIT",
 +      "dependencies": {
 +        "@types/estree": "1.0.8"
 +      },
 +      "bin": {
 +        "rollup": "dist/bin/rollup"
 +      },
 +      "engines": {
 +        "node": ">=18.0.0",
 +        "npm": ">=8.0.0"
 +      },
 +      "optionalDependencies": {
 +        "@rollup/rollup-android-arm-eabi": "4.53.5",
 +        "@rollup/rollup-android-arm64": "4.53.5",
 +        "@rollup/rollup-darwin-arm64": "4.53.5",
 +        "@rollup/rollup-darwin-x64": "4.53.5",
 +        "@rollup/rollup-freebsd-arm64": "4.53.5",
 +        "@rollup/rollup-freebsd-x64": "4.53.5",
 +        "@rollup/rollup-linux-arm-gnueabihf": "4.53.5",
 +        "@rollup/rollup-linux-arm-musleabihf": "4.53.5",
 +        "@rollup/rollup-linux-arm64-gnu": "4.53.5",
 +        "@rollup/rollup-linux-arm64-musl": "4.53.5",
 +        "@rollup/rollup-linux-loong64-gnu": "4.53.5",
 +        "@rollup/rollup-linux-ppc64-gnu": "4.53.5",
 +        "@rollup/rollup-linux-riscv64-gnu": "4.53.5",
 +        "@rollup/rollup-linux-riscv64-musl": "4.53.5",
 +        "@rollup/rollup-linux-s390x-gnu": "4.53.5",
 +        "@rollup/rollup-linux-x64-gnu": "4.53.5",
 +        "@rollup/rollup-linux-x64-musl": "4.53.5",
 +        "@rollup/rollup-openharmony-arm64": "4.53.5",
 +        "@rollup/rollup-win32-arm64-msvc": "4.53.5",
 +        "@rollup/rollup-win32-ia32-msvc": "4.53.5",
 +        "@rollup/rollup-win32-x64-gnu": "4.53.5",
 +        "@rollup/rollup-win32-x64-msvc": "4.53.5",
 +        "fsevents": "~2.3.2"
 +      }
 +    },
 +    "node_modules/source-map-js": {
 +      "version": "1.2.1",
 +      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 +      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
 +      "dev": true,
 +      "license": "BSD-3-Clause",
 +      "engines": {
 +        "node": ">=0.10.0"
 +      }
 +    },
 +    "node_modules/three": {
 +      "version": "0.170.0",
 +      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
 +      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
 +      "license": "MIT"
 +    },
 +    "node_modules/vite": {
 +      "version": "5.4.21",
 +      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
 +      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
 +      "dev": true,
 +      "license": "MIT",
 +      "dependencies": {
 +        "esbuild": "^0.21.3",
 +        "postcss": "^8.4.43",
 +        "rollup": "^4.20.0"
 +      },
 +      "bin": {
 +        "vite": "bin/vite.js"
 +      },
 +      "engines": {
 +        "node": "^18.0.0 || >=20.0.0"
 +      },
 +      "funding": {
 +        "url": "https://github.com/vitejs/vite?sponsor=1"
 +      },
 +      "optionalDependencies": {
 +        "fsevents": "~2.3.3"
 +      },
 +      "peerDependencies": {
 +        "@types/node": "^18.0.0 || >=20.0.0",
 +        "less": "*",
 +        "lightningcss": "^1.21.0",
 +        "sass": "*",
 +        "sass-embedded": "*",
 +        "stylus": "*",
 +        "sugarss": "*",
 +        "terser": "^5.4.0"
 +      },
 +      "peerDependenciesMeta": {
 +        "@types/node": {
 +          "optional": true
 +        },
 +        "less": {
 +          "optional": true
 +        },
 +        "lightningcss": {
 +          "optional": true
 +        },
 +        "sass": {
 +          "optional": true
 +        },
 +        "sass-embedded": {
 +          "optional": true
 +        },
 +        "stylus": {
 +          "optional": true
 +        },
 +        "sugarss": {
 +          "optional": true
 +        },
 +        "terser": {
 +          "optional": true
 +        }
 +      }
 +    }
 +  }
 +}

package.jsonadded

 +{
 +  "name": "dougk",
 +  "version": "0.1.0",
 +  "description": "A cozy pond simulator featuring Doug the duck",
 +  "type": "module",
 +  "scripts": {
 +    "dev": "vite",
 +    "build": "vite build",
 +    "preview": "vite preview"
 +  },
 +  "dependencies": {
 +    "p5": "^1.9.0",
 +    "three": "^0.170.0"
 +  },
 +  "devDependencies": {
 +    "vite": "^5.0.0"
 +  }
 +}

src/main.jsadded

 +// dougk - a cozy pond simulator featuring Doug the duck
 +// Supports both 2D (p5.js) and 3D (Three.js) rendering modes
++
 +import * as p5Renderer from './renderers/p5/index.js'
 +import * as threeRenderer from './renderers/three/index.js'
++
 +const renderers = {
 +  '2d': p5Renderer,
 +  '3d': threeRenderer
 +}
++
 +let currentMode = localStorage.getItem('dougk-mode') || '3d'
 +let container = null
++
 +// Create the container
 +function createContainer() {
 +  container = document.createElement('div')
 +  container.id = 'dougk-container'
 +  container.style.cssText = 'position: fixed; inset: 0; z-index: 0;'
 +  document.body.appendChild(container)
 +}
++
 +// Create the toggle UI
 +function createToggleUI() {
 +  const toggle = document.createElement('div')
 +  toggle.id = 'mode-toggle'
 +  toggle.style.cssText = `
 +    position: fixed;
 +    top: 20px;
 +    right: 20px;
 +    z-index: 1000;
 +    display: flex;
 +    gap: 0;
 +    font-family: system-ui, -apple-system, sans-serif;
 +    font-size: 14px;
 +    font-weight: 600;
 +    border-radius: 8px;
 +    overflow: hidden;
 +    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 +    border: 2px solid #191410;
 +  `
++
 +  const btn2d = createToggleButton('2D', '2d')
 +  const btn3d = createToggleButton('3D', '3d')
++
 +  toggle.appendChild(btn2d)
 +  toggle.appendChild(btn3d)
 +  document.body.appendChild(toggle)
++
 +  updateToggleUI()
 +}
++
 +function createToggleButton(label, mode) {
 +  const btn = document.createElement('button')
 +  btn.textContent = label
 +  btn.dataset.mode = mode
 +  btn.style.cssText = `
 +    padding: 10px 20px;
 +    border: none;
 +    cursor: pointer;
 +    transition: all 0.2s ease;
 +    font-weight: 600;
 +    font-size: 14px;
 +  `
 +  btn.addEventListener('click', () => switchMode(mode))
 +  return btn
 +}
++
 +function updateToggleUI() {
 +  const buttons = document.querySelectorAll('#mode-toggle button')
 +  buttons.forEach(btn => {
 +    const isActive = btn.dataset.mode === currentMode
 +    btn.style.background = isActive ? '#ffdc50' : '#ffffff'
 +    btn.style.color = '#191410'
 +  })
 +}
++
 +function switchMode(newMode) {
 +  if (newMode === currentMode) return
++
 +  // Stop current renderer
 +  renderers[currentMode].stop()
++
 +  // Clear container
 +  container.innerHTML = ''
++
 +  // Switch mode
 +  currentMode = newMode
 +  localStorage.setItem('dougk-mode', currentMode)
++
 +  // Start new renderer
 +  renderers[currentMode].start(container)
++
 +  updateToggleUI()
 +}
++
 +// Initialize
 +createContainer()
 +createToggleUI()
 +renderers[currentMode].start(container)
++
 +// Keyboard shortcut: press 'T' to toggle
 +document.addEventListener('keydown', (e) => {
 +  if (e.key.toLowerCase() === 't' && !e.ctrlKey && !e.metaKey && !e.altKey) {
 +    const newMode = currentMode === '2d' ? '3d' : '2d'
 +    switchMode(newMode)
 +  }
 +})

src/renderers/p5/bread.jsadded

 +// Bread module - handles bread bit spawning and behavior (p5.js version)
++
 +export class BreadBit {
 +  constructor(p, x, y) {
 +    this.p = p
 +    this.x = x
 +    this.y = y
 +    this.size = p.random(4, 8)
 +    this.eaten = false
 +    this.bobOffset = p.random(1000)
 +    this.driftX = p.random(-0.1, 0.1)
 +    this.driftY = p.random(-0.05, 0.05)
 +    this.fadeAlpha = 255
 +  }
++
 +  update() {
 +    if (this.eaten) {
 +      this.fadeAlpha -= 15
 +      return
 +    }
 +    this.x += this.driftX
 +    this.y += this.driftY
 +  }
++
 +  isDone() {
 +    return this.eaten && this.fadeAlpha <= 0
 +  }
++
 +  draw() {
 +    const p = this.p
 +    const bob = Math.sin((p.frameCount + this.bobOffset) * 0.08) * 2
++
 +    p.push()
 +    p.translate(this.x, this.y + bob)
++
 +    const outlineAlpha = Math.min(this.fadeAlpha, 255)
++
 +    p.stroke(25, 20, 15, outlineAlpha)
 +    p.strokeWeight(1.5)
 +    p.fill(235, 195, 130, this.fadeAlpha)
 +    p.ellipse(0, 0, this.size + 2, this.size * 0.75)
++
 +    p.noStroke()
 +    p.fill(255, 230, 180, this.fadeAlpha * 0.9)
 +    p.ellipse(-this.size * 0.15, -this.size * 0.15, this.size * 0.5, this.size * 0.35)
++
 +    p.pop()
 +  }
 +}
++
 +export class BreadManager {
 +  constructor(p) {
 +    this.p = p
 +    this.bits = []
 +  }
++
 +  spawnBread(x, y, count = null) {
 +    const p = this.p
 +    const numBits = count || Math.floor(p.random(3, 6))
++
 +    for (let i = 0; i < numBits; i++) {
 +      const offsetX = p.random(-15, 15)
 +      const offsetY = p.random(-15, 15)
 +      this.bits.push(new BreadBit(p, x + offsetX, y + offsetY))
 +    }
 +  }
++
 +  update() {
 +    for (let i = this.bits.length - 1; i >= 0; i--) {
 +      this.bits[i].update()
 +      if (this.bits[i].isDone()) {
 +        this.bits.splice(i, 1)
 +      }
 +    }
 +  }
++
 +  draw() {
 +    for (const bit of this.bits) {
 +      bit.draw()
 +    }
 +  }
++
 +  getActiveBits() {
 +    return this.bits.filter(b => !b.eaten)
 +  }
 +}

src/renderers/p5/duck.jsadded

 +// Duck module - Doug's behavior and rendering (p5.js version)
++
 +export class Duck {
 +  constructor(p, x, y, pond) {
 +    this.p = p
 +    this.x = x
 +    this.y = y
 +    this.pond = pond
++
 +    this.targetX = x
 +    this.targetY = y
 +    this.speed = 0.8
 +    this.idleSpeed = 0.3
++
 +    this.state = 'idle'
 +    this.waitTimer = 0
 +    this.waitDuration = 0
++
 +    this.wobble = 0
 +    this.headBob = 0
 +    this.direction = 1
++
 +    this.idleTimer = 0
 +    this.nextIdleMove = this.randomIdleTime()
 +  }
++
 +  randomIdleTime() {
 +    return this.p.random(120, 300)
 +  }
++
 +  setTarget(x, y, isFood = false) {
 +    if (isFood) {
 +      this.state = 'waiting'
 +      this.waitTimer = 0
 +      this.waitDuration = this.p.random(30, 60)
 +      this.pendingTargetX = x
 +      this.pendingTargetY = y
 +    } else {
 +      this.targetX = x
 +      this.targetY = y
 +    }
 +  }
++
 +  pickIdleTarget() {
 +    const angle = this.p.random(this.p.TWO_PI)
 +    const radiusX = this.p.random(0.2, 0.8) * (this.pond.width / 2)
 +    const radiusY = this.p.random(0.2, 0.8) * (this.pond.height / 2)
 +    this.targetX = this.pond.x + Math.cos(angle) * radiusX
 +    this.targetY = this.pond.y + Math.sin(angle) * radiusY
 +  }
++
 +  update(breadBits) {
 +    const p = this.p
++
 +    let closestBread = null
 +    let closestDist = Infinity
 +    for (const bread of breadBits) {
 +      if (!bread.eaten) {
 +        const d = p.dist(this.x, this.y, bread.x, bread.y)
 +        if (d < closestDist) {
 +          closestDist = d
 +          closestBread = bread
 +        }
 +      }
 +    }
++
 +    if (closestBread && this.state === 'idle') {
 +      this.setTarget(closestBread.x, closestBread.y, true)
 +    }
++
 +    if (this.state === 'waiting') {
 +      this.waitTimer++
 +      this.headBob = Math.sin(this.waitTimer * 0.3) * 3
 +      if (this.waitTimer >= this.waitDuration) {
 +        this.state = 'swimming'
 +        this.targetX = this.pendingTargetX
 +        this.targetY = this.pendingTargetY
 +      }
 +    }
++
 +    const dx = this.targetX - this.x
 +    const dy = this.targetY - this.y
 +    const dist = Math.sqrt(dx * dx + dy * dy)
++
 +    if (dist > 3) {
 +      const currentSpeed = this.state === 'swimming' ? this.speed : this.idleSpeed
 +      const moveX = (dx / dist) * currentSpeed
 +      const moveY = (dy / dist) * currentSpeed
 +      this.x += moveX
 +      this.y += moveY
++
 +      if (Math.abs(dx) > 0.1) {
 +        this.direction = dx > 0 ? 1 : -1
 +      }
++
 +      this.wobble += 0.15
 +    } else {
 +      if (this.state === 'swimming') {
 +        this.state = 'idle'
 +        for (const bread of breadBits) {
 +          if (!bread.eaten && p.dist(this.x, this.y, bread.x, bread.y) < 20) {
 +            bread.eaten = true
 +          }
 +        }
 +      }
 +    }
++
 +    if (this.state === 'idle' && !closestBread) {
 +      this.idleTimer++
 +      if (this.idleTimer >= this.nextIdleMove) {
 +        this.pickIdleTarget()
 +        this.idleTimer = 0
 +        this.nextIdleMove = this.randomIdleTime()
 +      }
 +    }
++
 +    this.headBob = Math.sin(p.frameCount * 0.05) * 2
 +  }
++
 +  draw() {
 +    const p = this.p
++
 +    p.push()
 +    p.translate(this.x, this.y)
 +    p.scale(this.direction, 1)
++
 +    const wobbleAmount = Math.sin(this.wobble) * 3
 +    const outlineWeight = 2.5
 +    const outlineColor = p.color(25, 20, 15)
++
 +    // Water ripple
 +    p.noFill()
 +    p.stroke(255, 255, 255, 60)
 +    p.strokeWeight(2)
 +    p.ellipse(0, 12, 50, 16)
++
 +    // Shadow
 +    p.noStroke()
 +    p.fill(40, 80, 110, 80)
 +    p.ellipse(0, 10, 40, 12)
++
 +    // Tail
 +    p.stroke(outlineColor)
 +    p.strokeWeight(outlineWeight)
 +    p.fill(255, 200, 60)
 +    p.push()
 +    p.translate(-18, wobbleAmount - 2)
 +    p.rotate(p.radians(-20))
 +    p.ellipse(0, 0, 14, 8)
 +    p.pop()
++
 +    // Body
 +    p.stroke(outlineColor)
 +    p.strokeWeight(outlineWeight)
 +    p.fill(255, 220, 80)
 +    p.ellipse(0, wobbleAmount, 38, 30)
++
 +    // Body highlight
 +    p.noStroke()
 +    p.fill(255, 240, 140)
 +    p.ellipse(-5, wobbleAmount - 5, 20, 14)
++
 +    // Body shadow
 +    p.fill(230, 180, 50)
 +    p.ellipse(5, wobbleAmount + 8, 25, 10)
++
 +    // Wing
 +    p.stroke(outlineColor)
 +    p.strokeWeight(outlineWeight)
 +    p.fill(245, 200, 65)
 +    p.ellipse(3, wobbleAmount + 2, 22, 18)
++
 +    // Head
 +    const headY = -14 + this.headBob + wobbleAmount * 0.5
 +    p.stroke(outlineColor)
 +    p.strokeWeight(outlineWeight)
 +    p.fill(255, 220, 80)
 +    p.ellipse(14, headY, 26, 24)
++
 +    // Head highlight
 +    p.noStroke()
 +    p.fill(255, 240, 140)
 +    p.ellipse(10, headY - 5, 14, 10)
++
 +    // Beak
 +    p.stroke(outlineColor)
 +    p.strokeWeight(outlineWeight)
 +    p.fill(255, 160, 40)
 +    p.push()
 +    p.translate(26, headY + 2)
 +    p.beginShape()
 +    p.vertex(0, -5)
 +    p.vertex(14, 0)
 +    p.vertex(0, 5)
 +    p.endShape(p.CLOSE)
 +    p.pop()
++
 +    // Eye
 +    p.stroke(outlineColor)
 +    p.strokeWeight(1.5)
 +    p.fill(255)
 +    p.ellipse(20, headY - 2, 10, 10)
++
 +    // Pupil
 +    p.noStroke()
 +    p.fill(25, 20, 15)
 +    p.ellipse(21, headY - 1, 5, 6)
++
 +    // Eye shine
 +    p.fill(255)
 +    p.ellipse(22, headY - 3, 3, 3)
++
 +    p.pop()
 +  }
 +}

src/renderers/p5/index.jsadded

 +// p5.js 2D renderer for dougk
 +import p5 from 'p5'
 +import { Pond } from './pond.js'
 +import { Duck } from './duck.js'
 +import { BreadManager } from './bread.js'
++
 +let sketch = null
 +let p5Instance = null
++
 +export function start(container) {
 +  if (p5Instance) return
++
 +  sketch = (p) => {
 +    let pond
 +    let doug
 +    let breadManager
++
 +    p.setup = () => {
 +      const canvas = p.createCanvas(window.innerWidth, window.innerHeight)
 +      canvas.parent(container)
 +      canvas.mousePressed(handleClick)
 +      p.frameRate(60)
++
 +      pond = new Pond(p, p.width / 2, p.height / 2, 400, 280)
 +      doug = new Duck(p, p.width / 2, p.height / 2, pond)
 +      breadManager = new BreadManager(p)
 +    }
++
 +    p.windowResized = () => {
 +      p.resizeCanvas(window.innerWidth, window.innerHeight)
 +      pond.x = p.width / 2
 +      pond.y = p.height / 2
 +    }
++
 +    p.draw = () => {
 +      // Vibrant grass background
 +      p.background(85, 160, 75)
++
 +      drawGrassDetails()
++
 +      pond.update()
 +      pond.draw()
++
 +      breadManager.update()
 +      breadManager.draw()
++
 +      doug.update(breadManager.bits)
 +      doug.draw()
 +    }
++
 +    function handleClick() {
 +      if (pond.contains(p.mouseX, p.mouseY)) {
 +        breadManager.spawnBread(p.mouseX, p.mouseY)
 +        pond.addRipple(p.mouseX, p.mouseY)
 +      }
 +    }
++
 +    function drawGrassDetails() {
 +      const seed = 12345
 +      p.randomSeed(seed)
++
 +      for (let i = 0; i < 40; i++) {
 +        const gx = p.random(p.width)
 +        const gy = p.random(p.height)
++
 +        const dx = gx - pond.x
 +        const dy = gy - pond.y
 +        if (Math.sqrt(dx * dx + dy * dy) < 250) continue
++
 +        p.stroke(25, 20, 15)
 +        p.strokeWeight(1)
 +        p.fill(65, 130, 55)
 +        p.ellipse(gx, gy, 18, 10)
++
 +        p.noStroke()
 +        p.fill(110, 180, 95)
 +        p.ellipse(gx - 3, gy - 2, 10, 5)
 +      }
++
 +      p.randomSeed(p.millis())
 +      p.noStroke()
 +    }
 +  }
++
 +  p5Instance = new p5(sketch)
 +}
++
 +export function stop() {
 +  if (p5Instance) {
 +    p5Instance.remove()
 +    p5Instance = null
 +    sketch = null
 +  }
 +}
++
 +export const name = '2D'

src/renderers/p5/pond.jsadded

 +// Pond module - handles the water, shore, and fence rendering (p5.js version)
++
 +export class Pond {
 +  constructor(p, x, y, width, height) {
 +    this.p = p
 +    this.x = x
 +    this.y = y
 +    this.width = width
 +    this.height = height
 +    this.ripples = []
 +  }
++
 +  contains(px, py) {
 +    const dx = (px - this.x) / (this.width / 2)
 +    const dy = (py - this.y) / (this.height / 2)
 +    return (dx * dx + dy * dy) <= 1
 +  }
++
 +  addRipple(x, y) {
 +    this.ripples.push({
 +      x,
 +      y,
 +      radius: 5,
 +      maxRadius: 40,
 +      alpha: 150
 +    })
 +  }
++
 +  update() {
 +    for (let i = this.ripples.length - 1; i >= 0; i--) {
 +      const ripple = this.ripples[i]
 +      ripple.radius += 0.8
 +      ripple.alpha -= 3
 +      if (ripple.alpha <= 0) {
 +        this.ripples.splice(i, 1)
 +      }
 +    }
 +  }
++
 +  draw() {
 +    const p = this.p
 +    const outlineColor = p.color(25, 20, 15)
 +    const outlineWeight = 2.5
++
 +    // Grassy shore area
 +    p.stroke(outlineColor)
 +    p.strokeWeight(outlineWeight)
 +    p.fill(120, 180, 90)
 +    p.ellipse(this.x, this.y, this.width + 70, this.height + 55)
++
 +    // Shore highlight
 +    p.noStroke()
 +    p.fill(150, 210, 110)
 +    p.ellipse(this.x - 30, this.y - 20, this.width * 0.4, this.height * 0.25)
++
 +    // Sandy edge
 +    p.stroke(outlineColor)
 +    p.strokeWeight(outlineWeight)
 +    p.fill(190, 160, 110)
 +    p.ellipse(this.x, this.y, this.width + 25, this.height + 18)
++
 +    // Pond water
 +    p.stroke(outlineColor)
 +    p.strokeWeight(outlineWeight)
 +    p.fill(70, 160, 190)
 +    p.ellipse(this.x, this.y, this.width, this.height)
++
 +    // Water cel-shaded bands
 +    p.noStroke()
 +    p.fill(50, 130, 160)
 +    p.ellipse(this.x + 20, this.y + 30, this.width * 0.7, this.height * 0.4)
++
 +    p.fill(110, 200, 220)
 +    p.ellipse(this.x - this.width * 0.18, this.y - this.height * 0.18, this.width * 0.45, this.height * 0.28)
++
 +    p.fill(160, 230, 245)
 +    p.ellipse(this.x - this.width * 0.22, this.y - this.height * 0.22, this.width * 0.2, this.height * 0.12)
++
 +    // Ripples
 +    p.noFill()
 +    for (const ripple of this.ripples) {
 +      p.stroke(255, 255, 255, ripple.alpha)
 +      p.strokeWeight(2.5)
 +      p.ellipse(ripple.x, ripple.y, ripple.radius * 2, ripple.radius * 1.3)
 +    }
 +    p.noStroke()
++
 +    this.drawFence()
 +  }
++
 +  drawFence() {
 +    const p = this.p
 +    const fenceX = this.x + this.width / 2 + 50
 +    const fenceStartY = this.y - 90
 +    const postCount = 5
 +    const postSpacing = 38
 +    const outlineColor = p.color(25, 20, 15)
++
 +    for (let i = 0; i < postCount; i++) {
 +      const postY = fenceStartY + i * postSpacing
 +      const wobble = p.sin(i * 1.5) * 5
++
 +      p.stroke(outlineColor)
 +      p.strokeWeight(2)
 +      p.fill(180, 130, 70)
 +      p.push()
 +      p.translate(fenceX + wobble, postY)
 +      p.rotate(p.radians(wobble * 0.6))
 +      p.rect(-5, -22, 10, 44, 2)
++
 +      p.noStroke()
 +      p.fill(210, 165, 100)
 +      p.rect(-3, -20, 4, 40, 1)
 +      p.pop()
 +    }
++
 +    p.stroke(outlineColor)
 +    p.strokeWeight(2)
 +    p.fill(165, 120, 65)
 +    p.push()
 +    p.translate(fenceX - 2, fenceStartY - 8)
 +    p.rotate(p.radians(2))
 +    p.rect(-6, -4, 12, 8, 2)
 +    for (let i = 1; i < postCount; i++) {
 +      p.rect(-6 + i * 2, -4 + i * postSpacing, 12, 8, 2)
 +    }
 +    p.pop()
++
 +    p.noStroke()
 +  }
 +}

src/renderers/three/bread.jsadded

 +// Bread bits - 3D floating bread with Wind Waker styling
 +import * as THREE from 'three'
++
 +class BreadBit {
 +  constructor(scene, gradientMap, x, z) {
 +    this.scene = scene
 +    this.eaten = false
 +    this.fadeOut = false
 +    this.fadeAlpha = 1
++
 +    // Random size
 +    const size = 0.08 + Math.random() * 0.06
++
 +    // Bread material - warm tan
 +    const material = new THREE.MeshToonMaterial({
 +      color: 0xe8c878,
 +      gradientMap: gradientMap,
 +      transparent: true,
 +      opacity: 1
 +    })
++
 +    // Simple box geometry for bread chunk
 +    const geometry = new THREE.BoxGeometry(size, size * 0.6, size)
++
 +    this.mesh = new THREE.Mesh(geometry, material)
 +    this.mesh.position.set(
 +      x + (Math.random() - 0.5) * 0.4,
 +      0.05,
 +      z + (Math.random() - 0.5) * 0.4
 +    )
 +    this.mesh.rotation.y = Math.random() * Math.PI * 2
++
 +    // Movement
 +    this.bobOffset = Math.random() * Math.PI * 2
 +    this.driftX = (Math.random() - 0.5) * 0.02
 +    this.driftZ = (Math.random() - 0.5) * 0.02
++
 +    scene.add(this.mesh)
 +  }
++
 +  get position() {
 +    return this.mesh.position
 +  }
++
 +  update(delta, elapsed) {
 +    if (this.eaten) {
 +      this.fadeAlpha -= delta * 3
 +      this.mesh.material.opacity = Math.max(0, this.fadeAlpha)
 +      this.mesh.position.y -= delta * 0.2 // Sink slightly
 +      return this.fadeAlpha <= 0
 +    }
++
 +    // Bob on water
 +    this.mesh.position.y = 0.05 + Math.sin(elapsed * 2 + this.bobOffset) * 0.02
++
 +    // Gentle drift
 +    this.mesh.position.x += this.driftX * delta
 +    this.mesh.position.z += this.driftZ * delta
++
 +    // Slow rotation
 +    this.mesh.rotation.y += delta * 0.3
++
 +    return false
 +  }
++
 +  dispose() {
 +    this.scene.remove(this.mesh)
 +    this.mesh.geometry.dispose()
 +    this.mesh.material.dispose()
 +  }
 +}
++
 +export class BreadManager {
 +  constructor(scene, gradientMap) {
 +    this.scene = scene
 +    this.gradientMap = gradientMap
 +    this.bits = []
 +  }
++
 +  spawnBread(x, z, count = null) {
 +    const numBits = count || Math.floor(3 + Math.random() * 3)
++
 +    for (let i = 0; i < numBits; i++) {
 +      this.bits.push(new BreadBit(this.scene, this.gradientMap, x, z))
 +    }
 +  }
++
 +  update(delta, elapsed) {
 +    for (let i = this.bits.length - 1; i >= 0; i--) {
 +      const done = this.bits[i].update(delta, elapsed)
 +      if (done) {
 +        this.bits[i].dispose()
 +        this.bits.splice(i, 1)
 +      }
 +    }
 +  }
++
 +  getActiveBits() {
 +    return this.bits.filter(b => !b.eaten)
 +  }
++
 +  getMeshes() {
 +    return this.bits.map(b => b.mesh)
 +  }
 +}

src/renderers/three/duck.jsadded

 +// Doug the Duck - 3D low-poly model with Wind Waker cel-shading
 +import * as THREE from 'three'
++
 +export function createDoug(scene, gradientMap) {
 +  const group = new THREE.Group()
++
 +  // Color palette - vibrant Wind Waker yellows
 +  const bodyColor = 0xffdc50 // Warm yellow
 +  const bodyHighlight = 0xfff0a0 // Light yellow
 +  const beakColor = 0xff9020 // Bright orange
 +  const eyeWhite = 0xffffff
 +  const eyePupil = 0x191410
++
 +  // Toon materials
 +  const bodyMaterial = new THREE.MeshToonMaterial({
 +    color: bodyColor,
 +    gradientMap: gradientMap
 +  })
++
 +  const highlightMaterial = new THREE.MeshToonMaterial({
 +    color: bodyHighlight,
 +    gradientMap: gradientMap
 +  })
++
 +  const beakMaterial = new THREE.MeshToonMaterial({
 +    color: beakColor,
 +    gradientMap: gradientMap
 +  })
++
 +  const eyeWhiteMaterial = new THREE.MeshToonMaterial({
 +    color: eyeWhite,
 +    gradientMap: gradientMap
 +  })
++
 +  const eyePupilMaterial = new THREE.MeshBasicMaterial({
 +    color: eyePupil
 +  })
++
 +  // Body - stretched sphere
 +  const bodyGeom = new THREE.SphereGeometry(0.5, 16, 12)
 +  bodyGeom.scale(1.2, 0.9, 1)
 +  const body = new THREE.Mesh(bodyGeom, bodyMaterial)
 +  body.position.y = 0.3
 +  group.add(body)
++
 +  // Body highlight (chest area)
 +  const chestGeom = new THREE.SphereGeometry(0.35, 12, 8)
 +  chestGeom.scale(1, 0.8, 0.8)
 +  const chest = new THREE.Mesh(chestGeom, highlightMaterial)
 +  chest.position.set(0.15, 0.35, 0.2)
 +  group.add(chest)
++
 +  // Tail feathers
 +  const tailGroup = new THREE.Group()
 +  for (let i = 0; i < 3; i++) {
 +    const tailGeom = new THREE.ConeGeometry(0.08, 0.3, 6)
 +    const tail = new THREE.Mesh(tailGeom, bodyMaterial)
 +    tail.rotation.x = Math.PI / 2 + (i - 1) * 0.15
 +    tail.rotation.z = (i - 1) * 0.2
 +    tail.position.set(-0.55 - i * 0.05, 0.35, (i - 1) * 0.08)
 +    tailGroup.add(tail)
 +  }
 +  group.add(tailGroup)
++
 +  // Wings
 +  const wingGeom = new THREE.SphereGeometry(0.25, 8, 6)
 +  wingGeom.scale(0.6, 1, 0.3)
++
 +  const leftWing = new THREE.Mesh(wingGeom, bodyMaterial)
 +  leftWing.position.set(-0.1, 0.35, 0.45)
 +  leftWing.rotation.x = 0.2
 +  group.add(leftWing)
++
 +  const rightWing = new THREE.Mesh(wingGeom, bodyMaterial)
 +  rightWing.position.set(-0.1, 0.35, -0.45)
 +  rightWing.rotation.x = -0.2
 +  group.add(rightWing)
++
 +  // Head
 +  const headGeom = new THREE.SphereGeometry(0.32, 16, 12)
 +  const head = new THREE.Mesh(headGeom, bodyMaterial)
 +  head.position.set(0.45, 0.7, 0)
 +  group.add(head)
++
 +  // Head tuft (little feather on top)
 +  const tuftGeom = new THREE.ConeGeometry(0.05, 0.15, 6)
 +  const tuft = new THREE.Mesh(tuftGeom, bodyMaterial)
 +  tuft.position.set(0.4, 1.0, 0)
 +  tuft.rotation.z = -0.3
 +  group.add(tuft)
++
 +  // Beak - cone pointing forward
 +  const beakGeom = new THREE.ConeGeometry(0.1, 0.35, 8)
 +  const beak = new THREE.Mesh(beakGeom, beakMaterial)
 +  beak.rotation.z = -Math.PI / 2
 +  beak.position.set(0.8, 0.65, 0)
 +  group.add(beak)
++
 +  // Eyes - big and expressive Wind Waker style
 +  const eyeGeom = new THREE.SphereGeometry(0.1, 12, 8)
++
 +  const leftEye = new THREE.Mesh(eyeGeom, eyeWhiteMaterial)
 +  leftEye.position.set(0.65, 0.78, 0.15)
 +  leftEye.scale.set(0.8, 1, 0.6)
 +  group.add(leftEye)
++
 +  const rightEye = new THREE.Mesh(eyeGeom, eyeWhiteMaterial)
 +  rightEye.position.set(0.65, 0.78, -0.15)
 +  rightEye.scale.set(0.8, 1, 0.6)
 +  group.add(rightEye)
++
 +  // Pupils
 +  const pupilGeom = new THREE.SphereGeometry(0.05, 8, 6)
++
 +  const leftPupil = new THREE.Mesh(pupilGeom, eyePupilMaterial)
 +  leftPupil.position.set(0.72, 0.78, 0.15)
 +  group.add(leftPupil)
++
 +  const rightPupil = new THREE.Mesh(pupilGeom, eyePupilMaterial)
 +  rightPupil.position.set(0.72, 0.78, -0.15)
 +  group.add(rightPupil)
++
 +  // Eye shine
 +  const shineGeom = new THREE.SphereGeometry(0.025, 6, 4)
 +  const shineMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff })
++
 +  const leftShine = new THREE.Mesh(shineGeom, shineMaterial)
 +  leftShine.position.set(0.73, 0.82, 0.13)
 +  group.add(leftShine)
++
 +  const rightShine = new THREE.Mesh(shineGeom, shineMaterial)
 +  rightShine.position.set(0.73, 0.82, -0.17)
 +  group.add(rightShine)
++
 +  // Add to scene
 +  scene.add(group)
++
 +  // Duck state
 +  const state = {
 +    position: new THREE.Vector3(0, 0, 0),
 +    targetPosition: new THREE.Vector3(0, 0, 0),
 +    rotation: 0,
 +    mode: 'idle', // 'idle', 'waiting', 'swimming'
 +    waitTimer: 0,
 +    waitDuration: 0,
 +    idleTimer: 0,
 +    nextIdleMove: 3 + Math.random() * 4,
 +    wobble: 0,
 +    headBob: 0
 +  }
++
 +  // Movement speeds
 +  const idleSpeed = 0.5
 +  const swimSpeed = 1.2
++
 +  function pickIdleTarget(pond) {
 +    const angle = Math.random() * Math.PI * 2
 +    const radius = Math.random() * (pond.radius * 0.7) + pond.radius * 0.1
 +    state.targetPosition.set(
 +      Math.cos(angle) * radius,
 +      0,
 +      Math.sin(angle) * radius
 +    )
 +  }
++
 +  function update(delta, elapsed, breadBits, pond) {
 +    // Find closest bread
 +    let closestBread = null
 +    let closestDist = Infinity
++
 +    for (const bread of breadBits) {
 +      if (!bread.eaten) {
 +        const dx = bread.position.x - state.position.x
 +        const dz = bread.position.z - state.position.z
 +        const dist = Math.sqrt(dx * dx + dz * dz)
 +        if (dist < closestDist) {
 +          closestDist = dist
 +          closestBread = bread
 +        }
 +      }
 +    }
++
 +    // React to bread
 +    if (closestBread && state.mode === 'idle') {
 +      state.mode = 'waiting'
 +      state.waitTimer = 0
 +      state.waitDuration = 0.5 + Math.random() * 0.8 // Quirky delay
 +      state.pendingTarget = closestBread.position.clone()
 +    }
++
 +    // Handle waiting (the quirky pause)
 +    if (state.mode === 'waiting') {
 +      state.waitTimer += delta
 +      state.headBob = Math.sin(state.waitTimer * 8) * 0.1
 +      head.position.y = 0.7 + state.headBob
++
 +      if (state.waitTimer >= state.waitDuration) {
 +        state.mode = 'swimming'
 +        state.targetPosition.copy(state.pendingTarget)
 +      }
 +    }
++
 +    // Movement
 +    const dx = state.targetPosition.x - state.position.x
 +    const dz = state.targetPosition.z - state.position.z
 +    const dist = Math.sqrt(dx * dx + dz * dz)
++
 +    if (dist > 0.1) {
 +      const speed = state.mode === 'swimming' ? swimSpeed : idleSpeed
 +      const moveAmount = Math.min(speed * delta, dist)
 +      const moveX = (dx / dist) * moveAmount
 +      const moveZ = (dz / dist) * moveAmount
++
 +      state.position.x += moveX
 +      state.position.z += moveZ
++
 +      // Face movement direction
 +      state.rotation = Math.atan2(dz, dx)
++
 +      // Wobble animation while moving
 +      state.wobble += delta * 8
 +    } else {
 +      // Arrived
 +      if (state.mode === 'swimming') {
 +        state.mode = 'idle'
 +        // Eat nearby bread
 +        for (const bread of breadBits) {
 +          if (!bread.eaten) {
 +            const bx = bread.position.x - state.position.x
 +            const bz = bread.position.z - state.position.z
 +            if (Math.sqrt(bx * bx + bz * bz) < 0.4) {
 +              bread.eaten = true
 +            }
 +          }
 +        }
 +      }
 +    }
++
 +    // Idle wandering
 +    if (state.mode === 'idle' && !closestBread) {
 +      state.idleTimer += delta
 +      if (state.idleTimer >= state.nextIdleMove) {
 +        pickIdleTarget(pond)
 +        state.idleTimer = 0
 +        state.nextIdleMove = 3 + Math.random() * 4
 +      }
 +    }
++
 +    // Apply transforms
 +    group.position.x = state.position.x
 +    group.position.z = state.position.z
++
 +    // Bobbing on water
 +    group.position.y = Math.sin(elapsed * 2) * 0.03
++
 +    // Rotation (face direction of movement)
 +    group.rotation.y = -state.rotation + Math.PI / 2
++
 +    // Body wobble while swimming
 +    const wobbleAmount = Math.sin(state.wobble) * 0.08
 +    body.rotation.z = wobbleAmount
 +    head.position.x = 0.45 + wobbleAmount * 0.2
++
 +    // Wing flap animation
 +    leftWing.rotation.z = Math.sin(elapsed * 3) * 0.1
 +    rightWing.rotation.z = -Math.sin(elapsed * 3) * 0.1
++
 +    // Gentle head bob
 +    if (state.mode !== 'waiting') {
 +      head.position.y = 0.7 + Math.sin(elapsed * 2) * 0.02
 +    }
 +  }
++
 +  return {
 +    group,
 +    update,
 +    getPosition: () => state.position.clone()
 +  }
 +}

src/renderers/three/index.jsadded

 +// Three.js 3D renderer for dougk
 +import * as THREE from 'three'
 +import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'
 +import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'
 +import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js'
 +import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'
 +import { createDoug } from './duck.js'
 +import { createPond } from './pond.js'
 +import { BreadManager } from './bread.js'
++
 +let scene, camera, renderer, composer, outlinePass
 +let doug, pond, breadManager
 +let clock
 +let animationId = null
++
 +function createToonGradient() {
 +  const canvas = document.createElement('canvas')
 +  canvas.width = 4
 +  canvas.height = 1
 +  const ctx = canvas.getContext('2d')
++
 +  ctx.fillStyle = '#444444'
 +  ctx.fillRect(0, 0, 1, 1)
 +  ctx.fillStyle = '#888888'
 +  ctx.fillRect(1, 0, 1, 1)
 +  ctx.fillStyle = '#cccccc'
 +  ctx.fillRect(2, 0, 1, 1)
 +  ctx.fillStyle = '#ffffff'
 +  ctx.fillRect(3, 0, 1, 1)
++
 +  const texture = new THREE.CanvasTexture(canvas)
 +  texture.minFilter = THREE.NearestFilter
 +  texture.magFilter = THREE.NearestFilter
 +  return texture
 +}
++
 +export function start(container) {
 +  if (animationId) return
++
 +  // Scene
 +  scene = new THREE.Scene()
 +  scene.background = new THREE.Color(0x55a04b)
++
 +  // Camera
 +  const aspect = window.innerWidth / window.innerHeight
 +  const frustumSize = 12
 +  camera = new THREE.OrthographicCamera(
 +    -frustumSize * aspect / 2,
 +    frustumSize * aspect / 2,
 +    frustumSize / 2,
 +    -frustumSize / 2,
 +    0.1,
 +    100
 +  )
 +  camera.position.set(10, 10, 10)
 +  camera.lookAt(0, 0, 0)
++
 +  // Renderer
 +  renderer = new THREE.WebGLRenderer({ antialias: true })
 +  renderer.setSize(window.innerWidth, window.innerHeight)
 +  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
 +  container.appendChild(renderer.domElement)
++
 +  // Lighting
 +  const sunLight = new THREE.DirectionalLight(0xffffee, 1.5)
 +  sunLight.position.set(5, 10, 5)
 +  scene.add(sunLight)
++
 +  const hemiLight = new THREE.HemisphereLight(0x87ceeb, 0x55a04b, 0.6)
 +  scene.add(hemiLight)
++
 +  const fillLight = new THREE.DirectionalLight(0xffffff, 0.3)
 +  fillLight.position.set(-5, 5, -5)
 +  scene.add(fillLight)
++
 +  const toonGradient = createToonGradient()
++
 +  // Create objects
 +  pond = createPond(scene, toonGradient)
 +  doug = createDoug(scene, toonGradient)
 +  breadManager = new BreadManager(scene, toonGradient)
++
 +  // Post-processing
 +  composer = new EffectComposer(renderer)
 +  composer.addPass(new RenderPass(scene, camera))
++
 +  outlinePass = new OutlinePass(
 +    new THREE.Vector2(window.innerWidth, window.innerHeight),
 +    scene,
 +    camera
 +  )
 +  outlinePass.edgeStrength = 3
 +  outlinePass.edgeGlow = 0
 +  outlinePass.edgeThickness = 1.5
 +  outlinePass.visibleEdgeColor.set(0x191410)
 +  outlinePass.hiddenEdgeColor.set(0x191410)
 +  outlinePass.selectedObjects = [doug.group, pond.group]
 +  composer.addPass(outlinePass)
 +  composer.addPass(new OutputPass())
++
 +  // Raycaster
 +  const raycaster = new THREE.Raycaster()
 +  const mouse = new THREE.Vector2()
++
 +  renderer.domElement.addEventListener('click', (event) => {
 +    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
 +    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
++
 +    raycaster.setFromCamera(mouse, camera)
 +    const intersects = raycaster.intersectObject(pond.water)
++
 +    if (intersects.length > 0) {
 +      const point = intersects[0].point
 +      breadManager.spawnBread(point.x, point.z)
 +      pond.addRipple(point.x, point.z)
 +      outlinePass.selectedObjects = [doug.group, pond.group, ...breadManager.getMeshes()]
 +    }
 +  })
++
 +  // Resize handler
 +  window.addEventListener('resize', onResize)
++
 +  clock = new THREE.Clock()
 +  animate()
 +}
++
 +function onResize() {
 +  const aspect = window.innerWidth / window.innerHeight
 +  const frustumSize = 12
 +  camera.left = -frustumSize * aspect / 2
 +  camera.right = frustumSize * aspect / 2
 +  camera.top = frustumSize / 2
 +  camera.bottom = -frustumSize / 2
 +  camera.updateProjectionMatrix()
++
 +  renderer.setSize(window.innerWidth, window.innerHeight)
 +  composer.setSize(window.innerWidth, window.innerHeight)
 +}
++
 +function animate() {
 +  animationId = requestAnimationFrame(animate)
++
 +  const delta = clock.getDelta()
 +  const elapsed = clock.getElapsedTime()
++
 +  doug.update(delta, elapsed, breadManager.getActiveBits(), pond)
 +  breadManager.update(delta, elapsed)
 +  pond.update(delta, elapsed)
++
 +  composer.render()
 +}
++
 +export function stop() {
 +  if (animationId) {
 +    cancelAnimationFrame(animationId)
 +    animationId = null
 +  }
++
 +  window.removeEventListener('resize', onResize)
++
 +  if (renderer) {
 +    renderer.domElement.remove()
 +    renderer.dispose()
 +  }
++
 +  if (composer) {
 +    composer.dispose()
 +  }
++
 +  scene = null
 +  camera = null
 +  renderer = null
 +  composer = null
 +  doug = null
 +  pond = null
 +  breadManager = null
 +}
++
 +export const name = '3D'

src/renderers/three/main.jsadded

 +// dougk - a cozy pond simulator featuring Doug the duck
 +// Three.js version with Wind Waker cel-shading
++
 +import * as THREE from 'three'
 +import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'
 +import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'
 +import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js'
 +import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'
 +import { createDoug } from './duck.js'
 +import { createPond } from './pond.js'
 +import { BreadManager } from './bread.js'
++
 +// Scene setup
 +const scene = new THREE.Scene()
 +scene.background = new THREE.Color(0x55a04b) // Vibrant grass green
++
 +// Isometric-style orthographic camera
 +const aspect = window.innerWidth / window.innerHeight
 +const frustumSize = 12
 +const camera = new THREE.OrthographicCamera(
 +  -frustumSize * aspect / 2,
 +  frustumSize * aspect / 2,
 +  frustumSize / 2,
 +  -frustumSize / 2,
 +  0.1,
 +  100
 +)
++
 +// Classic isometric angle
 +camera.position.set(10, 10, 10)
 +camera.lookAt(0, 0, 0)
++
 +// Renderer
 +const renderer = new THREE.WebGLRenderer({ antialias: true })
 +renderer.setSize(window.innerWidth, window.innerHeight)
 +renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
 +document.body.appendChild(renderer.domElement)
++
 +// Cel-shading lighting setup
 +// Main directional light (sun)
 +const sunLight = new THREE.DirectionalLight(0xffffee, 1.5)
 +sunLight.position.set(5, 10, 5)
 +scene.add(sunLight)
++
 +// Hemisphere light for ambient (sky/ground colors like Wind Waker)
 +const hemiLight = new THREE.HemisphereLight(0x87ceeb, 0x55a04b, 0.6)
 +scene.add(hemiLight)
++
 +// Subtle fill light
 +const fillLight = new THREE.DirectionalLight(0xffffff, 0.3)
 +fillLight.position.set(-5, 5, -5)
 +scene.add(fillLight)
++
 +// Create gradient texture for toon shading
 +function createToonGradient() {
 +  const canvas = document.createElement('canvas')
 +  canvas.width = 4
 +  canvas.height = 1
 +  const ctx = canvas.getContext('2d')
++
 +  // 3-step gradient for Wind Waker style
 +  ctx.fillStyle = '#444444'
 +  ctx.fillRect(0, 0, 1, 1)
 +  ctx.fillStyle = '#888888'
 +  ctx.fillRect(1, 0, 1, 1)
 +  ctx.fillStyle = '#cccccc'
 +  ctx.fillRect(2, 0, 1, 1)
 +  ctx.fillStyle = '#ffffff'
 +  ctx.fillRect(3, 0, 1, 1)
++
 +  const texture = new THREE.CanvasTexture(canvas)
 +  texture.minFilter = THREE.NearestFilter
 +  texture.magFilter = THREE.NearestFilter
 +  return texture
 +}
++
 +const toonGradient = createToonGradient()
++
 +// Create the pond
 +const pond = createPond(scene, toonGradient)
++
 +// Create Doug the duck
 +const doug = createDoug(scene, toonGradient)
++
 +// Bread manager
 +const breadManager = new BreadManager(scene, toonGradient)
++
 +// Post-processing for outlines
 +const composer = new EffectComposer(renderer)
 +const renderPass = new RenderPass(scene, camera)
 +composer.addPass(renderPass)
++
 +// Outline pass for that bold Wind Waker look
 +const outlinePass = new OutlinePass(
 +  new THREE.Vector2(window.innerWidth, window.innerHeight),
 +  scene,
 +  camera
 +)
 +outlinePass.edgeStrength = 3
 +outlinePass.edgeGlow = 0
 +outlinePass.edgeThickness = 1.5
 +outlinePass.visibleEdgeColor.set(0x191410)
 +outlinePass.hiddenEdgeColor.set(0x191410)
 +outlinePass.selectedObjects = [doug.group, pond.group, ...breadManager.getMeshes()]
 +composer.addPass(outlinePass)
++
 +const outputPass = new OutputPass()
 +composer.addPass(outputPass)
++
 +// Raycaster for mouse interaction
 +const raycaster = new THREE.Raycaster()
 +const mouse = new THREE.Vector2()
++
 +// Handle clicks for bread dropping
 +renderer.domElement.addEventListener('click', (event) => {
 +  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
 +  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
++
 +  raycaster.setFromCamera(mouse, camera)
 +  const intersects = raycaster.intersectObject(pond.water)
++
 +  if (intersects.length > 0) {
 +    const point = intersects[0].point
 +    breadManager.spawnBread(point.x, point.z)
 +    pond.addRipple(point.x, point.z)
++
 +    // Update outline objects
 +    outlinePass.selectedObjects = [doug.group, pond.group, ...breadManager.getMeshes()]
 +  }
 +})
++
 +// Handle window resize
 +window.addEventListener('resize', () => {
 +  const aspect = window.innerWidth / window.innerHeight
 +  camera.left = -frustumSize * aspect / 2
 +  camera.right = frustumSize * aspect / 2
 +  camera.top = frustumSize / 2
 +  camera.bottom = -frustumSize / 2
 +  camera.updateProjectionMatrix()
++
 +  renderer.setSize(window.innerWidth, window.innerHeight)
 +  composer.setSize(window.innerWidth, window.innerHeight)
 +})
++
 +// Animation loop
 +const clock = new THREE.Clock()
++
 +function animate() {
 +  requestAnimationFrame(animate)
++
 +  const delta = clock.getDelta()
 +  const elapsed = clock.getElapsedTime()
++
 +  // Update Doug
 +  doug.update(delta, elapsed, breadManager.getActiveBits(), pond)
++
 +  // Update bread
 +  breadManager.update(delta, elapsed)
++
 +  // Update pond (ripples, etc)
 +  pond.update(delta, elapsed)
++
 +  // Render with post-processing
 +  composer.render()
 +}
++
 +animate()

src/renderers/three/pond.jsadded

 +// Pond environment - 3D water, shore, and fence with Wind Waker styling
 +import * as THREE from 'three'
++
 +export function createPond(scene, gradientMap) {
 +  const group = new THREE.Group()
 +  const radius = 4
++
 +  // Colors
 +  const waterColor = 0x46a0be // Vibrant teal
 +  const waterDeep = 0x2d7a94 // Darker teal
 +  const shoreColor = 0x78b456 // Bright grass green
 +  const sandColor = 0xc8b080 // Sandy edge
 +  const fenceColor = 0xb4823c // Warm wood
++
 +  // Materials
 +  const waterMaterial = new THREE.MeshToonMaterial({
 +    color: waterColor,
 +    gradientMap: gradientMap,
 +    transparent: true,
 +    opacity: 0.9
 +  })
++
 +  const shoreMaterial = new THREE.MeshToonMaterial({
 +    color: shoreColor,
 +    gradientMap: gradientMap
 +  })
++
 +  const sandMaterial = new THREE.MeshToonMaterial({
 +    color: sandColor,
 +    gradientMap: gradientMap
 +  })
++
 +  const fenceMaterial = new THREE.MeshToonMaterial({
 +    color: fenceColor,
 +    gradientMap: gradientMap
 +  })
++
 +  // Ground plane (grass)
 +  const groundGeom = new THREE.CircleGeometry(radius + 2.5, 32)
 +  groundGeom.rotateX(-Math.PI / 2)
 +  const ground = new THREE.Mesh(groundGeom, shoreMaterial)
 +  ground.position.y = -0.05
 +  group.add(ground)
++
 +  // Sandy shore ring
 +  const sandGeom = new THREE.RingGeometry(radius - 0.2, radius + 0.5, 32)
 +  sandGeom.rotateX(-Math.PI / 2)
 +  const sand = new THREE.Mesh(sandGeom, sandMaterial)
 +  sand.position.y = -0.02
 +  group.add(sand)
++
 +  // Water surface
 +  const waterGeom = new THREE.CircleGeometry(radius, 32)
 +  waterGeom.rotateX(-Math.PI / 2)
 +  const water = new THREE.Mesh(waterGeom, waterMaterial)
 +  water.position.y = 0
 +  group.add(water)
++
 +  // Water depth visual (darker center)
 +  const deepGeom = new THREE.CircleGeometry(radius * 0.6, 24)
 +  deepGeom.rotateX(-Math.PI / 2)
 +  const deepMaterial = new THREE.MeshToonMaterial({
 +    color: waterDeep,
 +    gradientMap: gradientMap,
 +    transparent: true,
 +    opacity: 0.5
 +  })
 +  const deep = new THREE.Mesh(deepGeom, deepMaterial)
 +  deep.position.y = -0.01
 +  group.add(deep)
++
 +  // Water highlight (light reflection)
 +  const highlightGeom = new THREE.CircleGeometry(radius * 0.3, 16)
 +  highlightGeom.rotateX(-Math.PI / 2)
 +  const highlightMaterial = new THREE.MeshBasicMaterial({
 +    color: 0x88d4e8,
 +    transparent: true,
 +    opacity: 0.4
 +  })
 +  const highlight = new THREE.Mesh(highlightGeom, highlightMaterial)
 +  highlight.position.set(-radius * 0.35, 0.02, -radius * 0.35)
 +  group.add(highlight)
++
 +  // Grass tufts around the pond
 +  const grassTuftGeom = new THREE.ConeGeometry(0.15, 0.3, 4)
 +  const grassMaterial = new THREE.MeshToonMaterial({
 +    color: 0x4a8530,
 +    gradientMap: gradientMap
 +  })
++
 +  for (let i = 0; i < 30; i++) {
 +    const angle = Math.random() * Math.PI * 2
 +    const dist = radius + 0.8 + Math.random() * 1.5
++
 +    const tuft = new THREE.Mesh(grassTuftGeom, grassMaterial)
 +    tuft.position.set(
 +      Math.cos(angle) * dist,
 +      0.1,
 +      Math.sin(angle) * dist
 +    )
 +    tuft.rotation.x = (Math.random() - 0.5) * 0.3
 +    tuft.rotation.z = (Math.random() - 0.5) * 0.3
 +    tuft.scale.setScalar(0.5 + Math.random() * 0.5)
 +    group.add(tuft)
 +  }
++
 +  // Rickety fence
 +  const fenceGroup = new THREE.Group()
 +  const fenceX = radius + 1
 +  const postCount = 5
 +  const postSpacing = 0.8
++
 +  for (let i = 0; i < postCount; i++) {
 +    const wobble = Math.sin(i * 1.5) * 0.1
++
 +    // Fence post
 +    const postGeom = new THREE.BoxGeometry(0.12, 0.8, 0.12)
 +    const post = new THREE.Mesh(postGeom, fenceMaterial)
 +    post.position.set(
 +      fenceX + wobble,
 +      0.35,
 +      -1.5 + i * postSpacing
 +    )
 +    post.rotation.x = wobble * 0.3
 +    post.rotation.z = wobble * 0.5
 +    fenceGroup.add(post)
++
 +    // Post cap
 +    const capGeom = new THREE.BoxGeometry(0.16, 0.06, 0.16)
 +    const cap = new THREE.Mesh(capGeom, fenceMaterial)
 +    cap.position.set(
 +      fenceX + wobble,
 +      0.78,
 +      -1.5 + i * postSpacing
 +    )
 +    cap.rotation.x = wobble * 0.3
 +    cap.rotation.z = wobble * 0.5
 +    fenceGroup.add(cap)
 +  }
++
 +  // Horizontal rails
 +  const railGeom = new THREE.BoxGeometry(0.08, 0.08, postSpacing * (postCount - 1) + 0.3)
++
 +  const topRail = new THREE.Mesh(railGeom, fenceMaterial)
 +  topRail.position.set(fenceX + 0.05, 0.6, -1.5 + (postCount - 1) * postSpacing / 2)
 +  topRail.rotation.y = 0.02
 +  fenceGroup.add(topRail)
++
 +  const bottomRail = new THREE.Mesh(railGeom, fenceMaterial)
 +  bottomRail.position.set(fenceX - 0.03, 0.25, -1.5 + (postCount - 1) * postSpacing / 2)
 +  bottomRail.rotation.y = -0.03
 +  fenceGroup.add(bottomRail)
++
 +  group.add(fenceGroup)
++
 +  // Ripple system
 +  const ripples = []
 +  const rippleGeom = new THREE.RingGeometry(0.1, 0.15, 16)
 +  rippleGeom.rotateX(-Math.PI / 2)
++
 +  function addRipple(x, z) {
 +    const rippleMaterial = new THREE.MeshBasicMaterial({
 +      color: 0xffffff,
 +      transparent: true,
 +      opacity: 0.6,
 +      side: THREE.DoubleSide
 +    })
 +    const ripple = new THREE.Mesh(rippleGeom.clone(), rippleMaterial)
 +    ripple.position.set(x, 0.02, z)
++
 +    group.add(ripple)
 +    ripples.push({
 +      mesh: ripple,
 +      age: 0,
 +      maxAge: 1.5
 +    })
 +  }
++
 +  function update(delta, elapsed) {
 +    // Animate water highlight
 +    highlight.position.x = -radius * 0.35 + Math.sin(elapsed * 0.5) * 0.2
 +    highlight.position.z = -radius * 0.35 + Math.cos(elapsed * 0.5) * 0.2
++
 +    // Update ripples
 +    for (let i = ripples.length - 1; i >= 0; i--) {
 +      const ripple = ripples[i]
 +      ripple.age += delta
++
 +      const progress = ripple.age / ripple.maxAge
 +      ripple.mesh.scale.setScalar(1 + progress * 3)
 +      ripple.mesh.material.opacity = 0.6 * (1 - progress)
++
 +      if (ripple.age >= ripple.maxAge) {
 +        group.remove(ripple.mesh)
 +        ripple.mesh.geometry.dispose()
 +        ripple.mesh.material.dispose()
 +        ripples.splice(i, 1)
 +      }
 +    }
 +  }
++
 +  scene.add(group)
++
 +  return {
 +    group,
 +    water,
 +    radius,
 +    addRipple,
 +    update
 +  }
 +}

vite.config.jsadded

 +import { defineConfig } from 'vite'
++
 +export default defineConfig({
 +  root: '.',
 +  publicDir: 'assets',
 +  build: {
 +    outDir: 'dist'
 +  }
 +})