Support more geometries

[wodeni]

Goal

Overview

To accomplish the cartesian coordinate system visualization for function, we need the following new geometries:

• Bezier Curves
• Dotted Lines
• Shaded region

Important notes

• I did not implement any syntax for specifying the actual path for curve. Now the only way to do so is to change initCurve function, where I hard coded a list of points for testing purposes
• @hypotext do let me know if you want some syntax for specifying path, say

  Curve { path = [(0, 0), (100, 100)] }
  

• The packing and unpacking gets tricky. What I did was to flatten the entire path array, mark all of them as Fixed, and pack them up again. Not sure if that fits @hypotext 's assumption in computation.
• Because of the limitation of Located interface, I had to do some computation to properly do translation of all points on a path. I awkwardly returned the center of the bbox for getX and getY. We should change Located very soon. Signed distance functions #22 requires a total rewrite on this, so I guess we can deal with it soon.

Bezier Curves

• API: A bezier curve is simply a list of points ([(a, a)]
• SVG standard path string: there is a specific format that SVG (and thus Snap.svg) follows.
• The frontend will translate the list of points (passed in from the backend as 2D array) to a path format string based on the following assumptions
  • We are generating Cubic Bezier curves, not quadratic ones
  • The first point is the starting point, which gets a special command M
  • The second, third, and fourth point are the control points for the first Bezier curve, which get a command C
  • The rest of the points are even-numbered. Every two of them forms another Bezier curve connecting to the previous one. The reason why we only need two more point can be found here. Essentially we want the combined curve to be smooth, and SVG automatically figures out how to connect the neighboring curves
  • Example: [(10, 100), (50, 0), (60, 0), (100, 100), (250, 250), (300, 100)] gets translated into "M 10 100 C 50 0, 60 0, 100 100 S 250 250, 300 100"

Dotted lines

• Any Curve type geometry with a path of only two points is a line
• Added String literal support to the parser so that we can specify properties in the way similar to CSS. For instance, Curve { style = "dashed" } where a lookup for style is hardcoded in Runtime.hs in initCurve function. The righthand side can be arbitrary strings here. It is up to the frontend to decide what to render.

Some screenshots

• Sample program:

-- Substance
Set A, B
f: A -> B

-- Style

Map f x y {
    -- Shape of the curve determined by the hard coded path
    shape = Curve {
        style = "dashed" -- if unspecified or set to anything else, a solid line appears
    }
}

[wodeni]

Bezier curve update

• by definition, a cubic bezier curve does not pass through the control points. It is contained in the convex hull formed by these points. To generate a smooth curve that connects a list of points, some interpolation method must be used. The easiest case is linear interpolation (polyline in Snap). In fad19d4 we added Catmull-Rom Spline as a better interpolation method.
  • Result: running cart-test example with 5 control point and random seed 18
    
    (annotated with polyline and control points)