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

TeX-style text formatting

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

Simple template page for using Constrain

Requirements

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