31:T414,viewof v = { reset; return inputsGrid( [ [ slider({ title: "x1", min: -50, max: width, step: 1, value: 50 }), slider({ title: "y1", min: 0, max: 200, step: 1, value: 50 }), slider({ title: "r1", min: 0, max: 200, step: 1, value: 50 }), slider({ title: "x2", min: 0, max: 600, step: 1, value: 300 }), slider({ title: "y2", min: 0, max: 300, step: 1, value: 270 }), slider({ title: "r2", min: 0, max: 200, step: 1, value: 50 }), slider({ title: "segments", min: 1, max: 7, step: 1, value: 3 }) ] ], [["x1", "y1", "r1", "x2", "y2", "r2", "segments"]] ); }32:T44d,{ const t = tangengPoints( Object.assign( { proportions: Array.from(d3.cumsum(new Array(v.segments).fill(1))), sum: d3.sum(new Array(v.segments).fill(1)) }, v ) ); const tg = t.points; const xP = t.segmentPointsX.flat(); const yP = t.segmentPointsY.flat(); return svg``; }33:T58c,function tangengPoints({ x1, y1, r1, x2, y2, r2, proportions, sum }) { const dx = x2 - x1; const dy = y2 - y1; const dist = Math.sqrt(dx * dx + dy * dy); const angle1 = Math.atan2(dy, dx); const angle2 = Math.acos((r1 - r2) / dist); const points = [ [x1 + r1 * Math.cos(angle1 + angle2), y1 + r1 * Math.sin(angle1 + angle2)], [x2 + r2 * Math.cos(angle1 + angle2), y2 + r2 * Math.sin(angle1 + angle2)], [x1 + r1 * Math.cos(angle1 - angle2), y1 + r1 * Math.sin(angle1 - angle2)], [x2 + r2 * Math.cos(angle1 - angle2), y2 + r2 * Math.sin(angle1 - angle2)] ]; const xDiffs = [points[3][0] - points[1][0], points[2][0] - points[0][0]]; const yDiffs = [points[3][1] - points[1][1], points[2][1] - points[0][1]]; const xSlices = xDiffs.map((d, i) => { return { slice: d / sum, base: i ? points[0][0] : points[1][0] }; }); const ySlices = yDiffs.map((d, i) => { return { slice: d / sum, base: i ? points[0][1] : points[1][1] }; }); const segmentPointsX = xSlices.map(({ slice, base }) => { return proportions.map((d, i) => { return d * slice + base; }); }); const segmentPointsY = ySlices.map(({ slice, base }) => { return proportions.map((d, i) => d * slice + base); }); return { xDiffs, yDiffs, xSlices, ySlices, proportions, segmentPointsX, segmentPointsY, points: points }; }34:[{"id":"8e66162b24b1c93f47d78b20d66e0a76f338188241f062e491359883ef5bcc4d5b31823945567dccd11f7133e46c0e7cdd619df4c0ab5aa1f9bb1c02ae1e11a8","href":"https://static.observableusercontent.com/files/8e66162b24b1c93f47d78b20d66e0a76f338188241f062e491359883ef5bcc4d5b31823945567dccd11f7133e46c0e7cdd619df4c0ab5aa1f9bb1c02ae1e11a8","name":"IMG_7503 2.jpg","type":"image/jpeg","lastModified":1623429981314.604,"size":1323148},{"id":"2869021dd0ecf15294da47029dbda48aa8cf5777f3a98faff2f02dc9044599097710956132b6a2f69eccc179f1d0118c6133897cedc28bcc5026d5243bbb6c80","href":"https://static.observableusercontent.com/files/2869021dd0ecf15294da47029dbda48aa8cf5777f3a98faff2f02dc9044599097710956132b6a2f69eccc179f1d0118c6133897cedc28bcc5026d5243bbb6c80","name":"Screenshot 2021-06-11 at 20.48.12.png","type":"image/png","lastModified":1623430106306.585,"size":18850},{"id":"59ee1f99719d6418f0fcc4e4e49c0326dc187672533eb2e4d9b2f90c5ff95e1970e074a9d6553f7644162eeb2fa903e3a82c7dcd349cd10345f864d0c8b92bcd","href":"https://static.observableusercontent.com/files/59ee1f99719d6418f0fcc4e4e49c0326dc187672533eb2e4d9b2f90c5ff95e1970e074a9d6553f7644162eeb2fa903e3a82c7dcd349cd10345f864d0c8b92bcd","name":"Screenshot 2021-06-12 at 16.42.21.png","type":"image/png","lastModified":1623501756821.92,"size":129466}] 2f:{"title":"Two circle - common tangent points","cells":[{"id":0,"value":"# Two circle - common tangent points","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"Problem: we need to find two circle's common tangent points for given centers and radiuses. \n\nThe use case is when we need to draw multiple **links with different widths** between the nodes **side by side** \n\n\nBefore \n

\n\nAfter: \n

\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"FileAttachment(\"IMG_7503 2.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof reset = Inputs.button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"tangentPointsResult = tangengPoints(\n Object.assign(\n {\n proportions: Array.from(d3.cumsum(new Array(v.segments).fill(1))),\n sum: d3.sum(new Array(v.segments).fill(1))\n },\n v\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"import { inputsGrid } from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}