@viji-dev/sdk 1.0.0 → 1.0.1

package/scenes/video-mirror/main.ts

@@ -1,436 +0,0 @@
-// Video Reactive Mirror Scene - Parameter Object API
-console.log('📹 VIDEO MIRROR SCENE LOADED');
-
-// Define parameters using helper functions (returns parameter objects)
-const videoBlur = viji.slider(0, {
-  min: 0,
-  max: 20,
-  step: 1,
-  label: 'Video Blur',
-  description: 'Apply blur effect to video',
-  group: 'video',
-  category: 'video'
-});
-
-const videoSaturation = viji.slider(1.0, {
-  min: 0,
-  max: 3.0,
-  step: 0.1,
-  label: 'Video Saturation',
-  description: 'Color saturation level',
-  group: 'video',
-  category: 'video'
-});
-
-const videoBrightness = viji.slider(1.0, {
-  min: 0.1,
-  max: 3.0,
-  step: 0.1,
-  label: 'Video Brightness',
-  description: 'Brightness adjustment',
-  group: 'video',
-  category: 'video'
-});
-
-const videoContrast = viji.slider(1.0, {
-  min: 0.1,
-  max: 3.0,
-  step: 0.1,
-  label: 'Video Contrast',
-  description: 'Contrast adjustment',
-  group: 'video',
-  category: 'video'
-});
-
-const mirrorMode = viji.select('none', {
-  options: ['none', 'horizontal', 'vertical', 'both'],
-  label: 'Mirror Mode',
-  description: 'How to mirror the video',
-  group: 'video',
-  category: 'video'
-});
-
-const flipHorizontal = viji.toggle(false, {
-  label: 'Flip Horizontal',
-  description: 'Flip video horizontally',
-  group: 'video',
-  category: 'video'
-});
-
-const flipVertical = viji.toggle(false, {
-  label: 'Flip Vertical',
-  description: 'Flip video vertically',
-  group: 'video',
-  category: 'video'
-});
-
-const waveDistortion = viji.slider(0, {
-  min: 0,
-  max: 50,
-  step: 2,
-  label: 'Wave Distortion',
-  description: 'Strength of wave distortion effect',
-  group: 'effects'
-});
-
-const waveFrequency = viji.slider(0.01, {
-  min: 0.001,
-  max: 0.1,
-  step: 0.005,
-  label: 'Wave Frequency',
-  description: 'Frequency of wave distortion',
-  group: 'effects'
-});
-
-const waveSpeed = viji.slider(1.0, {
-  min: 0.1,
-  max: 5.0,
-  step: 0.1,
-  label: 'Wave Speed',
-  description: 'Speed of wave animation',
-  group: 'effects'
-});
-
-const pixelate = viji.slider(1, {
-  min: 1,
-  max: 32,
-  step: 1,
-  label: 'Pixelate',
-  description: 'Pixelation level (1 = no pixelation)',
-  group: 'effects'
-});
-
-const colorShift = viji.slider(0, {
-  min: 0,
-  max: 360,
-  step: 10,
-  label: 'Color Shift',
-  description: 'Hue shift in degrees',
-  group: 'effects'
-});
-
-const colorInvert = viji.toggle(false, {
-  label: 'Color Invert',
-  description: 'Invert video colors',
-  group: 'effects'
-});
-
-const colorChannels = viji.select('rgb', {
-  options: ['rgb', 'red', 'green', 'blue', 'monochrome'],
-  label: 'Color Channels',
-  description: 'Which color channels to display',
-  group: 'effects'
-});
-
-const glitchEffect = viji.toggle(false, {
-  label: 'Glitch Effect',
-  description: 'Random glitch artifacts',
-  group: 'effects'
-});
-
-const showGrid = viji.toggle(false, {
-  label: 'Show Grid',
-  description: 'Overlay grid lines',
-  group: 'overlay'
-});
-
-const gridSize = viji.slider(50, {
-  min: 10,
-  max: 200,
-  step: 10,
-  label: 'Grid Size',
-  description: 'Size of grid cells',
-  group: 'overlay'
-});
-
-const showScanlines = viji.toggle(false, {
-  label: 'Show Scanlines',
-  description: 'CRT-style scanlines',
-  group: 'overlay'
-});
-
-const scanlineIntensity = viji.slider(0.5, {
-  min: 0.1,
-  max: 1.0,
-  step: 0.1,
-  label: 'Scanline Intensity',
-  description: 'Opacity of scanlines',
-  group: 'overlay'
-});
-
-const audioReactive = viji.toggle(false, {
-  label: 'Audio Reactive',
-  description: 'Make effects react to audio',
-  group: 'audio',
-  category: 'audio'
-});
-
-const audioInfluence = viji.slider(1.0, {
-  min: 0.1,
-  max: 5.0,
-  step: 0.1,
-  label: 'Audio Influence',
-  description: 'How much audio affects video',
-  group: 'audio',
-  category: 'audio'
-});
-
-
-// Helper function to apply video effects
-function applyVideoEffects(_ctx: any, imageData: ImageData, _width: number, _height: number, _time: number, audio?: any): ImageData {
-  const data = imageData.data;
-  
-  // Audio reactive modulation
-  let audioMod = 1;
-  if (audioReactive.value && audio && audio.isConnected) {
-    const volume = ((audio && audio.volume && audio.volume.rms) || 0);
-    audioMod = 1 + (volume * audioInfluence.value);
-  }
-  
-  for (let i = 0; i < data.length; i += 4) {
-    let r = data[i];
-    let g = data[i + 1];
-    let b = data[i + 2];
-    
-    // Apply brightness and contrast
-    r = Math.min(255, Math.max(0, (r - 128) * videoContrast.value + 128) * videoBrightness.value * audioMod);
-    g = Math.min(255, Math.max(0, (g - 128) * videoContrast.value + 128) * videoBrightness.value * audioMod);
-    b = Math.min(255, Math.max(0, (b - 128) * videoContrast.value + 128) * videoBrightness.value * audioMod);
-    
-    // Apply saturation
-    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
-    r = gray + (r - gray) * videoSaturation.value;
-    g = gray + (g - gray) * videoSaturation.value;
-    b = gray + (b - gray) * videoSaturation.value;
-    
-    // Color channel filtering
-    switch (colorChannels.value) {
-      case 'red':
-        g = b = 0;
-        break;
-      case 'green':
-        r = b = 0;
-        break;
-      case 'blue':
-        r = g = 0;
-        break;
-      case 'monochrome':
-        r = g = b = gray;
-        break;
-    }
-    
-    // Color inversion
-    if (colorInvert.value) {
-      r = 255 - r;
-      g = 255 - g;
-      b = 255 - b;
-    }
-    
-    // Color shift (simple hue rotation approximation)
-    if (colorShift.value > 0) {
-      const shift = colorShift.value / 360;
-      const temp = r;
-      r = Math.min(255, r * (1 - shift) + g * shift);
-      g = Math.min(255, g * (1 - shift) + b * shift);
-      b = Math.min(255, b * (1 - shift) + temp * shift);
-    }
-    
-    data[i] = Math.min(255, Math.max(0, r));
-    data[i + 1] = Math.min(255, Math.max(0, g));
-    data[i + 2] = Math.min(255, Math.max(0, b));
-  }
-  
-  return imageData;
-}
-
-// Render function using parameter object API  
-function render(viji: any) {
-  const ctx = viji.useContext('2d');
-  const video = viji.video;
-  const audio = viji.audio;
-  
-  // Clear background
-  ctx.fillStyle = '#000000';
-  ctx.fillRect(0, 0, viji.width, viji.height);
-  
-  // Check if video is connected
-  if (!(video && video.isConnected) || !video.currentFrame) {
-    // Show instructions when no video
-    ctx.fillStyle = '#ff6b6b';
-    ctx.font = '24px Arial';
-    ctx.textAlign = 'center';
-    ctx.fillText('📹 Connect video to see mirror effects', viji.width / 2, viji.height / 2);
-    
-    ctx.font = '16px Arial';
-    ctx.fillStyle = '#4ecdc4';
-    ctx.fillText('Use the video controls to connect camera, file, or screen capture', viji.width / 2, viji.height / 2 + 40);
-    return;
-  }
-  
-  try {
-    const videoWidth = video.frameWidth || 640;
-    const videoHeight = video.frameHeight || 480;
-    
-    // Calculate display dimensions
-    const aspectRatio = videoWidth / videoHeight;
-    const canvasAspect = viji.width / viji.height;
-    
-    let drawWidth, drawHeight, drawX, drawY;
-    
-    if (aspectRatio > canvasAspect) {
-      drawWidth = viji.width;
-      drawHeight = viji.width / aspectRatio;
-      drawX = 0;
-      drawY = (viji.height - drawHeight) / 2;
-    } else {
-      drawWidth = viji.height * aspectRatio;
-      drawHeight = viji.height;
-      drawX = (viji.width - drawWidth) / 2;
-      drawY = 0;
-    }
-    
-    ctx.save();
-    
-    // Apply transformations
-    if (flipHorizontal.value || flipVertical.value) {
-      ctx.translate(drawX + drawWidth / 2, drawY + drawHeight / 2);
-      ctx.scale(flipHorizontal.value ? -1 : 1, flipVertical.value ? -1 : 1);
-      ctx.translate(-drawWidth / 2, -drawHeight / 2);
-      drawX = drawY = 0;
-    }
-    
-    // Apply wave distortion
-    if (waveDistortion.value > 0) {
-      const time = viji.time * waveSpeed.value;
-      for (let y = 0; y < drawHeight; y += 10) {
-        const wave = Math.sin((y * waveFrequency.value) + time) * waveDistortion.value;
-        ctx.drawImage(
-          video.currentFrame,
-          0, y, videoWidth, 10,
-          drawX + wave, drawY + y, drawWidth, 10
-        );
-      }
-    } else {
-      // Normal drawing
-      ctx.drawImage(video.currentFrame, drawX, drawY, drawWidth, drawHeight);
-    }
-    
-    // Apply pixelation
-    if (pixelate.value > 1) {
-      const pixelSize = pixelate.value;
-      
-      for (let y = 0; y < drawHeight; y += pixelSize) {
-        for (let x = 0; x < drawWidth; x += pixelSize) {
-          const pixelData = ctx.getImageData(drawX + x, drawY + y, 1, 1).data;
-          ctx.fillStyle = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
-          ctx.fillRect(drawX + x, drawY + y, pixelSize, pixelSize);
-        }
-      }
-    }
-    
-    // Apply post-processing effects
-    if (videoBlur.value > 0 || videoSaturation.value !== 1 || videoBrightness.value !== 1 || 
-        videoContrast.value !== 1 || colorInvert.value || colorShift.value > 0 || 
-        colorChannels.value !== 'rgb' || audioReactive.value) {
-      const imageData = ctx.getImageData(drawX, drawY, drawWidth, drawHeight);
-      const processedData = applyVideoEffects(ctx, imageData, drawWidth, drawHeight, viji.time, audio);
-      ctx.putImageData(processedData, drawX, drawY);
-    }
-    
-    // Apply blur filter if needed
-    if (videoBlur.value > 0) {
-      ctx.filter = `blur(${videoBlur.value}px)`;
-      ctx.drawImage(ctx.canvas, drawX, drawY, drawWidth, drawHeight, drawX, drawY, drawWidth, drawHeight);
-      ctx.filter = 'none';
-    }
-    
-    ctx.restore();
-    
-    // Mirror mode
-    if (mirrorMode.value !== 'none') {
-      
-      if (mirrorMode.value === 'horizontal' || mirrorMode.value === 'both') {
-        // Mirror right half to left half
-        ctx.save();
-        ctx.scale(-1, 1);
-        ctx.drawImage(ctx.canvas, 
-          -drawX - drawWidth, drawY, drawWidth / 2, drawHeight,
-          -drawX - drawWidth / 2, drawY, drawWidth / 2, drawHeight);
-        ctx.restore();
-      }
-      
-      if (mirrorMode.value === 'vertical' || mirrorMode.value === 'both') {
-        // Mirror bottom half to top half
-        ctx.save();
-        ctx.scale(1, -1);
-        ctx.drawImage(ctx.canvas,
-          drawX, -drawY - drawHeight, drawWidth, drawHeight / 2,
-          drawX, -drawY - drawHeight / 2, drawWidth, drawHeight / 2);
-        ctx.restore();
-      }
-    }
-    
-    // Glitch effect
-    if (glitchEffect.value && Math.random() < 0.1) {
-      const glitchHeight = Math.random() * 20 + 5;
-      const glitchY = Math.random() * (drawHeight - glitchHeight);
-      const offset = (Math.random() - 0.5) * 20;
-      
-      const glitchData = ctx.getImageData(drawX, drawY + glitchY, drawWidth, glitchHeight);
-      ctx.putImageData(glitchData, drawX + offset, drawY + glitchY);
-    }
-    
-    // Overlay effects
-    if (showGrid.value) {
-      ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
-      ctx.lineWidth = 1;
-      
-      for (let x = 0; x <= viji.width; x += gridSize.value) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, viji.height);
-        ctx.stroke();
-      }
-      
-      for (let y = 0; y <= viji.height; y += gridSize.value) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(viji.width, y);
-        ctx.stroke();
-      }
-    }
-    
-    if (showScanlines.value) {
-      ctx.fillStyle = `rgba(0, 0, 0, ${scanlineIntensity.value})`;
-      for (let y = 0; y < viji.height; y += 4) {
-        ctx.fillRect(0, y, viji.width, 2);
-      }
-    }
-    
-  } catch (error) {
-    console.error('Video processing error:', error);
-    ctx.fillStyle = '#ff4444';
-    ctx.font = '16px Arial';
-    ctx.textAlign = 'center';
-    ctx.fillText('Video processing error', viji.width / 2, viji.height / 2);
-  }
-  
-  // Draw info overlay
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
-  ctx.font = '14px monospace';
-  ctx.textAlign = 'left';
-  
-  ctx.fillText('📹 VIDEO MIRROR', 20, 25);
-  ctx.font = '11px monospace';
-  ctx.fillText(`Resolution: ${video.frameWidth}x${video.frameHeight}`, 20, 45);
-  ctx.fillText(`Effects: ${mirrorMode.value} mirror, ${colorChannels.value} channels`, 20, 60);
-  
-  if (audioReactive.value && audio && audio.isConnected) {
-    ctx.fillText(`🎵 Audio: ${((((audio && audio.volume && audio.volume.rms) || 0) * 100).toFixed(1))}%`, 20, 75);
-  }
-  
-  // Performance info
-  ctx.textAlign = 'right';
-  ctx.fillText(`Frame: ${viji.frameCount}`, viji.width - 20, viji.height - 25);
-  ctx.fillText(`Time: ${viji.time.toFixed(1)}s`, viji.width - 20, viji.height - 10);
-}

package/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}