Coding · 3D · August 2026

Braiding Machine Kinematics

  • Three.js
  • JavaScript
  • Vite
  • WebGL
  • Node.js

Role: Instructional Design · Concept · Architecture · Coding · 3D Visualization

Braiding Machine Kinematics

Braiding Machine Kinematics is a browser-based learning visualization for textile trainees. It addresses one central question: why does this machine motion produce that particular braid structure?

Learners compare four occupancy patterns across eleven machine sizes, follow carriers from the machine into the growing braid, and view the same movement in a synchronized 2D principle diagram. Observation prompts, legends and a numbered component key direct attention to the relevant mechanical relationships. Changing the take-up rate makes its effect on the braid angle visible, while changing the animation speed does not alter the geometry.

The carrier paths are evaluated analytically, and a numerical search determines a collision-free phase arrangement. The application is responsive, bilingual, accessible and optimized for on-demand rendering. Every configuration is stored in the URL so teachers can share a prepared view in a worksheet or learning platform.

Launch interactive demo ↗