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

Interactive Pythagorean Theorem

Interactively computing centers of a triangle

Animated trees

Loyd 15-puzzle

Using constraints to compute the Golden Ratio (Drag the diamond!)

Dragon curve

Circle packing

TeX-style text formatting

Animated bicycle

[Animated insertion sort](https://andrewcmyers.github.io/constrain/examples/sort.html) [Animated quicksort](https://andrewcmyers.github.io/constrain/examples/quicksort.html)

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)