View beier-neely.js
// Core math for computing displacement of a pixel per Beier-Neely algorithm:
// http://graphics.cs.cmu.edu/courses/15-463/2004_fall/www/Papers/beier-neely.pdf
function computeDisplacement(p1, q1, p2, q2, x2) {
const len1 = distanceBetween(p1, q1),
len2 = distanceBetween(p2, q2),
u = dot(diff(x2, p2), diff(q2, p2)) / (len2 * len2),
v = dot(diff(x2, p2), perpendicular(diff(q2, p2))) / len2,
A = 10,
B = 1,
View .block
height: 600
View README.md

Trying out the scribble fill method from this old Apple patent by John B. Turner with a bit of spline embellishment at the corners. Seems to work pretty well for more convex shapes, but results can get weird otherwise (the Olympic Peninsula seems especially uncooperative).

Some possible tweaks:

  • Drop any orphan scribbles with only two or three vertices
  • Add some random control points to make the scribble segments a little swoopier
  • Add a hand-drawn effect with SVG turbulence/displacement filters
  • Select intersections based on a more simplified outline of the shape
View README.md
View .block
height: 600
View README.md

Playing around with Anders Hoff's sand spline technique. Actually drawing enough iterations for a spiral this long takes pretty much forever because of all the getPointAtLength() calls, there's probably a way around that.

View README.md

Comparing two different approaches to shape transformation:

The top is the interpolation technique in this demo: add points until both shapes have an equal number and then pick the optimal winding order by the sum of squared distances.

The bottom is inspired by Procrustes superimposition, which decomposes the transform necessary to align two shapes into scale, translation, and rotation components. By interpolating those three components separately, it can produce nicer transitions in certain cases (e.g. in the extreme case, a shape turning into a rotated version of itself). But since it's meant for aligning similar shapes with meaningful point-to-point correspondences, it seems to do more harm than good in most cases with two unrelated shapes, though evenly spacing the points around each ring helps.

See also: [Smoother polygon transitions](http://bl.ocks.org/veltman/4d1413aa5fd3bb5af1a806c1

View .block
height: 400
View README.md
View HI.json
{"type":"MultiPolygon","coordinates":[[[[743.5872675202813,307.48241759969096],[746.2895624940131,309.5353697793862],[749.3538912939046,308.71812747376134],[754.1084086839987,308.9335629871571],[758.9184126382213,310.70067034739304],[768.2836930616327,313.72677683554866],[780.0899518446363,319.5897565007285],[802.0901043198803,333.1490943733638],[809.132406316452,340.02119814048865],[813.0315924369006,345.0309868144195],[813.2355947525655,350.5313721333737],[813.1561942009623,357.8610079629034],[813.623487160469,363.6211954122182],[817.3140962014431,363.3931853851468],[822.4273447389664,360.87275995231175],[826.271507111516,363.4738819122663],[828.0848276529155,366.36958199153196],[827.7559892922247,372.38599512903875],[829.5617346669835,376.0664474302148],[831.8919998404308,379.4920034646593],[838.6814500212622,385.57531158374377],[845.7701731535783,388.5233423946006],[848.6454580281047,390.9077760236478],[850.1961491778911,393.803085865678],[849.8551592639888,397.5695242013662],[848.215764834717,399.7957595