Mercurial > hg > xsplines

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="d3.slider.css" />
    <title>Spline Editor</title>
    <style>
     body {
         font: 13px sans-serif;
         position: relative;
         width: 960px;
         height: 500px;
         padding-left: 100px;
         padding-top: 100px;
     }

     form {
         bottom: 10px;
         left: 10px;
     }

     rect {
         fill: none;
         pointer-events: all;
     }

     circle,
     .line {
         fill: none;
         stroke: steelblue;
         stroke-width: 1.5px;
     }

     .xspline {
         fill: none;
         stroke: red;
         stroke-width: 1.5px;
     }

     circle {
         fill: #fff;
         fill-opacity: .2;
         cursor: move;
     }

     .selected {
         fill: #ff7f0e;
         fill-opacity: 1;
         stroke: #ff7f0e;
     }

     #splines {
         border: 1px black solid;
     }

     #blurb {
         padding: 2em;
     }

    </style>
    <script src="d3.v3.min.js"></script>
    <script src="d3.slider.js"></script>

</head>
<body>
    <h1>X-splines</h1>

    <form>
        <input name="approximateButton"
               type="button"
               value="Approximate all"
               onclick="approximate_all()" />
        <input name="sharplyInterpolateButton"
               type="button"
               value="Sharply interpolate all"
               onclick="sharply_interpolate_all()" />
        <input name="interpolateButton"
               type="button"
               value="Interpolate all"
               onclick="interpolate_all()" />
        <input name="toggleClosed"
               type="button"
               value="Toggle open/closed spline"
               onclick="toggle_closed()" />
        <label for="interpolate">SVG spline type:</label>
        <select id="interpolate"></select><br>
    </form>
    <div id="splines"></div>
    <div id="slider"></div>
    <script src="splines.js"></script>

    <div id="blurb">
    <p>
        Click to add more spline nodes. Backspace key deletes them. You can drag nodes around.</p>
    <p>
        The red spline is an x-spline, as <a href="http://wiki.povray.org/uploaded/5/5e/LeForgeronXSplines-10.1.1.44.5770.pdf">defined by Blanc & Schlick (1995)</a>. At each node of the x-spline, you can move the slider to alternate between approximating, sharply interpolating or smoothly interpolating at that node. There are also buttons to make the entire x-spline approximating, sharp, or interpolating.
    </p>

    <p>
        The blue spline is the <a href="https://github.com/d3/d3-shape/blob/master/README.md#curves">standard SVG splines</a>, as made available by D3.js. You can change the SVG spline type from the drop-down menu. The approximating x-spline is very close to the basis spline and the interpolating x-spline is very close to the cardinal spline, with the added benefit that the x-spline gives a continuum of approximation between basis and cardinal splines.
    </p>

    <p>
        <a href="talk.pdf">Here you can see my slides</a> for a talk I gave on this subject at <a href="https://www.meetup.com/Papers-We-Love-Montreal/events/253274851/">Papers We Love</a> in Montréal.
    </p>

    <p>
        You can contact me at <a href="mailto:jordigh@octave.org">jordigh@octave.org</a>.
    </p>
    </div>
</body>
author	Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
date	Sun, 26 Aug 2018 20:56:33 -0400
parents	ddbcac0232d1
children