Constrain - a JS (ES6) library for animated, interactive web figures, based on declarative constraint solving

• Responsive, animated figures embedded in web pages
• Figures implemented declaratively with time-dependent constraints on graphical objects
• Integrates with Reveal.js presentations
• GitHub repository
• Reference manual
• A short talk about Constrain (HTML/Reveal source)

Demos

<img src="images/pythagoras-thumbnail.png" alt="Pythagoras thumbnail" width="100" height="100" /> Interactive Pythagorean Theorem

<img src="images/triangles-thumbnail.png" alt="Triangles thumbnail" width="100" height="80" /> Interactively computing centers of a triangle

<img src="images/trees-thumbnail.png" alt="Trees thumbnail" width="100" height="100" /> Animated trees

<img src="images/loyd-thumbnail.png" alt="Loyd thumbnail" width="100" height="100" /> Loyd 15-puzzle

<img src="images/spiral-thumbnail.png" alt="Spiral thumbnail" width="100" height="100" /> Using constraints to compute the Golden Ratio (Drag the diamond!)

<img src="images/dragon-thumbnail.png" alt="Dragon thumbnail" width="100" height="100" /> Dragon curve

<img src="images/tex-thumbnail.png" alt="TeX thumbnail" width="100" height="100" /> TeX-style text formatting

<img src="images/bicycle-thumbnail.png" alt="bicycle thumbnail" width="100" height="100" /> Animated bicycle generated by Claude

Cornell University course notes using Constrain for embedded figures: CS 2112, CS 4120/lexer generation, CS 4120/bottom-up parsing

Simple template page

Requirements

• ES6-capable web browser
  • Tested on Chrome, Opera, Brave, Firefox, Safari, Edge (runs best on the first three)
  • Does not work on Internet Explorer or Opera Mini
• Numeric.js version 1.2.6 (included)