2b:null 2c:["$","title",null,{"children":"Hyperbolic plane | Renato Paes Leme | Observable"}] 31:T707,md`A dot product is what allow us to compute lengths and angles. We compute the length of a vector ${tex`u`} (say in ${tex`\mathbb R^3`}) we compute its length as ${tex`\Vert u \Vert = \sqrt{\langle u, u \rangle}`}. Given another vector ${tex`v`}, we compute the angle as: ${tex.block`\begin{aligned} \measuredangle(u,v) = \operatorname{acos} \left( \frac{\langle u, v \rangle}{\Vert u \Vert \cdot \Vert v \Vert} \right) \end{aligned}`} Now that we can compute lengths and angles of vectors, we can compute lengths and angles or curves. Given a curve ${tex`\gamma : [0,1] \rightarrow \mathbb R^3`} we can compute its length as: ${tex.block`\begin{aligned} {\sf length}(\gamma) = \int_0^1 \sqrt{\langle \gamma'(t), \gamma'(t) \rangle} dt \end{aligned}`} And if two curves intersect at a given point, we can compute the angles between curves as the angle between tangent vectors at that point. We usually rely on the usual dot product ${tex`{\langle u, v \rangle}_E = u_x v_x + u_y v_y + u_z v_z `} which gives us the Euclidian geometry. If we change the dot product to something else, we can get other very interesting geometries. The hyperbolic geometry arises when we start measuring lengths and angles using the Minkowski product: ${tex.block`\begin{aligned} {\langle u, v \rangle}_M = u_x v_x + u_y v_y - u_z v_z\end{aligned}`} It is very similar to the standard Euclidian product except that the sign of the last coordinate is reversed. This product is very important in relativity (where the ${tex`z`}-coordinate is usually the time and this product measures what is called [proper time](https://en.wikipedia.org/wiki/Proper_time)). But even if you don't care about physics, there is some very interesting geometry that comes out of it (and produces nice pictures, like the one on the top). `32:T4f8,md`Visualizing things in 3-dimensions is hard so it is useful to map to the plane. We will do that with the [stereographic projection](https://en.wikipedia.org/wiki/Stereographic_projection) (in fact, the same one we used to [study the sphere](https://beta.observablehq.com/@renatoppl/geodesics)). Every point ${tex`p = (x,y,z) \in H`} is mapped to the plane by taking the segment connecting ${tex`p`} and ${tex`(0,0,-1)`} and taking the point that intersects the ${tex`z=0`} plane. Formally the map is given by: ${tex.block`\begin{aligned} (x,y,z) \in H \mapsto \left( \frac{x}{1+z}, \frac{y}{1+z} \right) \in \mathbb R^2 \end{aligned}`} The norm square of the point it maps to is ${tex`\frac{x^2 + y^2}{(1+z)^2} \leq \frac{x^2 + y^2}{z^2 -1} < 1`}. In other words, it maps to the disk ${tex`D = \{u \in \mathbb R^2; \Vert u \Vert_E < 1\} `}. From now on we will mostly look at the disk ${tex`D`} but for every point in the disk, we will be really thinking about the hyperboloid: ${tex.block`\begin{aligned} u \in D \mapsto L_H(u) := \left( \frac{2 u}{1 - \Vert u \Vert^2}, \frac{1 + \Vert u \Vert^2}{1 - \Vert u \Vert^2} \right) \in H \end{aligned}`} In the following picture, you can drag the point on the circle and see which point it corresponds in the hyperboloid: `33:T59a,{ var width = 640; var height = 300; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); // 108 is a good angle for a half sphere var sphere1 = DrawHyperboloid(svg, 180, 200, 300, -65, 20); var input = ProjectionInput(svg, 500, 130, 120, 0.65); 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, projectionPoint]; } function Segment2() { return [projectionPoint, southPole]; } function ProjectionCallback(p) { projectionPoint = [p[0], p[1], 0]; spherePoint = geom.Norm(p) < 0.7 ? geom.StereographicProjectionHyperboloidInverse(p) : projectionPoint; projectionPoint = [p[0], p[1], 0]; sphere1.Update(); } 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(); }34:T685,{ var width = 640; var height = 300; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); var sphere1 = DrawHyperboloid(svg, 180, 250, 300, -65, 20); var input = ProjectionInput(svg, 500, 130, 120, 0.65); var p = [.2, .2]; var q = [.2, -.2]; var pH = geom.StereographicProjectionHyperboloidInverse(p); var qH = geom.StereographicProjectionHyperboloidInverse(q); function Callback1(np) { p = np; pH = geom.StereographicProjectionHyperboloidInverse(p); sphere1.Update(); input.Update(); } function Callback2(nq) { q = nq; qH = geom.StereographicProjectionHyperboloidInverse(q); sphere1.Update(); input.Update(); } function IntermediaryPoint(t) { var iH = geom.Translate( geom.Scale(pH, t), geom.Scale(qH, 1-t) ); var mN = - iH[0]*iH[0] - iH[1]*iH[1] + iH[2]*iH[2]; return geom.Scale(iH, 1/Math.sqrt(mN)); } var k = 30; function HyperboloidSegment(i,j) { return function() { return [ IntermediaryPoint(i), IntermediaryPoint(j) ]; } } function ProjectionSegment(i,j) { return function() { return (HyperboloidSegment(i,j)()).map(geom.StereographicProjection); } } input.AddPoint(p, Callback1); input.AddPoint(q, Callback2); sphere1.AddPoint(function() { return pH;}, [1,1,1]); sphere1.AddPoint(function() { return qH;}, [1,1,1]); var k = 60; for(var i = 0; i < k; ++i) { sphere1.AddSegment(HyperboloidSegment(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(); }35:T401,md`Now things start getting interesting. It is possible to prove that to get the shortest path between ${tex`p`} and ${tex`q`}, we need to take the intersection of the hyperboloid and a plane going through ${tex`p`}, ${tex`q`} and the origin ${tex`(0,0,0)`}. When we project this curve to the circle, we realize that the projection of the geodesics (the blue curves) are arcs of circles that intersect the red circle (which we call circle at the infinity) with right angles. With that rule in mind, we will forget about the 3d picture and focus on the 2d representation - which is often called the [Poincare disk](https://en.wikipedia.org/wiki/Poincar%C3%A9_disk_model). Now we can start doing some geometry. The lines in that model are the geodesics passing through a point. Like in Euclidian geometry, given two points, there is an unique line that passes through it. Below we draw three points and for each pair of points the line tha passes through it. Drag the points around to see how the lines transform. `36:T5c5,md`Euclid's third postulate has to do with measuring distances and finding all the points at a certain distance (forming a circle). Here we can also measure distances. The notion of a distance of two points is to map them to the hyperboloid using ${tex`L_H`}, take the geodesic and measure the length of the geodesic (being careful and using ${tex`\int_0^1\Vert \gamma'(t) \Vert_M dt`} when measuring it. It is a simple calculus exercise, but given two points ${tex`u`} and ${tex`v`} in the disk, i.e, ${tex`u \in \mathbb R^2, \Vert u \Vert_E < 1`} and same for v, the hyperbolic distance is given by: ${tex.block`\begin{aligned} d_H(u,v) = \operatorname{acosh}\left(1+\frac{2 \Vert u - v \Vert^2}{(1 - \Vert u \Vert^2)(1 - \Vert v \Vert^2)}\right) \end{aligned}`} So to get all the points at distance one from a certain point, you can trace geodesics in all directions and find a point in the geodesic such that ${tex`d_H(u,v) = 1`}. You get the picture below. It is rather surprising that the set of points that are of distance one is also a circle in the usual sense (but its center is what you would expect). Drag the center around to see where are all the points of distance one. And note that the red circle is at infinity distance to every point inside the circle, so as you move more and more towards the boundary, the smaller the radius will become (I mean, the smaller the radius of the representation will become, as the hyperbolic radius is always one). `37:T544,md`The fourth of Euclid's postulates says that "all right angles are the same". In modern language, Euclid is trying to say that the space is [isotropic](https://en.wikipedia.org/wiki/Isotropy), i.e., all points and directions are on an equal footing. You can always move any figure to any other point and re-orient in any direction while preserving angles and lengths. This is again still true in the hyperbolic plane, but less obvious. At first glance it would appear that the origin of the disk is somehow special, but this is just an artifact of the representation. Formally, given two points ${tex`p,q`} and two directions ${tex`d_p, d_q`} there is a transformation of the hyperbolic plane that preserves (hyperbolic) lengths and angles (and hence maps geodesics to geodesics) which takes ${tex`p`} to ${tex`q`} and takes the ${tex`d_p`} direction at ${tex`p`} to the ${tex`d_q`} direction at ${tex`q`}. Another counter-intuitive point is that given any line, the two sides of the hyperbolic plane are identical (in the same way that the two sides of the Euclidian plane separated by a line are identical. Given a triangle in the plane and a line, we can always mirrror the triangle to the other side with the same angles and same (hyperbolic) lengths. Drag the point around and see how the triangle in mirrored on the other side. `38:T6f5,{ var width = 640; var height = 300; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); var input = PoincareCircle(svg, 150, 130, 120); input.SetLocked(0.99); function callback(p) { input.Update(); } var p = input.AddPoint([.4,-.1], callback); var q = input.AddPoint([-.1,.4], callback); // var w = input.AddPoint([-.4, -.7], callback); var w = input.AddPoint([-.2, -.2], callback); function MirroredDirection(cp, cq, cw) { var pq = geom.PoincareLine(cp,cq); var dp = geom.TangentVector(pq,0); var pw = geom.PoincareLine(cp,cw); var dw = geom.TangentVector(pw,0); return geom.Translate(dw, geom.Scale(geom.Translate(dw, geom.Scale(dp, -geom.Dot(dp, dw))),-2)); } function ComputeMirrorPoint() { var lp = geom.PoincareLineDir(p.Coordinates(), MirroredDirection(p.Coordinates(), q.Coordinates(), w.Coordinates())); var lq = geom.PoincareLineDir(q.Coordinates(), MirroredDirection(q.Coordinates(), p.Coordinates(), w.Coordinates())); return geom.LineIntersect(lp, lq); } var r = { Coordinates: ComputeMirrorPoint, }; input.AddLine(p,q); input.AddSegment(p,w); input.AddSegment(w,q); //input.AddLineDir(p, MirroredDirection(p.Coordinates(), q.Coordinates(), w.Coordinates())); //input.AddLineDir(q, MirroredDirection(q.Coordinates(), p.Coordinates(), w.Coordinates())); input.AddSegment(p,r); input.AddSegment(q,r); input.Update(); return svg.node(); }39:T550,md`This allows some really cool constructions. But before that, Euclid had a last postulate called the [parallel postulate](https://en.wikipedia.org/wiki/Euclidean_geometry#Parallel_postulate). This is not longer valid in hyperbolic geometry and that is why we can do interesting thing that we weren't able to do in Euclidian geometry. The parallel postulate is what allows us to prove that the sum of internal angles of a triangle sum to ${tex`\pi`}. This is no longer true in hyperbolic geometry, in fact, the sum of internal angles of a triangle always sums strictly less than ${tex`\pi`}. Another curious fact is that we can no longer scale a figure to obtain something with the same angles and lengths scaled by a constant. In other words, the space is no longer scale-invariant. Therefore, elementary theorems that depend on [triangle similarity](https://en.wikipedia.org/wiki/Similarity_(geometry)) no longer hold in hyperbolic geometry, but results that depend only on [triangle congruence](https://en.wikipedia.org/wiki/Congruence_(geometry)) still hold (since they require only the first four postulates). For example, if we have a triangle and take the segments connecting the midpoint of each side to the opposite vertex, they all intersect in the same point - the [centroid](https://en.wikipedia.org/wiki/Centroid#Of_triangle_and_tetrahedron). `3a:T638,md`We are now have the tools to reproduce the basic structure in [Escher's Circle Limits](https://en.wikipedia.org/wiki/Circle_Limit_III) series. The idea is quite simple and based on a construction known as [Wythoff construction](https://en.wikipedia.org/wiki/Uniform_tilings_in_hyperbolic_plane#Wythoff_construction). We start with a ${tex`(a,b,c)`} triangle for integers ${tex`a,b,c`}, which is a triangle with angles ${tex`\pi/a,\pi/b,\pi/c`}. If you recall, in the hyperbolic plane, the sum of internal angles is strictly less than ${tex`\pi`}, so we need: ${tex.block`\begin{aligned} \frac{1}{a} + \frac{1}{b} + \frac{1}{c} < 1 \end{aligned}`} It turns out we can always find such triangle. And finding it will be our first step. If you look at the function called HyperbolicTesselation in the code, you will see we find it by binary search. We start with a (geodesic) segment of length ${tex`\ell`} and draw lines making angles of ${tex`\pi/a`} and ${tex`\pi/b`} with it and check the angle in the intersection. For tiny ${tex`\ell`} the angle you get approaches ${tex`1-\pi/a-\pi/b`} (after all, in a very small neighborhood, every surface looks like the Euclidian plane) and for very large ${tex`\ell`} the angle that you get on the other side approaches zero. So somewhere in between you get ${tex`\pi/c`}. Now you have one triangle. What we can do now is to choose an edge and mirror it across this edge. And then we keep repeating this procedure. Always find an edge and mirror it along that edge. Click the next button to observe the construction in the ${tex`(2,5,5)`} case. `3b:T481,{ var width = 640; var height = 300; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); var input = PoincareCircleOutput(svg, 150, 130, 120, 10); var mixed_input = PoincareCircleOutput(svg, 450, 130, 120, 10); var dual_input = PoincareCircleOutput(svg, 750, 130, 120, 10); var tesselation = HyperbolicTesselation([3,5,5], 5); var vertices = []; var faces = []; tesselation.faces.forEach(function(f) { input.AddSegment(f.v[0].pos, f.v[1].pos); input.AddSegment(f.v[1].pos, f.v[2].pos); input.AddSegment(f.v[2].pos, f.v[0].pos); mixed_input.AddSegment(f.v[0].pos, f.v[1].pos); mixed_input.AddSegment(f.v[1].pos, f.v[2].pos); mixed_input.AddSegment(f.v[2].pos, f.v[0].pos); }); tesselation.vertices.forEach(function(v) { var nfaces = 2 * tesselation.k[v.i]; for (var i = 0; i < nfaces; ++i) { if (v.f[i] != null & v.f[(i+1)%nfaces] != null) { dual_input.AddSegment(v.f[i].center, v.f[(i+1)%nfaces].center); mixed_input.AddSegment(v.f[i].center, v.f[(i+1)%nfaces].center, "red"); } } }); return svg.node(); }3c:T48a,{ var width = 640; var height = 300; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); var input = PoincareCircleOutput(svg, 150, 130, 120, 10); var mixed_input = PoincareCircleOutput(svg, 450, 130, 120, 10); var dual_input = PoincareCircleOutput(svg, 750, 130, 120, 10); var tesselation = HyperbolicTesselation([na,nb,nc], nlevels); var vertices = []; var faces = []; tesselation.faces.forEach(function(f) { input.AddSegment(f.v[0].pos, f.v[1].pos); input.AddSegment(f.v[1].pos, f.v[2].pos); input.AddSegment(f.v[2].pos, f.v[0].pos); mixed_input.AddSegment(f.v[0].pos, f.v[1].pos); mixed_input.AddSegment(f.v[1].pos, f.v[2].pos); mixed_input.AddSegment(f.v[2].pos, f.v[0].pos); }); tesselation.vertices.forEach(function(v) { var nfaces = 2 * tesselation.k[v.i]; for (var i = 0; i < nfaces; ++i) { if (v.f[i] != null & v.f[(i+1)%nfaces] != null) { dual_input.AddSegment(v.f[i].center, v.f[(i+1)%nfaces].center); mixed_input.AddSegment(v.f[i].center, v.f[(i+1)%nfaces].center, "red"); } } }); return svg.node(); }3d:T30be,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; } function Orthonormalize(u,v) { var un = Scale(u, 1 / Norm(u)); var p = Translate(v, Scale(un, -Dot(un,v))); return Scale(p, 1 / Norm(p)); } // Finds a 2x2 determinant function Det2(M) { return M[1][1] * M[0][0] - M[0][1] * M[1][0]; } // Solves a 2x2 linear system. Assumes Det(M) is not too small. function LinearSolve2(M, z) { var x = [ M[1][1] * z[0] - M[0][1] * z[1], z[1] * M[0][0] - z[0] * M[1][0] ]; x = Scale(x, 1 / Det2(M)); return x; } function EuclidianDistance(p,q) { return Norm(Translate(p, Scale(q, -1))); } function PoincareCenter(p,q) { if (Math.abs(Det2([p,q])) < 0.001) { return Infinity; } else { return LinearSolve2([p,q], [(Dot(p,p) + 1 )/2, (Dot(q,q) + 1 )/2]); } } function PoincareCenterDir(p,d) { if (Math.abs(Det2([p,d])) < 0.001) { return Infinity; } else { return LinearSolve2([p,d], [(Dot(p,p) + 1 )/2, Dot(p,d)]); } } function Acos(x) { return Math.acos(Math.max(Math.min(x,1), -1)); } function PoincareLine(p,q) { var c = PoincareCenter(p,q); if (c == Infinity) { return { c:Infinity, cp: Scale(p , 1/Norm(p)), cq: Scale(p , -1/Norm(p)), p: p, q: q }; } else { var r = Norm(Translate(p, Scale(c, -1))); var cp1 = Translate( Scale(c, 1/ ( Norm(c)**2)), Scale([-c[1],c[0]], Math.sqrt(1-1/(Norm(c)**2))/Norm(c)) ); var cp2 = Translate( Scale(c, 1/ ( Norm(c)**2)), Scale([c[1],-c[0]], Math.sqrt(1-1/(Norm(c)**2))/Norm(c)) ); var pn = Translate(cp1, Scale(c, -1)); var qn = Translate(cp2, Scale(c, -1)); pn = Scale(pn, 1 / Norm(pn)); qn = Scale(qn, 1 / Norm(qn)); var theta = Acos(Dot(pn, qn)); qn = Orthonormalize(pn, qn); var vp = Translate(p, Scale(c, -1)); var thetap = Acos(Dot(pn, vp) / Norm(vp)); var vq = Translate(q, Scale(c, -1)); var thetaq = Acos(Dot(pn, vq) / Norm(vq)); return { c: c, pn: pn, qn: qn, r: r, theta: theta, thetap: thetap, thetaq: thetaq, }; } } function PoincareLineDir(p,d) { var c = PoincareCenterDir(p,d); if (c == Infinity) { return { c:Infinity, cq: Scale(Translate(p,Scale(d,+1.5)) , 1/Norm(Translate(p,Scale(d,+1.5)))), cp: Scale(Translate(p,Scale(d,-1.5)) , 1/Norm(Translate(p,Scale(d,-1.5)))), p: p, }; } else { var r = Norm(Translate(p, Scale(c, -1))); var cp1 = Translate( Scale(c, 1/ ( Norm(c)**2)), Scale([-c[1],c[0]], Math.sqrt(1-1/(Norm(c)**2))/Norm(c)) ); var cp2 = Translate( Scale(c, 1/ ( Norm(c)**2)), Scale([c[1],-c[0]], Math.sqrt(1-1/(Norm(c)**2))/Norm(c)) ); var pn = Translate(cp1, Scale(c, -1)); var qn = Translate(cp2, Scale(c, -1)); pn = Scale(pn, 1 / Norm(pn)); qn = Scale(qn, 1 / Norm(qn)); if (Dot(d, qn) < 0) { var temp = pn; pn = qn; qn = temp; } var theta = Acos(Dot(pn, qn)); qn = Orthonormalize(pn, qn); var vp = Translate(p, Scale(c, -1)); var thetap = Acos(Dot(pn, vp) / Norm(vp)); return { c: c, pn: pn, qn: qn, r: r, theta: theta, thetap: thetap, }; } } function PoincareDistance(p,q) { return Math.acosh(1 + (2 * EuclidianDistance(p,q)**2) / ((1-Dot(p,p))*(1-Dot(q,q))) ); } function PoincarePoint(l,t) { if (l.c != Infinity) { var a = l.thetap * (1-t) + l.theta * t; return Translate(l.c, Scale(Translate(Scale(l.pn, Math.cos(a)), Scale(l.qn, Math.sin(a))), l.r)); } else { return Translate(Scale(l.p, 1-t), Scale(l.cq, t)); } } function PoincareSegmentPoint_(l,t) { if (l.c != Infinity) { var a = l.thetap * (1-t) + l.thetaq * t; return Translate(l.c, Scale(Translate(Scale(l.pn, Math.cos(a)), Scale(l.qn, Math.sin(a))), l.r)); } else { return Translate(Scale(l.p, 1-t), Scale(l.q, t)); } } function PoincareLinePoint_(l,t) { if (l.c != Infinity) { var a = l.theta * t; return Translate(l.c, Scale(Translate(Scale(l.pn, Math.cos(a)), Scale(l.qn, Math.sin(a))), l.r)); } else { return Translate(Scale(l.cp, 1-t), Scale(l.cq, t)); } } function PoincareSegmentPoint(p,q,t) { var l = PoincareLine(p,q); var d = PoincareDistance(p, q); var ts = BinarySearch(function(s) { return PoincareDistance(p, PoincareSegmentPoint_(l,s)) - d*t; }, 0.001, 0,1); return PoincareSegmentPoint_(l,ts); } function TangentVector(l,t) { if (l.c != Infinity) { var a = Math.PI/2 + (l.thetap * (1-t) + l.theta * t); return Translate(Scale(l.pn, Math.cos(a)), Scale(l.qn, Math.sin(a))); } else { var v = Translate(Scale(l.p, -1), Scale(l.cq, 1)); return Scale(v, 1 / Norm(v)); } } function BinarySearch(f, epsilon, a0, b0) { var a = a0, b = b0; while (b - a > epsilon) { var x = (b+a)/2; if (f(x) < 0) { a = x; } else { b = x; } } return (a+b)/2; } function PoincareSegmentDir(p, d, dist, eps = 0.001) { var l = PoincareLineDir(p,d); var t = BinarySearch(s => {return PoincareDistance(p, PoincarePoint(l,s)) - dist; }, eps, 0, 1); if (l.c == Infinity) { l.q = PoincarePoint(l,t); l.tq = TangentVector(l,t); } else { l.thetaq = l.thetap * (1-t) + l.theta * t; l.q = PoincarePoint(l,t); l.tq = TangentVector(l,t); } return l; } function Rotate(v, theta) { return [ Math.cos(theta) * v[0] - Math.sin(theta) * v[1], Math.sin(theta) * v[0] + Math.cos(theta) * v[1] ]; } function CrossProd(p,q) { return p[0] * q[1] - p[1] * q[0]; } function SegmentIntersect(a,b,c,d) { var ab = PoincareLine(a,b); var cd = PoincareLine(c,d); if (ab.c != Infinity) { var sign = (Norm(Translate(c, Scale(ab.c, -1))) < ab.r) ? +1 : -1; function pred(t) { var p = PoincareSegmentPoint_(cd,t); return sign * (Norm(Translate(p, Scale(ab.c, -1))) - ab.r); } var t = BinarySearch(pred, 0.0001, 0, 1); return PoincareSegmentPoint_(cd,t); } else { var sign = CrossProd(Translate(a, Scale(b,-1)), Translate(c, Scale(b, -1))) < 0 ? +1 : -1; function pred(t) { var p = PoincareSegmentPoint_(cd,t); return sign * CrossProd(Translate(a, Scale(b,-1)), Translate(p, Scale(b, -1))); } var t = BinarySearch(pred, 0.0001, 0, 1); return PoincareSegmentPoint_(cd,t); } } function LineIntersect(ab, cd) { if ((ab.c == Infinity) && (cd.c == Infinity)) { return [0,0]; } if (ab.c != Infinity) { var sign = (Norm(Translate(PoincareLinePoint_(cd,0), Scale(ab.c, -1))) < ab.r) ? +1 : -1; function pred(t) { var p = PoincareLinePoint_(cd,t); return sign * (Norm(Translate(p, Scale(ab.c, -1))) - ab.r); } var t = BinarySearch(pred, 0.0001, 0, 1); return PoincareLinePoint_(cd,t); } else { var sign = (Norm(Translate(PoincareLinePoint_(ab,0), Scale(cd.c, -1))) < cd.r) ? +1 : -1; function pred(t) { var p = PoincareLinePoint_(ab,t); return sign * (Norm(Translate(p, Scale(cd.c, -1))) - cd.r); } var t = BinarySearch(pred, 0.0001, 0, 1); return PoincareLinePoint_(ab,t); } } function HyperbolicCenter(p,q,r) { var pq = PoincareSegmentPoint(p,q,0.5); var qr = PoincareSegmentPoint(q,r,0.5); return SegmentIntersect(pq,r,p,qr); } 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: Orthonormalize, // 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]); } }, PoincareLine: PoincareLine, PoincareLineDir: PoincareLineDir, PoincareSegmentDir: PoincareSegmentDir, PoincareDistance: PoincareDistance, PoincareSegmentPoint: PoincareSegmentPoint, BinarySearch: BinarySearch, LinearSolve2: LinearSolve2, Rotate: Rotate, SegmentIntersect: SegmentIntersect, HyperbolicCenter: HyperbolicCenter, TangentVector: TangentVector, LineIntersect: LineIntersect, }; })();3e: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, } }3f:Tb5d,function ProjectionInput(svg, x, y, scale, locked = 200) { var locked = locked; 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 p = p; var dragging = false; 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) .on("start", dragstart) .on("end", dragend)) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut); points.push(point); function ProjectToBox(a, [min,max]) { return Math.max(Math.min(a, max), min); } function dragged() { var pos = [ProjectToBox(d3.event.x, [x - 2 * scale, x + 2 * scale]), ProjectToBox(d3.event.y, [y - 1.5 * scale, y + 1.5 * scale])]; var dp = [pos[0] - x, pos[1] - y]; pos = geom.Translate([x,y], geom.Scale(dp, Math.min(1, locked * 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; p = [px, py]; callback([px,py]); } function dragstart() { dragging = true; point.attr("r", 5); } function dragend() { dragging = false; point.attr("r", 3.5); } function handleMouseOver() { if (!dragging) { point.attr("r", 5); } } function handleMouseOut() { if (!dragging) { point.attr("r", 3.5); } } function Coordinates() { return p; } function SetPosition(z) { p = z; point.attr("cx", x + scale * z[0]) .attr("cy", y + scale * z[1]); } return { Coordinates: Coordinates, SetPosition: SetPosition, }; } 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, SetLocked : function(locked_) { locked = locked_; }, } }40:Te87,function PoincareCircle(svg, x, y, scale, k=20) { var circle = ProjectionInput(svg, x, y, scale, 1.0); var lines = []; var segments = []; // var centers = []; function CirclePoint(c,u,v,theta) { return geom.Translate(c, geom.Translate( geom.Scale(u, Math.cos(theta)), geom.Scale(v, Math.sin(theta)) )); } function LinePoint(u,v,t) { return geom.Translate( geom.Scale(u, t), geom.Scale(v, 1-t) ); } function PoincareLine(l,i,j) { return function() { var c = l.data.c; if (c != Infinity) { var u = geom.Scale(l.data.pn, l.data.r); var v = geom.Scale(l.data.qn, l.data.r); return [ CirclePoint(c,u,v,l.data.theta * i), CirclePoint(c,u,v,l.data.theta * j) ]; } else { var p = l.data.cp; var q = l.data.cq; return [ LinePoint(p,q,i), LinePoint(p,q,j) ]; } } } function PoincareSegment(l,i,j) { return function() { var c = l.data.c; if (c != Infinity) { var u = geom.Scale(l.data.pn, l.data.r); var v = geom.Scale(l.data.qn, l.data.r); return [ CirclePoint(c,u,v, l.data.thetap * i + l.data.thetaq * (1-i)), CirclePoint(c,u,v, l.data.thetap * j + l.data.thetaq * (1-j)) ]; } else { var p = l.data.p; var q = l.data.q; return [ LinePoint(p,q,i), LinePoint(p,q,j) ]; } } } function AddLine(p, q) { var l = {p:p, q:q, data:geom.PoincareLine(p.Coordinates(), q.Coordinates())}; lines.push(l); for (var i = 0; i < k; ++i) { circle.AddSegment(PoincareLine(l, i/k, (i+1)/k), "blue", 2); } } function AddLineDir(p, d) { var l = {p:p, d:d, data:geom.PoincareLineDir(p.Coordinates(), d)}; lines.push(l); for (var i = 0; i < k; ++i) { circle.AddSegment(PoincareLine(l, i/k, (i+1)/k), "blue", 2); } } function AddSegment(p, q, color = "blue") { var l = {p:p, q:q, data:geom.PoincareLine(p.Coordinates(), q.Coordinates())}; segments.push(l); for (var i = 0; i < k; ++i) { circle.AddSegment(PoincareSegment(l, i/k, (i+1)/k), color, 2); } } function AddSegmentDir(p, d, dist, color="blue") { var l = {p:p, d:d, dist:dist, data:geom.PoincareSegmentDir(p.Coordinates(), d, dist)}; segments.push(l); for (var i = 0; i < k; ++i) { circle.AddSegment(PoincareSegment(l, i/k, (i+1)/k), color, 2); } } function WrapVector(v) { return { Coordinates: function() { return v; }, }; } function AddFixedSegment(p,q, color="blue") { AddSegment(WrapVector(p), WrapVector(q), color); } function AddEuclidianSegment(p,q) { circle.AddSegment(function() { return [p,q]; }, "red", 1); } function Update() { lines.forEach(function(l) { if (l.d != undefined) { l.data = geom.PoincareLineDir(l.p.Coordinates(), l.d); } else { l.data = geom.PoincareLine(l.p.Coordinates(), l.q.Coordinates()); } }); segments.forEach(function(l) { if (l.d != undefined) { l.data = geom.PoincareSegmentDir(l.p.Coordinates(), l.d, l.dist) } else { l.data = geom.PoincareLine(l.p.Coordinates(), l.q.Coordinates()); } }); circle.Update(); } return { AddPoint: circle.AddPoint, AddLine: AddLine, AddLineDir: AddLineDir, AddSegment: AddSegment, AddFixedSegment: AddFixedSegment, AddSegmentDir: AddSegmentDir, AddEuclidianSegment: AddEuclidianSegment, Update: Update, SetLocked : function(locked_) { circle.SetLocked(locked_); }, }; } 41:Tb86,function PoincareCircleOutput(svg, x, y, scale, k=20) { var circle = ProjectionInput(svg, x, y, scale, 1.0); var lines = []; var segments = []; 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"); function NewSegment(p1, p2, color, stroke) { shape.append("line") .attr("stroke", color) .attr("stroke-width", stroke) .attr("x1", x + scale * p1[0]) .attr("y1", y + scale * p1[1]) .attr("x2", x + scale * p2[0]) .attr("y2", y + scale * p2[1]); } function PoincareSegmentPoint(l,t) { if (l.c != Infinity) { var a = l.thetap * (1-t) + l.thetaq * t; return geom.Translate(l.c, geom.Scale(geom.Translate(geom.Scale(l.pn, Math.cos(a)), geom.Scale(l.qn, Math.sin(a))), l.r)); } else { return geom.Translate(geom.Scale(l.p, 1-t), geom.Scale(l.q, t)); } } function PoincareLinePoint(l,t) { if (l.c != Infinity) { var a = -l.theta * (1-t) + l.theta * t; return geom.Translate(l.c, geom.Scale(geom.Translate(geom.Scale(l.pn, Math.cos(a)), geom.Scale(l.qn, Math.sin(a))), l.r)); } else { return geom.Translate(geom.Scale(l.pn, 1-t), geom.Scale(l.qn, t)); } } function AddLine(l, color="blue", stroke = 2) { if (l.c != Infinity) { var k = Math.ceil((2 * l.theta * l.r) / 0.1); if (k == 0) console.log("k=0"); for (var i = 0; i < k; ++i) { NewSegment(PoincareLinePoint(l, i/k), PoincareLinePoint(l, (i+1)/k), color, stroke); } } else { NewSegment(PoincareLinePoint(l, 0), PoincareLinePoint(l, 1), color, stroke); } } function AddSegmentLine(l, color="blue", stroke = 2 ) { if (l.c != Infinity) { var k = Math.ceil((Math.abs(l.thetaq - l.thetap) * l.r) / 0.1); for (var i = 0; i < k; ++i) { NewSegment(PoincareSegmentPoint(l, i/k), PoincareSegmentPoint(l, (i+1)/k), color, stroke); } } else { NewSegment(PoincareSegmentPoint(l, 0), PoincareSegmentPoint(l, 1), color, stroke); } } function AddSegment(p,q, color="blue", stroke = 2) { var l = geom.PoincareLine(p, q); AddSegmentLine(l, color, stroke); } function AddPoint(p) { var point = shape.append("circle") .attr("r", 3.5) .attr("cx", x + scale * p[0]) .attr("cy", y + scale * p[1]); } return { AddPoint: AddPoint, AddLine: AddLine, AddSegment: AddSegment, AddSegmentLine: AddSegmentLine, }; }42:T10a6,function HyperbolicTesselation(k, n_levels) { // We are expecting parameters such that 1/a + 1/b + 1/c = 1; var a = k[0], b = k[1], c = k[2]; var k = k; var vertices = []; var faces = []; function GetTriangleLengths() { var gamma = Math.PI / c; var v = [Math.cos(gamma), Math.sin(gamma)]; var angle = -Math.PI * (1- (1/b) - (1/c)); var d = [Math.cos(angle), Math.sin(angle)]; function pred(t) { var line = geom.PoincareLineDir(geom.Scale(v,t), d); if (line.c[1] - line.r > 0) return 1; return - Math.cos(Math.PI / a) + line.c[1] / line.r; } var t = geom.BinarySearch(pred, 0.000001, 0, 1); var p = geom.Scale(v,t); var l = geom.PoincareLineDir(p, d); var q = [l.c[0] - Math.sqrt((l.r**2) - (l.c[1]**2)),0]; var z = [0,0]; return [geom.PoincareDistance(z,p), geom.PoincareDistance(q,z), geom.PoincareDistance(p,q)]; } var lenghts = GetTriangleLengths(); function NewVertex(index, i, pos, base_dir) { return { index: index, base_dir: base_dir, i : i, pos: pos, f: new Array(2 * k[i]).fill(null), v: new Array(2 * k[i]).fill(null), level: 0, }; } function NewFace(a,b,c) { return { v: [a,b,c], prev: null, }; } // We add the first face with its vertices to the // tesselation and start expanding from there. function InitializeTesselation() { var base_dir = [1,0]; var pos = [0,0]; for (var i = 0; i < 3; ++i) { var p = NewVertex(vertices.length, i, pos, base_dir); var lp = geom.PoincareSegmentDir(pos, base_dir, lenghts[(6-(2*i+1))%3]); pos = [lp.q[0], lp.q[1]]; base_dir = geom.Rotate(lp.tq, Math.PI * (1- (1/k[(i+1)%3]))); vertices.push(p); } var f = NewFace(vertices[0], vertices[1], vertices[2]); for (var i = 0; i < 3; ++i) { vertices[i].f[0] = f; vertices[i].v[0] = vertices[(i+1)%3]; vertices[i].v[1] = vertices[(i+2)%3]; } vertices[1].level = 1; vertices[2].level = 1; faces.push(f); } InitializeTesselation(); function FindIndex(w,v) { var wj = 0; for (wj = 0; wj < 2*k[w.i]; ++wj) { if (w.v[wj] == v) break; } return wj; } function ProcessVertex(v, max_faces = Infinity ) { var nfaces = 2 * k[v.i]; for (var j = 0; j < Math.min(nfaces, max_faces); ++j) { if (v.f[j] == null && v.f[(j+1)%nfaces] == null) { var w = v.v[j]; var wj = FindIndex(w,v); wj = (2*k[w.i] + wj - 1) % (2*k[w.i]); var u_i = 3 - v.i - w.i; var l = geom.PoincareSegmentDir(v.pos, geom.Rotate(v.base_dir, Math.PI * (j+1) / k[v.i] ), lenghts[w.i]); var u_base_dir = geom.Scale(l.tq, -1); var u_pos = [l.q[0], l.q[1]]; var u = NewVertex(vertices.length, u_i, u_pos, u_base_dir); u.level = v.level + 1; u.v[0] = v; u.v[1] = w; v.v[(j+1)%nfaces] = u; w.v[wj] = u; var f = NewFace(v, w, u); f.prev = v.f[j-1]; u.f[0] = f; v.f[j] = f; w.f[wj] = f; faces.push(f); vertices.push(u); } else if (v.f[j] == null && v.f[(j+1)%nfaces] != null) { var w = v.v[j]; var u = v.v[(j+1)% nfaces ]; var wv_j = FindIndex(w,v); var f = NewFace(v, w, u); f.prev = v.f[j-1]; v.f[j] = f; w.v[(2*k[w.i] + wv_j-1 ) % (2*k[w.i])] = u; w.f[(2*k[w.i] + wv_j-1 ) % (2*k[w.i])] = f; var uv_j = FindIndex(u,v); u.v[(uv_j+1) % (2*k[u.i])] = w; u.f[uv_j] = f; faces.push(f); } } } var j = 0; for (var l = 0; l < n_levels; ++l) { var lvertices = []; for (; j < vertices.length && vertices[j].level == l; ++j) { lvertices.push(vertices[j]); } lvertices.sort(function(u,w) { return geom.Norm(u.pos) - geom.Norm(w.pos); }); lvertices.forEach(function(v) { ProcessVertex(v); }); } faces.forEach(function(f) { f.center = geom.HyperbolicCenter(f.v[0].pos, f.v[1].pos, f.v[2].pos); }); return { vertices: vertices, faces: faces, k: k, }; }43:[] 2f:{"id":"93ecd86bb9abbf36","slug":"hyperbolic-plane","title":"Hyperbolic plane","thumbnail":"d057f47700177faee9bb8e388dd57f74da2344897e5a351ddfdcfc32ad68866f","access_level":"public","create_time":"$D2019-01-20T00:42:12.661Z","update_time":"$D2019-02-22T22:52:42.895Z","view_time":null,"first_public_time":"$D2019-02-10T21:52:10.013Z","fork":false,"stars":43,"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":842,"publish_version":842,"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":[{"id":"2439af982616b0d9","reply_to_id":null,"content":"I wish we could show that, moving everything together while keeping their relative distances. The whole tesselation might be too computation-costly to move; maybe there are tricks to re-use the computation.\n\nI was actually looking for a \"playground\" for hyperbolic tesselations, like Mathigon for the Euclidean plane. Would that be something you'd like to try? Can JavaScript accept two-finger input from touch-screen, if we want to rotate a figure?","create_time":"$D2022-10-13T06:47:30.132Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"ae908de8dd38723a","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":15,"collection":{"id":"936bb5e9815c44d2","slug":"explorables","title":"Explorables","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Hyperbolic plane","cells":[{"id":0,"value":"md`# Hyperbolic plane`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":671,"value":"{\n var width = 640;\n var height = 260; \n var svg = d3.select(DOM.svg(width, height)) \n .style(\"overflow\", \"visible\"); \n \n var mixed_input = PoincareCircleOutput(svg, 300, 130, 120, 10);\n\n var tesselation = HyperbolicTesselation([3,5,5], 5);\n var vertices = [];\n var faces = [];\n\n tesselation.faces.forEach(function(f) { \n mixed_input.AddSegment(f.v[0].pos, f.v[1].pos);\n mixed_input.AddSegment(f.v[1].pos, f.v[2].pos);\n mixed_input.AddSegment(f.v[2].pos, f.v[0].pos);\n \n });\n \n \n tesselation.vertices.forEach(function(v) {\n var nfaces = 2 * tesselation.k[v.i];\n for (var i = 0; i < nfaces; ++i) {\n if (v.f[i] != null & v.f[(i+1)%nfaces] != null) {\n mixed_input.AddSegment(v.f[i].center, v.f[(i+1)%nfaces].center, \"red\");\n }\n }\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"md` One difficulty is defining a norm as ${tex`\\Vert u \\Vert_M = \\sqrt{\\langle u, u \\rangle}_M`} is that ${tex`\\langle u, u \\rangle_M`} is not always positive. To get around it, we will only look at curves in the hyperboloid defined by:\n${tex.block`\\begin{aligned}\nH = \\{ (x,y,z); z = \\sqrt{1 + x^2 + y^2}\\}\n\\end{aligned}`}\nIn fact, it is not hard to prove (see [here](https://www2.southeastern.edu/Academics/Faculty/ereyes/nhyper.pdf) for example) that if ${tex`\\gamma:[0,1] \\rightarrow H`} is a curve in the hyperboloid, then ${tex`\\langle \\gamma'(t), \\gamma'(t) \\rangle_M \\geq 0`}. So as long as we live the hyperboloid, using the ${tex`\\langle u, v \\rangle_M`} works fine and we can measure lengths of curves and measure angles.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"md`In the same way, when we draw curves on the circle, we will be representing the corresponding curves on the hyperboloid. Drag the points on the right and see how the curve changes. The curve between the two points (of ${tex`H`} in the diagram below is the shortest path between the two points. To be very precise, given two points ${tex`p,q \\in H`} we are looking for the curve ${tex`\\gamma:[0,1] \\rightarrow H`} with ${tex`\\gamma(0) = p, \\gamma(1) = q`} that minimizes ${tex`\\int_0^1 \\sqrt{ \\langle \\gamma'(t), \\gamma'(t) \\rangle_M} dt`}. Note that the distance is measured using the Minkowski dot product. Those curves of minimal length are called geodesics.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":616,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"{\n var width = 640;\n var height = 300; \n var svg = d3.select(DOM.svg(width, height)) \n .style(\"overflow\", \"visible\"); \n \n var input = PoincareCircle(svg, 150, 130, 120);\n \n function callback(p) {\n input.Update();\n }\n \n var p = input.AddPoint([1,0], callback);\n var q = input.AddPoint([0,1], callback);\n var w = input.AddPoint([-.5, -.5], callback);\n input.AddLine(p,q);\n input.AddLine(p,w);\n input.AddLine(w,q);\n input.Update();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"md`The picture above illustrates the first of Euclid's postulates, that between two points you can draw an unique line that extends indefinitely (don't forget that we are looking at a circle, but we are imagining the projection in the hyperboloid and the red circle represents corresponds to the inifinity limit of the hyperboloid).\n\nThe simarities to Euclidian geometry are striking. Given a point and a direction, there is always a line from that point in that direction. You can drag the point below and see how the lines transform.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"{\n var width = 640;\n var height = 300; \n var svg = d3.select(DOM.svg(width, height)) \n .style(\"overflow\", \"visible\"); \n \n var input = PoincareCircle(svg, 150, 130, 120);\n \n function callback(p) {\n input.Update();\n }\n \n var p = input.AddPoint([0.1,0], callback);\n var k = 6;\n for (var i = 0; i < k; ++i) {\n input.AddLineDir(p,[Math.cos(Math.PI * i/k), \n Math.sin(Math.PI * i/k)]);\n }\n input.Update();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"{\n var width = 640;\n var height = 300; \n var svg = d3.select(DOM.svg(width, height)) \n .style(\"overflow\", \"visible\"); \n \n var input = PoincareCircle(svg, 150, 130, 120);\n \n function callback(p) {\n input.Update();\n }\n \n var p = input.AddPoint([.2,.2], callback);\n var k = 20;\n for (var i = 0; i < k; ++i) {\n input.AddSegmentDir(p,[Math.cos(2 * Math.PI * i/k), Math.sin(2 * Math.PI * i/k)], 1);\n }\n input.Update();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":681,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":732,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":806,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":811,"value":"{\n var width = 640;\n var height = 300; \n var svg = d3.select(DOM.svg(width, height)) \n .style(\"overflow\", \"visible\"); \n \n var input = PoincareCircle(svg, 150, 130, 120);\n input.SetLocked(0.95);\n \n function callback(p) {\n input.Update();\n }\n \n var p = input.AddPoint([.8,0], callback);\n var q = input.AddPoint([0,.8], callback);\n var w = input.AddPoint([-.5, -.5], callback);\n \n function MidPoint(a,b,t=0.5) {\n function Coordinates() {\n return geom.PoincareSegmentPoint(a.Coordinates(), b.Coordinates(), t);\n }\n return {Coordinates: Coordinates,};\n }\n \n input.AddSegment(p,q);\n input.AddSegment(p,w);\n input.AddSegment(w,q);\n input.AddSegment(MidPoint(p,q),w);\n input.AddSegment(MidPoint(p,w),q);\n input.AddSegment(MidPoint(w,q),p);\n \n /*\n input.AddPoint(geom.HyperbolicCenter(p.Coordinates(),\n q.Coordinates(),\n w.Coordinates()), callback);\n */\n\n input.Update();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":814,"value":"md`## Hyperbolic Tesselations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"viewof tesselation_button = {\n const button = html`