@viji-dev/sdk 1.0.0 → 1.0.2

package/scenes/core-demo/main.js

@@ -1,532 +0,0 @@
-
-// Scene Code - Parameter Object API
-console.log('🎯 CORE 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 shapeSize = viji.slider(50, {
-  min: 10,
-  max: 150,
-  step: 5,
-  label: 'Shape Size',
-  description: 'Size of the animated shapes',
-  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: 'speed'
-});
-
-const useGradient = viji.toggle(true, {
-  label: 'Use Gradient',
-  description: 'Enable gradient fill for shapes',
-  group: 'colors'
-});
-
-const shapeType = viji.select('circle', {
-  options: ['circle', 'square', 'triangle'],
-  label: 'Shape Type',
-  description: 'Type of shape to render',
-  group: 'shape'
-});
-
-const particleCount = viji.number(5, {
-  min: 1,
-  max: 20,
-  step: 1,
-  label: 'Particle Count',
-  description: 'Number of particles to render',
-  group: 'shape'
-});
-
-const sceneTitle = viji.text('Viji Core Demo', {
-  label: 'Scene Title',
-  description: 'Title displayed in the scene',
-  group: 'text',
-  maxLength: 50
-});
-
-const rotationSpeed = viji.slider(0, {
-  min: -5,
-  max: 5,
-  step: 0.1,
-  label: 'Rotation Speed',
-  description: 'Rotation speed for shapes',
-  group: 'speed'
-});
-
-const opacity = viji.slider(0.8, {
-  min: 0,
-  max: 1,
-  step: 0.05,
-  label: 'Opacity',
-  description: 'Overall opacity of the scene',
-  group: 'colors'
-});
-
-const enableTrails = viji.toggle(false, {
-  label: 'Enable Trails',
-  description: 'Show trails behind moving shapes'
-});
-
-// 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 on canvas',
-  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 with interactions, audio, and video
-function render(viji) {
-  const ctx = viji.useContext('2d');
-  
-  // Get interaction state
-  const mouse = viji.mouse;
-  const keyboard = viji.keyboard;
-  const touch = 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) {
-    ctx.fillStyle = 'rgba(0, 0, 0, ' + (0.1 * opacity.value) + ')';
-    ctx.fillRect(0, 0, viji.width, viji.height);
-  } else {
-    ctx.fillStyle = '#2c3e35';
-    ctx.fillRect(0, 0, viji.width, viji.height);
-  }
-  
-  // Draw title using parameter object
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
-  ctx.font = '20px Arial';
-  ctx.textAlign = 'center';
-  ctx.fillText(sceneTitle.value, viji.width / 2, 30);
-  
-  // Keyboard offset for particle center
-  let keyboardOffsetX = 0;
-  let keyboardOffsetY = 0;
-  
-  if (keyboardControl.value) {
-    const keySpeed = 2;
-    if (keyboard.isPressed('w') || keyboard.isPressed('W')) keyboardOffsetY -= keySpeed;
-    if (keyboard.isPressed('s') || keyboard.isPressed('S')) keyboardOffsetY += keySpeed;
-    if (keyboard.isPressed('a') || keyboard.isPressed('A')) keyboardOffsetX -= keySpeed;
-    if (keyboard.isPressed('d') || keyboard.isPressed('D')) keyboardOffsetX += keySpeed;
-  }
-  
-  // Animation calculations using parameter objects
-  let centerX = viji.width / 2 + keyboardOffsetX;
-  let centerY = viji.height / 2 + keyboardOffsetY;
-  const time = viji.time * animationSpeed.value;
-  
-  // Audio reactive calculations
-  let audioScale = 1;
-  let audioColorShift = 0;
-  if (audioReactive.value && audio.isConnected) {
-    // Scale based on volume (RMS)
-    audioScale = 1 + (audio.volume.rms * volumeSensitivity.value);
-    
-    // Color shift based on bass vs treble
-    const bassEnergy = (audio.bands.bass + audio.bands.subBass) / 2;
-    const trebleEnergy = (audio.bands.treble + audio.bands.presence) / 2;
-    audioColorShift = (bassEnergy * bassReactivity.value) - (trebleEnergy * trebleReactivity.value);
-  }
-  
-  // Video reactive calculations
-  let videoScale = 1;
-  let videoBrightness = 0;
-  if (videoReactive.value && video.isConnected) {
-    // Simple motion detection (placeholder - would use actual frame analysis)
-    const motionEnergy = Math.sin(time * 2) * 0.5 + 0.5; // Simulate motion
-    videoScale = 1 + (motionEnergy * motionSensitivity.value * 0.3);
-    
-    // Brightness-based effects
-    const brightness = Math.sin(time * 1.5) * 0.5 + 0.5; // Simulate brightness
-    videoBrightness = brightness * brightnessReactivity.value;
-  }
-  
-  // Touch interaction - use primary touch for center offset
-  if (touch.points.length > 0) {
-    const primaryTouch = touch.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 + time;
-    const radius = Math.min(viji.width, viji.height) * 0.3;
-    
-    let x = centerX + Math.cos(angle) * radius;
-    let y = centerY + Math.sin(angle) * radius;
-    
-    // Mouse attraction
-    if (mouseAttraction.value && 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 using parameter object
-    const rotation = time * rotationSpeed.value;
-    
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.rotate(rotation);
-    
-    // Set opacity using parameter object
-    ctx.globalAlpha = opacity.value;
-
-    let scaledSize = shapeSize.value * Math.min(viji.width, viji.height) / 1000;
-    
-    // Apply audio scaling
-    if (audioReactive.value && audio.isConnected) {
-      scaledSize *= audioScale;
-    }
-    
-    // Apply video scaling
-    if (videoReactive.value && video.isConnected) {
-      scaledSize *= videoScale;
-    }
-    
-    // Create gradient or solid fill using parameter objects
-    if (useGradient.value) {
-      const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, scaledSize / 2);
-      gradient.addColorStop(0, primaryColor.value);
-      gradient.addColorStop(1, secondaryColor.value);
-      ctx.fillStyle = gradient;
-    } else {
-      ctx.fillStyle = primaryColor.value;
-    }
-    
-    // Draw shape based on type using parameter object
-    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;
-    }
-    ctx.fill();
-    
-    ctx.restore();
-  }
-  
-  // Draw debug info showing parameter object properties
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
-  ctx.font = '12px monospace';
-  ctx.textAlign = 'left';
-  ctx.fillText('Frame: ' + viji.frameCount, 10, viji.height - 100);
-  ctx.fillText('Time: ' + viji.time.toFixed(2) + 's', 10, viji.height - 85);
-  ctx.fillText('FPS: ' + viji.fps, 10, viji.height - 70);
-  ctx.fillText('Shape Size: ' + shapeSize.value + ' (min: ' + shapeSize.min + ', max: ' + shapeSize.max + ')', 10, viji.height - 55);
-  ctx.fillText('Animation Speed: ' + animationSpeed.value.toFixed(1), 10, viji.height - 40);
-  ctx.fillText('Rotation: ' + rotationSpeed.value.toFixed(1), 10, viji.height - 25);
-  ctx.fillText('Particle Count: ' + particleCount.value + ' (max: ' + particleCount.max + ')', 10, viji.height - 10);
-  
-  // Draw interaction info
-  if (showInteractionInfo.value) {
-    ctx.fillStyle = 'rgba(255, 255, 0, 0.8)';
-    ctx.font = '12px monospace';
-    ctx.textAlign = 'right';
-    
-    let infoY = viji.height - 120;
-    
-    // Mouse info
-    ctx.fillText('INTERACTIONS:', viji.width - 10, infoY);
-    infoY += 15;
-    ctx.fillText('Mouse: ' + (mouse.isInCanvas ? `(${Math.round(mouse.x)}, ${Math.round(mouse.y)})` : 'outside'), viji.width - 10, infoY);
-    infoY += 15;
-    ctx.fillText('Mouse Buttons: ' + (mouse.leftButton ? 'L' : '-') + (mouse.rightButton ? 'R' : '-') + (mouse.middleButton ? 'M' : '-'), viji.width - 10, infoY);
-    infoY += 15;
-    
-    // Keyboard info
-    const activeKeys = Array.from(keyboard.activeKeys);
-    ctx.fillText('Keys: ' + (activeKeys.length > 0 ? activeKeys.slice(0, 5).join(', ') : 'none'), viji.width - 10, infoY);
-    infoY += 15;
-    
-    // Touch info
-    ctx.fillText('Touches: ' + touch.points.length, viji.width - 10, infoY);
-    infoY += 15;
-    
-    if (touch.points.length > 0) {
-      const touch0 = touch.points[0];
-      ctx.fillText('Touch 0: (' + Math.round(touch0.x) + ', ' + Math.round(touch0.y) + ')', viji.width - 10, infoY);
-    }
-  }
-  
-  // Draw mouse cursor indicator
-  if (mouseAttraction.value && mouse.isInCanvas) {
-    ctx.strokeStyle = 'rgba(255, 255, 0, 0.8)';
-    ctx.lineWidth = 2;
-    ctx.setLineDash([5, 5]);
-    ctx.beginPath();
-    ctx.arc(mouse.x, mouse.y, Math.min(viji.width, viji.height) / 50, 0, Math.PI * 2);
-    ctx.stroke();
-    ctx.setLineDash([]);
-  }
-  
-  // Draw audio visualization
-  if (showAudioViz.value && audio.isConnected) {
-    ctx.fillStyle = 'rgba(0, 255, 255, 0.8)';
-    ctx.font = '12px monospace';
-    ctx.textAlign = 'left';
-    
-    let audioY = 10;
-    
-    // Audio connection status
-    ctx.fillText('AUDIO ANALYSIS:', 10, audioY);
-    audioY += 15;
-    ctx.fillText('Connected: ' + (audio.isConnected ? 'Yes' : 'No'), 10, audioY);
-    audioY += 15;
-    
-    // Volume meters
-    ctx.fillText('Volume RMS: ' + (audio.volume.rms * 100).toFixed(1) + '%', 10, audioY);
-    audioY += 15;
-    ctx.fillText('Volume Peak: ' + (audio.volume.peak * 100).toFixed(1) + '%', 10, audioY);
-    audioY += 15;
-    
-    // Frequency bands
-    ctx.fillText('Bass: ' + (audio.bands.bass * 100).toFixed(1) + '%', 10, audioY);
-    audioY += 15;
-    ctx.fillText('Mid: ' + (audio.bands.mid * 100).toFixed(1) + '%', 10, audioY);
-    audioY += 15;
-    ctx.fillText('Treble: ' + (audio.bands.treble * 100).toFixed(1) + '%', 10, audioY);
-    audioY += 15;
-    
-    // Visual frequency bars
-    const barWidth = 4;
-    const barSpacing = 6;
-    const barHeight = 60;
-    const barStartX = 10;
-    const barStartY = audioY + 10;
-    
-    const bands = ['subBass', 'bass', 'lowMid', 'mid', 'highMid', 'presence', 'brilliance', 'treble'];
-    
-    for (let i = 0; i < bands.length; i++) {
-      const bandValue = audio.bands[bands[i]] || 0;
-      const x = barStartX + i * barSpacing;
-      const height = bandValue * barHeight;
-      
-      // Background bar
-      ctx.fillStyle = 'rgba(100, 100, 100, 0.3)';
-      ctx.fillRect(x, barStartY, barWidth, barHeight);
-      
-      // Value bar with color gradient
-      const hue = (i / bands.length) * 360;
-      ctx.fillStyle = `hsla(${hue}, 80%, 60%, 0.8)`;
-      ctx.fillRect(x, barStartY + barHeight - height, barWidth, height);
-    }
-    
-    // Band labels
-    ctx.fillStyle = 'rgba(0, 255, 255, 0.6)';
-    ctx.font = '8px monospace';
-    ctx.textAlign = 'center';
-    for (let i = 0; i < bands.length; i++) {
-      const x = barStartX + i * barSpacing + barWidth / 2;
-      ctx.fillText(bands[i].substring(0, 3), x, barStartY + barHeight + 12);
-    }
-  }
-  
-  // Draw video overlay and info
-  if (showVideoOverlay.value && video.isConnected) {
-    // ? ACTUAL VIDEO RENDERING: Draw real video frame
-    if (video.currentFrame) {
-      ctx.save();
-      ctx.globalAlpha = 0.7; // Semi-transparent overlay
-      
-      // Calculate video display size (maintain aspect ratio)
-      const videoWidth = video.frameWidth;
-      const videoHeight = video.frameHeight;
-      const displayWidth = 200;
-      const displayHeight = (videoHeight / videoWidth) * displayWidth;
-      
-      // Draw the actual video frame from OffscreenCanvas
-      try {
-        ctx.drawImage(
-          video.currentFrame, // OffscreenCanvas from worker
-          0, 0, videoWidth, videoHeight, // Source rectangle
-          viji.width - displayWidth - 10, 10, displayWidth, displayHeight // Destination rectangle
-        );
-      } catch (error) {
-        // Fallback if direct drawing fails
-        console.warn('Could not draw video frame:', error);
-        ctx.fillStyle = 'rgba(255, 100, 100, 0.3)';
-        ctx.fillRect(viji.width - displayWidth - 10, 10, displayWidth, displayHeight);
-        ctx.fillStyle = 'white';
-        ctx.font = '12px monospace';
-        ctx.textAlign = 'center';
-        ctx.fillText('Video Active', viji.width - displayWidth/2 - 10, 30);
-      }
-      
-      ctx.restore();
-      
-      // Video info text
-      ctx.fillStyle = 'rgba(0, 255, 255, 0.8)';
-      ctx.font = '12px monospace';
-      ctx.textAlign = 'right';
-      
-      let videoInfoY = 140;
-      ctx.fillText('VIDEO ANALYSIS:', viji.width - 10, videoInfoY);
-      videoInfoY += 15;
-      ctx.fillText('Connected: ' + (video.isConnected ? 'Yes' : 'No'), viji.width - 10, videoInfoY);
-      videoInfoY += 15;
-      ctx.fillText('Resolution: ' + video.frameWidth + 'x' + video.frameHeight, viji.width - 10, videoInfoY);
-      videoInfoY += 15;
-      ctx.fillText('Frame Rate: ' + video.frameRate.toFixed(1) + ' FPS', viji.width - 10, videoInfoY);
-      videoInfoY += 15;
-      ctx.fillText('Motion: ' + (videoReactive.value ? 'Reactive' : 'Static'), viji.width - 10, videoInfoY);
-    }
-  }
-}