Checkpoint arclength page flip width

public/js/webgl-book-shape-lab.js

@@ -1246,11 +1246,12 @@ function buildFlippingPageSurface(sourceLine, destinationLine, direction, t, pag
     const lift = Math.sin(Math.PI * t);
     const curlStrength = direction * 0.48 * lift;
     const sourceAnchor = sourceLine.anchor;
+    const widthDistances = cumulativeLineLengths(sourceLine.points);
     const surface = [];
     for (let widthIndex = 0; widthIndex <= widthSegments; widthIndex += 1) {
         const u = widthIndex / widthSegments;
         const sourcePoint = sourceLine.points[widthIndex];
-        const radius = Math.max(0, sourceSide * (sourcePoint.x - sourceAnchor.x));
+        const radius = widthDistances[widthIndex];
         const row = [];
         for (let depthIndex = 0; depthIndex <= depthSegments; depthIndex += 1) {
             const v = depthIndex / depthSegments;
@@ -1259,9 +1260,10 @@ function buildFlippingPageSurface(sourceLine, destinationLine, direction, t, pag
             const curl = curlStrength * Math.sin(Math.PI * u) + direction * depthWave;
             const angle = baseAngle + curl;
             const stackPoint = interpolatePagePoint(sourceLine.points, destinationLine.points, widthIndex, t);
+            const flyingX = anchor.x + Math.cos(angle) * radius;
             const relaxedY = THREE.MathUtils.lerp(stackPoint.y, anchor.y + Math.sin(angle) * radius, lift);
             const point = {
-                x: anchor.x + Math.cos(angle) * radius,
+                x: THREE.MathUtils.lerp(stackPoint.x, flyingX, lift),
                 y: relaxedY + pageOffset + 0.055 * lift * Math.sin(Math.PI * u),
                 z
             };
@@ -1273,6 +1275,16 @@ function buildFlippingPageSurface(sourceLine, destinationLine, direction, t, pag
     return surface;
 }
 
+function cumulativeLineLengths(points) {
+    const lengths = [0];
+    for (let index = 1; index < points.length; index += 1) {
+        const previous = points[index - 1];
+        const point = points[index];
+        lengths[index] = lengths[index - 1] + Math.hypot(point.x - previous.x, point.y - previous.y);
+    }
+    return lengths;
+}
+
 function createRestingPageSurface(points, depthSegments, zFront, zBack) {
     return points.map((point) => {
         const row = [];

public/webgl-book-shape-lab.html

@@ -74,6 +74,6 @@
         <button id="fast_forward" type="button">Fast Forward</button>
         <output id="flip_count">0 / 10</output>
     </div>
-    <script type="module" src="/js/webgl-book-shape-lab.js?v=deterministic-page-support-end-1"></script>
+    <script type="module" src="/js/webgl-book-shape-lab.js?v=flip-arclength-width-1"></script>
 </body>
 </html>