2b:null 2c:["$","title",null,{"children":"Geodesics | Renato Paes Leme | Observable"}] 31:T4cb,md`If you want the shortest path between two points ${tex`A`} and ${tex`B`} you simply go straight from ${tex`A`} to ${tex`B`} without turning . This is easy if you are on the plane ${tex`\mathbb R^2`}, where the shortest paths are just straight lines. If you leave in the sphere ${tex`S^2`} (like the surface of our planet) it is also not hard to imagined what geodesics look like. If you want the shortest path to the North Pole, you can get a compass and keep following the north direction and if you always walk up north, you will end up there. The path is not a straight line, but it is as straight as it can get without leaving the surface of the Earth. In other words, the only curvature is the one forced on you by the surface of the sphere. To make this formal, say that the path is given by a function ${tex`\gamma:[0,1] \rightarrow S^2`}. At any point, your speed is a vector ${tex`\gamma'(t) \in \mathbb R^3`}. If you take another derivative, you will get acceleration, i.e., how much the speed changes ${tex`\gamma''(t) \in \mathbb R^3`}. We say that the curve is a geodesic if ${tex`\gamma''(t) \in \mathbb R^3`} is parallel to the normal of the sphere. Let's see below our friend going towards the North Pole. `32:T91b,{ var width = 640; var height = 210; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); // 108 is a good angle for a half sphere var sphere1 = DrawSphere(svg, 150, 100, 450, -45, 22); for (var i = 0; i < 44; ++i) { sphere1.AddFixedSegment( geom.SphericalCoordinate([Math.PI * 8/22, 2 * Math.PI * i / 44]), geom.SphericalCoordinate([Math.PI * 8/22, 2 * Math.PI * (i+1) / 44]), [1,0,0], 1.5); } var point1 = function() { var z = [Math.PI * 8/22, -Math.PI/2] ; var p, tp, np; function next() { z[1] += 0.2/22 * 2 * Math.PI; p = geom.SphericalCoordinate(z); np = geom.Scale(p, 0.5); tp = geom.Translate(p, geom.Scale( geom.SphericalCoordinate([z[0], z[1] + Math.PI / 2]), 0.5)); } next(); return { updatep: () => { return p; }, updaten: () => { return [p, np]; }, updatet: () => { return [p, tp]; }, next: next, } }(); sphere1.AddPoint(point1.updatep, [1,0,0]); sphere1.AddSegment(point1.updatet, [1,0,0], 2); sphere1.AddSegment(point1.updaten, [0,0,1], 2); sphere1.Update(); var sphere2 = DrawSphere(svg, 400, 100, 450, -45, 22); for (var i = 0; i < 44; ++i) { sphere2.AddFixedSegment( geom.SphericalCoordinate([2 * Math.PI * i / 44, -Math.PI * 6/22]), geom.SphericalCoordinate([2 * Math.PI * (i+1) / 44, -Math.PI * 6/22]), [1,0,0], 1.5); } var point2 = function() { var z = [0, -Math.PI * 6/22] ; var p, pp, tp, np; function next() { z[0] += 0.2/22 * 2 * Math.PI; p = geom.SphericalCoordinate(z); np = geom.ScaleCoordinates(p, [0.5,0.5,1]); pp = [-p[1], p[0], 0]; pp = geom.Scale(pp, 0.5 / geom.Norm(pp)); tp = geom.Translate(p, pp); } next(); return { updatep: () => { return p; }, updaten: () => { return [p, np]; }, updatet: () => { return [p, tp]; }, next: next, } }(); sphere2.AddPoint(point2.updatep, [1,0,0]); sphere2.AddSegment(point2.updatet, [1,0,0], 2); sphere2.AddSegment(point2.updaten, [0,0,1], 2); sphere2.Update(); function animate() { point1.next(); sphere1.Update(); point2.next(); sphere2.Update(); setTimeout(animate, 10); } animate(); return svg.node(); }33:T696,md`The same way that we can describe plane geometry in terms of axioms about lines and points, we can also describe the geometry of the sphere in terms of such axioms, except that now _lines_ are the circles going through the center. Some of Euclid's original axioms hold just fine: given two poins there is a line joining them (except that this line might not be unique, think of the North and South pole). It is visualize this geometry if we project it to the plane. A very convenient way to visualize the points and lines of the sphere in the plane is through the [stereographic projection](https://en.wikipedia.org/wiki/Stereographic_projection). Which is a map as follows: ${tex.block`\begin{aligned} (x,y,z) \in S^2 \mapsto \left( \frac{x}{1+z}, \frac{y}{1+z} \right) \in \mathbb R^2 \end{aligned}`} Which is easy to visualize geometrically: for each point ${tex`(x,y,z)`} draw a line (a standard ${tex`\mathbb R^3`} line) from the South pole to ${tex`(x,y,z)`} and project this to the point that the line intersects the ${tex`z=0`} plane. The equator is projected to itself. The Northern hemisphere is projected to inside the unit circle and the Southerns hemisphere is projected to the outside of the circle. The South pole however is projected to the infinity. (To be very precise, we need to project the sphere not to the plane ${tex`\mathbb R^2`} but to the plane with an extra point added in the infinity, which is usually called the [Riemann sphere](https://en.wikipedia.org/wiki/Riemann_sphere)). Below there is an image of the projection with the equator marked as a red circle. You can move the point (on the right) around and see where it corresponds in the sphere. `34:T55c,{ var width = 640; var height = 210; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); // 108 is a good angle for a half sphere var sphere1 = DrawSphere(svg, 150, 100, 450, -65, 20); for (var i = 0; i < 44; ++i) { sphere1.AddFixedSegment( geom.SphericalCoordinate([2 * Math.PI * i / 44, 0]), geom.SphericalCoordinate([2 * Math.PI * (i+1) / 44, 0]), [1,0,0], 1.5); } var spherePoint = [0,0,1]; var projectionPoint = [0,0,0]; var southPole = [0,0,-1]; function SpherePoint() { return spherePoint; } function ProjectionPoint() { return projectionPoint; } function Segment1() { return [spherePoint, southPole]; } function Segment2() { return [projectionPoint, southPole]; } function ProjectionCallback(p) { var n = geom.Norm(p); var t = 2 / (n*n + 1); var np = [p[0] * t, p[1] * t, -1 +t]; spherePoint = np; projectionPoint = [p[0], p[1], 0]; sphere1.Update(); } var input = ProjectionInput(svg, 450, 100, 70); input.AddPoint([0,0], ProjectionCallback); sphere1.AddPoint(SpherePoint, [1,1,1]); sphere1.AddPoint(ProjectionPoint, [1,1,1]); sphere1.AddSegment(Segment1, [1,0,0], 1.5); sphere1.AddSegment(Segment2, [1,0,0], 1.5); sphere1.AddPoint(() => {return southPole}, [1,1,1]); sphere1.Update(); return svg.node(); }35:T7e5,{ var width = 640; var height = 210; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); // 108 is a good angle for a half sphere var sphere1 = DrawSphere(svg, 150, 100, 450, -65, 20); var input = ProjectionInput(svg, 450, 100, 70); for (var i = 0; i < 44; ++i) { sphere1.AddFixedSegment( geom.SphericalCoordinate([2 * Math.PI * i / 44, 0]), geom.SphericalCoordinate([2 * Math.PI * (i+1) / 44, 0]), [1,0,0], 1.5); } var z1 = [.5, -.5]; var z2 = [.5, .5]; var p1 = geom.StereographicProjectionInverse(z1); var p2 = geom.StereographicProjectionInverse(z2); var theta = 0; var v; function P1() { return p1; } function P2() { return p2; } function UpdateGeodesic() { theta = Math.acos(geom.Dot(p1, p2)); v = geom.Orthonormalize(p1,p2); } UpdateGeodesic(); function Callback1(p) { z1 = p; p1 = geom.StereographicProjectionInverse(p); UpdateGeodesic(); sphere1.Update(); input.Update(); } function Callback2(p) { z2 = p; p2 = geom.StereographicProjectionInverse(p); UpdateGeodesic(); sphere1.Update(); input.Update(); } function SphereSegment(i,j) { return function() { return [ geom.Translate( geom.Scale(p1, Math.cos(i * theta)), geom.Scale(v, Math.sin(i * theta)) ), geom.Translate( geom.Scale(p1, Math.cos(j * theta)), geom.Scale(v, Math.sin(j * theta)) )]; } } function ProjectionSegment(i,j) { return function() { return (SphereSegment(i,j)()).map(geom.StereographicProjection); } } input.AddPoint(z1, Callback1); input.AddPoint(z2, Callback2); sphere1.AddPoint(P1, [1,1,1]); sphere1.AddPoint(P2, [1,1,1]); var k = 60; for(var i = 0; i < k; ++i) { sphere1.AddSegment(SphereSegment(i/k, (i+1)/k), [0,0,1], 2); input.AddSegment(ProjectionSegment(i/k, (i+1)/k), "blue", 2); } sphere1.Update(); input.Update(); return svg.node(); }36:T4ca,md`Some interesting observations: in the starting position, the two points are in the same parallel, but the geodesic doesn't follow the parallel -- there is a shorter path. This is the same observation we made in the beginning when we said that parallels of the sphere are not geodesics. Another observation: If you move the two points are both inside or both outside the red circle, then the geodesic segment is also all inside or outside it. This is easy to see in the sphere. If the two points are in the same hemisphere, the shortest path is entirely contained int that hemisphere. Finally, there are other remarkable properties about the stereographic projection. Geodesics of the sphere are mapped to circles in the plane and this mapping preserves angles, i.e., the angle which two geodesics intersect is the same angle that the corresponding circles intersect in the plane. This is what is called a [conformal map](https://en.wikipedia.org/wiki/Conformal_map). I leave you with a question: do all circles of the plane correspond to geodesics in the sphere ? To help you explore this question, here is the same interactive picture as above but with the full geodesic instead of only the arc between the two points.`37:T7d5,{ var width = 640; var height = 210; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); // 108 is a good angle for a half sphere var sphere1 = DrawSphere(svg, 150, 100, 450, -65, 20); var input = ProjectionInput(svg, 450, 100, 70); for (var i = 0; i < 44; ++i) { sphere1.AddFixedSegment( geom.SphericalCoordinate([2 * Math.PI * i / 44, 0]), geom.SphericalCoordinate([2 * Math.PI * (i+1) / 44, 0]), [1,0,0], 1.5); } var z1 = [.5, -.5]; var z2 = [.5, .5]; var p1 = geom.StereographicProjectionInverse(z1); var p2 = geom.StereographicProjectionInverse(z2); var theta = 0; var v; function P1() { return p1; } function P2() { return p2; } function UpdateGeodesic() { theta = 2 * Math.PI; v = geom.Orthonormalize(p1,p2); } UpdateGeodesic(); function Callback1(p) { z1 = p; p1 = geom.StereographicProjectionInverse(p); UpdateGeodesic(); sphere1.Update(); input.Update(); } function Callback2(p) { z2 = p; p2 = geom.StereographicProjectionInverse(p); UpdateGeodesic(); sphere1.Update(); input.Update(); } function SphereSegment(i,j) { return function() { return [ geom.Translate( geom.Scale(p1, Math.cos(i * theta)), geom.Scale(v, Math.sin(i * theta)) ), geom.Translate( geom.Scale(p1, Math.cos(j * theta)), geom.Scale(v, Math.sin(j * theta)) )]; } } function ProjectionSegment(i,j) { return function() { return (SphereSegment(i,j)()).map(geom.StereographicProjection); } } input.AddPoint(z1, Callback1); input.AddPoint(z2, Callback2); sphere1.AddPoint(P1, [1,1,1]); sphere1.AddPoint(P2, [1,1,1]); var k = 60; for(var i = 0; i < k; ++i) { sphere1.AddSegment(SphereSegment(i/k, (i+1)/k), [0,0,1], 2); input.AddSegment(ProjectionSegment(i/k, (i+1)/k), "blue", 2); } sphere1.Update(); input.Update(); return svg.node(); }38:Tf09,geom = (function() { function ApplyToSegment(f,s) { return {p1: f(s.p1), p2: f(s.p2)}; } function Dot(u,v) { var dp = 0; for (var i = 0; i < u.length; ++i) { dp += u[i] * v[i]; } return dp; } function Norm(v) { return Math.sqrt(Dot(v,v)); } function Scale(p,s) { var q = []; for (var i = 0; i < p.length; ++i) { q.push(p[i] * s); } return q; } function ScaleCoordinates(p,s) { var q = []; for (var i = 0; i < p.length; ++i) { q.push(p[i] * s[i]); } return q; } function Translate(p, dp) { var q = []; for (var i = 0; i < p.length; ++i) { q.push(p[i] + dp[i]); } return q; } return { // Given p = (\theta, \phi) returns a point in the sphere SphericalCoordinate: (p) => { var z1 = p[0]; var z2 = - p[1]; return [Math.cos(z1) * Math.cos(z2), Math.sin(z1) * Math.cos(z2), Math.sin(z2)]; }, HyperbolicalCoordinate: (p) => { var z1 = p[0]; var z2 = p[1]; return [Math.cos(z1) * Math.sinh(z2), Math.sin(z1) * Math.sinh(z2), Math.cosh(z2)]; }, StereographicProjection: (p) => { return [p[0] / (1+p[2]), p[1] / (1+p[2])]; }, StereographicProjectionInverse: (p) => { var n = p[0] * p[0] + p[1] * p[1]; var t = 2 / (n + 1); var np = [p[0] * t, p[1] * t, -1 +t]; return np; }, StereographicProjectionHyperboloidInverse: (p) => { var n = p[0] * p[0] + p[1] * p[1]; var t = 2 / (-n + 1); var np = [p[0] * t, p[1] * t, -1 +t]; return np; }, // Rotate a (x,y,z) point with respect in plane-yz Rotateyz : (p, theta) => { var angle = theta * 2 * Math.PI / 360; return [p[0], Math.cos(angle) * p[1] + Math.sin(angle) * p[2], - Math.sin(angle) * p[1] + Math.cos(angle) * p[2]]; }, // Translates a point. Assumes point and translation are the same size Translate: Translate, // Scales a point p by a scalar s Scale: Scale, // Scales a point p by s coordinate-wise ScaleCoordinates: ScaleCoordinates, // Dot product Dot: Dot, // 2-Norm of a vector Norm: Norm, // Return a vector v' that is orthogonal to v such that u and v' span the same space as u and v Orthonormalize: (u,v) => { var p = Translate(v, Scale(u, -Dot(u,v))); return Scale(p, 1 / Norm(p)); }, // Projects a point p into the z=1 plane. The scaling is kept as the third point for re of ference Project : (p) => { return [p[0] / (1-p[2]), p[1] / (1-p[2]), p[2] /*1 / (1-p[2])*/]; }, // Apply a function to a segment ApplyToSegment: ApplyToSegment, // Apply to a set of segments ApplyToSegmentSet: (f,ss) => { return ss.map(s => { return ApplyToSegment(f,s); }) }, // Grid Grid: (k1, k2) => { var segments = []; for (var i = 0; i < k1; ++i) { for (var j = 0; j < k2; ++j) { segments.push({p1: [i/k1,j/k2], p2: [(i+1)/k1,j/k2]}); segments.push({p1: [i/k1,j/k2], p2: [i/k1,(j+1)/k2]}); } } return segments; }, // Given a set of pairs of 3d, returns the range of the z-coordinate DepthRange: ss => { var maxz = Math.max(...ss.map(s => {return Math.max(s.p1[2], s.p2[2]);})); var minz = Math.min(...ss.map(s => {return Math.min(s.p1[2], s.p2[2]);})); return [minz, maxz]; }, // Given a range [minz, maxz] and a vector of 3 components representing a rgb color // we return a function that maps a point to its color DepthColor: (zrange, rgb) => { return p => { var c = 200 - 150 * (p[2] - zrange[0]) / (zrange[1] - zrange[0]); return d3.rgb(c * rgb[0], c * rgb[1], c * rgb[2]); } }, }; })();39:Ta4d,function Draw3d(svg, x, y, scale, theta) { // data var segments = []; var points = []; // auxiliary data var zrange = [0, 0]; // visual elements var shape = svg.append("g"); var angle = theta; // Maps a 3d point to its position in the svg given by the // first two coordinates of the transformation. We keep the // third coordinate to give us a notion of depth function Project(p) { return geom.Translate( geom.Scale( geom.Project( geom.Translate( geom.Rotateyz(p, angle), [0,0,-4]) ), scale ), [x,y,0] ); } function EditSegments(edit) { segments.forEach(edit); } function UpdateZRange() { zrange = geom.DepthRange(segments); } function UpdateTheta(theta) { angle = theta; } // Given two points in shepherical coordinates, we add a point function AddSegment(p1, p2, color = [1,1,1], stroke = 1, update = null) { segments.push({ p1: Project(p1), p2: Project(p2), p1o : p1, p2o : p2, color: color, stroke: stroke, update: update, }); } function AddPoint(p1, color = [1,1,1], update = null) { points.push({ p1: Project(p1), p1o : p1, color: color, update: update, }); } function Update() { segments.forEach(function(s) { if (s.update) { [s.p1o, s.p2o] = s.update(); } s.p1 = Project(s.p1o); s.p2 = Project(s.p2o); }); points.forEach(function(s) { if (s.update) { s.p1o = s.update(); } s.p1 = Project(s.p1o); }); shape.selectAll("circle").data(points).enter().append("circle"); shape.selectAll("circle") .attr("r", 3.5) .attr("cx", d => d.p1[0]) .attr("cy", d => d.p1[1]) .attr("fill", d => geom.DepthColor(zrange,d.color)(d.p1)); shape.selectAll("circle").exit().remove(); segments.sort(function(s1,s2) {return s1.p1[2] + 4 * s1.stroke - s2.p1[2] - 4 * s2.stroke}); shape.selectAll("line").data(segments).enter().append("line"); shape.selectAll("line") .attr("stroke", d => geom.DepthColor(zrange,d.color)(d.p1)) .attr("stroke-width", d => d.stroke) .attr("x1", d => d.p1[0]) .attr("y1", d => d.p1[1]) .attr("x2", d => d.p2[0]) .attr("y2", d => d.p2[1]); shape.selectAll("line").exit().remove(); } return { UpdateZRange: UpdateZRange, UpdateTheta: UpdateTheta, AddSegment: AddSegment, AddPoint: AddPoint, Update: Update, EditSegments: EditSegments, } }3a:T7ea,function ProjectionInput(svg, x, y, scale, locked = false) { var shape = svg.append("g"); shape.append("circle") .attr("r", scale) .attr("cx", x) .attr("cy", y) .attr("stroke","red") .attr("stroke-width", 1.5) .attr("fill", "none"); var points = []; function AddPoint(p, callback) { var point = shape.append("circle") .attr("r", 3.5) .attr("cx", x + scale * p[0]) .attr("cy", y + scale * p[1]) .call(d3.drag() .on("drag", dragged)); points.push(point); function ProjectToBox(a, [min,max]) { return Math.max(Math.min(a, max), min); } function dragged() { var pos; if (!locked) { pos = [ProjectToBox(d3.event.x, [x - 2 * scale, x + 2 * scale]), ProjectToBox(d3.event.y, [y - 1.5 * scale, y + 1.5 * scale])]; } else { var dp = [d3.event.x - x, d3.event.y - y]; pos = geom.Translate([x,y], geom.Scale(dp, Math.min(1, scale / geom.Norm(dp)))); } point.attr("cx", pos[0]) .attr("cy", pos[1]); var px = (pos[0] - x) / scale; var py = (pos[1] - y) / scale; callback([px,py]); } } var segments = []; function AddSegment(update, color, stroke = 2) { segments.push({ p1: [0,0], p2: [0,0], color: color, stroke: stroke, update: update, }); } function Update() { segments.forEach(function(s) { [s.p1, s.p2] = s.update(); }); shape.selectAll("line").data(segments).enter().append("line"); shape.selectAll("line") .attr("stroke", d => d.color) .attr("stroke-width", d => d.stroke) .attr("x1", d => x + scale * d.p1[0]) .attr("y1", d => y + scale * d.p1[1]) .attr("x2", d => x + scale * d.p2[0]) .attr("y2", d => y + scale * d.p2[1]); shape.selectAll("line").exit().remove(); points.forEach(function(p) { p.raise(); }); } return { AddPoint: AddPoint, AddSegment: AddSegment, Update: Update, } }3b:[] 2f:{"id":"b69c13aa8cc91a6b","slug":"geodesics","title":"Geodesics","thumbnail":"d5af1aade6b36f44ee72432cade24254f4eb94e016f01423ff5bb7ded7584e20","access_level":"public","create_time":"$D2019-01-08T00:57:16.869Z","update_time":"$D2019-02-03T20:09:01.712Z","view_time":null,"first_public_time":"$D2019-01-27T02:15:42.220Z","fork":false,"stars":27,"starred":false,"owner":{"type":"team","id":"cde07d8c7e702472","login":"renatoppl","name":"Renato Paes Leme","avatar_url":"https://avatars-next.observableusercontent.com/c22df5c297aca2188beaa018c7c11e6cd06d246c5c327df4305d6861533f225f","tier":"starter_2024"},"version":586,"publish_version":586,"role":null,"authored":false,"authors":[{"type":"individual","id":"d34a26730351ade8","login":"renatoppl","name":"Renato Paes Leme","avatar_url":"https://avatars-next.observableusercontent.com/c22df5c297aca2188beaa018c7c11e6cd06d246c5c327df4305d6861533f225f","tier":null}],"members":[{"type":"individual","id":"d34a26730351ade8","login":"renatoppl","name":"Renato Paes Leme","avatar_url":"https://avatars-next.observableusercontent.com/c22df5c297aca2188beaa018c7c11e6cd06d246c5c327df4305d6861533f225f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Geodesics","cells":[{"id":0,"value":"md`# Geodesics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"md`The red vector is the speed ${tex`\\gamma'(t)`} and the blue is the acceleration ${tex`\\gamma''(t)`}. The point of the left is following a geodesic since ${tex`\\gamma''(t)`} is normal to the sphere. The point on the right is following a parallel of the sphere, and the acceleration is not normal to the sphere (since the point moves in a plane not containing the center of the sphere) and hence this is not a geodesic. From this definition it is not hard to see that the geodesics are circles whose center is the center of the sphere.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"md`if you played around enough, you realize that the picture on the right is a good representation of the sphere so you an start asking what the shortest paths between two points are ? Drag the point below around.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`### Auxiliary Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"function DrawSphere(svg, x, y, scale, theta, k) {\n var grid = geom.Grid(k,k);\n\n var segs = geom.ApplyToSegmentSet(p => { \n return geom.SphericalCoordinate(\n geom.Translate([0,- Math.PI / 2],\n geom.ScaleCoordinates(p, [2 * Math.PI, Math.PI])));},\n grid);\n \n var draw = Draw3d(svg, x, y, scale, theta);\n segs.forEach(function(s) { draw.AddSegment(s.p1, s.p2) });\n \n draw.UpdateZRange();\n draw.Update();\n \n function AddSegment(update, color, stroke) {\n var p1, p2;\n [p1, p2] = update();\n draw.AddSegment(p1, p2, color, stroke, update);\n }\n \n function AddFixedSegment(p1, p2, color, stroke) {\n draw.AddSegment(p1, p2, color, stroke);\n }\n \n function AddPoint(update, color) {\n var p1 = update();\n draw.AddPoint(p1, color, update);\n }\n \n return {\n Update: draw.Update,\n AddSegment: AddSegment,\n AddFixedSegment: AddFixedSegment,\n AddPoint: AddPoint,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"function DrawHyperboloid(svg, x, y, scale, theta, k) {\n var grid = geom.Grid(k,k);\n\n var segs = geom.ApplyToSegmentSet(p => { \n return geom.HyperbolicalCoordinate(\n geom.ScaleCoordinates(p, [2 * Math.PI, 1.5]));}, grid);\n \n var draw = Draw3d(svg, x, y, scale, theta);\n segs.forEach(function(s) { draw.AddSegment(s.p1, s.p2) });\n \n draw.UpdateZRange();\n draw.Update();\n \n function AddSegment(update, color, stroke) {\n var p1, p2;\n [p1, p2] = update();\n draw.AddSegment(p1, p2, color, stroke, update);\n }\n \n function AddFixedSegment(p1, p2, color, stroke) {\n draw.AddSegment(p1, p2, color, stroke);\n }\n \n function AddPoint(update, color) {\n var p1 = update();\n draw.AddPoint(p1, color, update);\n }\n \n return {\n Update: draw.Update,\n AddSegment: AddSegment,\n AddFixedSegment: AddFixedSegment,\n AddPoint: AddPoint,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 30:"$2f:body"