@hypertools/sdk 0.3.2 → 0.4.0

package/examples/vanilla-canvas/main.ts

@@ -0,0 +1,162 @@
+/**
+ * Vanilla Canvas Example
+ *
+ * Demonstrates basic usage of @hypertools/sdk with the Canvas API.
+ * Creates an animated particle system with reactive parameters.
+ */
+
+import { Experience } from '@hypertools/sdk';
+
+interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  radius: number;
+  life: number;
+}
+
+const experience = new Experience({
+  mount: document.getElementById('canvas-container')!,
+  paramDefs: {
+    color: { type: 'color', value: '#00ff88', label: 'Particle Color' },
+    speed: { type: 'number', value: 5, min: 1, max: 20, label: 'Speed' },
+    showTrails: { type: 'boolean', value: true, label: 'Show Trails' },
+  },
+  setup(context) {
+    // Create canvas
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d')!;
+    canvas.width = 800;
+    canvas.height = 600;
+    context.mount.appendChild(canvas);
+
+    // Particle system state
+    const particles: Particle[] = [];
+    let mouseX = canvas.width / 2;
+    let mouseY = canvas.height / 2;
+
+    // Track mouse position
+    canvas.addEventListener('mousemove', (e) => {
+      const rect = canvas.getBoundingClientRect();
+      mouseX = e.clientX - rect.left;
+      mouseY = e.clientY - rect.top;
+    });
+
+    // Spawn particles
+    function spawnParticle() {
+      const angle = Math.random() * Math.PI * 2;
+      const speed = context.params.speed as number;
+
+      particles.push({
+        x: mouseX,
+        y: mouseY,
+        vx: Math.cos(angle) * speed * (0.5 + Math.random()),
+        vy: Math.sin(angle) * speed * (0.5 + Math.random()),
+        radius: 3 + Math.random() * 5,
+        life: 1,
+      });
+    }
+
+    // Draw frame
+    function draw() {
+      // Clear or fade based on trails setting
+      if (context.params.showTrails) {
+        ctx.fillStyle = 'rgba(26, 26, 46, 0.1)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      } else {
+        ctx.fillStyle = '#1a1a2e';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+
+      // Spawn new particles
+      for (let i = 0; i < 3; i++) {
+        spawnParticle();
+      }
+
+      // Update and draw particles
+      const color = context.params.color as string;
+
+      for (let i = particles.length - 1; i >= 0; i--) {
+        const p = particles[i];
+
+        // Update position
+        p.x += p.vx;
+        p.y += p.vy;
+        p.life -= 0.01;
+
+        // Remove dead particles
+        if (p.life <= 0) {
+          particles.splice(i, 1);
+          continue;
+        }
+
+        // Draw particle
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.radius * p.life, 0, Math.PI * 2);
+        ctx.fillStyle = color + Math.floor(p.life * 255).toString(16).padStart(2, '0');
+        ctx.fill();
+      }
+
+      // Draw particle count
+      ctx.fillStyle = '#fff';
+      ctx.font = '14px monospace';
+      ctx.fillText(`Particles: ${particles.length}`, 10, 20);
+    }
+
+    // Listen to frame events
+    context.experience.on('frame', draw);
+
+    // Initial draw
+    draw();
+
+    // Cleanup
+    return () => {
+      canvas.remove();
+      particles.length = 0;
+    };
+  },
+});
+
+// Wire up UI controls
+const toggleBtn = document.getElementById('toggle') as HTMLButtonElement;
+const captureBtn = document.getElementById('capture') as HTMLButtonElement;
+const colorInput = document.getElementById('color') as HTMLInputElement;
+const speedInput = document.getElementById('speed') as HTMLInputElement;
+const trailsInput = document.getElementById('showTrails') as HTMLInputElement;
+
+toggleBtn.addEventListener('click', () => {
+  experience.toggle();
+  toggleBtn.textContent = experience.isPlaying ? 'Pause' : 'Play';
+});
+
+captureBtn.addEventListener('click', async () => {
+  const blob = await experience.captureImage('png');
+  if (blob) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'capture.png';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+});
+
+colorInput.addEventListener('input', (e) => {
+  experience.setParam('color', (e.target as HTMLInputElement).value);
+});
+
+speedInput.addEventListener('input', (e) => {
+  experience.setParam('speed', Number((e.target as HTMLInputElement).value));
+});
+
+trailsInput.addEventListener('change', (e) => {
+  experience.setParam('showTrails', (e.target as HTMLInputElement).checked);
+});
+
+// Sync initial values
+experience.on('ready', () => {
+  colorInput.value = experience.params.color as string;
+  speedInput.value = String(experience.params.speed);
+  trailsInput.checked = experience.params.showTrails as boolean;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypertools/sdk",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Vanilla-first SDK for embedding interactive creative coding experiences. Supports p5.js, Three.js, WebGL, and more.",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,6 +43,7 @@
     "dist/recording",
     "dist/react",
     "dist/capture",
+    "examples",
     "README.md",
     "LICENSE"
   ],
@@ -158,5 +159,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.6.2"
+  },
+  "dependencies": {
+    "@hypertools/sdk": "0.3.3"
   }
 }