2c:null 2d:["$","title",null,{"children":"Hyperbolic LOGO | Renato Paes Leme | Observable"}] 32:T491,md`[LOGO](https://el.media.mit.edu/logo-foundation/what_is_logo/logo_primer.html) was my first programming language and still one more my favorites. The premise is really simple: there is a little turtle in the screen and you can move the turtle around using commands like \`\`Forward(1)\`\` which makes the turtle walk one unit forward or \`\`Right(90)\`\` which makes the turtle turn 90 degrees clockwise (i.e. to the right). I still really love the visual output. Recently I was thinking of having a LOGO environment in non-Euclidian spaces, where you would use equally simple commands and but get your turle to move in a different space. This led to Hyperbolic LOGO. Instead of a turtle we have a ladybug. We have the following commands (just as in traditional LOGO): * \`\`Forward(x)\`\`: to move x units forward * \`\`Right(x)\`\`: to move x degrees to the right * \`\`Left(x)\`\`: to move x degrees to the left * \`\`Home(x)\`\`: bring the ladybug back to the origin * \`\`Clear(x)\`\`: clear everything drawn and come back to the origin * \`\`PenDown(x)\`\`: leave a track when moving * \`\`PenUp(x)\`\`: don't leave a track when moving Let's try it below: `33:Tcaa,{ var width = 600; var height = 600; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); // Let's define a grid and have the ladybug start in the center // Reference: https://observablehq.com/@d3/margin-convention // and this one https://observablehq.com/@d3/scatterplot-with-shapes var margin = ({top: 10, right: 10, bottom: 10, left: 10}) var x = d3.scaleLinear() .domain([-1, 1]) .range([margin.left, width - margin.right]) var y = d3.scaleLinear() .domain([-1, 1]) .range([height - margin.bottom, margin.top]) var xAxis = g => g .attr("transform", `translate(0,${(height + margin.top - margin.bottom)/2})`) .call(d3.axisBottom(x)) var yAxis = g => g .attr("transform", `translate(${(width + margin.left - margin.right)/2},0)`) .call(d3.axisLeft(y)) var grid = g => g .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom)) .call(g => g.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", margin.left) .attr("x2", width - margin.right)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); var drawer = arc_drawer(svg, x, y); drawer.AddArc([1,0], [-1,0], y(1)-y(0), "red"); drawer.AddArc([-1,0], [1,0], y(1)-y(0), "red"); var angle = 90; var ladybug = [await ladybug1.url(), await ladybug2.url()]; function Bug(svg) { var arcs = []; var bug = svg.append("image").attr("xlink:href", ladybug[0]) .attr("height", "80"); var pendown = true; var bug_state = 0; var d = [0,1]; var p = [0,0]; function Move() { var theta = Math.atan2(d[0], d[1]) * 180 / Math.PI; bug.attr("transform", `translate(${x(p[0])},${y(p[1])}) rotate(${theta}) translate(-25,-42)`); } Move(); function Forward(x) { var seg = hyperbolic.SegmentDir(p, d, x); if (pendown) { arcs.push(drawer.AddHArc(p, seg.q)); } p = seg.q; d = seg.tq; Move(); } function Rotate(angle) { var theta = -angle * Math.PI / 180; d = euclid.Rotate(d, theta); Move(); } function Home() { p = [0,0]; d = [0,1]; Move(); } function PenUp() { pendown = false; } function PenDown() { pendown = true; } function Clear() { Home(); drawer.ClearHArcs(); } events.Register("Forward", Forward); events.Register("Right", x => Rotate(x)); events.Register("Left", x => Rotate(-x)); events.Register("PenUp", PenUp); events.Register("PenDown", PenDown); events.Register("Clear", Clear); events.Register("Home", Home); return { Move: Move, Forward: Forward, Rotate: Rotate, }; } var bug = Bug(svg); return svg.node(); }34:T41e,md`Now that we can draw [apeirogons](https://en.wikipedia.org/wiki/Apeirogon#Apeirogons_in_hyperbolic_plane) it is tempting to cover the entire space with them. After all they look really symmetric. It is called an [apeirogon tiling](https://en.wikipedia.org/wiki/Order-3_apeirogonal_tiling) and it is simple to do it. Say you have an angle of the type ${tex`360/k`} for some integer ${tex`k`}. First we draw an apeirogon with internal angle ${tex`360/k`}, which means we use ${tex`180-360/k`} as the external angle in the program above. We need also to use the right side length. This is a bit more tricky, but I'll give you the formula: ${tex.block`\begin{aligned} \text{side} = \log \left( \frac{1+x}{1-x} \right) \text{ for } x = \cos\left( \frac{180}{k} \right) \end{aligned}`} Now just draw one apeirogon like you did before. Then for each of its sides, we can draw another one and continue. We can even write a program in LOGO that does it. Below you can select ${tex`k`} and the depth (how many we draw from the origin) and see how they look. `35:Te3a,{ var width = 600; var height = 600; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); // Let's define a grid and have the ladybug start in the center // Reference: https://observablehq.com/@d3/margin-convention // and this one https://observablehq.com/@d3/scatterplot-with-shapes var margin = ({top: 10, right: 10, bottom: 10, left: 10}) var x = d3.scaleLinear() .domain([-1, 1]) .range([margin.left, width - margin.right]) var y = d3.scaleLinear() .domain([-1, 1]) .range([height - margin.bottom, margin.top]) if (apeirogon_grid == "draw") { var xAxis = g => g .attr("transform", `translate(0,${(height + margin.top - margin.bottom)/2})`) .call(d3.axisBottom(x)) var yAxis = g => g .attr("transform", `translate(${(width + margin.left - margin.right)/2},0)`) .call(d3.axisLeft(y)) var grid = g => g .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom)) .call(g => g.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", margin.left) .attr("x2", width - margin.right)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); } var drawer = arc_drawer(svg, x, y); drawer.AddArc([1,0], [-1,0], y(1)-y(0), "red"); drawer.AddArc([-1,0], [1,0], y(1)-y(0), "red"); var Queue = []; var p0 = [-.3,.3]; //var p0 = [0,0]; var d0 = [1,0]; var step = hyperbolic.Distance([0,0], [Math.cos(Math.PI / apeirogon_degree) ,0]); // Add a threshold to stop drawing when segments become too small to be visible var drawing_threshold = 0.001; for (var i = 0; i < apeirogon_degree; ++i) { var d = euclid.Rotate(d0, 2 * Math.PI * i/apeirogon_degree); var seg = hyperbolic.SegmentDir(p0, d, step); drawer.AddHArc(p0, seg.q); Queue.push({p:seg.q, d:euclid.Scale(seg.tq, -1), l:1}); } while (Queue.length > 0) { var e = Queue.pop(); for (var i = 1; i < apeirogon_degree; ++i) { var d1 = euclid.Rotate(e.d, 2 * Math.PI * i/apeirogon_degree); var seg = hyperbolic.SegmentDir(e.p, d1, step); drawer.AddHArc(e.p, seg.q); var dist = euclid.Distance(e.p, seg.q); if (e.l <= apeirogon_depth && dist > drawing_threshold) { Queue.push({p:seg.q, d:euclid.Scale(seg.tq, -1), l:e.l+1}); } } } // var I = [0]; // var p0 = [0,0]; // var pI = [p0]; // var dI = [[1,0]]; // while (I != []) { // if (I[-1] == deg-1) { // I.splice(-1,1); // } else { // } // var i = I.length() - 1; // if (i < k) { // I.push(0); // var seg = hyperbolic.SegmentDir(pI[i], dI[i], 1); // pI.push(seg.q); // dI.push(seg.tq); // drawer.AddHArc(pI[i], pI[i+1]); // } else { // } // } // for (var i=0; i < k; ++i) { // I.push(0); // var seg = hyperbolic.SegmentDir(pI[i], dI[i], 1); // console.log(seg); // pI.push(seg.q); // dI.push(seg.tq); // drawer.AddHArc(pI[i], pI[i+1]); // } // for (var i=0; i< n; ++i) { // for (var j = i+1; j < n; ++j) { // drawer.AddHArc(Dir(i/n), Dir(j/n)); // } // } return svg.node(); }36:T9cb,euclid = (function() { 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 Distance(p,q) { return Norm(Translate(p, Scale(q, -1))); } 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 ApplyToSegment(f,s) { return {p1: f(s.p1), p2: f(s.p2)}; } function CrossProd(p,q) { return p[0] * q[1] - p[1] * q[0]; } return { // 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, // Euclidian Distance between 2 vectors Distance: Distance, // 2-by-2 determinant Det2: Det2, // Rotate a vector by an angle of theta Rotate: Rotate, // Return a vector v' that is orthogonal to v such that u and v' span the same space as u and v Orthonormalize: Orthonormalize, // 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); }) }, // Solves a 2x2 linear system Mx = z LinearSolve2: LinearSolve2, // Rotate a point Rotate: Rotate, }; })();37:T2a85,// This class deals with the Poincare disk model (http://en.wikipedia.org/wiki/Poincar%C3%A9_disk_model) // of the hyperbolic plane. hyperbolic = (function() { // Utility functions. // Given two points p and q in the disk, returns the center of the circle representing the // hyperbolic line between p and q. It returns Infinity if it is a straight line (i.e. a circle // of infinite radius). function Center(p,q) { if (Math.abs(euclid.Det2([p,q])) < 0.001) { return Infinity; } else { return euclid.LinearSolve2([p,q], [(euclid.Dot(p,p) + 1 )/2, (euclid.Dot(q,q) + 1 )/2]); } } // Given a point p and a vector d in p, returns the center of the circle representing the // hyperbolic line passing through p tangent to d. It returns Infinity if it is a straight // line (i.e. a circle of infinite radius). function CenterDir(p,d) { if (Math.abs(euclid.Det2([p,d])) < 0.001) { return Infinity; } else { return euclid.LinearSolve2([p,d], [(euclid.Dot(p,p) + 1 )/2, euclid.Dot(p,d)]); } } function Acos(x) { return Math.acos(Math.max(Math.min(x,1), -1)); } function Line(p,q) { var c = Center(p,q); if (c == Infinity) { return { c:Infinity, radius: Infinity, cp: euclid.Scale(p , 1 / euclid.Norm(p)), cq: euclid.Scale(p , -1 / euclid.Norm(p)), p: p, q: q }; } else { var r = euclid.Norm(euclid.Translate(p, euclid.Scale(c, -1))); var sign = euclid.Det2([euclid.Translate(p, euclid.Scale(c, -1)), euclid.Translate(q, euclid.Scale(c, -1))]) >= 0 ? 1 : -1; var cp1 = euclid.Translate( euclid.Scale(c, 1/ ( euclid.Norm(c)**2)), euclid.Scale([-c[1],c[0]], Math.sqrt(1-1/(euclid.Norm(c)**2))/euclid.Norm(c)) ); var cp2 = euclid.Translate( euclid.Scale(c, 1/ ( euclid.Norm(c)**2)), euclid.Scale([c[1],-c[0]], Math.sqrt(1-1/(euclid.Norm(c)**2))/euclid.Norm(c)) ); var pn = euclid.Translate(cp1, euclid.Scale(c, -1)); var qn = euclid.Translate(cp2, euclid.Scale(c, -1)); pn = euclid.Scale(pn, 1 / euclid.Norm(pn)); qn = euclid.Scale(qn, 1 / euclid.Norm(qn)); var theta = Acos(euclid.Dot(pn, qn)); qn = euclid.Orthonormalize(pn, qn); var vp = euclid.Translate(p, euclid.Scale(c, -1)); var thetap = Acos(euclid.Dot(pn, vp) / euclid.Norm(vp)); var vq = euclid.Translate(q, euclid.Scale(c, -1)); var thetaq = Acos(euclid.Dot(pn, vq) / euclid.Norm(vq)); return { c: c, p: p, q: q, pn: pn, qn: qn, sign: sign, radius: r, theta: theta, thetap: thetap, thetaq: thetaq, }; } } function LineDir(p,d) { var c = CenterDir(p,d); if (c == Infinity) { return { c:Infinity, cq: euclid.Scale(euclid.Translate(p,euclid.Scale(d,+1.5)), 1/euclid.Norm(euclid.Translate(p,euclid.Scale(d,+1.5)))), cp: euclid.Scale(euclid.Translate(p,euclid.Scale(d,-1.5)), 1/euclid.Norm(euclid.Translate(p,euclid.Scale(d,-1.5)))), p: p, }; } else { var r = euclid.Norm(euclid.Translate(p, euclid.Scale(c, -1))); var cp1 = euclid.Translate( euclid.Scale(c, 1/ ( euclid.Norm(c)**2)), euclid.Scale([-c[1],c[0]], Math.sqrt(1-1/(euclid.Norm(c)**2))/euclid.Norm(c)) ); var cp2 = euclid.Translate( euclid.Scale(c, 1/ ( euclid.Norm(c)**2)), euclid.Scale([c[1],-c[0]], Math.sqrt(1-1/(euclid.Norm(c)**2))/euclid.Norm(c)) ); var pn = euclid.Translate(cp1, euclid.Scale(c, -1)); var qn = euclid.Translate(cp2, euclid.Scale(c, -1)); pn = euclid.Scale(pn, 1 / euclid.Norm(pn)); qn = euclid.Scale(qn, 1 / euclid.Norm(qn)); if (euclid.Dot(d, qn) < 0) { var temp = pn; pn = qn; qn = temp; } var theta = Acos(euclid.Dot(pn, qn)); qn = euclid.Orthonormalize(pn, qn); var vp = euclid.Translate(p, euclid.Scale(c, -1)); var thetap = Acos(euclid.Dot(pn, vp) / euclid.Norm(vp)); return { c: c, p: p, pn: pn, qn: qn, radius: r, theta: theta, thetap: thetap, }; } } 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 Distance(p,q) { return Math.acosh(1 + (2 * euclid.Distance(p,q)**2) / ((1-euclid.Dot(p,p))*(1-euclid.Dot(q,q))) ); } function ArcPoint(l,t) { if (l.c != Infinity) { var a = l.thetap * (1-t) + l.theta * t; var p = euclid.Translate(l.c, euclid.Scale(euclid.Translate(euclid.Scale(l.pn, Math.cos(a)), euclid.Scale(l.qn, Math.sin(a))), l.radius)); return p; } else { return euclid.Translate(euclid.Scale(l.p, 1-t), euclid.Scale(l.cq, t)); } } function TangentVector(l,t) { if (l.c != Infinity) { var a = Math.PI/2 + (l.thetap * (1-t) + l.theta * t); return euclid.Translate(euclid.Scale(l.pn, Math.cos(a)), euclid.Scale(l.qn, Math.sin(a))); } else { var v = euclid.Translate(euclid.Scale(l.p, -1), euclid.Scale(l.cq, 1)); return euclid.Scale(v, 1 / euclid.Norm(v)); } } function SegmentDir(p, d, dist, eps = 0.000001) { var l = LineDir(p,d); var t = BinarySearch(s => {return Distance(p, ArcPoint(l,s)) - dist; }, eps, 0, 1); if (l.c == Infinity) { l.q = ArcPoint(l,t); l.tq = TangentVector(l,t); } else { l.thetaq = l.thetap * (1-t) + l.theta * t; l.q = ArcPoint(l,t); l.tq = TangentVector(l,t); } return l; } /* 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 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 { // The output of Line(p,q) is a tuple that can have a different format depending on whether // the center of the line is at infinity or in the disk. The output is specified here: // https://gist.github.com/renatoppl/c19a492ebe21d38d286b3069b0a4f3cd#file-hyper_circle-jpg Line: Line, Distance: Distance, SegmentDir: SegmentDir, /* PoincareSegmentDir: PoincareSegmentDir, PoincareDistance: PoincareDistance, PoincareSegmentPoint: PoincareSegmentPoint, BinarySearch: BinarySearch, LinearSolve2: LinearSolve2, Rotate: Rotate, SegmentIntersect: SegmentIntersect, HyperbolicCenter: HyperbolicCenter, TangentVector: TangentVector, LineIntersect: LineIntersect,*/ }; })();38:T57d,function arc_drawer(svg, x, y) { function EditArc(arc, p, q, r) { if (r == Infinity) { arc.attr("d", [ "M", x(p[0]), y(p[1]), "L", x(q[0]), y(q[1])].join(" ")) } else { arc.attr("d", [ "M", x(p[0]), y(p[1]), "A", r, r, 0, /*arc orientation*/ 0, /*sweep*/ 0, x(q[0]), y(q[1])].join(" ")); } } function AddArc(p,q,r,color="red") { var arc = svg.append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", "2"); EditArc(arc, p, q, r); return arc; } function AddHArc(p,q) { var line = hyperbolic.Line(p,q) var radius = hyperbolic.Line(p,q).radius; if (radius != Infinity) { radius = x(line.radius) - x(0); } if (line.sign > 0) { return AddArc(p, q, radius, "blue").attr("class", "harc"); } else { return AddArc(q, p, radius, "blue").attr("class", "harc"); } } function ClearHArcs() { svg.selectAll(".harc").remove(); } function AddPoint(p) { return svg.append("circle") .attr("r", 3.5) .attr("cx", x(p[0])) .attr("cy", x(p[1])); } return { "EditArc": EditArc, "AddArc": AddArc, "AddHArc": AddHArc, "ClearHArcs": ClearHArcs, "AddPoint": AddPoint, }; }39:[{"id":"498c787293912134a501d0994a74b3f3b04b19d53f9466084f3e8d4028682527f470089fcabcec04f712db841a6e43414d48938f78ef6890b21bac9b497a44dd","href":"https://static.observableusercontent.com/files/498c787293912134a501d0994a74b3f3b04b19d53f9466084f3e8d4028682527f470089fcabcec04f712db841a6e43414d48938f78ef6890b21bac9b497a44dd","name":"ladybug2.png","type":"image/png","lastModified":1609706207080.328,"size":14459},{"id":"cf017e55d2b31458bbc3cbd93fbff3ee33d82fcf564a90038e924915caad36f36b366efe5bec20ccbe9679766554c2f59e58c10b8da13bb2c2ac14fd3e7d5aa5","href":"https://static.observableusercontent.com/files/cf017e55d2b31458bbc3cbd93fbff3ee33d82fcf564a90038e924915caad36f36b366efe5bec20ccbe9679766554c2f59e58c10b8da13bb2c2ac14fd3e7d5aa5","name":"ladybug1.png","type":"image/png","lastModified":1609706207100.031,"size":16338}] 30:{"id":"72627e3b336bf97e","slug":"hyperbolic-logo","title":"Hyperbolic LOGO","thumbnail":"593c437871f9ae97b7f7fd5f1542ac21ef105e5575fe6feeec8b7ca1941bbb25","access_level":"public","create_time":"$D2021-01-01T18:10:47.791Z","update_time":"$D2025-09-23T20:14:36.651Z","view_time":null,"first_public_time":"$D2021-01-11T02:56:25.763Z","has_unpublished_edits":null,"fork":false,"stars":10,"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":918,"publish_version":918,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hyperbolic LOGO","cells":[{"id":0,"value":"md`# Hyperbolic LOGO`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md`Let's try to execute some code. Let's go forward and turn right and then go forward. You can execute the code by either clicking on the Play button (\\`▶︎\\`) on the top right corner of the grey box or by pressing ${key(\n \"Shift-Enter\"\n)} in the grey box.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"{\n Clear();\n Forward(1);\n Right(90);\n Forward(1);\n return 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"md`The first movement looks fine -- it is a straight line. But the length seems odd. This is bacause the grid shows normal coordinates, but we are moving 1 unit in [hyperbolic distance](https://en.wikipedia.org/wiki/Poincar%C3%A9_disk_model#Distance). The angle we turned is indeed ${tex`90`} degrees (angles in hyperbolic space as just the usual angles) but when we move straight we go along a curve. \n\nLet's try some other things, say to do draw a square. We will add a bit more code. Let's execute and look at the output above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"{\n Clear();\n var side = 1;\n for (var i = 0; i < 4; ++i) {\n Forward(side);\n Right(90);\n }\n return 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"md`Doesn't look like a square. We can experiment with different side lengths. Let's say we take it to be very small (\\`\\`side = 0.2\\`\\`) then it will look very much like a square. That is because for very small steps, the hyperbolic plane looks just like the Euclidean plane.\n\nBy playing with different side lengths you will see that things are no longer scale invariant. In the usual Euclidean plane, multiplying all the lengths by 2 will get you the same figure but larger. This is no longer true here. But it has some advantages. We can build some really cool things, like [apeirogons](https://en.wikipedia.org/wiki/Apeirogon) which are polygons with an infinite number of sides (and a fix angle).\n\nThat sounds crazy, but you can try below. Execute the following code to get a apeirogon with internal angles of 120 degrees.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"{ \n Clear();\n // PenUp();\n // Forward(1);\n // Left(230);\n // PenDown();\n var k = 100;\n var side = 1.0986;\n var angle = 60;\n for (var i = 0; i < k; ++i) {\n Forward(side);\n Right(angle);\n }\n Right(180);\n for (var i = 0; i < 2*k; ++i) {\n Left(angle);\n Forward(side);\n }\n return 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"md`And there is nothing special about the origin (in fact all the points in the hyperbolic plane are on equal footing. Uncomment the code above and re-run to build the same apeirogon starting from a different point.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"md`### Apeirogon Tilings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"viewof apeirogon_degree = slider({\n min: 3, \n max: 8, \n step: 1, \n value: 3, \n title: \"k\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"viewof apeirogon_depth = slider({\n min: 2, \n max: 30, \n step: 1, \n value: 7, \n title: \"depth\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"md`**side** = ${Math.log((1+Math.cos(Math.PI / apeirogon_degree))/(1-Math.cos(Math.PI / apeirogon_degree)))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"viewof apeirogon_grid = checkbox({\n options: [{ value: \"draw\", label: \"Grid\", checked:false }],\n value: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`### Includes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"import {buttons, mac} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"keys = s => html`${buttons(s)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"import {key} from \"@tmcw/tutorial-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"md`### Ladybug`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"ladybug1 = FileAttachment(\"ladybug1.png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"ladybug2 = FileAttachment(\"ladybug2.png\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`### Geometry`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"projection = (function() {\n function Stereographic(p) {\n return [p[0] / (1+p[2]), p[1] / (1+p[2])];\n };\n \n function SphereInverse(p) {\n var n = p[0] * p[0] + p[1] * p[1];\n var t = 2 / (n + 1);\n var np = [p[0] * t, p[1] * t, -1 +t];\n return np;\n }\n \n function HyperboloidInverse(p) {\n var n = p[0] * p[0] + p[1] * p[1];\n var t = 2 / (-n + 1);\n var np = [p[0] * t, p[1] * t, -1 +t];\n return np;\n }\n \nreturn {\n // Given a point 3d point, returns a point in 2d by mapping it to the plane z=1\n Stereographic: Stereographic,\n // Given a 2d point, return the corresponding point in the unit sphere\n SphereInverse: SphereInverse,\n // Given a point in the 2d unit disk, returns a point in the (upper) hyperboloid\n HyperboloidInverse: HyperboloidInverse,\n};\n})();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`### Events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"events = (function(){\n var events_ = {};\n function NoOp() {\n }\n function Register(s,f) {\n events_[s] = f;\n }\n function Run(s) {\n return events_[s] || NoOp;\n }\n return {\n \"Register\": Register,\n \"Run\": Run,\n }\n})();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"function Forward(x) {\n events.Run(\"Forward\")(x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"function Left(x) {\n events.Run(\"Left\")(x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"function Right(x) {\n events.Run(\"Right\")(x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"function Clear() {\n events.Run(\"Clear\")();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"function Home() {\n events.Run(\"Home\")();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"function PenUp() {\n events.Run(\"PenUp\")();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"function PenDown() {\n events.Run(\"PenDown\")();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"