31:Te45,{ let handleRadius = 7; let padding = width / 10; // top left, top right, bottom right, bottom left let bounds = d3.geoPath().bounds(fish) let sx0 = bounds[0][0], sy0 = bounds[0][1], sx1 = bounds[1][0], sy1 = bounds[1][1]; var orig_rects_data = makeRectPolygons(sx0, sy0, sx1, sy1, nTicks) function whichRect(x, y) { let xScaled = (x - sx0) / (sx1 - sx0) let yScaled = (y - sy0) / (sy1 - sy0) let xIndex = Math.min(nTicks - 2, Math.floor(xScaled * (nTicks - 1))) let yIndex = Math.min(nTicks - 2, Math.floor(yScaled * (nTicks - 1))) return xIndex * (nTicks - 1) + yIndex } var svg = d3.create("svg").attr("width", width).attr("height", height).style("overflow", "visible") var backer = svg.append("rect").attr("class", "backer").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height) const orig_proj = d3.geoIdentity().fitExtent([ [0 + padding, padding], [width / 2 - padding, height - 3 * padding] ], fish) const path = d3.geoPath().projection(orig_proj); let ltlx = orig_proj(bounds[0])[0] let ltly = orig_proj(bounds[0])[1] let lbrx = orig_proj(bounds[1])[0] let lbry = orig_proj(bounds[1])[1] var left_rects_data = makeRectPolygons(ltlx, ltly, lbrx, lbry, nTicks) var left_rects = svg.selectAll(".left-grid") .data(left_rects_data).enter().append("polygon") .attr("points", d => [[d.tlX, d.tlY], [d.trX, d.trY], [d.brX, d.brY], [d.blX, d.blY]]) .attr("class", "line"); // make left hand fish var orig_fish = svg.append("g").attr("id", "orig-fish").selectAll(".orig-fish") .data(fish.features) .enter().append("path") .attr("d", path) .attr("class", d => d.properties.class) var rubberArcs = svg.selectAll(".big-arc") .data(orderPoints(controlPoints)) .join("path") .attr("class", "arc") .attr("d", calcArc.path) var rubberPolygons = svg.selectAll(".grid-polygons") .data(pointsToPolygons(smallPoints(orderPoints(controlPoints)))) .join("polygon") .attr("class", "grid-polygon") .attr("points", d => [d.tl, d.tr, d.br, d.bl]) // append right fish path var dest_fish = svg.selectAll('dest-fish-path') .data(fish.features).enter() .append("path") .attr("class", d => d.properties.class) let handles = svg.selectAll(".handle") .data(controlPoints) .join("circle") .attr("class", "handle") .attr("name", d => d[0]) .attr("cx", d => d[1]) .attr("cy", d => d[2]) .attr("r", handleRadius) .call(d3.drag().on("drag", dragged)); function dragged(d) { var x = Math.max(handleRadius + 1, Math.min(width - handleRadius - 1, d3.event.x)); var y = Math.max(handleRadius + 1, Math.min(height - handleRadius - 1, d3.event.y)); var t = d3.select(this); t.attr("cx", d[1] = x).attr("cy", d[2] = y) transformed() } function transformed() { let rubbyData = pointsToPolygons(smallPoints(orderPoints(controlPoints))) rubberArcs.data(orderPoints(controlPoints)).attr("d", calcArc.path) rubberPolygons.data(rubbyData).attr("points", d => [d.tl, d.tr, d.br, d.bl]) var rubbyTransforms = rubbyData.map(function (d, i) { var targetPoints = [d.tl, d.tr, d.br, d.bl] return project(object_to_array(orig_rects_data[i]), targetPoints) }) var path = d3.geoPath().projection(d3.geoTransform({ point: function(i, j) { let transformIndex = whichRect(i, j) var xy = rubbyTransforms[transformIndex](i, j) this.stream.point(xy[0], xy[1]); } })) dest_fish.attr("d", path) } transformed() return svg.node(); }32:T46a,html``33:T6a4,// adapted from https://bl.ocks.org/mbostock/10591444 project = function(sourcePoints, targetPoints) { function transform(x, y) { for (var a = [], b = [], i = 0, n = sourcePoints.length; i < n; ++i) { var s = sourcePoints[i], t = targetPoints[i]; a.push([s[0], s[1], 1, 0, 0, 0, -s[0] * t[0], -s[1] * t[0]]), b.push(t[0]); a.push([0, 0, 0, s[0], s[1], 1, -s[0] * t[1], -s[1] * t[1]]), b.push(t[1]); } var X = solve(a, b, true); var matrix = [ X[0], X[3], 0, X[6], X[1], X[4], 0, X[7], 0, 0, 1, 0, X[2], X[5], 0, 1 ]; return project(matrix, [x, y]); } // Given a 4x4 perspective transformation matrix, and a 2D point (a 2x1 vector), // applies the transformation matrix by converting the point to homogeneous // coordinates at z=0, post-multiplying, and then applying a perspective divide. function project(matrix, point) { point = multiply(matrix, [point[0], point[1], 0, 1]); return [point[0] / point[3], point[1] / point[3]]; } // Post-multiply a 4x4 matrix in column-major order by a 4x1 column vector: // [ m0 m4 m8 m12 ] [ v0 ] [ x ] // [ m1 m5 m9 m13 ] * [ v1 ] = [ y ] // [ m2 m6 m10 m14 ] [ v2 ] [ z ] // [ m3 m7 m11 m15 ] [ v3 ] [ w ] function multiply(matrix, vector) { return [ matrix[0] * vector[0] + matrix[4] * vector[1] + matrix[8 ] * vector[2] + matrix[12] * vector[3], matrix[1] * vector[0] + matrix[5] * vector[1] + matrix[9 ] * vector[2] + matrix[13] * vector[3], matrix[2] * vector[0] + matrix[6] * vector[1] + matrix[10] * vector[2] + matrix[14] * vector[3], matrix[3] * vector[0] + matrix[7] * vector[1] + matrix[11] * vector[2] + matrix[15] * vector[3] ]; } return transform; }34:T910,// https://github.com/sloisel/numeric solve = { var abs = Math.abs; function _foreach2(x, s, k, f) { if (k === s.length - 1) return f(x); var i, n = s[k], ret = Array(n); for (i = n - 1; i >= 0; --i) ret[i] = _foreach2(x[i], s, k + 1, f); return ret; } function _dim(x) { var ret = []; while (typeof x === "object") ret.push(x.length), x = x[0]; return ret; } function dim(x) { var y, z; if (typeof x === "object") { y = x[0]; if (typeof y === "object") { z = y[0]; if (typeof z === "object") { return _dim(x); } return [x.length, y.length]; } return [x.length]; } return []; } function cloneV(x) { var _n = x.length, i, ret = Array(_n); for (i = _n - 1; i !== -1; --i) ret[i] = x[i]; return ret; } function clone(x) { return typeof x !== "object" ? x : _foreach2(x, dim(x), 0, cloneV); } function LU(A, fast) { fast = fast || false; var i, j, k, absAjk, Akk, Ak, Pk, Ai, max, n = A.length, n1 = n - 1, P = new Array(n); if (!fast) A = clone(A); for (k = 0; k < n; ++k) { Pk = k; Ak = A[k]; max = abs(Ak[k]); for (j = k + 1; j < n; ++j) { absAjk = abs(A[j][k]); if (max < absAjk) { max = absAjk; Pk = j; } } P[k] = Pk; if (Pk != k) { A[k] = A[Pk]; A[Pk] = Ak; Ak = A[k]; } Akk = Ak[k]; for (i = k + 1; i < n; ++i) { A[i][k] /= Akk; } for (i = k + 1; i < n; ++i) { Ai = A[i]; for (j = k + 1; j < n1; ++j) { Ai[j] -= Ai[k] * Ak[j]; ++j; Ai[j] -= Ai[k] * Ak[j]; } if (j===n1) Ai[j] -= Ai[k] * Ak[j]; } } return { LU: A, P: P }; } function LUsolve(LUP, b) { var i, j, LU = LUP.LU, n = LU.length, x = clone(b), P = LUP.P, Pi, LUi, tmp; for (i = n - 1; i !== -1; --i) x[i] = b[i]; for (i = 0; i < n; ++i) { Pi = P[i]; if (P[i] !== i) tmp = x[i], x[i] = x[Pi], x[Pi] = tmp; LUi = LU[i]; for (j = 0; j < i; ++j) { x[i] -= x[j] * LUi[j]; } } for (i = n - 1; i >= 0; --i) { LUi = LU[i]; for (j = i + 1; j < n; ++j) { x[i] -= x[j] * LUi[j]; } x[i] /= LUi[i]; } return x; } return function(A, b, fast) { return LUsolve(LU(A, fast), b); }; }35:[{"id":"a94f754d692438adabfd6fa1b9c710b66fe9e71c96988c79fb0bd563a030498fbf6cf1eb4c9ec55302a3a41aa72d1efc2a5003c742933f6a0173a97b0c2dc082","href":"https://static.observableusercontent.com/files/a94f754d692438adabfd6fa1b9c710b66fe9e71c96988c79fb0bd563a030498fbf6cf1eb4c9ec55302a3a41aa72d1efc2a5003c742933f6a0173a97b0c2dc082","name":"ogf-skull2.svg.json","type":"application/json","lastModified":1589692509149.958,"size":9822},{"id":"dca6ce81be24a86ca7e75a72ab74169e77865dc6ff5977c289f961ea334a68fb86e087142a27cde420ee694a04c9b62479b640fc11f72ecbbdb3267bcc746511","href":"https://static.observableusercontent.com/files/dca6ce81be24a86ca7e75a72ab74169e77865dc6ff5977c289f961ea334a68fb86e087142a27cde420ee694a04c9b62479b640fc11f72ecbbdb3267bcc746511","name":"ogf-skull1.svg@1.json","type":"application/json","lastModified":1589691707839.054,"size":26382},{"id":"ef8b37d2b8774221df8daa89e61b8d32492f052d479680ecc7df62d4143da6d903857f1be5e752be2ab51f022f74d8d5a16b1c83003e030d84756b1df4f86731","href":"https://static.observableusercontent.com/files/ef8b37d2b8774221df8daa89e61b8d32492f052d479680ecc7df62d4143da6d903857f1be5e752be2ab51f022f74d8d5a16b1c83003e030d84756b1df4f86731","name":"ogf-fish2.svg@2.json","type":"application/json","lastModified":1589688199809.696,"size":19851},{"id":"1977e5891d35d70f2a6eaf52bf12123ce5d57942eea688af54fe31b04fd2bb1d9ee7274c24279485c286c1764b0a7feb0508df0956da63bfe6edd7947f83267b","href":"https://static.observableusercontent.com/files/1977e5891d35d70f2a6eaf52bf12123ce5d57942eea688af54fe31b04fd2bb1d9ee7274c24279485c286c1764b0a7feb0508df0956da63bfe6edd7947f83267b","name":"ogf-front.svg@2.json","type":"application/json","lastModified":1589685448455.129,"size":15385},{"id":"9360dd9780fe8daa22f0118a0ebbbad2108a3c96962ab5aa2717413c74fb5fdf5e4cdf0f7070476836095e07db9cf4e857beb545b2f8750aadad1161f3e6f9a6","href":"https://static.observableusercontent.com/files/9360dd9780fe8daa22f0118a0ebbbad2108a3c96962ab5aa2717413c74fb5fdf5e4cdf0f7070476836095e07db9cf4e857beb545b2f8750aadad1161f3e6f9a6","name":"ogf-fish.svg.json","type":"application/json","lastModified":1589678147584.585,"size":31118},{"id":"0ad97893d865ae558a3df4d5864e990402ec4949ed72f0f9ca14014c0b9afe73c20164e92ed6e6cf31d0510d0a35d7e28da5e9bc86ba090c8e0bb925c882391e","href":"https://static.observableusercontent.com/files/0ad97893d865ae558a3df4d5864e990402ec4949ed72f0f9ca14014c0b9afe73c20164e92ed6e6cf31d0510d0a35d7e28da5e9bc86ba090c8e0bb925c882391e","name":"ogf-face.svg.json","type":"application/json","lastModified":1589677876847.72,"size":8322}] 2f:{"title":"Stretchy Fish","cells":[{"id":0,"value":"md`# Stretchy Fish\n\nD'Arcy Wentworth Thompson's images in [On Growth and Form](https://en.wikipedia.org/wiki/On_Growth_and_Form) show how the shape of related animals can be described by geometric transformations. I admit to being one of the people that hasn't actually read most of the book 🙂, but I love leafing through and looking at the pictures. They give me a sense of wonder and reignite my curiousity about math and living things.\n\nThen I [learned](https://writings.stephenwolfram.com/2017/10/are-all-fish-the-same-shape-if-you-stretch-them-the-victorian-tale-of-on-growth-and-form/) that Thompson, before he wrote the book, would play with his kids by drawing pictures of dogs on rubber sheets and stretching them from poodles to dachshunds. So cool!\n\nThis is a \"digital rubber sheet\" to stretch some pictures with.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2252,"value":"viewof image = select({\n title: 'Image',\n description: 'Images are traced from On Growth and Form',\n options: Object.keys(mapping)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2799,"value":"viewof themekey = radio({\n title: 'Color Theme',\n description: \"The dark theme is nice for zoom backgrounds :)\",\n options: Object.keys(themes),\n value: 'light'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2023,"value":"viewof nTicks = slider({min:3, max: 41, step: 1, value: 11, title: \"Number of grid ticks\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2123,"value":"viewof gridStrength = slider({\n min:0, max: 0.5, step: 0.01, value: 0.1,\n title: \"Grid strength\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md` ## Notes\n\nWould like to do something with http://www.gutenberg.org/files/55264/55264-h/55264-h.htm#fig373, maybe find stuff on https://www.ongrowthandform.org/, and this seems potentially useful https://benjamminf.github.io/warpjs/ or maybe this! https://bl.ocks.org/mbostock/10571478\n\nWould be cool to make it so that shape/fish transformations can be explored, and then one a cool one is found it can be saved/shared via query parameters, and potentially labelled with a name?\n\nhttp://www.ubio.org/index.php?pagename=general\n\nhttps://www.nature.com/articles/494032a\n\nhttps://www.nature.com/articles/nphys4096\n\nhttp://phylopic.org/\n\nhttp://www.gutenberg.org/files/55264/55264-h/55264-h.htm\n\nCould maybe search for images here: https://collections.nmnh.si.edu/search/botany/\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2838,"value":"md` ## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2616,"value":"// starting points\nstartingPoints = [\n [[0.2, 0.22], [0.5, 0.05], [0.9, 0.2]],\n [[0.2, 0.3], [0.5, 0.3], [0.9, 0.3]],\n [[0.2, 0.38], [0.5, 0.55], [0.9, 0.4]],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1911,"value":"controlPoints = {\n return [\n [\"tl\", x(startingPoints[0][0][0]), y(startingPoints[0][0][1])],\n [\"tm\", x(startingPoints[0][1][0]), y(startingPoints[0][1][1])],\n [\"tr\", x(startingPoints[0][2][0]), y(startingPoints[0][2][1])],\n [\"ml\", x(startingPoints[1][0][0]), y(startingPoints[1][0][1])],\n [\"mm\", x(startingPoints[1][1][0]), y(startingPoints[1][1][1])],\n [\"mr\", x(startingPoints[1][2][0]), y(startingPoints[1][2][1])],\n [\"bl\", x(startingPoints[2][0][0]), y(startingPoints[2][0][1])],\n [\"bm\", x(startingPoints[2][1][0]), y(startingPoints[2][1][1])],\n [\"br\", x(startingPoints[2][2][0]), y(startingPoints[2][2][1])]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2619,"value":"x = d3.scaleLinear().domain([0, 1]).range([width / 2 + pad, width - pad])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2621,"value":"y = d3.scaleLinear().domain([0, 1]).range([pad, height - pad])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1913,"value":"height = width * (9 / 16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2624,"value":"pad = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2812,"value":"theme = themes[themekey]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2501,"value":"themes = ({\n \"dark\": ({\n \"foreground\": \"white\",\n \"background\": \"black\",\n }),\n \"light\": ({\n \"foreground\": \"black\",\n \"background\": \"white\",\n }),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2261,"value":"mapping = ({\n \"OGF Scarus fish\": await FileAttachment(\"ogf-fish.svg.json\").json(),\n \"OGF Dürer profile\": await FileAttachment(\"ogf-face.svg.json\").json(),\n \"OGF Dürer face\": await FileAttachment(\"ogf-front.svg@2.json\").json(),\n \"OGF Diadon fish\": await FileAttachment(\"ogf-fish2.svg@2.json\").json(),\n \"OGF Protohippus skull\": await FileAttachment(\"ogf-skull1.svg@1.json\").json(),\n \"OGF Human skull\": await FileAttachment(\"ogf-skull2.svg.json\").json(),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1988,"value":"function makeRectPolygons(x0, y0, x1, y1, nTicks) {\n let dx = x1 - x0\n let dy = y1 - y0\n let rectWidth = dx / (nTicks - 1)\n let rectHeight = dy / (nTicks - 1)\n let result = []\n for (let j=0; j < (nTicks - 1); j++) {\n for (let i=0; i < (nTicks - 1); i++) {\n let x = x0 + j * rectWidth\n let y = y0 + i * rectHeight\n result.push({\n tlX: x,\n tlY: y,\n trX: x + rectWidth,\n trY: y,\n brX: x + rectWidth,\n brY: y + rectHeight,\n blX: x,\n blY: y + rectHeight,\n })\n }\n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"function orderPoints(points) {\n let p = points.map(d => [d[1], d[2]])\n return slicePoints(p)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2027,"value":"nBetween = (nTicks - 1) / 2 - 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1953,"value":"import {calcArc, slicePoints, pointsToPolygons, smallPoints} with {nBetween as nBetween} from \"@stringertheory/squishy-widget\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"function object_to_array(obj) {\n return [[obj.tlX, obj.tlY], [obj.trX, obj.trY], [obj.brX, obj.brY], [obj.blX, obj.blY]];\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"ashape = {\n let wkt = new wicket.Wkt()\n let poly = wkt.read(\"LINESTRING ((30 10, 10 20, 20 40, 40 40, 30 10))\")\n return poly.components\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"wicket = require(\"wicket\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-geo-polygon@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"fish = mapping[image]","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import {slider, select, radio} from \"@jashkenas/inputs\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":2509,"value":"chroma = require(\"chroma-js@2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}