+
Owen Animation System Demo
+
Controls:
+
1 - Wait State
+
2 - React State
+
3 - Type State
+
4 - Sleep State
+
Space - Send Test Message
+
Click - User Activity
+
+
Current State: -
+
Available Transitions: -
+
+ `;
+ document.body.appendChild(instructions);
+ }
+
+ /**
+ * Send a test message to Owen
+ * @private
+ * @returns {void}
+ */
+ sendTestMessage() {
+ if (!this.owenSystem) return;
+
+ const testMessages = [
+ 'Hello Owen!',
+ 'How are you doing?',
+ 'This is urgent!',
+ 'Great work!',
+ 'Error in the system!',
+ 'I\'m feeling sad today'
+ ];
+
+ const randomMessage = testMessages[Math.floor(Math.random() * testMessages.length)];
+ console.log(`Sending message: "${randomMessage}"`);
+ this.owenSystem.handleUserMessage(randomMessage);
+ }
+
+ /**
+ * Log system information
+ * @private
+ * @returns {void}
+ */
+ logSystemInfo() {
+ if (!this.owenSystem) return;
+
+ console.log('=== Owen System Info ===');
+ console.log('Available States:', this.owenSystem.getAvailableStates());
+ console.log('Available Clips:', this.owenSystem.getAvailableClips());
+ console.log('Current State:', this.owenSystem.getCurrentState());
+ console.log('========================');
+ }
+
+ /**
+ * Update UI with current system state
+ * @private
+ * @returns {void}
+ */
+ updateUI() {
+ if (!this.owenSystem) return;
+
+ const currentStateElement = document.getElementById('current-state');
+ const transitionsElement = document.getElementById('transitions');
+
+ if (currentStateElement) {
+ currentStateElement.textContent = this.owenSystem.getCurrentState();
+ }
+
+ if (transitionsElement) {
+ transitionsElement.textContent = this.owenSystem.getAvailableTransitions().join(', ');
+ }
+ }
+
+ /**
+ * Main animation loop
+ * @private
+ * @returns {void}
+ */
+ animate() {
+ requestAnimationFrame(() => this.animate());
+
+ const deltaTime = this.clock.getDelta() * 1000; // Convert to milliseconds
+
+ // Update Owen system
+ if (this.owenSystem) {
+ this.owenSystem.update(deltaTime);
+ }
+
+ // Update UI
+ this.updateUI();
+
+ // Render scene
+ this.renderer.render(this.scene, this.camera);
+ }
+}
+
+// Initialize the demo when the page loads
+window.addEventListener('load', async () => {
+ const demo = new OwenDemo();
+ try {
+ await demo.init();
+ } catch (error) {
+ console.error('Failed to initialize Owen demo:', error);
+ }
+});
+
+export default OwenDemo;
diff --git a/examples/basic-demo.js b/examples/basic-demo.js
new file mode 100644
index 0000000..311bc33
--- /dev/null
+++ b/examples/basic-demo.js
@@ -0,0 +1,332 @@
+/**
+ * @fileoverview Basic example of using the Owen Animation System
+ * @author Owen Animation System
+ */
+
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { OwenSystemFactory, States } from '../src/index.js';
+
+/**
+ * Basic Owen Animation System demo
+ * @class
+ */
+class OwenDemo {
+ /**
+ * Create the demo
+ */
+ constructor() {
+ /**
+ * The Three.js scene
+ * @type {THREE.Scene}
+ */
+ this.scene = new THREE.Scene();
+
+ /**
+ * The Three.js camera
+ * @type {THREE.PerspectiveCamera}
+ */
+ this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+ /**
+ * The Three.js renderer
+ * @type {THREE.WebGLRenderer}
+ */
+ this.renderer = new THREE.WebGLRenderer({ antialias: true });
+
+ /**
+ * The Owen animation system
+ * @type {OwenAnimationContext|null}
+ */
+ this.owenSystem = null;
+
+ /**
+ * Clock for tracking time
+ * @type {THREE.Clock}
+ */
+ this.clock = new THREE.Clock();
+ }
+
+ /**
+ * Initialize the demo
+ * @returns {Promise