Constrain/Reveal integration

Constrain: A Constraint-Based System for Animated Figures

Constrain

  • JavaScript/ES package for animated figures
  • Embeds figures into regular web pages
  • Integrates into Reveal presentations with Constrain/Reveal
  • Declarative constraint-based layout
  • Figure can have multiple frames
  • Graphical content can constrain against HTML content

Rendering capabilities

  • Several graphical objects are supported: rectangles, lines, circles
  • Automatic connectors support diagrams
  • Full power of JavaScript 2D canvas rendering
  • Constraint-based ⇒ responsive to display changes, font availability

Extensible

  • Constrain is a JavaScript (ES6) library
  • General-purpose constraint solver ⇒ can add/modify graphical objects

Automatic Graph Layout

Programming with Constrain

  • Web page can contain multiple Figures, each tied to a canvas.
    <canvas id=canv1></canvas>
fig = new Figure("canv1")
  • Graphical objects created declaratively using builder pattern:
    with (fig) {
  s = square().setFillStyle("yellow").setLineWidth(3)
  • Graphical objects introduce variables for their position:
    • .x() : x position (min/max: .x0(), .x1()
    • .y() : y position (min/max: .y0(), .y1()
    • .w() : width, .h() : height
  • Variable values are determined by solving constraints: 
      equal(s.w(), 150)    // w = 150
  equal(s.x0(), s.w()) // x0 = w
  equal(s.y0(), times(2, s.h())) // y0 = 2*h

More information