29:null 2a:["$","title",null,{"children":"Copy of Hyperbolic Game | Renato Paes Leme | Observable"}] 2f:T873,{ var width = 640; var height = 100; var svg = d3.select(DOM.svg(width, height)) .style("overflow", "visible"); var angle = 90; var ladybug = [await ladybug1.url(), await ladybug2.url()]; function Bug(svg) { var bug = svg.append("image").attr("xlink:href", ladybug[0]) .attr("height", "80"); var bug_state = 0; function MoveBug(x,y,theta) { bug.attr("transform", `translate(${x},${y}) rotate(${theta}) translate(-25,-42)`); } function MoveLegs() { bug.attr("xlink:href", ladybug[bug_state]); bug_state = (bug_state+1)%2; } function SetOnClick(f) { bug.on("click", f); } return { MoveBug: MoveBug, MoveLegs: MoveLegs, SetOnClick: SetOnClick, }; } function BugControl(bug, linear_speed, angular_speed) { var p = [100,50]; var dp = [0, -linear_speed]; var angle = 0; bug.MoveBug(p[0], p[1], angle); function Rotate(sign=1) { angle += sign * angular_speed; dp = [linear_speed * Math.sin(2 * Math.PI * angle / 360.0), -linear_speed * Math.cos(2 * Math.PI * angle / 360.0)]; bug.MoveBug(p[0], p[1], angle); bug.MoveLegs(); } function GoForward() { p = [p[0] + dp[0], p[1] + dp[1]]; bug.MoveBug(p[0], p[1], angle); bug.MoveLegs(); } return { Rotate: Rotate, GoForward: GoForward, }; } var bug = Bug(svg); var bug_control = BugControl(bug,2,2); var keys_pressed = {'d':false, 'f':false, 'j':false}; function UpdateKeys() { keys_pressed[d3.event.key] = d3.event.type == 'keydown'; } function KeyboardControldBug() { UpdateKeys(); if (keys_pressed['f']) { bug_control.Rotate(); } if (keys_pressed['d']) { bug_control.Rotate(-1); } if (keys_pressed['j']) { bug_control.GoForward(); } } function RegisterKeyboardControls() { d3.select("body") .on("keydown", KeyboardControldBug) .on("keyup", KeyboardControldBug); } RegisterKeyboardControls(); bug.SetOnClick(RegisterKeyboardControls); return svg.node(); }30:Tfaf,{ 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 angle = 90; var ladybug = [await ladybug1.url(), await ladybug2.url()]; function Bug(svg) { var bug = svg.append("image").attr("xlink:href", ladybug[0]) .attr("height", "80"); var bug_state = 0; function MoveBug(x,y,theta) { bug.attr("transform", `translate(${x},${y}) rotate(${theta}) translate(-25,-42)`); } function MoveLegs() { bug.attr("xlink:href", ladybug[bug_state]); bug_state = (bug_state+1)%2; } function SetOnClick(f) { bug.on("click", f); } return { MoveBug: MoveBug, MoveLegs: MoveLegs, SetOnClick: SetOnClick, }; } function Draw(p,q) { svg.append("line") .attr("x1", p[0]) .attr("x2", q[0]) .attr("y1", p[1]) .attr("y2", q[1]) .attr("stroke", "blue"); } function BugControl(bug, linear_speed, angular_speed) { var p = [x(0),y(0)]; var dp = [0, -linear_speed]; var angle = 0; bug.MoveBug(p[0], p[1], angle); function Rotate(sign=1) { angle += sign * angular_speed; dp = [linear_speed * Math.sin(2 * Math.PI * angle / 360.0), -linear_speed * Math.cos(2 * Math.PI * angle / 360.0)]; bug.MoveBug(p[0], p[1], angle); } function GoForward(draw=false) { if (draw) { Draw(p, [p[0] + dp[0], p[1] + dp[1]]); } p = [p[0] + dp[0], p[1] + dp[1]]; bug.MoveBug(p[0], p[1], angle); } return { Rotate: Rotate, GoForward: GoForward, }; } var bug = Bug(svg); var bug_control = BugControl(bug,2,2); var keys_pressed = {'d':false, 'f':false, 'j':false}; function UpdateKeys() { keys_pressed[d3.event.key] = d3.event.type == 'keydown'; } function RegisterKeyboardControls() { d3.select("body") .on("keydown", UpdateKeys) .on("keyup", UpdateKeys); } RegisterKeyboardControls(); bug.SetOnClick(RegisterKeyboardControls); function Move() { if (keys_pressed['f']) { bug_control.Rotate(); } if (keys_pressed['d']) { bug_control.Rotate(-1); } if (keys_pressed['j'] && keys_pressed['k']) { bug_control.GoForward(true); } else if (keys_pressed['j']) { bug_control.GoForward(false); } if (keys_pressed['f'] || keys_pressed['d'] || keys_pressed['j']) { bug.MoveLegs(); } setTimeout(Move, 50); } Move(); return svg.node(); }31:T81c,{ 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"); function Dir(x) { return [Math.cos(2*Math.PI * x), Math.sin(2*Math.PI * x)]; } var n = nv; for (var k = 1; k <= 2**n; k *= 2) { for (var i=0; i< k; ++i) { drawer.AddHArc(Dir(i/k), Dir((i+1)/k)); } } // 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(); }32:Tb01,{ 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}); } } } return svg.node(); }33:Tcad,{ 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:T11d8,{ 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); function AddArc(p,q,r,color="red") { return svg.append("path") .attr("d", [ "M", x(p[0]), y(p[1]), "A", r, r, 0, /*arc orientation*/ 0, 0, x(q[0]), y(q[1])].join(" ")) .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", "2"); } function EditArc(arc,p,q,r) { arc.attr("d", [ "M", x(p[0]), y(p[1]), "A", r, r, 0, /*arc orientation*/ 0, 0, x(q[0]), y(q[1])].join(" ")); } AddArc([1,0], [-1,0], y(1)-y(0), "red"); 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 bug = svg.append("image").attr("xlink:href", ladybug[0]) .attr("height", "80"); var bug_state = 0; function MoveBug(x,y,theta) { bug.attr("transform", `translate(${x},${y}) rotate(${theta}) translate(-25,-42)`); } function MoveLegs() { bug.attr("xlink:href", ladybug[bug_state]); bug_state = (bug_state+1)%2; } function SetOnClick(f) { bug.on("click", f); } return { MoveBug: MoveBug, MoveLegs: MoveLegs, SetOnClick: SetOnClick, }; } function Draw(p,q) { svg.append("line") .attr("x1", p[0]) .attr("x2", q[0]) .attr("y1", p[1]) .attr("y2", q[1]) .attr("stroke", "blue"); } function BugControl(bug, linear_speed, angular_speed) { var p = [x(0),y(0)]; var dp = [0, -linear_speed]; var angle = 0; bug.MoveBug(p[0], p[1], angle); function Rotate(sign=1) { angle += sign * angular_speed; dp = [linear_speed * Math.sin(2 * Math.PI * angle / 360.0), -linear_speed * Math.cos(2 * Math.PI * angle / 360.0)]; bug.MoveBug(p[0], p[1], angle); } function GoForward(draw=false) { if (draw) { Draw(p, [p[0] + dp[0], p[1] + dp[1]]); } p = [p[0] + dp[0], p[1] + dp[1]]; bug.MoveBug(p[0], p[1], angle); } return { Rotate: Rotate, GoForward: GoForward, }; } var bug = Bug(svg); var bug_control = BugControl(bug,2,2); var keys_pressed = {'d':false, 'f':false, 'j':false}; function UpdateKeys() { keys_pressed[d3.event.key] = d3.event.type == 'keydown'; } function RegisterKeyboardControls() { d3.select("body") .on("keydown", UpdateKeys) .on("keyup", UpdateKeys); } RegisterKeyboardControls(); bug.SetOnClick(RegisterKeyboardControls); function Move() { if (keys_pressed['f']) { bug_control.Rotate(); } if (keys_pressed['d']) { bug_control.Rotate(-1); } if (keys_pressed['j'] && keys_pressed['k']) { bug_control.GoForward(true); } else if (keys_pressed['j']) { bug_control.GoForward(false); } if (keys_pressed['f'] || keys_pressed['d'] || keys_pressed['j']) { bug.MoveLegs(); } setTimeout(Move, 50); } Move(); return svg.node(); }35:Tf62,{ 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 ladybug = [await ladybug1.url(), await ladybug2.url()]; function Bug(svg) { var bug = svg.append("image").attr("xlink:href", ladybug[0]) .attr("height", "80"); var bug_state = 0; function MoveBug(p,d) { 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)`); } function MoveLegs() { bug.attr("xlink:href", ladybug[bug_state]); bug_state = (bug_state+1)%2; } function SetOnClick(f) { bug.on("click", f); } return { MoveBug: MoveBug, MoveLegs: MoveLegs, SetOnClick: SetOnClick, }; } function BugControl(bug, linear_speed, angular_speed) { var p = [0,0]; var d = [0,1]; bug.MoveBug(p,d); function Rotate(sign=1) { var dtheta = sign * angular_speed * Math.PI / 180.0; d = matrix.Prod(matrix.Rotation(dtheta), d); bug.MoveBug(p,d); } function GoForward(draw=false) { var seg = hyperbolic.SegmentDir(p, d, linear_speed); if (draw) { drawer.AddHArc(p, seg.q); } p = seg.q; d = seg.tq; bug.MoveBug(p,d); } return { Rotate: Rotate, GoForward: GoForward, }; } var bug = Bug(svg); var bug_control = BugControl(bug, /*linear_speed*/ .02, /*angular_speed*/ 2); var keys_pressed = {'d':false, 'f':false, 'j':false}; function UpdateKeys() { keys_pressed[d3.event.key] = d3.event.type == 'keydown'; } function RegisterKeyboardControls() { d3.select("body") .on("keydown", UpdateKeys) .on("keyup", UpdateKeys); } RegisterKeyboardControls(); bug.SetOnClick(RegisterKeyboardControls); function Move() { if (keys_pressed['f']) { bug_control.Rotate(); } if (keys_pressed['d']) { bug_control.Rotate(-1); } if (keys_pressed['j'] && keys_pressed['k']) { bug_control.GoForward(true); } else if (keys_pressed['j']) { bug_control.GoForward(false); } if (keys_pressed['f'] || keys_pressed['d'] || keys_pressed['j']) { bug.MoveLegs(); } setTimeout(Move, 50); } Move(); return svg.node(); }36:T13a3,{ 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"); // Apeirogon tiling initial edge function ApeirogonSide(k) { var x = Math.cos(Math.PI / k); return Math.log((1+x)/(1-x)); } var k = 3; var side = ApeirogonSide(k); var ap = [.1,.1]; var aq = hyperbolic.SegmentDir(ap, [0,1], side).q; var drawing_threshold = 0.1; var max_level = 20; function DrawTiling(ap, aq) { drawer.ClearHArcs(); drawer.AddHArc(ap, aq); var Queue = []; var aseg = hyperbolic.Line(ap, aq); Queue.push({p:ap, d:euclid.Scale(aseg.tp, -1), l:1}); Queue.push({p:aq, d:euclid.Scale(aseg.tq, -1), l:1}); while (Queue.length > 0) { var e = Queue.pop(); for (var i = 1; i < k; ++i) { var d1 = euclid.Rotate(e.d, 2 * Math.PI * i/ k); var seg = hyperbolic.SegmentDir(e.p, d1, side); drawer.AddHArc(e.p, seg.q); var dist = euclid.Distance(e.p, seg.q); if (e.l <= max_level && dist > drawing_threshold) { Queue.push({p:seg.q, d:euclid.Scale(seg.tq, -1), l:e.l+1}); } } } } DrawTiling(ap, aq); ////////////////////// var ladybug = [await ladybug1.url(), await ladybug2.url()]; function Bug(svg) { var bug = svg.append("image").attr("xlink:href", ladybug[0]) .attr("height", "80"); var bug_state = 0; function MoveBug(p,d) { 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)`); } function MoveLegs() { bug.attr("xlink:href", ladybug[bug_state]); bug_state = (bug_state+1)%2; } function SetOnClick(f) { bug.on("click", f); } return { MoveBug: MoveBug, MoveLegs: MoveLegs, SetOnClick: SetOnClick, }; } function BugControl(bug, linear_speed, angular_speed) { var p = [0,0]; var d = [0,1]; bug.MoveBug(p,d); function Rotate(sign=1) { var dtheta = sign * angular_speed * Math.PI / 180.0; d = matrix.Prod(matrix.Rotation(dtheta), d); bug.MoveBug(p,d); } function GoForward(draw=false) { var seg = hyperbolic.SegmentDir(p, d, linear_speed); if (draw) { drawer.AddHArc(p, seg.q); } p = seg.q; d = seg.tq; bug.MoveBug(p,d); } return { Rotate: Rotate, GoForward: GoForward, }; } var bug = Bug(svg); var bug_control = BugControl(bug, /*linear_speed*/ .02, /*angular_speed*/ 2); var keys_pressed = {'d':false, 'f':false, 'j':false}; function UpdateKeys() { keys_pressed[d3.event.key] = d3.event.type == 'keydown'; } function RegisterKeyboardControls() { d3.select("body") .on("keydown", UpdateKeys) .on("keyup", UpdateKeys); } RegisterKeyboardControls(); bug.SetOnClick(RegisterKeyboardControls); function Move() { if (keys_pressed['f']) { bug_control.Rotate(); } if (keys_pressed['d']) { bug_control.Rotate(-1); } if (keys_pressed['j'] && keys_pressed['k']) { bug_control.GoForward(true); } else if (keys_pressed['j']) { bug_control.GoForward(false); } if (keys_pressed['f'] || keys_pressed['d'] || keys_pressed['j']) { bug.MoveLegs(); } setTimeout(Move, 50); } Move(); return svg.node(); }37: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, }; })();38:T783,matrix = (function() { function Zero(dim) { var Z = new Array(dim[0]); for (var i = 0; i < dim[0]; ++i) { Z[i] = new Array(dim[1]).fill(0); } return Z; } // If M is a vector, the second dimension is undefined function Dim(M) { return [M.length, M[0].length]; } function VecToMatrix(v) { var V = Zero([v.length, 1]); for (var i = 0; i < v.length; ++i) { V[i][0] = v[i]; } return V; } function MatrixToVec(V) { var d = Dim(V); if (d[1] != 1) { return undefined; } var v = new Array(d[0]).fill(0); for (var i = 0; i < v.length; ++i) { v[i] = V[i][0]; } return v; } // Handles both matrix-matrix and matrix-vector product. // If B is a vector, it returns a vector. Otherwise returns a matrix. function Prod(A, B) { var dA = Dim(A); var dB = Dim(B); var B_vector = false; if (dA[1] != dB[0]) { return undefined; } if (dB[1] == undefined) { B_vector = true; B = VecToMatrix(B); dB = Dim(B); } var dP = [dA[0], dB[1]]; var P = Zero([dA[0], dB[1]]); for (var i = 0; i < dA[0]; ++i) { for (var j = 0; j < dB[1]; ++j) { for (var k = 0; k < dA[1]; ++k) { P[i][j] += A[i][k] * B[k][j]; } } } return B_vector ? MatrixToVec(P) : P; } function Rotation(theta, i=0, j=1, n=2) { var R = Zero([n,n]); R[i][i] = Math.cos(theta); R[i][j] = Math.sin(theta); R[j][i] = - Math.sin(theta); R[j][j] = Math.cos(theta); return R; } function HyperRotation(theta, i=0, j=1, n=2) { var R = Zero([n,n]); R[i][i] = Math.cosh(theta); R[i][j] = Math.sinh(theta); R[j][i] = Math.sinh(theta); R[j][j] = Math.cosh(theta); return R; } return { Zero: Zero, Dim: Dim, Prod: Prod, Rotation: Rotation, HyperRotation: HyperRotation, }; })();39:T2d1b,// 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 HTangent(p0, q0, c0) { var tp; if (c0 == Infinity) { tp = euclid.Translate(p0, euclid.Scale(q0, -1)); } else { tp = euclid.Rotate(euclid.Translate(p0, euclid.Scale(c0, -1)), Math.PI/2); if (euclid.Dot(tp, euclid.Translate(p0, euclid.Scale(q0, -1))) < 0) { tp = euclid.Scale(tp, -1); } } return euclid.Scale(tp, 1 / euclid.Norm(tp)); } function Line(p,q) { var c = Center(p,q); if (c == Infinity) { var tp = euclid.Translate(p, euclid.Scale(q, -1)); tp = euclid.Scale(tp, 1 / euclid.Norm(tp)); 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, tp: HTangent(p, q, Infinity), tq: HTangent(q, p, Infinity), }; } 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, tp: HTangent(p, q, c), tq: HTangent(q, p, c), }; } } 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,*/ }; })();3a:T56e,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 = line.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, }; }3b:[{"id":"cf017e55d2b31458bbc3cbd93fbff3ee33d82fcf564a90038e924915caad36f36b366efe5bec20ccbe9679766554c2f59e58c10b8da13bb2c2ac14fd3e7d5aa5","href":"https://static.observableusercontent.com/files/cf017e55d2b31458bbc3cbd93fbff3ee33d82fcf564a90038e924915caad36f36b366efe5bec20ccbe9679766554c2f59e58c10b8da13bb2c2ac14fd3e7d5aa5","name":"ladybug1.png","type":"image/png","lastModified":1610330483903.391,"size":16338},{"id":"498c787293912134a501d0994a74b3f3b04b19d53f9466084f3e8d4028682527f470089fcabcec04f712db841a6e43414d48938f78ef6890b21bac9b497a44dd","href":"https://static.observableusercontent.com/files/498c787293912134a501d0994a74b3f3b04b19d53f9466084f3e8d4028682527f470089fcabcec04f712db841a6e43414d48938f78ef6890b21bac9b497a44dd","name":"ladybug2.png","type":"image/png","lastModified":1610330483903.391,"size":14459}] 2d:{"id":"ecff609f83f96afd","slug":null,"title":"Copy of Hyperbolic Game","thumbnail":"d7513168d9c1cc4c17e5fd281df31410cdaba46c13249b02013547ff257a41ca","access_level":"public","create_time":"$D2021-01-11T02:01:23.903Z","update_time":"$D2021-01-20T14:57:19.161Z","view_time":null,"first_public_time":"$D2023-04-15T00:37:18.143Z","fork":{"id":"72627e3b336bf97e","slug":"hyperbolic-logo","title":"Hyperbolic LOGO","owner":{"id":"cde07d8c7e702472","login":"renatoppl","name":"Renato Paes Leme"}},"stars":0,"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":864,"publish_version":null,"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":0,"collection":null,"type":"notebook","body":{"title":"Copy of Hyperbolic Game","cells":[{"id":0,"value":"md`# Copy of Hyperbolic Game`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"// Placeholder for circle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"md`### Ladybug`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"ladybug1 = FileAttachment(\"ladybug1.png\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"ladybug2 = FileAttachment(\"ladybug2.png\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"ladybug2.image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"md`First we draw a little ladybug that rotates around itself.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"{\n var width = 640;\n var height = 100; \n var svg = d3.select(DOM.svg(width, height)) \n .style(\"overflow\", \"visible\"); \n \n var angle = 90;\n var ladybug = [await ladybug1.url(), await ladybug2.url()];\n function Bug(svg) {\n var bug = svg.append(\"image\").attr(\"xlink:href\", ladybug[0])\n .attr(\"height\", \"80\");\n var bug_state = 0;\n \n function MoveBug(x,y,theta) {\n bug.attr(\"transform\", `translate(${x},${y}) rotate(${theta}) translate(-25,-42)`);\n }\n \n function MoveLegs() {\n bug.attr(\"xlink:href\", ladybug[bug_state]);\n bug_state = (bug_state+1)%2;\n }\n \n return {\n MoveBug: MoveBug,\n MoveLegs: MoveLegs,\n };\n }\n \n \n var bug = Bug(svg);\n //var circ = svg.append(\"circle\").attr(\"cx\",150).attr(\"cy\",30).attr(\"r\",5).attr(\"fill\",\"blue\");\n var angle = 0;\n function MoveLegs() {\n bug.MoveLegs();\n bug.MoveBug(100,50,angle);\n angle += 10;\n setTimeout(MoveLegs, 200);\n }\n MoveLegs();\n \n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"md`In the next iteration we control its movement using the keyboard. First click on the ladybug below and then use the key ${keys('J')} to move the bug forward and the keys ${keys('D')} and ${keys('F')} to rotate.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"md`Next we will try to also make the ladybug draw in the screen. Click on the next ladybug and then besides the keys ${keys('D')}, ${keys('F')} and ${keys('J')} we will add an extra key ${keys('K')} to draw. Press ${keys('K')} while going forward to draw.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"md`### Moving in the Hyperbolic Plane`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"md`First let's draw a bunch of lines in many different directions to test the functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"viewof nv = slider({\n min: 2, \n max: 8, \n step: 1, \n value: 2, \n title: \"n\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"md`Let's try to draw some [apeirogons](https://en.wikipedia.org/wiki/Apeirogon#Apeirogons_in_hyperbolic_plane).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"viewof apeirogon_depth = slider({\n min: 2, \n max: 30, \n step: 1, \n value: 2, \n title: \"depth\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"viewof apeirogon_degree = slider({\n min: 3, \n max: 8, \n step: 1, \n value: 3, \n title: \"degree\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"viewof apeirogon_grid = checkbox({\n options: [{ value: \"draw\", label: \"Grid\", checked:true }],\n value: \"draw\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"md`The apeirogon side length in [hyperbolic distance](https://observablehq.com/@renatoppl/hyperbolic-plane) is ${tex`\\log((1+x)/(1-x))`} for ${tex`x = \\cos(\\pi/\\text{deg})`}. At the parameters specified above this is ${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"},{"id":423,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"md`### Hyperbolic LOGO`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"{\n Clear();\n var k = 100;\n for (var i = 0; i < k; ++i) {\n Forward(1.0986);\n Right(60);\n }\n Home();\n Right(180);\n for (var i = 0; i < k; ++i) {\n Left(60);\n Forward(1.0986);\n }\n return 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":761,"value":"{\n Clear();\n PenUp();\n Forward(1);\n Left(230);\n PenDown();\n var k = 100;\n for (var i = 0; i < k; ++i) {\n Forward(1.762747174039086);\n Right(90);\n }\n Home();\n PenUp();\n Forward(1);\n Left(230);\n PenDown();\n Right(180);\n for (var i = 0; i < k; ++i) {\n Left(90);\n Forward(1.762747174039086);\n }\n return 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":608,"value":"md`### Keyboard Controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":795,"value":"md`### Hyperbolic Walk (Version 1)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":798,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":835,"value":"md`### Hyperbolic Walk (Version 2)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":838,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`### Includes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"import {buttons, mac} from \"@mbostock/keys\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"keys = s => html`${buttons(s)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`### Geometry`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":790,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":15,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"md`### Events`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":615,"value":"function Forward(x) {\n events.Run(\"Forward\")(x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":"function Left(x) {\n events.Run(\"Left\")(x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":618,"value":"function Right(x) {\n events.Run(\"Right\")(x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"function Clear() {\n events.Run(\"Clear\")();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"function Home() {\n events.Run(\"Home\")();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"function PenUp() {\n events.Run(\"PenUp\")();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"function PenDown() {\n events.Run(\"PenDown\")();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 2e:"$2d:body"