@hypertools/sdk 0.3.3 → 0.4.0

package/examples/recording/main.ts

@@ -0,0 +1,256 @@
+/**
+ * Recording Example
+ *
+ * Demonstrates @hypertools/sdk recording capabilities:
+ * - Video recording with MediaRecorder
+ * - Image capture
+ * - Timeline-based keyframe animation
+ */
+
+import { Experience } from '@hypertools/sdk';
+import { VideoRecorder, ImageCapture, Timeline } from '@hypertools/sdk/recording';
+
+// UI elements
+const statusText = document.getElementById('status-text')!;
+const frameCount = document.getElementById('frame-count')!;
+const capturePngBtn = document.getElementById('capture-png') as HTMLButtonElement;
+const startRecordingBtn = document.getElementById('start-recording') as HTMLButtonElement;
+const stopRecordingBtn = document.getElementById('stop-recording') as HTMLButtonElement;
+const playTimelineBtn = document.getElementById('play-timeline') as HTMLButtonElement;
+const pauseTimelineBtn = document.getElementById('pause-timeline') as HTMLButtonElement;
+const resetTimelineBtn = document.getElementById('reset-timeline') as HTMLButtonElement;
+const seekSlider = document.getElementById('seek-timeline') as HTMLInputElement;
+
+// Recording state
+let recorder: ReturnType<typeof VideoRecorder.start> | null = null;
+let canvas: HTMLCanvasElement | null = null;
+
+// Create experience
+const experience = new Experience({
+  mount: document.getElementById('canvas-container')!,
+  paramDefs: {
+    hue: { type: 'number', value: 0, min: 0, max: 360 },
+    saturation: { type: 'number', value: 80, min: 0, max: 100 },
+    scale: { type: 'number', value: 1, min: 0.5, max: 2 },
+    rotation: { type: 'number', value: 0, min: 0, max: 360 },
+    opacity: { type: 'number', value: 1, min: 0, max: 1 },
+  },
+  setup(context) {
+    canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d')!;
+    canvas.width = 800;
+    canvas.height = 600;
+    context.mount.appendChild(canvas);
+
+    let time = 0;
+
+    function draw() {
+      const { hue, saturation, scale, rotation, opacity } = context.params as Record<string, number>;
+
+      // Clear
+      ctx.fillStyle = '#000';
+      ctx.fillRect(0, 0, canvas!.width, canvas!.height);
+
+      // Apply global opacity
+      ctx.globalAlpha = opacity;
+
+      // Center and transform
+      ctx.save();
+      ctx.translate(canvas!.width / 2, canvas!.height / 2);
+      ctx.rotate((rotation * Math.PI) / 180);
+      ctx.scale(scale, scale);
+
+      // Draw animated shapes
+      const color = `hsl(${hue}, ${saturation}%, 60%)`;
+
+      // Central shape
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      const size = 100 + Math.sin(time * 2) * 30;
+      ctx.arc(0, 0, size, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Orbiting shapes
+      const orbitCount = 6;
+      for (let i = 0; i < orbitCount; i++) {
+        const angle = (i / orbitCount) * Math.PI * 2 + time;
+        const orbitRadius = 180;
+        const x = Math.cos(angle) * orbitRadius;
+        const y = Math.sin(angle) * orbitRadius;
+
+        ctx.fillStyle = `hsl(${(hue + i * 30) % 360}, ${saturation}%, 50%)`;
+        ctx.beginPath();
+        ctx.arc(x, y, 30 + Math.sin(time * 3 + i) * 10, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      ctx.restore();
+      ctx.globalAlpha = 1;
+
+      time += 0.02;
+    }
+
+    context.experience.on('frame', () => {
+      draw();
+      frameCount.textContent = `Frame: ${context.experience.currentFrame}`;
+    });
+
+    draw();
+
+    return () => canvas?.remove();
+  },
+});
+
+// Timeline setup
+const timeline = new Timeline({
+  duration: 5000,
+  loop: true,
+});
+
+// Add keyframes for a complex animation sequence
+timeline
+  // Start: warm colors, normal scale
+  .addKeyframe(0, {
+    hue: 0,
+    saturation: 80,
+    scale: 1,
+    rotation: 0,
+    opacity: 1,
+  })
+  // 1s: shift to cyan, scale up
+  .addKeyframe(1000, {
+    hue: 180,
+    saturation: 90,
+    scale: 1.3,
+    rotation: 45,
+    opacity: 1,
+  }, 'easeInOut')
+  // 2s: purple, rotate more
+  .addKeyframe(2000, {
+    hue: 280,
+    saturation: 70,
+    scale: 1,
+    rotation: 180,
+    opacity: 0.8,
+  }, 'easeInOut')
+  // 3s: green, scale down
+  .addKeyframe(3000, {
+    hue: 120,
+    saturation: 85,
+    scale: 0.7,
+    rotation: 270,
+    opacity: 1,
+  }, 'easeOutBack')
+  // 4s: back to red-ish
+  .addKeyframe(4000, {
+    hue: 30,
+    saturation: 90,
+    scale: 1.1,
+    rotation: 350,
+    opacity: 0.9,
+  }, 'easeInOut')
+  // 5s: return to start
+  .addKeyframe(5000, {
+    hue: 0,
+    saturation: 80,
+    scale: 1,
+    rotation: 360,
+    opacity: 1,
+  }, 'easeInOut');
+
+// Timeline events
+timeline.onUpdate((params) => {
+  experience.setParams(params);
+});
+
+timeline.onComplete(() => {
+  statusText.textContent = 'Timeline complete (looping)';
+});
+
+// Capture PNG
+capturePngBtn.addEventListener('click', async () => {
+  if (!canvas) return;
+
+  statusText.textContent = 'Capturing...';
+  const blob = await ImageCapture.capture(canvas, 'png');
+
+  if (blob) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `capture-${Date.now()}.png`;
+    a.click();
+    URL.revokeObjectURL(url);
+    statusText.textContent = 'PNG captured!';
+  } else {
+    statusText.textContent = 'Capture failed';
+  }
+});
+
+// Video recording
+startRecordingBtn.addEventListener('click', () => {
+  if (!canvas) return;
+
+  recorder = VideoRecorder.start(canvas, {
+    frameRate: 60,
+    videoBitsPerSecond: 5000000,
+  });
+
+  startRecordingBtn.disabled = true;
+  startRecordingBtn.classList.add('recording');
+  stopRecordingBtn.disabled = false;
+  statusText.textContent = 'Recording...';
+});
+
+stopRecordingBtn.addEventListener('click', async () => {
+  if (!recorder) return;
+
+  statusText.textContent = 'Processing video...';
+  const blob = await recorder.stop();
+
+  if (blob) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `recording-${Date.now()}.webm`;
+    a.click();
+    URL.revokeObjectURL(url);
+    statusText.textContent = 'Video saved!';
+  } else {
+    statusText.textContent = 'Recording failed';
+  }
+
+  recorder = null;
+  startRecordingBtn.disabled = false;
+  startRecordingBtn.classList.remove('recording');
+  stopRecordingBtn.disabled = true;
+});
+
+// Timeline controls
+playTimelineBtn.addEventListener('click', () => {
+  timeline.play();
+  statusText.textContent = 'Timeline playing...';
+});
+
+pauseTimelineBtn.addEventListener('click', () => {
+  timeline.pause();
+  statusText.textContent = 'Timeline paused';
+});
+
+resetTimelineBtn.addEventListener('click', () => {
+  timeline.seek(0);
+  timeline.pause();
+  seekSlider.value = '0';
+  statusText.textContent = 'Timeline reset';
+});
+
+seekSlider.addEventListener('input', () => {
+  timeline.seek(Number(seekSlider.value));
+});
+
+// Update seek slider during playback
+setInterval(() => {
+  if (timeline.isPlaying) {
+    seekSlider.value = String(timeline.currentTime);
+  }
+}, 50);

package/examples/threejs/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HyperTool SDK - Three.js Example</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: system-ui, sans-serif;
+      background: #000;
+      color: #fff;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 2rem;
+    }
+    h1 { margin-bottom: 1rem; }
+    #scene-container {
+      width: 800px;
+      height: 600px;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .info {
+      margin-top: 1rem;
+      font-size: 0.9rem;
+      color: #888;
+    }
+  </style>
+</head>
+<body>
+  <h1>Three.js Animated Scene</h1>
+  <div id="scene-container"></div>
+  <p class="info">Reactive 3D scene with configurable parameters</p>
+
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

package/examples/threejs/main.ts

@@ -0,0 +1,196 @@
+/**
+ * Three.js Example
+ *
+ * Demonstrates @hypertools/sdk integration with Three.js.
+ * Creates an animated 3D scene with reactive parameters.
+ */
+
+import { Experience } from '@hypertools/sdk';
+import * as THREE from 'three';
+
+new Experience({
+  mount: document.getElementById('scene-container')!,
+  paramDefs: {
+    cubeColor: {
+      type: 'color',
+      value: '#00ff88',
+      label: 'Cube Color',
+    },
+    torusColor: {
+      type: 'color',
+      value: '#ff6b6b',
+      label: 'Torus Color',
+    },
+    rotationSpeed: {
+      type: 'number',
+      value: 0.01,
+      min: 0,
+      max: 0.1,
+      step: 0.005,
+      label: 'Rotation Speed',
+    },
+    wireframe: {
+      type: 'boolean',
+      value: false,
+      label: 'Wireframe',
+    },
+    particleCount: {
+      type: 'number',
+      value: 1000,
+      min: 100,
+      max: 5000,
+      step: 100,
+      label: 'Particle Count',
+    },
+    cameraDistance: {
+      type: 'number',
+      value: 5,
+      min: 2,
+      max: 10,
+      step: 0.5,
+      label: 'Camera Distance',
+    },
+  },
+  setup(context) {
+    // Scene setup
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+
+    renderer.setSize(800, 600);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    context.mount.appendChild(renderer.domElement);
+
+    // Lighting
+    const ambientLight = new THREE.AmbientLight(0x404040);
+    scene.add(ambientLight);
+
+    const pointLight = new THREE.PointLight(0xffffff, 1, 100);
+    pointLight.position.set(5, 5, 5);
+    scene.add(pointLight);
+
+    // Central cube
+    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
+    const cubeMaterial = new THREE.MeshStandardMaterial({
+      color: context.params.cubeColor as string,
+      wireframe: context.params.wireframe as boolean,
+    });
+    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+    scene.add(cube);
+
+    // Orbiting torus
+    const torusGeometry = new THREE.TorusGeometry(0.5, 0.2, 16, 100);
+    const torusMaterial = new THREE.MeshStandardMaterial({
+      color: context.params.torusColor as string,
+      wireframe: context.params.wireframe as boolean,
+    });
+    const torus = new THREE.Mesh(torusGeometry, torusMaterial);
+    scene.add(torus);
+
+    // Particle system
+    let particles: THREE.Points;
+    let particleGeometry: THREE.BufferGeometry;
+
+    function createParticles(count: number) {
+      if (particles) {
+        scene.remove(particles);
+        particleGeometry.dispose();
+      }
+
+      particleGeometry = new THREE.BufferGeometry();
+      const positions = new Float32Array(count * 3);
+
+      for (let i = 0; i < count * 3; i += 3) {
+        positions[i] = (Math.random() - 0.5) * 10;
+        positions[i + 1] = (Math.random() - 0.5) * 10;
+        positions[i + 2] = (Math.random() - 0.5) * 10;
+      }
+
+      particleGeometry.setAttribute(
+        'position',
+        new THREE.BufferAttribute(positions, 3)
+      );
+
+      const particleMaterial = new THREE.PointsMaterial({
+        color: 0xffffff,
+        size: 0.02,
+        transparent: true,
+        opacity: 0.8,
+      });
+
+      particles = new THREE.Points(particleGeometry, particleMaterial);
+      scene.add(particles);
+    }
+
+    createParticles(context.params.particleCount as number);
+
+    // Camera position
+    camera.position.z = context.params.cameraDistance as number;
+
+    // Register objects for external access
+    context.registerObject('cube', cube, { type: 'mesh', name: 'Central Cube' });
+    context.registerObject('torus', torus, { type: 'mesh', name: 'Orbiting Torus' });
+    context.registerObject('scene', scene, { type: 'scene' });
+    context.registerObject('camera', camera, { type: 'camera' });
+
+    // Animation
+    let time = 0;
+    let lastParticleCount = context.params.particleCount as number;
+
+    context.experience.on('frame', () => {
+      const speed = context.params.rotationSpeed as number;
+
+      // Update cube
+      cube.rotation.x += speed;
+      cube.rotation.y += speed * 0.7;
+      cubeMaterial.color.set(context.params.cubeColor as string);
+      cubeMaterial.wireframe = context.params.wireframe as boolean;
+
+      // Update torus orbit
+      time += speed;
+      torus.position.x = Math.cos(time) * 2;
+      torus.position.z = Math.sin(time) * 2;
+      torus.rotation.x += speed * 1.5;
+      torus.rotation.y += speed;
+      torusMaterial.color.set(context.params.torusColor as string);
+      torusMaterial.wireframe = context.params.wireframe as boolean;
+
+      // Update particles
+      const particleCount = context.params.particleCount as number;
+      if (particleCount !== lastParticleCount) {
+        createParticles(particleCount);
+        lastParticleCount = particleCount;
+      }
+
+      if (particles) {
+        particles.rotation.y += speed * 0.1;
+      }
+
+      // Update camera
+      camera.position.z = context.params.cameraDistance as number;
+
+      // Render
+      renderer.render(scene, camera);
+    });
+
+    // Initial render
+    renderer.render(scene, camera);
+
+    // Handle resize
+    context.environment.onResize((width, height) => {
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+      renderer.setSize(width, height);
+    });
+
+    // Cleanup
+    return () => {
+      renderer.dispose();
+      cubeGeometry.dispose();
+      cubeMaterial.dispose();
+      torusGeometry.dispose();
+      torusMaterial.dispose();
+      particleGeometry?.dispose();
+    };
+  },
+});

package/examples/vanilla-canvas/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HyperTool SDK - Vanilla Canvas Example</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: system-ui, sans-serif;
+      background: #1a1a2e;
+      color: #fff;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 2rem;
+    }
+    h1 { margin-bottom: 1rem; }
+    #canvas-container {
+      width: 800px;
+      height: 600px;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .controls {
+      margin-top: 1rem;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+    button {
+      padding: 0.5rem 1rem;
+      border: none;
+      border-radius: 4px;
+      background: #4a4a6a;
+      color: #fff;
+      cursor: pointer;
+    }
+    button:hover { background: #5a5a7a; }
+    input[type="color"] {
+      width: 50px;
+      height: 32px;
+      border: none;
+      cursor: pointer;
+    }
+    input[type="range"] { width: 150px; }
+    label { font-size: 0.9rem; }
+  </style>
+</head>
+<body>
+  <h1>Vanilla Canvas Example</h1>
+  <div id="canvas-container"></div>
+
+  <div class="controls">
+    <button id="toggle">Pause</button>
+    <button id="capture">Capture PNG</button>
+
+    <label>
+      Color:
+      <input type="color" id="color" value="#00ff88">
+    </label>
+
+    <label>
+      Speed:
+      <input type="range" id="speed" min="1" max="20" value="5">
+    </label>
+
+    <label>
+      <input type="checkbox" id="showTrails" checked>
+      Show Trails
+    </label>
+  </div>
+
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>