Interaction

@wangyaoshen/locus-interaction provides interactive capabilities for animations, enabling users to interact with content during playback for interactive learning experiences.

Installation

npm install @wangyaoshen/locus-interaction

Features

• Interactive Components: Draggable points, lines, curves, and sliders
• Constraint System: Horizontal, vertical, grid, circular path constraints
• Gesture Management: Drag, keyboard controls
• Interaction Sessions: Pause animation, wait for user input, validate results
• Feedback System: Success/error animation feedback
• Playback Integration: Seamless integration with the playback system

Quick Start

import {
  InteractionManager,
  InteractivePoint,
  horizontal,
} from '@wangyaoshen/locus-interaction';

// Create a draggable point
const point = new InteractivePoint({
  position: [100, 100],
  color: '#E91E63',
  radius: 15,
  constrain: horizontal(100), // Only move horizontally
  onMove: pos => console.log('Position:', pos),
});

// Create interaction manager
const manager = new InteractionManager({
  canvas: document.querySelector('canvas'),
});

// Register component
manager.registerComponent(point);

// Start interaction session
manager.startSession({
  id: 'demo',
  components: [point],
  validation: {
    type: 'position',
    target: [200, 100],
    tolerance: 10,
  },
  onSuccess: () => manager.showSuccess('Correct!'),
  onFail: () => manager.showError('Try again'),
});

Module Structure

@wangyaoshen/locus-interaction
├── math/         # Vector and matrix operations
├── constraints/  # Constraint system
├── gestures/     # Gesture management
├── controls/     # Sessions, validation, feedback
├── context/      # Context management
├── components/   # Interactive components
└── integration/  # Playback integration

Next Steps

• Interactive Components - Learn about draggable points, sliders, and curves
• Constraint System - Limit component movement
• Validation System - Validate user input
• Playback Integration - Integrate with animation playback