30:Td4c,{ let svg = htl.html` `; let x = d3.scaleLinear(cameraExtent.x, [0, canvasWidth]); let z = d3.scaleLinear(cameraExtent.z, [0, canvasHeight]); let width = cameraExtent.x[1] - cameraExtent.x[0]; let gridSize = 1; while (width / gridSize > 16) { gridSize *= 2; } // vertical grid lines d3.select(svg) .select(".grid") .selectAll("line.vertical") .data( d3.range( roundDownTo(cameraExtent.x[0], gridSize), roundUpTo(cameraExtent.x[1], gridSize), gridSize ) ) .join("line") .classed("vertical", true) .attr("x1", (d) => x(d)) .attr("y1", 0) .attr("x2", (d) => x(d)) .attr("y2", canvasHeight) .attr("stroke", "#aaa"); // horizontal grid lines d3.select(svg) .select(".grid") .selectAll("line.horizontal") .data( d3.range( roundDownTo(cameraExtent.z[0], gridSize), roundUpTo(cameraExtent.z[1], gridSize), gridSize ) ) .join("line") .classed("horizontal", true) .attr("x1", 0) .attr("y1", (d) => z(d)) .attr("x2", canvasWidth) .attr("y2", (d) => z(d)) .attr("stroke", "#aaa"); // measurement points d3.select(svg) .select(".points") .selectAll("circle") .data(measurements) .join("circle") .attr("cx", (d) => x(d.x)) .attr("cy", (d) => z(d.z)) .attr("r", 5) .attr("fill", "black"); // measurement angles const vectorLength = 30; d3.select(svg) .select(".vectors") .selectAll("line") .data(measurements) .join("line") .attr("x1", (d) => x(d.x)) .attr("y1", (d) => z(d.z)) .attr("x2", (d) => x(d.x) + Math.cos(d.angRad) * 30) .attr("y2", (d) => z(d.z) + Math.sin(d.angRad) * 30) .attr("stroke", "black"); // measurement labels d3.select(svg) .select(".points") .selectAll("text") .data(measurements) .join("text") .attr("x", (d) => x(d.x)) .attr("y", (d) => z(d.z)) .attr("dy", -12) .text((d) => `x=${d.x?.toFixed()} z=${d.z?.toFixed()}`) .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", "#444"); // intersection d3.select(svg) .select(".estimates") .selectAll("circle.intersection") .data(intersections) .join("circle") .classed("intersection", true) .attr("cx", (d) => x(d.x)) .attr("cy", (d) => z(d.z)) .attr("r", 1) .attr("fill", "black"); d3.select(svg) .select(".estimates") .selectAll("circle.error") .data([intersection]) .join("circle") .classed("error", true) .attr("cx", (d) => x(d.x)) .attr("cy", (d) => z(d.z)) .attr("r", (d) => d.radius) .attr("stroke", "rgba(0, 0, 255, 0.4)") .attr("lineWidth", 2) .attr("fill", "none"); d3.select(svg) .select(".estimates") .selectAll("text") .data([intersection, intersection]) .join("text") .attr("x", (d) => x(d.x)) .attr("y", (d) => z(d.z)) .attr("dy", (d, i) => d.radius + (i + 1) * 15) .attr("text-anchor", "end") .text((d, i) => i % 2 == 0 ? `x=${d.x?.toFixed()}` : `z=${d.z?.toFixed()}` ); return svg; }31:[] 2e:{"title":"End Portal Finder","cells":[{"id":0,"value":"# End Portal Finder\n\nIn Minecraft, find an End portal by throwing Eyes of Ender in multiple places, and writing down where you were, and which direction the eye went. More measurements produce a more accurate result. Find your coordinates and angle in the F3 menu.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"## Measurements","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"viewof measurementsCsv = Inputs.textarea({\n label: \"Measurements\",\n value: `x,z,angle\n100,100,-30\n-150,10,-43\n-200,250,-60`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"## Results","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"### Calculations","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"measurements = d3\n .csvParse(measurementsCsv)\n .map((d) => ({ x: +d.x, z: +d.z, angle: +d.angle }))\n .map((d) => ({\n ...d,\n angRad: (d.angle / 180) * Math.PI + Math.PI / 2\n // angRad: d.angle\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"worldCoordinateMargin = 64","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"canvasWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"canvasHeight = Math.floor((canvasWidth / 16) * 9)","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"cameraExtent = {\n let range = proportionalRanges(\n d3.extent([\n ...measurements.flatMap((d) => [\n d.x - worldCoordinateMargin,\n d.x + worldCoordinateMargin\n ]),\n ...intersections.flatMap((d) => [\n d.x + worldCoordinateMargin,\n d.x - worldCoordinateMargin\n ]),\n intersection.x + worldCoordinateMargin,\n intersection.x - worldCoordinateMargin\n ]),\n d3.extent([\n ...measurements.flatMap((d) => [\n d.z - worldCoordinateMargin,\n d.z + worldCoordinateMargin\n ]),\n ...intersections.flatMap((d) => [\n d.z + worldCoordinateMargin,\n d.z - worldCoordinateMargin\n ]),\n intersection.z + worldCoordinateMargin,\n intersection.z - worldCoordinateMargin\n ]),\n [0, canvasWidth],\n [0, canvasHeight]\n );\n return { x: range.x, z: range.y };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"intersectionOf = (p1a, p2a) => {\n // https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line\n let p1b = {\n x: p1a.x + Math.cos(p1a.angRad),\n z: p1a.z + Math.sin(p1a.angRad)\n };\n let p2b = {\n x: p2a.x + Math.cos(p2a.angRad),\n z: p2a.z + Math.sin(p2a.angRad)\n };\n let [x1, y1] = [p1a.x, p1a.z];\n let [x2, y2] = [p1b.x, p1b.z];\n let [x3, y3] = [p2a.x, p2a.z];\n let [x4, y4] = [p2b.x, p2b.z];\n\n let d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);\n return {\n x: ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) / d,\n z: ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / d\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"intersections = {\n let pairs = [];\n for (let i = 0; i < measurements.length; i++) {\n for (let j = 0; j < measurements.length; j++) {\n if (i === j) continue;\n pairs.push([measurements[i], measurements[j]]);\n }\n }\n return pairs.map((pair) => intersectionOf(...pair));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"intersection = {\n let avgX = d3.mean(intersections, (d) => d.x);\n let avgZ = d3.mean(intersections, (d) => d.z);\n let radius = d3.max(intersections, (d) =>\n Math.sqrt(Math.pow(d.x - avgX, 2) + Math.pow(d.z - avgZ, 2))\n );\n return { x: avgX, z: avgZ, radius };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"### Helpers","pinned":true,"hidden":false,"mode":"md"},{"id":84,"value":"roundToMultipleOf = (n, m, { dir = \"down\" } = {}) =>\n (dir === \"down\" ? Math.floor : Math.ceil)(n / m) * m","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"roundUpTo = (n, m) => roundToMultipleOf(n, m, {dir: \"up\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"roundDownTo = (n, m) => roundToMultipleOf(n, m, { dir: \"down\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"proportionalRanges = (\n await import(\"https://cdn.skypack.dev/d3-proportional-ranges@0.1.11?min\")\n).default","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}