2b:null 2c:["$","title",null,{"children":"Spherical intersection | Fil | Observable"}] 31:T823,points = { reset; const points = [ [0, 70], [-10, 10], [-40, 30], [10, 45] ]; switch (+arrangement) { case 0: break; case -1: // reversed let p = points[1]; points[1] = points[0]; points[0] = p; break; case -2: // no solution let q = points[2]; points[2] = points[0]; points[0] = q; break; case -3: // points far apart points[0] = [0, 89.99]; points[1] = [0, -89.99]; points[2] = [-89.99, 0]; points[3] = [89.99, 0]; break; case -4: // points far apart, 2 points[0] = [0, 89.99]; points[1] = [0, -89.99]; points[2] = [0, 0]; points[3] = [(0.5 - Math.random()) * 50, 0]; break; case 1: // B=A points[1] = points[0]; break; case 2: // C=A points[2] = points[0]; break; case 3: // D=A points[3] = points[0]; break; case 4: // D=C points[3] = points[2]; break; case 5: // D=-C points[3] = [points[2][0] + 180, -points[2][1]]; break; case 6: // touching points[0] = [80 * Math.random() - 40, 20]; points[1] = [80 * Math.random() - 40, 90 * Math.random()]; points[2] = [80 * Math.random() - 40, -20]; points[3] = [80 * Math.random() - 40, -90 * Math.random()]; let i = (Math.random() * 4) | 0; points[i] = d3.geoInterpolate( points[3 - 2 * ((i / 2) | 0)], points[2 - 2 * ((i / 2) | 0)] )(Math.random()); break; case 7: // collinear, this examples breaks for epsilon=1e-13 points[2] = points[0]; points[3] = [18.279023657167595, 82.06656745045608]; break; case 8: points[0] = [0, 0]; points[1] = [0, 90]; points[2] = [70, 0]; points[3] = [90, 0]; break; case 9: points[0] = [0, 90]; points[1] = [0, 0]; points[2] = [70, 0]; points[3] = [90, 0]; break; case 10: points[0] = [0, 90]; points[1] = [0, 0]; points[2] = [10, 0]; points[3] = [90, 0]; } return points; }32:T5cf,function intersect(a, b, candidate) { if (cartesianEqual(a.from, b.from) || cartesianEqual(a.from, b.to)) return a.from; if (cartesianEqual(a.to, b.from) || cartesianEqual(a.to, b.to)) return a.to; var axb = cartesianCross(a.normal, b.normal), norm2 = cartesianDot(axb, axb); cartesianNormalizeInPlace(axb); if (candidate) return axb; // if A=B or are antipodals, or C=D or antipodals // the solution is undefined. // If ABCD are on the same circle, same answer for the moment (todo?) if (norm2 < 1e-30) return undefined; var a0 = cartesianDot(axb, a.fromNormal), a1 = cartesianDot(axb, a.toNormal), b0 = cartesianDot(axb, b.fromNormal), b1 = cartesianDot(axb, b.toNormal); // check if the candidate lies on both segments // or is almost equal to one of the four points if ( (a0 > 0 && a1 < 0 && b0 > 0 && b1 < 0) || (a0 > 0 && cartesianEqual(axb, a.from)) || (a1 < 0 && cartesianEqual(axb, a.to)) || (b0 > 0 && cartesianEqual(axb, b.from)) || (b1 < 0 && cartesianEqual(axb, b.to)) ) return axb; // same test for the antipode axb[0] = -axb[0]; axb[1] = -axb[1]; axb[2] = -axb[2]; a0 = -a0; a1 = -a1; b0 = -b0; b1 = -b1; if ( (a0 > 0 && a1 < 0 && b0 > 0 && b1 < 0) || (a0 > 0 && cartesianEqual(axb, a.from)) || (a1 < 0 && cartesianEqual(axb, a.to)) || (b0 > 0 && cartesianEqual(axb, b.from)) || (b1 < 0 && cartesianEqual(axb, b.to)) ) return axb; return false; }33:T1271,function mapcanvas(projection, c, opts) { const context = c.getContext("2d"), path = d3.geoPath(projection, context); let hover; if (opts.clip) context.beginPath(), path(opts.clip), context.clip(); function render() { context.clearRect(0, 0, width, c.height); context.beginPath(), path({ type: "Sphere" }), (context.fillStyle = "#fefef2"), context.fill(); context.beginPath(), (context.lineWidth = 0.5), path(d3.geoGraticule()()), (context.strokeStyle = "#ddd"), context.stroke(); context.beginPath(), path({ type: "Sphere" }), (context.strokeStyle = "#000"), context.stroke(); // outer great circles const antipodeAB = d3.geoInterpolate(points[0], points[1])(0.5); (antipodeAB[0] += 180), (antipodeAB[1] *= -1); const antipodeCD = d3.geoInterpolate(points[2], points[3])(0.5); (antipodeCD[0] += 180), (antipodeCD[1] *= -1); context.beginPath(), context.setLineDash([3, 8]), (context.lineWidth = 0.25); if (circle_defined(points[0], points[1])) { path({ type: "LineString", coordinates: [points[0], antipodeAB, points[1]] }); } if (circle_defined(points[2], points[3])) { path({ type: "LineString", coordinates: [points[2], antipodeCD, points[3]] }); } (context.strokeStyle = "black"), context.stroke(); context.setLineDash([]); context.lineWidth = 1; // lines context.beginPath(); if (circle_defined(points[0], points[1])) { path({ type: "LineString", coordinates: [points[0], points[1]] }); } if (circle_defined(points[2], points[3])) { path({ type: "LineString", coordinates: [points[2], points[3]] }); } (context.strokeStyle = "black"), context.stroke(); // sites & numbers points.forEach((site, i) => { context.beginPath(), path.pointRadius(10)({ type: "Point", coordinates: site }), (context.fillStyle = i === hover ? "#eedddd" : "white"), (context.strokeStyle = "black"), context.fill(), context.stroke(); if (path.context(null)({ type: "Point", coordinates: site })) { (context.textAlign = "center"), (context.fillStyle = "black"), (context.font = "16px Georgia"), (context.textBaseline = "middle"), context.fillText( String.fromCharCode(65 + i), projection(site)[0], projection(site)[1] - 1 ); } path.context(context); }); // intersection const A = intersection(...points.map(cartesianDegrees)), B = circleintersection(...points.map(cartesianDegrees)); context.beginPath(), path.pointRadius(6)({ type: "MultiPoint", coordinates: [sphericalDegrees(B), sphericalDegrees(vecmul(B, -1))] }), (context.fillStyle = "white"), (context.strokeStyle = "black"), context.fill(), context.stroke(); if (A) { context.beginPath(), path.pointRadius(8)({ type: "Point", coordinates: sphericalDegrees(A) }), (context.fillStyle = "orange"), (context.strokeStyle = "black"), context.fill(), context.stroke(); } } (context.canvas.render = render)(); let subject, rotate, sel = d3 .select(context.canvas) .style("cursor", "-webkit-grab") .style("cursor", "-moz-grab") .style("cursor", "grab"); const inertia = d3.geoInertiaDrag( sel, function () { context.canvas.render(); } /* allow overloading map.render */, projection, { start: function () { let pos = projection.invert(inertia.position), point = d3.scan(points.map((point) => d3.geoDistance(point, pos))); if (d3.geoDistance(points[point], pos) < 0.2) subject = point; else subject = -1; rotate = projection.rotate(); }, move: function () { if (subject > -1) { projection.rotate(rotate); inertia.velocity = [0, 0]; points[subject] = projection.invert( inertia.position.map((d) => d - 6) // 6 pixel offset to unclutter the GUI ); render(); mutable updated = true; } } } ); invalidation.then(() => sel.on(".drag", null)); sel.on("mousemove", function () { hover = -1; let pos = projection.invert(inertia.position), point = d3.scan(points.map((point) => d3.geoDistance(point, pos))); if (d3.geoDistance(points[point], pos) < 0.1) hover = point; render(); }); invalidation.then(() => sel.on("mousemove", null)); return context.canvas; }34:[] 2f:{"id":"3e4d988597f2ea3c","slug":"spherical-intersection","title":"Spherical intersection","thumbnail":"afbf7278d03c7982048d7502317aea1c42a6024bea27e4ab2261cb7836ef5856","access_level":"public","create_time":"$D2018-09-08T14:32:37.406Z","update_time":"$D2024-11-03T08:09:36.300Z","view_time":null,"first_public_time":"$D2018-09-08T15:40:26.403Z","fork":true,"stars":16,"starred":false,"owner":{"type":"team","id":"da2a32154638c457","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":"starter_2024"},"version":1839,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a80e17434f44ee0d","slug":"geo","title":"Geo","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"type":"notebook","body":{"title":"Spherical intersection","cells":[{"id":0,"value":"# Spherical intersection\n\nDrag the points & rotate the sphere.\n\nThis notebook is based on Jason Davies’ [visual demo](https://www.jasondavies.com/maps/intersect/) for the inspiration, and more importantly for the original algorithm — used for clipping in [d3-geo-polygon](https://github.com/d3/d3-geo-polygon).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"{\n redraw;\n const c = DOM.context2d(width, height).canvas;\n return mapcanvas(projection, c, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"viewof arrangement = Inputs.select(\n new Map([\n [\"Standard case\", 0],\n [\"Flipped (solution = antipode of candidate)\", -1],\n [\"No intersection\", -2],\n [\"Points far apart\", -3],\n [\"Points far apart 2\", -4],\n [\"B=A\", 1],\n [\"C=A\", 2],\n [\"D=A\", 3],\n [\"D=C\", 4],\n [\"C & D are antipodal (solution undefined)\", 5],\n [\"touching\", 6],\n [\"collinear\", 7],\n [\"orthogonal\", 8],\n [\"orthogonal, flipped\", 9],\n [\"equatorial\", 10]\n ]),\n { label: \"A list of cases, including edge cases.\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"viewof proj = Inputs.select([\n \"Orthographic\",\n \"Equirectangular\",\n \"Stereographic\",\n \"Gnomonic\",\n \"Mercator\",\n \"EqualEarth\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"viewof reset = html`