Warping images in Canvas 2D: 528 clipped triangles a frame, and the rule that makes exports match

The per-triangle affine solve is where the work and the bill both land. Each mesh quad becomes two triangles ^[3], and the posted loops run inclusively over rows and columns ^[16], so the 18x12 preview mesh is 247 vertices and 432 triangles ^[1][2]. Export at 22x12 comes to 528 triangles ^[3], about 22 percent more clip-and-draw pairs for every frame written out ^[4]. Nothing batches: each triangle needs its own clip path and its own drawImage ^[3]. Grid density is the quality dial here, and it is priced in draw calls rather than shader instructions.

Which makes the post's own figures worth checking. It describes 18x12 as 432 vertices and 396 triangles ^[6]; 432 is the triangle count, and 396 matches neither number ^[5]. That does not change the technique, but it does invalidate any capacity estimate copied from the prose.

The motion code is more careful than it first looks. The harmonic weights in snap() sum to exactly 1.00 ^[7][6], which bounds the function at plus or minus one and keeps the amplitude parameter meaning what it says. edgeFlex evaluates to 0.6 at the sheet centre and 1.0 at each corner ^[8][7], so corners travel roughly 67 percent further than the middle ^[8]. That is the author's stiffer-in-the-middle paper claim ^[9] written as arithmetic instead of solved by a simulation. Horizontal displacement is scaled by 0.4 against 0.25 vertical ^[10], a 1.6 to 1 bias ^[9] that reads as a sheet shaking sideways. The per-vertex phase offset of u * 1.2 + v * 0.8 is what makes it a travelling wave rather than a grid pulsing in lockstep ^[13].

All of that is closed form in t, which is the point of the purity rule rather than an accident of style. The author's stated failure mode for a stateful preview loop is drift, stutter, or output that depends on the host machine's frame rate ^[11], and sampling at frame/fps only cures that if renderFrame cannot remember anything between calls ^[4][5]. The price is written into the code convention: sin(phase), never position += velocity ^[12]. Paper flutter gives up nothing for that. Cloth catching on an obstacle, or any motion with contact history, cannot be expressed this way and would need the accumulator the design rules out.

Worth noting that the material supplied here stops at the declaration of the 2x3 matrix the solver produces ^[15], so the solve itself is left to the reader. The transferable part is the surrounding structure, plain TypeScript with no framework dependency ^[14], which applies to any ripple or page-curl someone wants to ship without a GL context.