@prismer/runtime 2.2.55 → 2.2.63

package/built-in-skills/prismer-p5js/references/webgl-and-3d.md

@@ -0,0 +1,423 @@
+# WebGL and 3D
+
+## WebGL Mode Setup
+
+```javascript
+function setup() {
+  createCanvas(1920, 1080, WEBGL);
+  // Origin is CENTER, not top-left
+  // Y-axis points UP (opposite of 2D mode)
+  // Z-axis points toward viewer
+}
+```
+
+### Coordinate Conversion (WEBGL to P2D-like)
+
+```javascript
+function draw() {
+  translate(-width/2, -height/2);  // shift origin to top-left
+  // Now coordinates work like P2D
+}
+```
+
+## 3D Primitives
+
+```javascript
+box(w, h, d);             // rectangular prism
+sphere(radius, detailX, detailY);
+cylinder(radius, height, detailX, detailY);
+cone(radius, height, detailX, detailY);
+torus(radius, tubeRadius, detailX, detailY);
+plane(width, height);     // flat rectangle
+ellipsoid(rx, ry, rz);    // stretched sphere
+```
+
+### 3D Transforms
+
+```javascript
+push();
+  translate(x, y, z);
+  rotateX(angleX);
+  rotateY(angleY);
+  rotateZ(angleZ);
+  scale(s);
+  box(100);
+pop();
+```
+
+## Camera
+
+### Default Camera
+
+```javascript
+camera(
+  eyeX, eyeY, eyeZ,       // camera position
+  centerX, centerY, centerZ, // look-at target
+  upX, upY, upZ             // up direction
+);
+
+// Default: camera(0, 0, (height/2)/tan(PI/6), 0, 0, 0, 0, 1, 0)
+```
+
+### Orbit Control
+
+```javascript
+function draw() {
+  orbitControl();  // mouse drag to rotate, scroll to zoom
+  box(200);
+}
+```
+
+### createCamera
+
+```javascript
+let cam;
+
+function setup() {
+  createCanvas(800, 800, WEBGL);
+  cam = createCamera();
+  cam.setPosition(300, -200, 500);
+  cam.lookAt(0, 0, 0);
+}
+
+// Camera methods
+cam.setPosition(x, y, z);
+cam.lookAt(x, y, z);
+cam.move(dx, dy, dz);      // relative to camera orientation
+cam.pan(angle);              // horizontal rotation
+cam.tilt(angle);             // vertical rotation
+cam.roll(angle);             // z-axis rotation
+cam.slerp(otherCam, t);     // smooth interpolation between cameras
+```
+
+### Perspective and Orthographic
+
+```javascript
+// Perspective (default)
+perspective(fov, aspect, near, far);
+// fov: field of view in radians (PI/3 default)
+// aspect: width/height
+// near/far: clipping planes
+
+// Orthographic (no depth foreshortening)
+ortho(-width/2, width/2, -height/2, height/2, 0, 2000);
+```
+
+## Lighting
+
+```javascript
+// Ambient (uniform, no direction)
+ambientLight(50, 50, 50);     // dim fill light
+
+// Directional (parallel rays, like sun)
+directionalLight(255, 255, 255, 0, -1, 0);  // color + direction
+
+// Point (radiates from position)
+pointLight(255, 200, 150, 200, -300, 400);   // color + position
+
+// Spot (cone from position toward target)
+spotLight(255, 255, 255,       // color
+          0, -300, 300,         // position
+          0, 1, -1,             // direction
+          PI / 4, 5);           // angle, concentration
+
+// Image-based lighting
+imageLight(myHDRI);
+
+// No lights (flat shading)
+noLights();
+
+// Quick default lighting
+lights();
+```
+
+### Three-Point Lighting Setup
+
+```javascript
+function setupLighting() {
+  ambientLight(30, 30, 40);                    // dim blue fill
+
+  // Key light (main, warm)
+  directionalLight(255, 240, 220, -1, -1, -1);
+
+  // Fill light (softer, cooler, opposite side)
+  directionalLight(80, 100, 140, 1, -0.5, -1);
+
+  // Rim light (behind subject, for edge definition)
+  pointLight(200, 200, 255, 0, -200, -400);
+}
+```
+
+## Materials
+
+```javascript
+// Normal material (debug — colors from surface normals)
+normalMaterial();
+
+// Ambient (responds only to ambientLight)
+ambientMaterial(200, 100, 100);
+
+// Emissive (self-lit, no shadows)
+emissiveMaterial(255, 0, 100);
+
+// Specular (shiny reflections)
+specularMaterial(255);
+shininess(50);                // 1-200 (higher = tighter highlight)
+metalness(100);               // 0-200 (metallic reflection)
+
+// Fill works too (no lighting response)
+fill(255, 0, 0);
+```
+
+### Texture
+
+```javascript
+let img;
+function preload() { img = loadImage('texture.jpg'); }
+
+function draw() {
+  texture(img);
+  textureMode(NORMAL);  // UV coords 0-1
+  // textureMode(IMAGE); // UV coords in pixels
+  textureWrap(REPEAT);  // or CLAMP, MIRROR
+  box(200);
+}
+```
+
+## Custom Geometry
+
+### buildGeometry
+
+```javascript
+let myShape;
+
+function setup() {
+  createCanvas(800, 800, WEBGL);
+  myShape = buildGeometry(() => {
+    for (let i = 0; i < 50; i++) {
+      push();
+      translate(random(-200, 200), random(-200, 200), random(-200, 200));
+      sphere(10);
+      pop();
+    }
+  });
+}
+
+function draw() {
+  model(myShape);  // renders once-built geometry efficiently
+}
+```
+
+### beginGeometry / endGeometry
+
+```javascript
+beginGeometry();
+  // draw shapes here
+  box(50);
+  translate(100, 0, 0);
+  sphere(30);
+let geo = endGeometry();
+
+model(geo);  // reuse
+```
+
+### Manual Geometry (p5.Geometry)
+
+```javascript
+let geo = new p5.Geometry(detailX, detailY, function() {
+  for (let i = 0; i <= detailX; i++) {
+    for (let j = 0; j <= detailY; j++) {
+      let u = i / detailX;
+      let v = j / detailY;
+      let x = cos(u * TWO_PI) * (100 + 30 * cos(v * TWO_PI));
+      let y = sin(u * TWO_PI) * (100 + 30 * cos(v * TWO_PI));
+      let z = 30 * sin(v * TWO_PI);
+      this.vertices.push(createVector(x, y, z));
+      this.uvs.push(u, v);
+    }
+  }
+  this.computeFaces();
+  this.computeNormals();
+});
+```
+
+## GLSL Shaders
+
+### createShader (Vertex + Fragment)
+
+```javascript
+let myShader;
+
+function setup() {
+  createCanvas(800, 800, WEBGL);
+
+  let vert = `
+    precision mediump float;
+    attribute vec3 aPosition;
+    attribute vec2 aTexCoord;
+    varying vec2 vTexCoord;
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+    void main() {
+      vTexCoord = aTexCoord;
+      vec4 pos = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+      gl_Position = pos;
+    }
+  `;
+
+  let frag = `
+    precision mediump float;
+    varying vec2 vTexCoord;
+    uniform float uTime;
+    uniform vec2 uResolution;
+
+    void main() {
+      vec2 uv = vTexCoord;
+      vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));
+      gl_FragColor = vec4(col, 1.0);
+    }
+  `;
+
+  myShader = createShader(vert, frag);
+}
+
+function draw() {
+  shader(myShader);
+  myShader.setUniform('uTime', millis() / 1000.0);
+  myShader.setUniform('uResolution', [width, height]);
+  rect(0, 0, width, height);
+  resetShader();
+}
+```
+
+### createFilterShader (Post-Processing)
+
+Simpler — only needs a fragment shader. Automatically gets the canvas as a texture.
+
+```javascript
+let blurShader;
+
+function setup() {
+  createCanvas(800, 800, WEBGL);
+
+  blurShader = createFilterShader(`
+    precision mediump float;
+    varying vec2 vTexCoord;
+    uniform sampler2D tex0;
+    uniform vec2 texelSize;
+
+    void main() {
+      vec4 sum = vec4(0.0);
+      for (int x = -2; x <= 2; x++) {
+        for (int y = -2; y <= 2; y++) {
+          sum += texture2D(tex0, vTexCoord + vec2(float(x), float(y)) * texelSize);
+        }
+      }
+      gl_FragColor = sum / 25.0;
+    }
+  `);
+}
+
+function draw() {
+  // Draw scene normally
+  background(0);
+  fill(255, 0, 0);
+  sphere(100);
+
+  // Apply post-processing filter
+  filter(blurShader);
+}
+```
+
+### Common Shader Uniforms
+
+```javascript
+myShader.setUniform('uTime', millis() / 1000.0);
+myShader.setUniform('uResolution', [width, height]);
+myShader.setUniform('uMouse', [mouseX / width, mouseY / height]);
+myShader.setUniform('uTexture', myGraphics);  // pass p5.Graphics as texture
+myShader.setUniform('uValue', 0.5);           // float
+myShader.setUniform('uColor', [1.0, 0.0, 0.5, 1.0]); // vec4
+```
+
+### Shader Recipes
+
+**Chromatic Aberration:**
+```glsl
+vec4 r = texture2D(tex0, vTexCoord + vec2(0.005, 0.0));
+vec4 g = texture2D(tex0, vTexCoord);
+vec4 b = texture2D(tex0, vTexCoord - vec2(0.005, 0.0));
+gl_FragColor = vec4(r.r, g.g, b.b, 1.0);
+```
+
+**Vignette:**
+```glsl
+float d = distance(vTexCoord, vec2(0.5));
+float v = smoothstep(0.7, 0.4, d);
+gl_FragColor = texture2D(tex0, vTexCoord) * v;
+```
+
+**Scanlines:**
+```glsl
+float scanline = sin(vTexCoord.y * uResolution.y * 3.14159) * 0.04;
+vec4 col = texture2D(tex0, vTexCoord);
+gl_FragColor = col - scanline;
+```
+
+## Framebuffers
+
+```javascript
+let fbo;
+
+function setup() {
+  createCanvas(800, 800, WEBGL);
+  fbo = createFramebuffer();
+}
+
+function draw() {
+  // Render to framebuffer
+  fbo.begin();
+  clear();
+  rotateY(frameCount * 0.01);
+  box(200);
+  fbo.end();
+
+  // Use framebuffer as texture
+  texture(fbo.color);
+  plane(width, height);
+}
+```
+
+### Multi-Pass Rendering
+
+```javascript
+let sceneBuffer, blurBuffer;
+
+function setup() {
+  createCanvas(800, 800, WEBGL);
+  sceneBuffer = createFramebuffer();
+  blurBuffer = createFramebuffer();
+}
+
+function draw() {
+  // Pass 1: render scene
+  sceneBuffer.begin();
+  clear();
+  lights();
+  rotateY(frameCount * 0.01);
+  box(200);
+  sceneBuffer.end();
+
+  // Pass 2: blur
+  blurBuffer.begin();
+  shader(blurShader);
+  blurShader.setUniform('uTexture', sceneBuffer.color);
+  rect(0, 0, width, height);
+  resetShader();
+  blurBuffer.end();
+
+  // Final: composite
+  texture(blurBuffer.color);
+  plane(width, height);
+}
+```

package/built-in-skills/prismer-p5js/scripts/export-frames.js

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+'use strict';
+// Run only reviewed sketches in a task-isolated host with no tenant credentials.
+// Remote assets are blocked: vendor the exact p5 build and authorized assets.
+const path = require('path');
+const fs = require('fs');
+const { fileURLToPath, pathToFileURL } = require('url');
+
+function parseArgs(args = process.argv.slice(2)) {
+  const opts = { input: null, output: './frames', width: 1920, height: 1080,
+    frames: 1, fps: 30, wait: 2000, selector: 'canvas' };
+  const numeric = new Set(['width', 'height', 'frames', 'fps', 'wait']);
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg.startsWith('--')) {
+      const key = arg.slice(2);
+      if (!(key in opts) || key === 'input' || !args[i + 1] || args[i + 1].startsWith('--'))
+        throw new Error('Unknown option or missing value: ' + arg);
+      opts[key] = numeric.has(key) ? Number(args[++i]) : args[++i];
+    } else if (opts.input === null) opts.input = arg;
+    else throw new Error('Unexpected argument: ' + arg);
+  }
+  if (!opts.input) throw new Error('Usage: export-frames.js sketch.html [options]');
+  for (const key of numeric) {
+    if (!Number.isFinite(opts[key]) || opts[key] < (key === 'wait' ? 0 : 1))
+      throw new Error('Invalid ' + key);
+  }
+  for (const key of ['width', 'height', 'frames'])
+    if (!Number.isSafeInteger(opts[key])) throw new Error('Expected integer ' + key);
+  if (opts.width > 8192 || opts.height > 8192 || opts.frames > 18000 || opts.fps > 120 || opts.wait > 30000)
+    throw new Error('Capture exceeds resource limit');
+  return opts;
+}
+
+function inside(root, filename) {
+  const relative = path.relative(root, filename);
+  return relative === '' || (!relative.startsWith('..' + path.sep) && relative !== '..' && !path.isAbsolute(relative));
+}
+
+async function capture(opts, puppeteer = require('puppeteer')) {
+  const inputPath = fs.realpathSync(opts.input);
+  const assetRoot = path.dirname(inputPath);
+  const output = path.resolve(opts.output);
+  fs.mkdirSync(output, { recursive: true });
+  // Do not mix a new sequence with stale frames or overwrite existing assets.
+  if (fs.readdirSync(output).length) throw new Error('Output directory must be empty');
+  const browser = await puppeteer.launch({ headless: true });
+  try {
+    const page = await browser.newPage();
+    await page.setViewport({ width: opts.width, height: opts.height, deviceScaleFactor: 1 });
+    await page.setRequestInterception(true);
+    page.on('request', request => {
+      let allowed = false;
+      try {
+        const url = new URL(request.url());
+        allowed = url.protocol === 'data:' || url.protocol === 'blob:' ||
+          (url.protocol === 'file:' && inside(assetRoot, fs.realpathSync(fileURLToPath(url))));
+      } catch { /* Invalid, missing or escaping assets stay blocked. */ }
+      (allowed ? request.continue() : request.abort()).catch(() => {});
+    });
+    await page.goto(pathToFileURL(inputPath).href, { waitUntil: 'networkidle0', timeout: 30000 });
+    await page.waitForSelector(opts.selector, { timeout: 10000 });
+    await page.waitForFunction('window._p5Ready === true', { timeout: 10000 });
+    for (let i = 0; i < opts.frames; i++) {
+      // An explicit hook supports both global and instance-mode p5, and fixed time.
+      await page.evaluate(async ({ frame, fps }) => {
+        if (typeof window.renderExportFrame !== 'function')
+          throw new Error('Sketch must expose renderExportFrame(frame, seconds)');
+        await window.renderExportFrame(frame, frame / fps);
+        await new Promise(resolve => requestAnimationFrame(resolve));
+      }, { frame: i, fps: opts.fps });
+      const canvas = await page.$(opts.selector);
+      if (!canvas) throw new Error('Canvas element not found');
+      const size = await canvas.evaluate(node => ({ width: node.width, height: node.height }));
+      if (size.width !== opts.width || size.height !== opts.height)
+        throw new Error('Canvas backing dimensions do not match requested output');
+      await canvas.screenshot({ path: path.join(output, 'frame-' + String(i).padStart(4, '0') + '.png'), type: 'png' });
+    }
+    console.log('Done: ' + opts.frames + ' verified frames');
+  } finally {
+    await browser.close();
+  }
+}
+
+if (require.main === module) {
+  Promise.resolve().then(() => capture(parseArgs())).catch(error => {
+    console.error('Capture failed:', error.message);
+    process.exitCode = 1;
+  });
+}
+module.exports = { parseArgs, capture, inside };

package/built-in-skills/prismer-p5js/scripts/render.sh

@@ -0,0 +1,113 @@
+#!/bin/bash
+# p5.js Skill — Headless Render Pipeline
+# Renders a p5.js sketch to MP4 video via Puppeteer + ffmpeg
+#
+# Usage:
+#   bash scripts/render.sh sketch.html output.mp4 [options]
+#
+# Options:
+#   --width    Canvas width (default: 1920)
+#   --height   Canvas height (default: 1080)
+#   --fps      Frames per second (default: 30)
+#   --duration Duration in seconds (default: 10)
+#   --quality  CRF value 0-51 (default: 18, lower = better)
+#   --frames-only  Only export frames, skip MP4 encoding
+#
+# Examples:
+#   bash scripts/render.sh sketch.html output.mp4
+#   bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 60
+#   bash scripts/render.sh sketch.html output.mp4 --width 3840 --height 2160
+
+set -euo pipefail
+
+# Defaults
+WIDTH=1920
+HEIGHT=1080
+FPS=30
+DURATION=10
+CRF=18
+FRAMES_ONLY=false
+
+# Parse arguments
+INPUT="${1:?Usage: render.sh <input.html> <output.mp4> [options]}"
+OUTPUT="${2:?Usage: render.sh <input.html> <output.mp4> [options]}"
+shift 2
+
+while [[ $# -gt 0 ]]; do
+  if [[ "$1" != --frames-only && $# -lt 2 ]]; then echo "Missing option value" >&2; exit 1; fi
+  case $1 in
+    --width) WIDTH="$2"; shift 2 ;;
+    --height) HEIGHT="$2"; shift 2 ;;
+    --fps) FPS="$2"; shift 2 ;;
+    --duration) DURATION="$2"; shift 2 ;;
+    --quality) CRF="$2"; shift 2 ;;
+    --frames-only) FRAMES_ONLY=true; shift ;;
+    *) echo "Unknown option: $1"; exit 1 ;;
+  esac
+done
+
+command -v node >/dev/null 2>&1 || { echo "Node.js required" >&2; exit 1; }
+TOTAL_FRAMES=$(node -e 'const [f,d,w,h,q]=process.argv.slice(1).map(Number); if(![f,d,w,h,q].every(Number.isFinite)||f<=0||f>120||d<=0||w<=0||h<=0||w%2||h%2||q<0||q>51||!Number.isInteger(q)||Math.ceil(f*d)>18000)process.exit(1); console.log(Math.ceil(f*d))' "$FPS" "$DURATION" "$WIDTH" "$HEIGHT" "$CRF")
+if [[ -e "$OUTPUT" ]]; then echo "Output already exists: $OUTPUT" >&2; exit 1; fi
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+FRAME_DIR=$(mktemp -d)
+trap 'rm -rf -- "$FRAME_DIR"' EXIT
+
+echo "=== p5.js Render Pipeline ==="
+echo "Input:      $INPUT"
+echo "Output:     $OUTPUT"
+echo "Resolution: ${WIDTH}x${HEIGHT}"
+echo "FPS:        $FPS"
+echo "Duration:   ${DURATION}s (${TOTAL_FRAMES} frames)"
+echo "Quality:    CRF $CRF"
+echo "Frame dir:  $FRAME_DIR"
+echo ""
+
+# Check dependencies
+command -v node >/dev/null 2>&1 || { echo "Error: Node.js required"; exit 1; }
+if [ "$FRAMES_ONLY" = false ]; then
+  command -v ffmpeg >/dev/null 2>&1 || { echo "Error: ffmpeg required for MP4"; exit 1; }
+fi
+
+# Step 1: Capture frames via Puppeteer
+echo "Step 1/2: Capturing ${TOTAL_FRAMES} frames..."
+node "$SCRIPT_DIR/export-frames.js" \
+  "$INPUT" \
+  --output "$FRAME_DIR" \
+  --width "$WIDTH" \
+  --height "$HEIGHT" \
+  --frames "$TOTAL_FRAMES" \
+  --fps "$FPS"
+
+echo "Frames captured to $FRAME_DIR"
+
+if [ "$FRAMES_ONLY" = true ]; then
+  trap - EXIT
+  echo "Frames saved to: $FRAME_DIR"
+  echo "To encode manually:"
+  echo "  ffmpeg -framerate $FPS -i $FRAME_DIR/frame-%04d.png -c:v libx264 -crf $CRF -pix_fmt yuv420p $OUTPUT"
+  exit 0
+fi
+
+# Step 2: Encode to MP4
+echo "Step 2/2: Encoding MP4..."
+ffmpeg -n \
+  -framerate "$FPS" \
+  -i "$FRAME_DIR/frame-%04d.png" \
+  -c:v libx264 \
+  -preset slow \
+  -crf "$CRF" \
+  -pix_fmt yuv420p \
+  -movflags +faststart \
+  "$OUTPUT" \
+  2>"$FRAME_DIR/ffmpeg.log"
+
+# Cleanup
+rm -rf "$FRAME_DIR"
+
+# Report
+FILE_SIZE=$(ls -lh "$OUTPUT" | awk '{print $5}')
+echo ""
+echo "=== Done ==="
+echo "Output: $OUTPUT ($FILE_SIZE)"
+echo "Duration: ${DURATION}s at ${FPS}fps, ${WIDTH}x${HEIGHT}"

package/built-in-skills/prismer-p5js/scripts/serve.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+# p5.js Skill — Local Development Server
+# Serves the current directory over HTTP for loading local assets (fonts, images)
+#
+# Usage:
+#   bash scripts/serve.sh [port] [directory]
+#
+# Examples:
+#   bash scripts/serve.sh                    # serve CWD on port 8080
+#   bash scripts/serve.sh 3000               # serve CWD on port 3000
+#   bash scripts/serve.sh 8080 ./my-project  # serve specific directory
+
+set -euo pipefail
+PORT="${1:-8080}"
+DIR="${2:-.}"
+
+echo "=== p5.js Dev Server ==="
+echo "Serving: $(cd "$DIR" && pwd)"
+echo "URL:     http://localhost:$PORT"
+echo "Press Ctrl+C to stop"
+echo ""
+
+command -v python3 >/dev/null || { echo "Python3 is required" >&2; exit 1; }
+cd "$DIR"
+exec python3 -m http.server "$PORT" --bind 127.0.0.1