@vib3code/sdk 2.0.1 → 2.0.3-canary.0a63e71

package/src/experimental/LiveDirector.js

@@ -0,0 +1,143 @@
+/**
+ * LiveDirector - Autonomous Creative Agent
+ *
+ * An AI agent that analyzes user input ("Audience Reaction") and adjusts the
+ * VIB3Universe in real-time to maintain engagement, flow, and narrative tension.
+ *
+ * @experimental
+ */
+export class LiveDirector {
+    constructor(universe) {
+        this.universe = universe;
+        this.active = false;
+
+        // Audience State
+        this.audience = {
+            energy: 0.5, // 0.0 (Bored) -> 1.0 (Excited)
+            attention: 0.8, // 0.0 (Distracted) -> 1.0 (Focused)
+            sentiment: 0.0, // -1.0 (Negative) -> 1.0 (Positive)
+        };
+
+        // Directing State
+        this.pacing = 'build'; // 'intro', 'build', 'climax', 'resolve'
+        this.lastActionTime = 0;
+        this.decisionInterval = 2000; // ms
+
+        // Bind methods
+        this.update = this.update.bind(this);
+    }
+
+    /**
+     * Start the director loop.
+     */
+    start() {
+        if (this.active) return;
+        this.active = true;
+        this.lastActionTime = performance.now();
+        requestAnimationFrame(this.update);
+        console.log('LiveDirector: Started directing.');
+    }
+
+    /**
+     * Stop the director loop.
+     */
+    stop() {
+        this.active = false;
+        console.log('LiveDirector: Stopped directing.');
+    }
+
+    /**
+     * Feed audience input signal.
+     * @param {string} type - 'audio', 'video', 'input'
+     * @param {object} data - Analysis data
+     */
+    feedInput(type, data) {
+        if (type === 'audio') {
+            // Loud audio = high energy
+            this.audience.energy = Math.min(1.0, this.audience.energy + data.volume * 0.1);
+        } else if (type === 'input') {
+            // Interaction = high attention
+            this.audience.attention = Math.min(1.0, this.audience.attention + 0.05);
+        }
+
+        // Decay logic runs in update loop
+    }
+
+    /**
+     * Main decision loop.
+     * @param {number} timestamp
+     */
+    update(timestamp) {
+        if (!this.active) return;
+
+        const dt = (timestamp - this.lastActionTime);
+
+        // Decay audience metrics over time
+        this.audience.energy = Math.max(0, this.audience.energy - 0.001);
+        this.audience.attention = Math.max(0, this.audience.attention - 0.0005);
+
+        // Make a directing decision periodically
+        if (dt > this.decisionInterval) {
+            this.makeDecision();
+            this.lastActionTime = timestamp;
+        }
+
+        requestAnimationFrame(this.update);
+    }
+
+    /**
+     * The "Brain" of the Director.
+     * Decides what to change based on current state.
+     */
+    makeDecision() {
+        const { energy, attention } = this.audience;
+
+        console.log(`LiveDirector: Audience state - Energy: ${energy.toFixed(2)}, Attention: ${attention.toFixed(2)}`);
+
+        // Strategy: Maintain a "Sine Wave" of tension
+        // If energy is too low, spike it. If too high, calm it down.
+
+        if (attention < 0.3) {
+            // Lost attention -> TRIGGER EVENT
+            this.triggerEvent('focus_snap');
+        } else if (energy < 0.2) {
+            // Boring -> INCREASE INTENSITY
+            this.adjustGlobalParams({ speed: 1.5, chaos: 0.4 });
+        } else if (energy > 0.8) {
+            // Too frantic -> CALM DOWN
+            this.adjustGlobalParams({ speed: 0.5, chaos: 0.1 });
+        } else {
+            // Just right -> DO NOTHING or subtle shift
+            // Maybe drift hue slightly?
+        }
+    }
+
+    /**
+     * Execute a parameter adjustment across all actors.
+     * @param {object} params
+     */
+    adjustGlobalParams(params) {
+        console.log('LiveDirector: Adjusting global parameters', params);
+        this.universe.actors.forEach(actor => {
+            if (actor.animator) {
+                actor.animator.transition(params, 2000, 'easeInOut');
+            }
+        });
+    }
+
+    /**
+     * Trigger a specific scripted event.
+     * @param {string} eventName
+     */
+    triggerEvent(eventName) {
+        console.log(`LiveDirector: Triggering event '${eventName}'`);
+        // Example: Flash screen, spawn particle burst, etc.
+        if (eventName === 'focus_snap') {
+             // Quick snap zoom / flash
+             this.adjustGlobalParams({ intensity: 1.0, speed: 0.0 });
+             setTimeout(() => {
+                 this.adjustGlobalParams({ intensity: 0.5, speed: 1.0 });
+             }, 200);
+        }
+    }
+}

package/src/experimental/PlayerController4D.js

@@ -0,0 +1,154 @@
+/**
+ * PlayerController4D - Navigation in Hyperspace
+ *
+ * Maps 2D/3D inputs (WASD, Mouse) into 4D motion vectors (X, Y, Z, W).
+ * Handles movement, strafing, and "portal rotation" (XW/YW planes).
+ *
+ * @experimental
+ */
+export class PlayerController4D {
+    /**
+     * @param {HTMLElement} domElement - Element to listen for events on
+     * @param {object} engine - VIB3Engine instance to drive
+     */
+    constructor(domElement, engine) {
+        this.domElement = domElement;
+        this.engine = engine;
+
+        // Input State
+        this.keys = {
+            w: false, a: false, s: false, d: false,
+            q: false, e: false, space: false, shift: false
+        };
+
+        this.mouse = {
+            dx: 0, dy: 0,
+            down: false
+        };
+
+        // Player Physics State
+        this.velocity = { x: 0, y: 0, z: 0, w: 0 };
+        this.rotation = { x: 0, y: 0 }; // Looking direction (Pitch/Yaw)
+        this.portalRot = 0; // XW plane rotation
+
+        // Config
+        this.speed = 5.0;
+        this.sensitivity = 0.002;
+        this.damping = 0.9;
+
+        // Bind events
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onMouseUp = this.onMouseUp.bind(this);
+
+        this.setupListeners();
+    }
+
+    setupListeners() {
+        window.addEventListener('keydown', this.onKeyDown);
+        window.addEventListener('keyup', this.onKeyUp);
+        this.domElement.addEventListener('mousemove', this.onMouseMove);
+        this.domElement.addEventListener('mousedown', this.onMouseDown);
+        this.domElement.addEventListener('mouseup', this.onMouseUp);
+    }
+
+    onKeyDown(e) {
+        const k = e.key.toLowerCase();
+        if (this.keys.hasOwnProperty(k)) this.keys[k] = true;
+    }
+
+    onKeyUp(e) {
+        const k = e.key.toLowerCase();
+        if (this.keys.hasOwnProperty(k)) this.keys[k] = false;
+    }
+
+    onMouseDown() { this.mouse.down = true; }
+    onMouseUp() { this.mouse.down = false; }
+
+    onMouseMove(e) {
+        if (this.mouse.down) {
+            this.mouse.dx += e.movementX;
+            this.mouse.dy += e.movementY;
+        }
+    }
+
+    /**
+     * Update loop called by GameLoop.
+     * @param {number} dt
+     */
+    update(dt) {
+        // 1. Process Rotation (Mouse)
+        this.rotation.y -= this.mouse.dx * this.sensitivity; // Yaw
+        this.rotation.x -= this.mouse.dy * this.sensitivity; // Pitch
+
+        // Clamp pitch to avoid flipping
+        this.rotation.x = Math.max(-Math.PI/2, Math.min(Math.PI/2, this.rotation.x));
+
+        // Reset mouse delta (consumed)
+        this.mouse.dx = 0;
+        this.mouse.dy = 0;
+
+        // 2. Process Movement (WASD)
+        // Forward vector derived from Yaw
+        const fwdX = Math.sin(this.rotation.y);
+        const fwdZ = Math.cos(this.rotation.y);
+        const rightX = Math.cos(this.rotation.y); // Perpendicular
+        const rightZ = -Math.sin(this.rotation.y);
+
+        const moveSpeed = this.speed * dt;
+
+        if (this.keys.w) {
+            this.velocity.x += fwdX * moveSpeed;
+            this.velocity.z -= fwdZ * moveSpeed; // WebGL Z is negative forward
+        }
+        if (this.keys.s) {
+            this.velocity.x -= fwdX * moveSpeed;
+            this.velocity.z += fwdZ * moveSpeed;
+        }
+        if (this.keys.a) {
+            this.velocity.x -= rightX * moveSpeed;
+            this.velocity.z += rightZ * moveSpeed;
+        }
+        if (this.keys.d) {
+            this.velocity.x += rightX * moveSpeed;
+            this.velocity.z -= rightZ * moveSpeed;
+        }
+
+        // Vertical Movement (Space/Shift)
+        if (this.keys.space) this.velocity.y += moveSpeed;
+        if (this.keys.shift) this.velocity.y -= moveSpeed;
+
+        // 4D Portal Rotation (Q/E)
+        if (this.keys.q) this.portalRot -= moveSpeed;
+        if (this.keys.e) this.portalRot += moveSpeed;
+
+        // Apply Damping (Friction)
+        this.velocity.x *= this.damping;
+        this.velocity.y *= this.damping;
+        this.velocity.z *= this.damping;
+
+        // 3. Apply to VIB3Engine Parameters
+        // Map 4D position to shader uniforms (e.g., u_noiseOffset or camera pos)
+        // Here we map to rotation parameters as a proxy for camera movement
+
+        // Visual feedback: Velocity tilts the view
+        this.engine.setParameter('rot4dXY', this.rotation.y + this.velocity.x * 0.1);
+        this.engine.setParameter('rot4dYZ', this.rotation.x + this.velocity.y * 0.1);
+
+        // Portal rotation affects XW plane
+        this.engine.setParameter('rot4dXW', this.portalRot);
+
+        // "Moving forward" increases grid density/scale to simulate zooming through
+        // In a real implementation, we'd update a u_cameraPosition uniform
+    }
+
+    destroy() {
+        window.removeEventListener('keydown', this.onKeyDown);
+        window.removeEventListener('keyup', this.onKeyUp);
+        this.domElement.removeEventListener('mousemove', this.onMouseMove);
+        this.domElement.removeEventListener('mousedown', this.onMouseDown);
+        this.domElement.removeEventListener('mouseup', this.onMouseUp);
+    }
+}

package/src/experimental/VIB3Actor.js

@@ -0,0 +1,138 @@
+/**
+ * VIB3Actor - A VIB3+ Entity with Personality
+ *
+ * Wraps a VIB3Engine instance with emotional state and expression logic.
+ * Actors can "emote" (transition parameters based on mood) and "speak"
+ * (modulate geometry).
+ *
+ * @experimental
+ */
+import { TransitionAnimator } from '../creative/TransitionAnimator.js';
+
+export class VIB3Actor {
+    /**
+     * @param {VIB3Engine} engine - The VIB3 engine instance
+     * @param {string|object} profile - Personality profile name or object
+     */
+    constructor(engine, profile = 'neutral') {
+        this.engine = engine;
+        this.id = `actor_${Math.random().toString(36).substr(2, 9)}`;
+        this.active = true;
+
+        // Emotional State (-1.0 to 1.0)
+        this.emotion = {
+            valence: 0, // Positive/Negative
+            arousal: 0  // High/Low Energy
+        };
+
+        // Animation system
+        this.animator = new TransitionAnimator(
+            (k, v) => this.engine.setParameter(k, v),
+            (k) => this.engine.getParameter(k)
+        );
+
+        // Load profile
+        this.profile = typeof profile === 'string' ? this._getProfile(profile) : profile;
+
+        // Apply base state
+        this.reset();
+    }
+
+    /**
+     * Update loop called by Orchestrator.
+     * @param {number} time - Total elapsed simulation time
+     * @param {number} dt - Delta time in seconds
+     */
+    update(time, dt) {
+        if (!this.active) return;
+
+        // Idle behavior (breathing)
+        // Sync morphFactor to universe time
+        const breath = Math.sin(time * 2.0) * 0.1; // 2.0 rad/s
+
+        // Apply breath modulation on top of base profile
+        // Note: This is a simple additive modulation.
+        // A real system would blend this with active transitions.
+        const currentMorph = this.engine.getParameter('morphFactor') || 1.0;
+        // Only modulate if not transitioning heavily
+        if (!this.animator.isAnimating()) {
+             // Gentle idle sway
+             this.engine.setParameter('morphFactor', 1.0 + breath);
+        }
+    }
+
+    /**
+     * Express an emotion.
+     * @param {string} emotionName - e.g., 'joy', 'anger', 'fear', 'sadness'
+     * @param {number} intensity - 0.0 to 1.0
+     * @param {number} duration - Transition duration in ms
+     */
+    emote(emotionName, intensity = 1.0, duration = 1000) {
+        const mapping = this.profile.emotions[emotionName];
+        if (!mapping) {
+            console.warn(`VIB3Actor: Unknown emotion '${emotionName}' for profile '${this.profile.name}'`);
+            return;
+        }
+
+        const targetParams = {};
+        for (const [param, baseVal] of Object.entries(mapping)) {
+            // Lerp between current/neutral and target based on intensity
+            // Simplified: just setting target value scaled by intensity logic could go here
+            // For now, we just use the mapped value directly as the "100% intensity" target
+            targetParams[param] = baseVal;
+        }
+
+        // Apply global intensity modifiers
+        if (targetParams.intensity) targetParams.intensity *= intensity;
+        if (targetParams.speed) targetParams.speed *= intensity;
+
+        this.animator.transition(targetParams, duration, 'easeOut');
+
+        // Update internal state (simplified)
+        this.emotion.lastEmote = emotionName;
+    }
+
+    /**
+     * Reset to neutral state.
+     */
+    reset(duration = 1000) {
+        this.animator.transition(this.profile.base, duration, 'easeInOut');
+    }
+
+    /**
+     * Get a predefined personality profile.
+     * @param {string} name
+     */
+    _getProfile(name) {
+        const profiles = {
+            neutral: {
+                name: 'neutral',
+                base: { hue: 200, saturation: 0.5, intensity: 0.5, chaos: 0, speed: 1.0, gridDensity: 20 },
+                emotions: {
+                    joy: { hue: 50, saturation: 1.0, intensity: 0.8, speed: 2.0, chaos: 0.2 },
+                    anger: { hue: 0, saturation: 1.0, intensity: 0.9, speed: 3.0, chaos: 0.8 },
+                    sadness: { hue: 240, saturation: 0.2, intensity: 0.3, speed: 0.2, chaos: 0 },
+                    fear: { hue: 280, saturation: 0.8, intensity: 0.6, speed: 2.5, chaos: 0.9, gridDensity: 50 }
+                }
+            },
+            heroic: {
+                name: 'heroic',
+                base: { hue: 210, saturation: 0.8, intensity: 0.7, chaos: 0.1, speed: 1.0, gridDensity: 15 },
+                emotions: {
+                    joy: { hue: 50, saturation: 1.0, intensity: 1.0, speed: 1.5, morphFactor: 1.2 },
+                    anger: { hue: 20, saturation: 1.0, intensity: 1.0, speed: 2.5, chaos: 0.5 },
+                    determination: { hue: 220, saturation: 0.9, intensity: 0.9, speed: 1.2, gridDensity: 10 }
+                }
+            },
+            glitch: {
+                name: 'glitch',
+                base: { hue: 120, saturation: 0.0, intensity: 0.4, chaos: 0.5, speed: 2.0, gridDensity: 40 },
+                emotions: {
+                    panic: { hue: 0, saturation: 0, intensity: 0.9, speed: 5.0, chaos: 1.0, rot4dXW: 1.5 },
+                    calm: { hue: 120, saturation: 0.5, intensity: 0.4, speed: 0.5, chaos: 0.2 }
+                }
+            }
+        };
+        return profiles[name] || profiles.neutral;
+    }
+}

package/src/experimental/VIB3Compositor.js

@@ -0,0 +1,117 @@
+/**
+ * VIB3Compositor - Visual Layering and Scene Management
+ *
+ * Handles the complexity of rendering multiple VIB3+ instances into a cohesive visual.
+ * Manages DOM structure, Z-indexing, masking, and blend modes for "Universe" rendering.
+ *
+ * @experimental
+ */
+export class VIB3Compositor {
+    constructor(containerId = 'vib3-universe') {
+        this.containerId = containerId;
+        this.layers = []; // Ordered list of layer configs
+        this.activeInstances = new Map(); // instanceId -> DOM element
+
+        // Ensure container exists
+        if (typeof document !== 'undefined') {
+            this.container = document.getElementById(containerId);
+            if (!this.container) {
+                this.container = document.createElement('div');
+                this.container.id = containerId;
+                this.container.style.position = 'relative';
+                this.container.style.width = '100vw';
+                this.container.style.height = '100vh';
+                this.container.style.overflow = 'hidden';
+                document.body.appendChild(this.container);
+            }
+        }
+    }
+
+    /**
+     * Register a VIB3 instance to be composited.
+     * @param {string} instanceId - Unique ID for the VIB3 instance
+     * @param {HTMLElement} canvasElement - The canvas element of the VIB3 instance
+     * @param {object} options - Layer configuration (zIndex, blendMode, opacity)
+     */
+    addInstance(instanceId, canvasElement, options = {}) {
+        if (this.activeInstances.has(instanceId)) {
+            console.warn(`VIB3Compositor: Instance ${instanceId} already registered.`);
+            return;
+        }
+
+        // Apply default styles for compositing
+        canvasElement.style.position = 'absolute';
+        canvasElement.style.top = '0';
+        canvasElement.style.left = '0';
+        canvasElement.style.width = '100%';
+        canvasElement.style.height = '100%';
+
+        // Apply options
+        this.updateLayer(instanceId, options);
+
+        this.container.appendChild(canvasElement);
+        this.activeInstances.set(instanceId, canvasElement);
+        this.layers.push(instanceId);
+
+        console.log(`VIB3Compositor: Added instance ${instanceId}`);
+    }
+
+    /**
+     * Remove a VIB3 instance from the compositor.
+     * @param {string} instanceId
+     */
+    removeInstance(instanceId) {
+        if (this.activeInstances.has(instanceId)) {
+            const canvasElement = this.activeInstances.get(instanceId);
+            if (canvasElement.parentNode) {
+                canvasElement.parentNode.removeChild(canvasElement);
+            }
+            this.activeInstances.delete(instanceId);
+            this.layers = this.layers.filter(id => id !== instanceId);
+            console.log(`VIB3Compositor: Removed instance ${instanceId}`);
+        }
+    }
+
+    /**
+     * Update visual properties of a layer.
+     * @param {string} instanceId
+     * @param {object} options - { zIndex, blendMode, opacity, visible }
+     */
+    updateLayer(instanceId, options) {
+        const canvasElement = this.activeInstances.get(instanceId);
+        if (!canvasElement) return;
+
+        if (options.zIndex !== undefined) canvasElement.style.zIndex = options.zIndex;
+        if (options.blendMode !== undefined) canvasElement.style.mixBlendMode = options.blendMode;
+        if (options.opacity !== undefined) canvasElement.style.opacity = options.opacity;
+        if (options.visible !== undefined) canvasElement.style.display = options.visible ? 'block' : 'none';
+
+        // Handle masking if provided (experimental CSS mask)
+        if (options.maskImage) {
+            canvasElement.style.webkitMaskImage = `url(${options.maskImage})`;
+            canvasElement.style.maskImage = `url(${options.maskImage})`;
+        }
+    }
+
+    /**
+     * Reorder layers based on a list of IDs.
+     * @param {string[]} order - Array of instance IDs, from bottom to top
+     */
+    setLayerOrder(order) {
+        order.forEach((id, index) => {
+            this.updateLayer(id, { zIndex: index });
+        });
+        this.layers = order;
+    }
+
+    /**
+     * Clear all instances.
+     */
+    clear() {
+        this.activeInstances.forEach((el, id) => {
+            if (el.parentNode) el.parentNode.removeChild(el);
+        });
+        this.activeInstances.clear();
+        this.layers = [];
+    }
+}

package/src/experimental/VIB3Link.js

@@ -0,0 +1,122 @@
+/**
+ * VIB3Link - Multi-User Synchronization
+ *
+ * Provides a networking layer (mocked for now) to sync VIB3Universe state
+ * between multiple clients. Handles entity updates, parameter deltas, and events.
+ *
+ * @experimental
+ */
+export class VIB3Link {
+    constructor() {
+        this.connected = false;
+        this.roomId = null;
+        this.isHost = false;
+        this.peers = new Set();
+        this.eventBus = new EventTarget();
+
+        // Bind methods
+        this.handleMessage = this.handleMessage.bind(this);
+    }
+
+    /**
+     * Connect to a shared room.
+     * @param {string} roomId
+     */
+    async connect(roomId) {
+        this.roomId = roomId;
+        this.connected = true;
+
+        // Mock connection logic
+        console.log(`VIB3Link: Connected to room ${roomId}`);
+
+        // In a real implementation, we would establish WebRTC/WebSocket here
+        // and negotiate host status. For now, assume single-player or host.
+        this.isHost = true;
+
+        this.emit('connected', { roomId, isHost: this.isHost });
+    }
+
+    /**
+     * Disconnect from the room.
+     */
+    disconnect() {
+        this.connected = false;
+        this.peers.clear();
+        console.log(`VIB3Link: Disconnected.`);
+        this.emit('disconnected', {});
+    }
+
+    /**
+     * Broadcast an event to all peers.
+     * @param {string} type - Message type (upd, prm, evt)
+     * @param {object} payload
+     */
+    broadcast(type, payload) {
+        if (!this.connected) return;
+
+        const message = {
+            t: type,
+            s: Date.now(), // simple sequence
+            p: payload
+        };
+
+        // In real impl: webrtcChannel.send(JSON.stringify(message));
+
+        // Mock loopback for local testing (optional)
+        // this.handleMessage(message);
+    }
+
+    /**
+     * Handle an incoming message from the network.
+     * @param {object} message
+     */
+    handleMessage(message) {
+        const { t, p } = message;
+
+        switch (t) {
+            case 'upd':
+                this.emit('entityUpdate', p);
+                break;
+            case 'prm':
+                this.emit('parameterDelta', p);
+                break;
+            case 'evt':
+                this.emit('universeEvent', p);
+                break;
+            default:
+                console.warn(`VIB3Link: Unknown message type ${t}`);
+        }
+    }
+
+    /**
+     * Sync the state of all entities. Called by Orchestrator tick.
+     * @param {Map<string, object>} entities
+     */
+    sync(entities) {
+        if (!this.connected || !this.isHost) return;
+
+        // Collect dirty state
+        // In a real optimized system, we'd diff state or only send moved entities
+        // For now, let's just log that we would sync
+        // console.log(`VIB3Link: Syncing ${entities.size} entities`);
+    }
+
+    /**
+     * Emit a local event for system consumption.
+     * @param {string} name
+     * @param {object} detail
+     */
+    emit(name, detail) {
+        const event = new CustomEvent(name, { detail });
+        this.eventBus.dispatchEvent(event);
+    }
+
+    /**
+     * Listen for network events.
+     * @param {string} name
+     * @param {function} callback
+     */
+    on(name, callback) {
+        this.eventBus.addEventListener(name, (e) => callback(e.detail));
+    }
+}