@viji-dev/sdk 1.0.0

package/scenes/demo-scene/main.js

@@ -0,0 +1,619 @@
+// Full Feature Demo Scene - Parameter Object API
+console.log('🚀 DEMO SCENE LOADED');
+
+// Define parameters using helper functions (returns parameter objects)
+const primaryColor = viji.color('#ff6b6b', {
+  label: 'Primary Color',
+  description: 'Main color for the animated shapes',
+  group: 'colors'
+});
+
+const secondaryColor = viji.color('#4ecdc4', {
+  label: 'Secondary Color',
+  description: 'Secondary color for gradient effects',
+  group: 'colors'
+});
+
+const backgroundColor = viji.color('#2c3e50', {
+  label: 'Background Color',
+  description: 'Scene background color',
+  group: 'colors'
+});
+
+const shapeSize = viji.slider(50, {
+  min: 10,
+  max: 150,
+  step: 5,
+  label: 'Shape Size',
+  description: 'Size of the animated shapes',
+  group: 'shape'
+});
+
+const shapeType = viji.select('circle', {
+  options: ['circle', 'square', 'triangle', 'hexagon'],
+  label: 'Shape Type',
+  description: 'Type of shape to render',
+  group: 'shape'
+});
+
+const particleCount = viji.slider(8, {
+  min: 1,
+  max: 20,
+  step: 1,
+  label: 'Particle Count',
+  description: 'Number of particles to render',
+  group: 'shape'
+});
+
+const animationSpeed = viji.slider(1.0, {
+  min: 0.1,
+  max: 3.0,
+  step: 0.1,
+  label: 'Animation Speed',
+  description: 'Speed of the animation loop',
+  group: 'animation'
+});
+
+const rotationSpeed = viji.slider(0.5, {
+  min: -5,
+  max: 5,
+  step: 0.1,
+  label: 'Rotation Speed',
+  description: 'Rotation speed for shapes',
+  group: 'animation'
+});
+
+const useGradient = viji.toggle(true, {
+  label: 'Use Gradient',
+  description: 'Enable gradient fill for shapes',
+  group: 'visual'
+});
+
+const opacity = viji.slider(0.8, {
+  min: 0.1,
+  max: 1.0,
+  step: 0.05,
+  label: 'Opacity',
+  description: 'Overall opacity of the scene',
+  group: 'visual'
+});
+
+const enableTrails = viji.toggle(false, {
+  label: 'Enable Trails',
+  description: 'Show trails behind moving shapes',
+  group: 'visual'
+});
+
+const glowIntensity = viji.slider(0.5, {
+  min: 0.0,
+  max: 2.0,
+  step: 0.1,
+  label: 'Glow Intensity',
+  description: 'Intensity of shape glow effect',
+  group: 'visual'
+});
+
+const sceneTitle = viji.text('Viji SDK Demo', {
+  label: 'Scene Title',
+  description: 'Title displayed in the scene',
+  group: 'text'
+});
+
+const showDebugInfo = viji.toggle(true, {
+  label: 'Show Debug Info',
+  description: 'Display performance and parameter information',
+  group: 'text'
+});
+
+// Interaction Parameters
+const mouseAttraction = viji.toggle(true, {
+  label: 'Mouse Attraction',
+  description: 'Particles are attracted to mouse cursor',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+const attractionStrength = viji.slider(0.3, {
+  min: 0,
+  max: 1,
+  step: 0.1,
+  label: 'Attraction Strength',
+  description: 'How strongly particles are attracted to mouse',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+const keyboardControl = viji.toggle(true, {
+  label: 'Keyboard Control',
+  description: 'Use WASD keys to move particles',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+const touchScale = viji.slider(1.0, {
+  min: 0.5,
+  max: 2.0,
+  step: 0.1,
+  label: 'Touch Scale Factor',
+  description: 'Scale factor for touch interactions',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+const showInteractionInfo = viji.toggle(true, {
+  label: 'Show Interaction Info',
+  description: 'Display current interaction state',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+// Audio Parameters
+const audioReactive = viji.toggle(false, {
+  label: 'Audio Reactive',
+  description: 'Make particles react to audio input',
+  group: 'audio',
+  category: 'audio'
+});
+
+const volumeSensitivity = viji.slider(1.0, {
+  min: 0.1,
+  max: 5.0,
+  step: 0.1,
+  label: 'Volume Sensitivity',
+  description: 'How sensitive particles are to volume changes',
+  group: 'audio',
+  category: 'audio'
+});
+
+const bassReactivity = viji.slider(1.0, {
+  min: 0,
+  max: 3.0,
+  step: 0.1,
+  label: 'Bass Reactivity',
+  description: 'How much particles react to bass frequencies',
+  group: 'audio',
+  category: 'audio'
+});
+
+const trebleReactivity = viji.slider(0.5, {
+  min: 0,
+  max: 2.0,
+  step: 0.1,
+  label: 'Treble Reactivity',
+  description: 'How much particles react to treble frequencies',
+  group: 'audio',
+  category: 'audio'
+});
+
+const showAudioViz = viji.toggle(true, {
+  label: 'Show Audio Visualization',
+  description: 'Display real-time audio analysis',
+  group: 'audio',
+  category: 'audio'
+});
+
+// Video Parameters
+const videoReactive = viji.toggle(false, {
+  label: 'Video Reactive',
+  description: 'Make particles react to video input',
+  group: 'video',
+  category: 'video'
+});
+
+const motionSensitivity = viji.slider(1.0, {
+  min: 0.1,
+  max: 3.0,
+  step: 0.1,
+  label: 'Motion Sensitivity',
+  description: 'How sensitive particles are to video motion',
+  group: 'video',
+  category: 'video'
+});
+
+const brightnessReactivity = viji.slider(0.5, {
+  min: 0,
+  max: 2.0,
+  step: 0.1,
+  label: 'Brightness Reactivity',
+  description: 'How much particles react to video brightness',
+  group: 'video',
+  category: 'video'
+});
+
+const showVideoOverlay = viji.toggle(true, {
+  label: 'Show Video Overlay',
+  description: 'Display current video frame on canvas',
+  group: 'video',
+  category: 'video'
+});
+
+// Render function using parameter object API
+function render(viji) {
+  const ctx = viji.useContext('2d');
+  
+  // Get interaction state
+  const mouse = viji.mouse;
+  const keyboard = viji.keyboard;
+  const touches = viji.touches;
+  
+  // Get audio state
+  const audio = viji.audio;
+  
+  // Get video state
+  const video = viji.video;
+  
+  // Clear canvas with trails effect if enabled
+  if (enableTrails.value) {
+    const alpha = Math.floor(0.1 * opacity.value * 255).toString(16).padStart(2, '0');
+    ctx.fillStyle = backgroundColor.value + alpha;
+    ctx.fillRect(0, 0, viji.width, viji.height);
+  } else {
+    ctx.fillStyle = backgroundColor.value;
+    ctx.fillRect(0, 0, viji.width, viji.height);
+  }
+  
+  // Draw title
+  ctx.fillStyle = primaryColor.value;
+  ctx.font = 'bold 24px Arial';
+  ctx.textAlign = 'center';
+  ctx.fillText(sceneTitle.value, viji.width / 2, 40);
+  
+  // Keyboard offset for particle center
+  let keyboardOffsetX = 0;
+  let keyboardOffsetY = 0;
+  
+  if (keyboardControl.value && keyboard) {
+    const keySpeed = 3;
+    const isPressed = (k) => (keyboard && typeof keyboard.isPressed === 'function' ? keyboard.isPressed(k) : false);
+    if (isPressed('w') || isPressed('W')) keyboardOffsetY -= keySpeed;
+    if (isPressed('s') || isPressed('S')) keyboardOffsetY += keySpeed;
+    if (isPressed('a') || isPressed('A')) keyboardOffsetX -= keySpeed;
+    if (isPressed('d') || isPressed('D')) keyboardOffsetX += keySpeed;
+  }
+  
+  // Animation calculations
+  let centerX = viji.width / 2 + keyboardOffsetX;
+  let centerY = viji.height / 2 + keyboardOffsetY;
+  const animTime = viji.time * animationSpeed.value;
+  
+  // Audio reactive calculations
+  let audioScale = 1;
+  let audioColorShift = 0;
+  if (audioReactive.value && audio && audio.isConnected) {
+    audioScale = 1 + ((((audio.volume && audio.volume.rms) || 0)) * volumeSensitivity.value);
+    
+    const bassEnergy = ((((audio && audio.bands && audio.bands.bass) || 0) + ((audio && audio.bands && audio.bands.subBass) || 0)) / 2);
+    const trebleEnergy = ((((audio && audio.bands && audio.bands.treble) || 0) + ((audio && audio.bands && audio.bands.presence) || 0)) / 2);
+    audioColorShift = (bassEnergy * bassReactivity.value) - (trebleEnergy * trebleReactivity.value);
+  }
+  
+  // Video reactive calculations
+  let videoScale = 1;
+  if (videoReactive.value && video && video.isConnected) {
+    const motionEnergy = Math.sin(animTime * 2) * 0.5 + 0.5; // Simulate motion
+    videoScale = 1 + (motionEnergy * motionSensitivity.value * 0.3);
+  }
+  
+  // Touch interaction - use primary touch for center offset
+  if (touches && touches.points && touches.points.length > 0) {
+    const primaryTouch = touches.points[0];
+    centerX = primaryTouch.x * touchScale.value;
+    centerY = primaryTouch.y * touchScale.value;
+  }
+  
+  // Draw particles
+  for (let i = 0; i < particleCount.value; i++) {
+    const angle = (i / particleCount.value) * Math.PI * 2 + animTime;
+    const radius = Math.min(viji.width, viji.height) * 0.25;
+    
+    let x = centerX + Math.cos(angle) * radius;
+    let y = centerY + Math.sin(angle) * radius;
+    
+    // Mouse attraction
+    if (mouseAttraction.value && mouse && mouse.isInCanvas) {
+      const mouseX = mouse.x;
+      const mouseY = mouse.y;
+      const distToMouse = Math.sqrt((x - mouseX) ** 2 + (y - mouseY) ** 2);
+      
+      if (distToMouse > 0) {
+        const attraction = attractionStrength.value * (1 / (distToMouse * 0.01 + 1));
+        x += (mouseX - x) * attraction;
+        y += (mouseY - y) * attraction;
+      }
+    }
+    
+    // Apply rotation
+    const rotation = animTime * rotationSpeed.value;
+    
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(rotation);
+    
+    // Set opacity
+    ctx.globalAlpha = opacity.value;
+
+    let scaledSize = shapeSize.value * Math.min(viji.width, viji.height) / 1000;
+    
+    // Apply audio scaling
+    if (audioReactive.value && audio && audio.isConnected) {
+      scaledSize *= audioScale;
+    }
+    
+    // Apply video scaling
+    if (videoReactive.value && video && video.isConnected) {
+      scaledSize *= videoScale;
+    }
+    
+    // Glow effect
+    if (glowIntensity.value > 0) {
+      const glowSize = scaledSize * (2 + glowIntensity.value);
+      const gradient = ctx.createRadialGradient(0, 0, scaledSize / 2, 0, 0, glowSize / 2);
+      gradient.addColorStop(0, primaryColor.value);
+      gradient.addColorStop(1, primaryColor.value + '00');
+      
+      ctx.fillStyle = gradient;
+      ctx.beginPath();
+      ctx.arc(0, 0, glowSize / 2, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    
+    // Create gradient or solid fill
+    if (useGradient.value) {
+      const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, scaledSize / 2);
+      
+      // Apply audio color shifting
+      let color1 = primaryColor.value;
+      let color2 = secondaryColor.value;
+      
+      if (audioReactive.value && audio && audio.isConnected && audioColorShift !== 0) {
+        // Simple color shifting effect
+        const audioHueShift = audioColorShift * 60;
+        color1 = adjustHue(primaryColor.value, audioHueShift);
+        color2 = adjustHue(secondaryColor.value, audioHueShift);
+      }
+      
+      gradient.addColorStop(0, color1);
+      gradient.addColorStop(1, color2);
+      ctx.fillStyle = gradient;
+    } else {
+      ctx.fillStyle = primaryColor.value;
+    }
+    
+    // Draw shape based on type
+    ctx.beginPath();
+    switch (shapeType.value) {
+      case 'circle':
+        ctx.arc(0, 0, scaledSize / 2, 0, Math.PI * 2);
+        break;
+        
+      case 'square':
+        const half = scaledSize / 2;
+        ctx.rect(-half, -half, scaledSize, scaledSize);
+        break;
+        
+      case 'triangle':
+        const size = scaledSize;
+        ctx.moveTo(0, -size / 2);
+        ctx.lineTo(-size / 2, size / 2);
+        ctx.lineTo(size / 2, size / 2);
+        ctx.closePath();
+        break;
+        
+      case 'hexagon':
+        const hexRadius = scaledSize / 2;
+        for (let j = 0; j < 6; j++) {
+          const hexAngle = (j / 6) * Math.PI * 2;
+          const hexX = Math.cos(hexAngle) * hexRadius;
+          const hexY = Math.sin(hexAngle) * hexRadius;
+          if (j === 0) ctx.moveTo(hexX, hexY);
+          else ctx.lineTo(hexX, hexY);
+        }
+        ctx.closePath();
+        break;
+    }
+    ctx.fill();
+    
+    ctx.restore();
+  }
+  
+  // Draw mouse cursor indicator
+  if (mouseAttraction.value && mouse && mouse.isInCanvas) {
+    ctx.strokeStyle = primaryColor.value + '80';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([5, 5]);
+    ctx.beginPath();
+    ctx.arc(mouse.x, mouse.y, 25, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    
+    // Draw crosshair
+    ctx.strokeStyle = primaryColor.value + 'CC';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(mouse.x - 10, mouse.y);
+    ctx.lineTo(mouse.x + 10, mouse.y);
+    ctx.moveTo(mouse.x, mouse.y - 10);
+    ctx.lineTo(mouse.x, mouse.y + 10);
+    ctx.stroke();
+  }
+  
+  // Draw debug info
+  if (showDebugInfo.value) {
+    ctx.fillStyle = secondaryColor.value;
+    ctx.font = '12px monospace';
+    ctx.textAlign = 'left';
+    
+    let debugY = viji.height - 120;
+    ctx.fillText(`Frame: ${viji.frameCount}`, 10, debugY);
+    debugY += 15;
+    ctx.fillText(`Time: ${viji.time.toFixed(2)}s`, 10, debugY);
+    debugY += 15;
+    ctx.fillText(`Particles: ${particleCount.value}`, 10, debugY);
+    debugY += 15;
+    ctx.fillText(`Shape: ${shapeType.value} (${shapeSize.value}px)`, 10, debugY);
+    debugY += 15;
+    ctx.fillText(`Animation: ${animationSpeed.value.toFixed(1)}x`, 10, debugY);
+  }
+  
+  // Draw interaction info
+  if (showInteractionInfo.value) {
+    ctx.fillStyle = primaryColor.value + 'CC';
+    ctx.font = '12px monospace';
+    ctx.textAlign = 'right';
+    
+    let infoY = viji.height - 140;
+    
+    ctx.fillText('INTERACTIONS:', viji.width - 10, infoY);
+    infoY += 15;
+    
+    if (mouse && mouse.isInCanvas) {
+      ctx.fillText(`Mouse: (${Math.round(mouse.x)}, ${Math.round(mouse.y)})`, viji.width - 10, infoY);
+      infoY += 15;
+      const buttons = (mouse.leftButton ? 'L' : '-') + (mouse.rightButton ? 'R' : '-') + (mouse.middleButton ? 'M' : '-');
+      ctx.fillText(`Buttons: ${buttons}`, viji.width - 10, infoY);
+      infoY += 15;
+    } else {
+      ctx.fillText('Mouse: outside canvas', viji.width - 10, infoY);
+      infoY += 15;
+    }
+    
+    if (keyboardControl.value && keyboard) {
+      const activeKeys = Array.from(keyboard.activeKeys || []);
+      ctx.fillText(`Keys: ${activeKeys.length > 0 ? activeKeys.slice(0, 3).join(', ') : 'none'}`, viji.width - 10, infoY);
+      infoY += 15;
+    }
+    
+    ctx.fillText(`Touches: ${(touches && touches.points ? touches.points.length : 0)}`, viji.width - 10, infoY);
+    infoY += 15;
+    
+    if (touches && touches.points && touches.points.length > 0) {
+      const touch0 = touches.points[0];
+      ctx.fillText(`Touch: (${Math.round(touch0.x)}, ${Math.round(touch0.y)})`, viji.width - 10, infoY);
+    }
+  }
+  
+  // Draw audio visualization
+  if (showAudioViz.value && audio && audio.isConnected) {
+    ctx.fillStyle = 'rgba(0, 255, 255, 0.9)';
+    ctx.font = '12px monospace';
+    ctx.textAlign = 'left';
+    
+    let audioY = 60;
+    
+    ctx.fillText('🎵 AUDIO ANALYSIS:', 10, audioY);
+    audioY += 15;
+    ctx.fillText(`Volume: ${((audio.volume?.rms || 0) * 100).toFixed(1)}%`, 10, audioY);
+    audioY += 15;
+    ctx.fillText(`Peak: ${((audio.volume?.peak || 0) * 100).toFixed(1)}%`, 10, audioY);
+    audioY += 15;
+    
+    // Frequency bands
+    const bands = ['bass', 'mid', 'treble'];
+    for (const band of bands) {
+      const value = (audio && audio.bands ? (audio.bands[band] || 0) : 0);
+      ctx.fillText(`${band}: ${(value * 100).toFixed(1)}%`, 10, audioY);
+      audioY += 15;
+    }
+    
+    // Visual frequency bars
+    const barWidth = 4;
+    const barSpacing = 6;
+    const barHeight = 40;
+    const barStartX = 10;
+    const barStartY = audioY + 5;
+    
+    const allBands = ['subBass', 'bass', 'lowMid', 'mid', 'highMid', 'presence', 'brilliance', 'treble'];
+    
+    for (let i = 0; i < allBands.length; i++) {
+      const bandValue = (audio && audio.bands ? (audio.bands[allBands[i]] || 0) : 0);
+      const x = barStartX + i * barSpacing;
+      const barHeightValue = bandValue * barHeight;
+      
+      // Background bar
+      ctx.fillStyle = 'rgba(100, 100, 100, 0.3)';
+      ctx.fillRect(x, barStartY, barWidth, barHeight);
+      
+      // Value bar with color
+      const barHue = (i / allBands.length) * 300;
+      ctx.fillStyle = `hsla(${barHue}, 70%, 60%, 0.8)`;
+      ctx.fillRect(x, barStartY + barHeight - barHeightValue, barWidth, barHeightValue);
+    }
+  }
+  
+  // Draw video overlay
+  if (showVideoOverlay.value && video && video.isConnected && video.currentFrame) {
+    ctx.save();
+    ctx.globalAlpha = 0.3;
+    
+    // Calculate video display size
+    const videoWidth = video.frameWidth || 320;
+    const videoHeight = video.frameHeight || 240;
+    const displayWidth = 160;
+    const displayHeight = (videoHeight / videoWidth) * displayWidth;
+    
+    try {
+      ctx.drawImage(
+        video.currentFrame,
+        0, 0, videoWidth, videoHeight,
+        viji.width - displayWidth - 10, 80, displayWidth, displayHeight
+      );
+    } catch (error) {
+      // Fallback
+      ctx.fillStyle = 'rgba(255, 100, 100, 0.5)';
+      ctx.fillRect(viji.width - displayWidth - 10, 80, displayWidth, displayHeight);
+      ctx.fillStyle = 'white';
+      ctx.font = '10px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText('Video', viji.width - displayWidth/2 - 10, 95);
+    }
+    
+    ctx.restore();
+    
+    // Video info
+    ctx.fillStyle = 'rgba(255, 255, 0, 0.9)';
+    ctx.font = '10px monospace';
+    ctx.textAlign = 'right';
+    
+    let videoInfoY = 250;
+    ctx.fillText('📹 VIDEO:', viji.width - 10, videoInfoY);
+    videoInfoY += 12;
+    ctx.fillText(`${videoWidth}x${videoHeight}`, viji.width - 10, videoInfoY);
+    videoInfoY += 12;
+    ctx.fillText(`${(video.frameRate || 30).toFixed(1)} FPS`, viji.width - 10, videoInfoY);
+  }
+}
+
+// Helper function for color hue adjustment
+function adjustHue(hexColor, degrees) {
+  // Simple hue adjustment - in a real implementation this would be more sophisticated
+  const hex = hexColor.replace('#', '');
+  const r = parseInt(hex.substr(0, 2), 16) / 255;
+  const g = parseInt(hex.substr(2, 2), 16) / 255;
+  const b = parseInt(hex.substr(4, 2), 16) / 255;
+  
+  // Convert to HSL, adjust hue, convert back to RGB
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  
+  if (max !== min) {
+    const d = max - min;
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+    h /= 6;
+  }
+  
+  // Adjust hue
+  h = (h + degrees / 360) % 1;
+  if (h < 0) h += 1;
+  
+  // Convert back to RGB (simplified)
+  const newR = Math.round(Math.max(0, Math.min(255, r * 255 + Math.sin(h * Math.PI * 2) * 50)));
+  const newG = Math.round(Math.max(0, Math.min(255, g * 255 + Math.cos(h * Math.PI * 2) * 50)));
+  const newB = Math.round(Math.max(0, Math.min(255, b * 255 + Math.sin(h * Math.PI * 4) * 50)));
+  
+  return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
+}

package/scenes/global.d.ts

@@ -0,0 +1,15 @@
+// Ambient types for Viji scenes in this folder only.
+// This file is editor-only; it is not bundled into artist code.
+/// <reference types="@viji-dev/core/artist-global" />
+
+// Some older bundles referenced ArtistAPI; provide a compatibility alias.
+declare namespace VijiCore {
+  type ArtistAPI = VijiAPI;
+}
+
+// Tell the type-checker that a global render function is observed externally by runtime
+declare function render(viji: any): void;
+// This prevents editor "unused" noise without requiring artists to add code
+// (Implementations defined per scene are consumed by Viji Core worker)
+
+