Code Monkey home page Code Monkey logo

constrain's Introduction

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

Triangle image

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!)

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)

constrain's People

Contributors

andrewcmyers avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

constrain's Issues

Superscripts, subscripts, font style changes should be easier

Currently, labels and other text-like things only allow text to be specified as a Unicode string. It should be possible to specify text in a more structured way (ala HTML!) rather than requiring things like subscripts to be manually positioned.

Should support tweening

For smoother animations, tweening should be used between fully solved positions. Am thinking that all renders should be based on interpolation between two solved positions, since the time at which rendering begins will almost never be exactly on the time that was solved for. The fundamental issue that minimization takes more than 1/60 s can't be solved just by tweening, though -- the solver needs to run in parallel, stealing time to make progress on solutions, and a target time needs to be set so that it has a useful solution when it comes up with one.

One possible strategy is to keep estimating a next time point that will be useful, with a little overshoot for safety. Another idea is to start by computing the initial and final positions so that there is always an interpolation result, and then filling in the middle points adaptively.

PDF/PostScript back end

There should be a renderer that generates PDF or PostScript so that Constrain can be used to generate figures for papers. PostScript would be easy, though these days people would then have to use some tool to convert to PDF.

Markdown and TeX math support desirable

Currently it is more painful to typeset math (or just bold/italics) than if typing TeX or Markdown. What's wanted is markdown functions that can translate strings into text objects with suitable formatting structure.

Speed up text formatting

It's a little slow. Part of the reason seems to be my use of 'unshift' and 'slice'. Options for fixing are to reverse the order of the arrays being used so I can do 'push', or to switch to linked lists. Not clear that reversing the order solves the 'slice' part.

Consider treating constraints more like objects rather than expressions

Currently constraints have to be installed explicitly via ensure. They don't know what figure they belong to or whether they are grouped or delayed. Alternatively they could install themselves like graphical objects do. Downside is that constraints can't be shared across figures. But this seems rare and also addressable via functional abstraction. This would also help with allowing after() to be used uniformly.

Gradient for Distance is wrong

This seems to be computed incorrectly, although it does not seem to be breaking anything. Fixing it is tricky because it involves computing distances and gradients differently when the distance is close to zero.

Another possibility is to introduce an explicit CONG constraint as in Juno-2. Distance is a problematic operator because its gradient is discontinuous at zero, whereas a congruence constraint would not be.

Safari layout is flaky

On Safari some constraints are intermittently being solved some other way. Possibly DOMElementBox is not reliable.

Unify style mechanisms?

Figure and TextContext both have style mechanisms. Perhaps they should be unified so styles can be passed more flexibly.

How to defeat double-click?

Double-clicking on the canvas causes the browser to start selecting nearby text, which is undesirable. All my efforts to cause double-click events to be absorbed and not propagate to nearby elements have failed. Sigh.

MathJax doesn't work with the PDF back end

The problem is that MathJax generates SVG images, and although jsPDF does have some SVG support (via Canvg, apparently), it doesn't seem to be able to handle the images generated by MathJax.

rendering needs to be delayed until figures are constructed

rendering is kicked off when a document completes loading. However, figures may finish loading even after that via ajax calls. This creates a race.

The fundamental problem is that nothing says when a figure is done being constructed. This should be the role of Figure.start(), or perhaps it should be renamed to Figure.ready()

Frame triggers

It would be helpful to be able to define code to run at the beginning or end of frames, e.g. to change the style of existing objects. Possibly as a higher level Event abstraction that handles undo/redo.

Change differentiation technique to backpropagation?

Differentiation is currently done by symbolic differentiation. That is, for each node in the AST, Constrain computes the gradient of that node with respect to all active variables. Since the AST is actually a DAG, it would probably be more efficient to compute the gradient using backpropagation, in which what is computed for each AST node is the differential of the final output cost with respect to that node's value. Backpropagation uses the chain rule, so every node needs to know not only what it depends on, but also what depends on it. This change would require some significant rearchitecting.

A cheap hack that will avoid much of the inefficiency of the current scheme is to introduce memoization nodes that simply remember the gradient they computed. For example, LayoutObjects could automatically memoize, and that would prevent the redundant computation incurred when interpolating between objects/points.

Sanity-checking more arguments

Simple mistakes like passing the wrong kind of argument are going to give new users grief. Most user-facing methods should do run-time type checking of arguments. The run-time overhead would be paid at declaration time so should be insignificant.

Conditionals

It would be handy to have conditional expressions, if e1 ≥ 0 then e2 else e3, and this would be easy to support.

Better ways to compute hints

Hints become important for complex diagrams with a lot of constraints in tension with each other. It's not clear that there is enough support for computing hints in a way that is responsive to the actual canvas size.

How to allow double-click events?

It would be nice to have interactive objects on the canvas that respond to double-click events. I killed double-click so comprehensively (#28) that that is not possible.

Need Polygon

There should be a general (filled) polygon object.

Support fonts in PostScript/PDF output

Currently the PrintContext maps web fonts into PostScript fonts, but for inclusion in LaTeX documents, it would be nice to be able to match the fonts used there. More-powerful font support is needed to achieve this goal.

It might be easier to achieve this by implementing an explicit PDF rendering back end rather than generating PostScript and relying on conversion to PDF.

Refactor into modules

Things like graph support should be refactored into their own modules that users can choose to load, or not.

Add figure editing capability

It wouldn't be hard to add an "editing toolbox" widget that allows extending the figure with new objects and constraints, ala Juno-2, allowing figures to be created interactively.

Animated solving broken by component analysis

Recomputing components discards the old inverse Hessians implicitly. This is fine for regular solving, but for animated solving it means the inverse Hessian is lost on every step.

Text inside shapes

It would be convenient if all graphical objects for which it makes sense allowed text to be formatted inside them. FormattedText just becomes text formatted inside an invisible rectangle in that case.

Image support should be added

It should support clipping, scaling, and rotating the image and also probably add expressions for reading image attributes that can then be used to construct constraints.

SVG backend

This might be a little hard, but I was having a look at the postscript backend (which looks very nice and useful), and it made me think that I could get a lot out of having an SVG backend. The benefits are:

  1. Vector drawing rather than pixel drawing: the user can zoom in
  2. Accessibility features: in addition to zooming, we can attach data to assist screenreaders, etc.
  3. The ability to embed MathML directly, rather than embedding 'screenshots' of math

Namespace cleanup needed

The package puts too many things in the global namespace. This is convenient but it should be available in a more hygenic mode.

Text formatting is slightly flaky

Occasionally it explicably fails. This can be seen by viewing tests/text-format.html and dragging the diamond control back and forth. After a while you start seeing more failures. The time-dependent behavior suggests that something is degrading as the system runs, though I can't figure out what it could be, since the text formatter is coded in a more functional way than previously.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.