@viji-dev/sdk 1.0.0

package/scenes/particle-system/main.js

@@ -0,0 +1,349 @@
+// Interactive Particle System Scene - Parameter Object API
+console.log('⚡ PARTICLE SYSTEM SCENE LOADED');
+
+// Define parameters using helper functions (returns parameter objects)
+const particleCount = viji.slider(150, {
+  min: 10,
+  max: 500,
+  step: 10,
+  label: 'Particle Count',
+  description: 'Number of particles in the system',
+  group: 'particles'
+});
+
+const particleSize = viji.slider(3, {
+  min: 1,
+  max: 10,
+  step: 0.5,
+  label: 'Particle Size',
+  description: 'Base size of particles',
+  group: 'particles'
+});
+
+const particleLifetime = viji.slider(5.0, {
+  min: 1.0,
+  max: 20.0,
+  step: 0.5,
+  label: 'Particle Lifetime',
+  description: 'How long particles live (seconds)',
+  group: 'particles'
+});
+
+const gravity = viji.slider(0.1, {
+  min: -1.0,
+  max: 2.0,
+  step: 0.05,
+  label: 'Gravity',
+  description: 'Downward force on particles',
+  group: 'physics'
+});
+
+const airResistance = viji.slider(0.98, {
+  min: 0.9,
+  max: 1.0,
+  step: 0.005,
+  label: 'Air Resistance',
+  description: 'Velocity dampening factor',
+  group: 'physics'
+});
+
+const bounce = viji.slider(0.7, {
+  min: 0.0,
+  max: 1.0,
+  step: 0.05,
+  label: 'Bounce',
+  description: 'Energy retained on collision',
+  group: 'physics'
+});
+
+const friction = viji.slider(0.9, {
+  min: 0.5,
+  max: 1.0,
+  step: 0.05,
+  label: 'Friction',
+  description: 'Friction when particles hit ground',
+  group: 'physics'
+});
+
+const mouseInteraction = viji.toggle(true, {
+  label: 'Mouse Interaction',
+  description: 'Particles react to mouse movement',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+const mouseForce = viji.slider(5.0, {
+  min: 0.1,
+  max: 20.0,
+  step: 0.5,
+  label: 'Mouse Force',
+  description: 'Strength of mouse attraction/repulsion',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+const mouseRadius = viji.slider(100, {
+  min: 20,
+  max: 300,
+  step: 10,
+  label: 'Mouse Radius',
+  description: 'Range of mouse influence',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+const attractMode = viji.toggle(false, {
+  label: 'Attract Mode',
+  description: 'Attract particles to mouse (vs repel)',
+  group: 'interaction',
+  category: 'interaction'
+});
+
+const colorMode = viji.select('velocity', {
+  options: ['velocity', 'age', 'position', 'static'],
+  label: 'Color Mode',
+  description: 'How particles are colored',
+  group: 'colors'
+});
+
+const staticColor = viji.color('#ff6b6b', {
+  label: 'Static Color',
+  description: 'Color when using static color mode',
+  group: 'colors'
+});
+
+const backgroundColor = viji.color('#0a0a0a', {
+  label: 'Background Color',
+  description: 'Scene background color',
+  group: 'colors'
+});
+
+// Scene state
+let particles = [];
+let frameTime = 0;
+
+class Particle {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+    this.vx = (Math.random() - 0.5) * 4;
+    this.vy = (Math.random() - 0.5) * 4;
+    this.age = 0;
+    this.maxAge = particleLifetime.value + (Math.random() - 0.5) * 2;
+    this.size = particleSize.value + (Math.random() - 0.5) * 2;
+    this.id = Math.random();
+  }
+  
+  update(deltaTime, mouse) {
+    const dt = deltaTime / 16.67; // Normalize to ~60fps
+    
+    // Age the particle
+    this.age += dt;
+    
+    // Apply physics
+    this.vy += gravity.value * dt;
+    this.vx *= Math.pow(airResistance.value, dt);
+    this.vy *= Math.pow(airResistance.value, dt);
+    
+    // Mouse interaction
+    if (mouseInteraction.value && mouse && mouse.isInCanvas) {
+      const dx = mouse.x - this.x;
+      const dy = mouse.y - this.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      
+      if (dist < mouseRadius.value && dist > 0) {
+        const force = mouseForce.value * (1 - dist / mouseRadius.value);
+        const angle = Math.atan2(dy, dx);
+        
+        if (attractMode.value) {
+          // Attract to mouse
+          this.vx += Math.cos(angle) * force * dt;
+          this.vy += Math.sin(angle) * force * dt;
+        } else {
+          // Repel from mouse
+          this.vx -= Math.cos(angle) * force * dt;
+          this.vy -= Math.sin(angle) * force * dt;
+        }
+      }
+    }
+    
+    // Update position
+    this.x += this.vx * dt;
+    this.y += this.vy * dt;
+  }
+  
+  checkCollisions(width, height) {
+    // Floor collision
+    if (this.y + this.size > height) {
+      this.y = height - this.size;
+      this.vy *= -bounce.value;
+      this.vx *= friction.value;
+    }
+    
+    // Ceiling collision
+    if (this.y - this.size < 0) {
+      this.y = this.size;
+      this.vy *= -bounce.value;
+    }
+    
+    // Wall collisions
+    if (this.x + this.size > width) {
+      this.x = width - this.size;
+      this.vx *= -bounce.value;
+    }
+    if (this.x - this.size < 0) {
+      this.x = this.size;
+      this.vx *= -bounce.value;
+    }
+  }
+  
+  isDead() {
+    return this.age >= this.maxAge;
+  }
+  
+  getColor() {
+    switch (colorMode.value) {
+      case 'velocity':
+        const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
+        const hue = Math.min(speed * 20, 360);
+        return `hsl(${hue}, 80%, 60%)`;
+        
+      case 'age':
+        const ageRatio = this.age / this.maxAge;
+        const ageBrightness = Math.max(0, 1 - ageRatio);
+        return `hsl(30, 80%, ${ageBrightness * 60 + 20}%)`;
+        
+      case 'position':
+        const positionHue = (this.x / 800) * 360; // Assumes ~800px width
+        return `hsl(${positionHue}, 70%, 50%)`;
+        
+      case 'static':
+      default:
+        return staticColor.value;
+    }
+  }
+}
+
+function spawnParticle(x, y) {
+  if (particles.length < particleCount.value) {
+    particles.push(new Particle(x, y));
+  }
+}
+
+function spawnParticles(count, width, height) {
+  for (let i = 0; i < count; i++) {
+    if (particles.length < particleCount.value) {
+      const x = Math.random() * width;
+      const y = Math.random() * height * 0.5; // Spawn in upper half
+      spawnParticle(x, y);
+    }
+  }
+}
+
+// Render function using parameter object API
+function render(viji) {
+  const ctx = viji.useContext('2d');
+  const mouse = viji.mouse;
+  
+  frameTime += viji.deltaTime;
+  
+  // Clear background
+  ctx.fillStyle = backgroundColor.value;
+  ctx.fillRect(0, 0, viji.width, viji.height);
+  
+  // Maintain particle count
+  const targetCount = particleCount.value;
+  if (particles.length < targetCount) {
+    const needed = Math.min(5, targetCount - particles.length); // Spawn gradually
+    spawnParticles(needed, viji.width, viji.height);
+  }
+  
+  // Update particles
+  for (let i = particles.length - 1; i >= 0; i--) {
+    const particle = particles[i];
+    
+    particle.update(viji.deltaTime, mouse);
+    particle.checkCollisions(viji.width, viji.height);
+    
+    // Remove dead particles
+    if (particle.isDead() || particles.length > targetCount) {
+      particles.splice(i, 1);
+      continue;
+    }
+  }
+  
+  // Draw particles
+  particles.forEach(particle => {
+    ctx.fillStyle = particle.getColor();
+    ctx.beginPath();
+    ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+    ctx.fill();
+    
+    // Add slight glow effect
+    const glowSize = particle.size * 2;
+    const gradient = ctx.createRadialGradient(
+      particle.x, particle.y, particle.size,
+      particle.x, particle.y, glowSize
+    );
+    // Convert color to rgba format with alpha transparency
+    const baseColor = particle.getColor();
+    let colorWithAlpha;
+    if (baseColor.startsWith('hsl(')) {
+      // Convert hsl(h, s, l) to hsla(h, s, l, a)
+      colorWithAlpha = baseColor.replace('hsl(', 'hsla(').replace(')', ', 0.25)');
+    } else if (baseColor.startsWith('#')) {
+      // Convert hex to rgba
+      const hex = baseColor.slice(1);
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      colorWithAlpha = `rgba(${r}, ${g}, ${b}, 0.25)`;
+    } else {
+      // Fallback for other color formats
+      colorWithAlpha = baseColor;
+    }
+    gradient.addColorStop(0, colorWithAlpha);
+    gradient.addColorStop(1, 'transparent');
+    ctx.fillStyle = gradient;
+    ctx.beginPath();
+    ctx.arc(particle.x, particle.y, glowSize, 0, Math.PI * 2);
+    ctx.fill();
+  });
+  
+  // Draw mouse interaction indicator
+  if (mouseInteraction.value && mouse && mouse.isInCanvas) {
+    ctx.strokeStyle = attractMode.value ? '#00ff00' : '#ff0000';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([5, 5]);
+    ctx.beginPath();
+    ctx.arc(mouse.x, mouse.y, mouseRadius.value, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    
+    // Draw force indicator
+    ctx.fillStyle = attractMode.value ? 'rgba(0, 255, 0, 0.1)' : 'rgba(255, 0, 0, 0.1)';
+    ctx.beginPath();
+    ctx.arc(mouse.x, mouse.y, mouseRadius.value, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  
+  // Draw info
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+  ctx.font = '16px monospace';
+  ctx.textAlign = 'left';
+  ctx.fillText(`🎯 PARTICLE SYSTEM`, 20, 30);
+  
+  ctx.font = '12px monospace';
+  ctx.fillText(`Particles: ${particles.length} / ${particleCount.value}`, 20, 55);
+  ctx.fillText(`Physics: G=${gravity.value} AR=${airResistance.value}`, 20, 75);
+  ctx.fillText(`Color Mode: ${colorMode.value}`, 20, 95);
+  
+  if (mouseInteraction.value && mouse && mouse.isInCanvas) {
+    ctx.fillText(`Mouse: ${attractMode.value ? 'ATTRACT' : 'REPEL'} (Force: ${mouseForce.value})`, 20, 115);
+  }
+  
+  // Draw frame 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/scenes/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "moduleDetection": "force"
+  },
+  "include": [
+    "./**/*"
+  ]
+}
+