constrain
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
Using constraints to compute the Golden Ratio (Drag the diamond!)
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
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)