31:T800,{ let handleRadius = 12 const svg = d3.create("svg").attr("width", width).attr("height", height) var rubberArcs = svg.selectAll(".big-arc") .data(slicePoints(controlPoints)) .join("path") .attr("class", "arc") .attr("d", calcArc.path) var frameLines = svg.selectAll(".small-arc") .data(interpolatedFrame(slicePoints(controlPoints), nBetween).triples) .join("path") .attr("class", "small-arc") .attr("d", calcArc.path) var gridPoints = svg.selectAll(".grid-points") .data(smallPoints(slicePoints(controlPoints))) .join("circle") .attr("class", "grid-point-1") .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", 2) .style("stroke", "none"); var rubberPolygons = svg.selectAll(".grid-polygons") .data(pointsToPolygons(smallPoints(slicePoints(controlPoints)))) .join("polygon") .attr("class", "grid-polygon") .attr("points", d => [d.tl, d.tr, d.br, d.bl]) svg.selectAll(".handle") .data(controlPoints) .join("circle") .attr("class", "handle") .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", handleRadius) .style("fill", "white") .style("stroke", "black") .style("stroke-width", 2) .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[0] = x).attr("cy", d[1] = y); transformed() } function transformed () { rubberArcs.attr("d", calcArc.path) frameLines.data(interpolatedFrame(slicePoints(controlPoints), nBetween).triples).attr("d", calcArc.path) gridPoints.data(smallPoints(slicePoints(controlPoints))).attr("cx", d => d[0]).attr("cy", d => d[1]) rubberPolygons.data(pointsToPolygons(smallPoints(slicePoints(controlPoints)))).attr("points", d => [d.tl, d.tr, d.br, d.bl]) } return svg.node(); }32:T4ae,calcArc = { //convert 3 points to an Arc Path from https://github.com/1wheel/swoopy-drag/blob/gh-pages/swoopy-drag.js#L143-L173 function calcCirclePath(points) { let params = calcCircleParams(points); return [ 'M', points[0], 'A', params.r, params.r, 0, params.laf, params.saf, points[2] ].join(' '); } function calcCircleParams(points) { var a = points[0]; var b = points[2]; var c = points[1]; var A = dist(b, c); var B = dist(c, a); var C = dist(a, b); var angle = Math.acos((A * A + B * B - C * C) / (2 * A * B)); //calc radius of circle var K = .5 * A * B * Math.sin(angle); var r = (A * B * C) / (4 * K); //large arc flag var laf = +(Math.PI / 2 > angle); //sweep flag var saf = +( (b[0] - a[0]) * (c[1] - a[1]) - (b[1] - a[1]) * (c[0] - a[0]) < 0 ); return { r: r, laf: laf, saf: saf, start: a, end: b, mid: c }; } function dist(a, b) { return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2)); } return { path: calcCirclePath, params: calcCircleParams }; }33:[] 2f:{"title":"Squishy Widget","cells":[{"id":0,"value":"md`# Squishy Widget\n\nThis will be useful for making the rubber sheet for the squishy fish\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"nBetween = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"controlPoints = [[0, 0],[0.5, 0],[1, 0],[0, 0.5],[0.5, 0.5],[1, 0.5],[0, 1],[0.5, 1],[1,1]].map(d => [width/10 + (width - width/5)*d[0], height/10 + (height - height/5)*d[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"function slicePoints(controlPoints) {\n return [\n [controlPoints[0], controlPoints[1], controlPoints[2]],\n [controlPoints[3], controlPoints[4], controlPoints[5]],\n [controlPoints[6], controlPoints[7], controlPoints[8]],\n [controlPoints[0], controlPoints[3], controlPoints[6]],\n [controlPoints[1], controlPoints[4], controlPoints[7]],\n [controlPoints[2], controlPoints[5], controlPoints[8]],\n ]\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"function interpolatedFrame(arcs, nBetween=1) {\n let dense = []\n let points = []\n for (let i=0; i < arcs.length; i++) {\n let arc = arcs[i]\n let more = interpolateArc(arc, nBetween)\n dense.push(more)\n if (i < (arcs.length / 2)) {\n points.push(...arc)\n }\n for (let j=0; j < more.length; j++) {\n let point = more[j]\n if (j % (nBetween + 1)) {\n points.push(point)\n }\n }\n }\n \n let triples = []\n dense[3].map(function (d, i) {\n triples.push([d, dense[4][i], dense[5][i]])\n })\n dense[0].map(function (d, i) {\n triples.push([d, dense[1][i], dense[2][i]])\n })\n\n \n return {\n points: points,\n triples: triples,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"function smallPoints(arcs) {\n let smallArcs = interpolatedFrame(arcs, nBetween).triples\n let aPoints = []\n for (let i=0; i < (smallArcs.length / 2); i++) {\n let more = interpolateArc(smallArcs[i], nBetween)\n aPoints.push(more)\n }\n let bPoints = []\n for (let i=smallArcs.length / 2; i < smallArcs.length; i++) {\n let more = interpolateArc(smallArcs[i], nBetween)\n bPoints.push(more)\n }\n // transpose\n bPoints = bPoints[0].map((col, i) => bPoints.map(row => row[i]));\n \n // average the positions of the points together\n let points = []\n aPoints.map(function (aRow, i) {\n let bRow = bPoints[i]\n aRow.map(function (a, j) {\n let b = bRow[j]\n points.push([0.5 * (a[0] + b[0]), 0.5 * (a[1] + b[1])])\n })\n })\n return points\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"function pointsToPolygons(points) {\n let result = []\n let n = Math.floor(Math.sqrt(points.length))\n for (let i=0; i < (n - 1); i++) {\n for (let j=0; j < (n - 1); j++) {\n let tlIndex = (j * n) + i\n let blIndex = ((j + 1) * n) + i\n result.push({\n tl: points[tlIndex],\n tr: points[tlIndex + 1],\n bl: points[blIndex],\n br: points[blIndex + 1] \n })\n }\n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"import {circle_interp} from \"d8dbe23d7717a0e9\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"function interpolateArc(points, nBetween) {\n let n = 3 + 2 * nBetween\n let i = circle_interp(...points)\n return d3.range(n).map(d => i(d / (n - 1)))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"height = width / 2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}