@viji-dev/sdk 1.0.0 → 1.0.2

package/scenes/demo-scene/main.js

@@ -1,619 +0,0 @@
-// 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

@@ -1,15 +0,0 @@
-// 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)
-
-