2a:null 2b:["$","title",null,{"children":"Elliptic Billiard 3-Periodics & Spatio-Temporal Visualization | Dan S. Reznik | Observable"}] 30:T56e,md`Since the pair is confocal, Graves' theorem [4] dictates that consecutive sidelines will be bisected by ellipse normals (black segments pointing inwards from each vertex), i.e., each triangle can be regarded as the periodic path of a billiard ball in an elliptic domain. The elliptic billiard is equipped with two integrals of motion (linear and angular momentum). It is possibly the only integrable planar billiard [12]. Both perimeter L and *Joachimsthal's constant* J are classical conserved quantities [1]. Following intense experimental work, we detected and proved another curious invariant: the ratio r/R of inradius-to-circumradius [5,6]. Since for any triangle ${tex`\sum\cos\theta_i=1+r/R`}, the sum of internal angle cosines is also invariant. In fact [6]: ${tex.block `\frac{r}{R} = \frac{2 (\delta-b^2)(a^2-\delta)}{(a^2-b^2)^2}`} where ${tex`a,b`} are the elliptic billiard semi-axes and the *Darboux constant* ${tex.block`\delta=\sqrt{a^4-(a b)^2+b^4}.`} Indeed, invariant sum of cosines has been generalized to ${tex`N>3`} and in fact ${tex`\sum\cos\theta_i=J L -N`} [7,8]. Also invariant is the ratio ${tex`A'/A`} of excentral-to-3-periodic areas proved in [9] for all odd N. As it turns out, the area ratio ${tex`A/A''`} of 3-periodic-to-caustic-contact-triangle (click the *extouch* button above to see it) is also invariant and *equal* to the aforementioned one!`31:T6cd,md`## Universal Measure Parametrization w/ Jacobi Elliptic Functions. A "natural" parametrization of the family is to set a first vertex ${tex.block`P_1(t)=[a\cos{t},b\sin{t}]`} However this will imply a different velocity profile for each vertex. If we however use the so-called "universal measure", the billiard map is *linearized*: each new vertex is obtained by a fixed offset (${tex`\Delta u`} below) in the argument of certain elliptic functions. In turn this homogenizes the velocity profile for all vertices (pictures coming). [Prof. H. Stachel](https://www.geometrie.tuwien.ac.at/stachel/) (TU-Wien) contributed the following method [11], implemented in the class \`stachel\` below: given: - The number ${tex`N`} of Poncelet polygon sides, in our case ${tex`N=3`} - A desired vertex ${tex`i \in\{0,1,...,N-1\}`} - the caustic semi-axes ${tex`a_c,b_c`} - The phase parameter ${tex`u_0\in[0,2\pi]`}. compute: ${tex.block`\begin{aligned} m = & \frac{a_c^2-b_ c^2}{a_c^2},\;\;\;\Delta u = \frac{4 K(m)}{N},\;\;\;u = \frac{2 K(m)}{\pi}u_0 + i \Delta u \\ b = & \frac{b_c}{\text{cn}({\Delta u}/2, m)},\;\;\;a = \sqrt{b^2 + a_c^2-b_ c^2}\\ P_i = & [-a \text{sn}(u,m), b \text{cn}(u,m)] \end{aligned}`} where: - ${tex`a,b`} are the outer ellipse (billiard) semi-axes which the algorithm calculates from the caustic's. - ${tex`K(m),\text{cn},\text{sn}`} are the complete elliptic integral of 1st kind, elliptic cosine, and sine, respectively. We compute this with the \`jacobi\` class imported from this [notebook](https://observablehq.com/@dan-reznik/jacobi-elliptic-functions). - ${tex`\Delta u`} is the linearized step in the argument to the elliptic functions which corresponds to one application of the billiard map.`32:T7e1,md`## References: 1. S. Tabachnikov, *Geometry and Billiards*, Student Mathematical Library, vol. 30, Am. Math. Society, Providence, RI, 2005. [preprint](http://www.personal.psu.edu/sot2/books/billiardsgeometry.pdf) 1. R. E. Schwartz, *The Poncelet Grid*, Advances in Geometry, 7:2, 2007. [preprint]((https://www.math.brown.edu/reschwar/Papers/grid.pdf) 1. M. Levi and S. Tabachnikov, * The Poncelet Grid and Billiards in Ellipses*, Am. Math. Monthly, 114:10, 2007. [preprint](https://arxiv.org/pdf/math/0511009.pdf) 1. V. Dragović and M. Radnović, [*Poncelet Porisms and Beyond*](https://www.springer.com/gp/book/9783034800143), Birkhauser, Basel, 2011. 1. D. Reznik, R. Garcia, and J. Koiller, [*Can the Elliptic Billiard Still Surprise Us?*](https://rdcu.be/b2cg1), Mathematical Intelligencer, volume 42, pp. 6–17, 2020 1. R. Garcia, D. Reznik, J. Koiller, *New Properties of Triangular Orbits in Elliptic Billiards*, Am. Math. Monthly, 2021 (to appear). [arXiv:2001.08054](https://arxiv.org/pdf/2001.08054.pdf) 1. A. Akopyan, R. Schwartz, and S. Tabachnikov, *Billiards in Ellipses Revisited*, Eur. J. Math., 2020, doi:10.1007/s40879-020-00426-9. [preprint](https://arxiv.org/pdf/2001.02934.pdf) 1. M. Bialy and S. Tabachnikov, *Dan Reznik's Identities and More*, Eur. J. Math., 2020, doi:10.1007/s40879-020-00428-7. [preprint](https://arxiv.org/pdf/2001.08469.pdf) 1. A. Chavez-Caliz, *More About Areas and Centers of Poncelet Polygons*, Arnold Math J., 2020. doi:10.1007/s40598-020-00154-8. 1. R. Garcia, *Elliptic Billiards and Ellipses Associated to the 3-Periodic Orbits*, Am. Math. Monthly, 126 (06), 2019. 1. H. Stachel, *On the Motion of Billiards in Ellipses*, 2021. arXiv [preprint](https://arxiv.org/abs/2105.03624), and TU-Wien presentation [slides](https://www.geometrie.tuwien.ac.at/fg3/pdf/slides_stachel.pdf) 1. V. Kaloshin and A. Sorrentino, *On the integrability of Birkhoff billiards*, Phil. Trans. Royal Society, 2018. [link](https://royalsocietypublishing.org/doi/10.1098/rsta.2017.0419)`33:T55b,orbit_normals = function(a,tDeg) { function cos_alpha(a, x) { const a2 = a * a; const a4 = a2 * a2; const delta = Math.sqrt(a4 - a2 + 1); const num = a2 * Math.sqrt(2 * delta - a2 - 1); const denom = (a2 - 1) * Math.sqrt(a4 - (a2 - 1) * x * x); return num / denom; } const t = utils.toRad(tDeg); const p1 = [a * Math.cos(t), Math.sin(-t)]; const n1 = utils.ell_norm(a, p1); const ca = cos_alpha(a, p1[0]); const sa = Math.sqrt(1 - ca * ca); const nrot = utils.rotSinCos(n1, sa, ca); const nrotNeg = utils.rotSinCos(n1, -sa, ca); const p2 = utils.ellInterRay(a, p1, nrot); const p3 = utils.ellInterRay(a, p1, nrotNeg); const n2 = utils.ell_norm(a, p2); const n3 = utils.ell_norm(a, p3); const o = new triangle([p1, p2, p3]); const x1 = o.incenter(); const x3 = o.circumcenter(); const r = o.inradius(); const R = utils.edist(x3,o.vtx[0]); const rOvR = r/R; const ext = o.extouch(), extA = new triangle(ext).A; const exc = o.excentral(), excA = new triangle(exc).A; const obj = { a: a, o: o.vtx, n: [n1, n2, n3], s: o.sides, e: ext, // bwd compatibility, claudio esperança ext: ext, exc: exc, r: r, R: R, rOvR: rOvR, sumCos: 1+rOvR, x1 : x1, x3 : x3, areaRatioExc: excA/o.A, areaRatioInt: o.A/extA, A: o.A, L: o.L }; return obj; }34:T774,draw_orbit = function(dr,ons,ac,bc,choices=[]) { const scale = glob_scale*dr.height/2; const h2 = dr.height/2, w2 = dr.width/2; const c = Math.sqrt(ons.a*ons.a-1); const transf = (v) => [v[0]*scale+w2,dr.height-v[1]*scale-h2]; const tri = ons.o; const tri_tr = tri.map(transf); const ext_tr = ons.ext.map(transf); const exc_tr = ons.exc.map(transf); dr.clear(); // draw axes dr.line(transf([-ons.a,0]),transf([ons.a,0]),1,"black",[5,5]); dr.line(transf([0,-1]),transf([0,1]),1,"black",[5,5]); // draw foci dr.disk(transf([-c,0]),3,"black"); dr.disk(transf([c,0]),3,"black"); // draw ellipse pair dr.ellipse(transf([0,0]),ons.a*scale,scale,1,"black"); dr.ellipse(transf([0,0]),ac*scale,bc*scale,1,"#b5651d"); // incircle and circumcircle if (choices.includes('circles')) { dr.circle(transf(ons.x1), ons.r * scale, 2, "#40ff40",3); dr.circle(transf(ons.x3), ons.R * scale, 2, "purple",3); } // normals const norm_lgt = .3; let tip; for (let i = 0; i<3; i++) { tip = utils.vray(tri[i],ons.n[i],norm_lgt); dr.line(tri_tr[i],transf(tip),2,"black"); } // vertices for (let i = 0; i<3; i++) dr.disk(tri_tr[i],4,"blue"); // 3-periodic dr.polygon(tri_tr,3,"blue") // excentral if (choices.includes('excentral')) dr.polygon(exc_tr,2,"#40ff40"); // extouch tri if (choices.includes('extouch')) dr.polygon(ext_tr,2,"red",[5,5]); // points of contact (extouch points) for (let i = 0; i<3; i++) dr.disk(ext_tr[i],4,"red"); // draw label const pl = "a="+ons.a.toFixed(3)+ ", b=1, L="+(ons.L.toFixed(5))+ (choices.includes('circles')?", r/R="+ons.rOvR.toFixed(5):"")+ (choices.includes('excentral')?", A'/A="+ons.areaRatioExc.toFixed(5):"")+ (choices.includes('extouch')?", A/A''="+ons.areaRatioInt.toFixed(5):""); // fixes text to top of screen dr.text(pl,[w2,10],20,"black"); }35:Tde9,draw = class { //ctx,height,width; constructor(height, width) { this.pixelRatio = window.devicePixelRatio; this.max_x = Math.floor(width*this.pixelRatio); this.max_y = Math.floor(height*this.pixelRatio); this.height = height; this.width = width; this.ctx = DOM.context2d(width,height); this.img = null; } newImage() { this.img = this.ctx.createImageData(this.max_x, this.max_y); } putImage() { if(this.img===null) console.log("draw.putImage(): initialize with newImage();") else this.ctx.putImageData(this.img, 0, 0); } getImage() { return this.ctx.getImageData(0, 0, this.max_x, this.max_y); } setPixel(x, y, [r,g,b,a]) { if(this.img===null) console.log("draw.putImage(): initialize with newImage();") else { const data = this.img.data; const base = y * (this.max_x * 4) + x * 4; data[base] = r; data[base+1] = g; data[base+2] = b; data[base+3] = a; } } clear() { this.ctx.clearRect(0, 0, this.width, this.height); } get canvas() { return this.ctx.canvas; } line(from,to,thick=1,clr="black",dash=[]) { const ctx = this.ctx; ctx.beginPath(); ctx.setLineDash(dash) ctx.strokeStyle = clr; ctx.lineWidth = thick; ctx.moveTo(...from); ctx.lineTo(...to); ctx.stroke(); } polygon(vtx,thick=1,clr="black",dash=[]) { const ctx = this.ctx; ctx.beginPath(); ctx.strokeStyle = clr; ctx.setLineDash(dash) ctx.lineCap = 'round'; ctx.lineWidth = thick; ctx.moveTo(...vtx[0]); for (let i = 0; i < vtx.length; i++) ctx.lineTo(...vtx[i]); ctx.closePath(); ctx.stroke(); } polyline(vtx,thick=1,clr="black",dash=[]) { const ctx = this.ctx; ctx.beginPath(); ctx.strokeStyle = clr; ctx.setLineDash(dash) ctx.lineCap = 'round'; ctx.lineWidth = thick; ctx.moveTo(...vtx[0]); for (let i = 0; i < vtx.length; i++) ctx.lineTo(...vtx[i]); ctx.stroke(); } disk(ctr,rad=3,clr="black") { const ctx = this.ctx; ctx.beginPath(); ctx.fillStyle = clr; ctx.arc(...ctr, rad, 0, 2*Math.PI); ctx.fill(); } square([x,y],side,clr="black") { const ctx = this.ctx; ctx.beginPath(); ctx.fillStyle = clr; ctx.rect(x,y, side, side); ctx.fill(); } rect([x,y],w,h,clr="black") { const ctx = this.ctx; ctx.beginPath(); ctx.fillStyle = clr; ctx.rect(x,y,w,h); ctx.fill(); } square_ctr(ctr,side,clr="black") { const ctx = this.ctx; const s2=side>>1; ctx.beginPath(); ctx.fillStyle = clr; ctx.rect(ctr[0]-s2, ctr[1]-s2, side, side); // ctx.arc(...ctr, rad, 0, 2*Math.PI); ctx.fill(); } circle(ctr,rad,thick,clr="black",ctrRad=0,dash=[]) { const ctx = this.ctx; ctx.beginPath(); ctx.setLineDash(dash); ctx.lineWidth = thick; ctx.strokeStyle = clr; ctx.arc(...ctr, rad, 0, 2*Math.PI); ctx.stroke(); if (ctrRad>0) this.disk(ctr,ctrRad,clr); } ellipse(ctr, a,b, thick, clr,dash=[]) { const ctx = this.ctx; ctx.beginPath(); ctx.setLineDash(dash); ctx.lineWidth = thick; //ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise]); ctx.strokeStyle = clr; ctx.ellipse(...ctr, a,b, 0, 0, 2*Math.PI); ctx.stroke(); } text(txt,where,size=20,clr="black") { const ctx = this.ctx; ctx.font = size+"px sans-serif"; ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(txt,...where); } }36:T7ad,triangle = class { constructor(vtx) { this.vtx = vtx; this.sides = this.constructor.sides(vtx); this.L = utils.sum(this.sides); this.A = this.area; } static sides([p1, p2, p3]) { let s1 = utils.edist(p2, p3); let s2 = utils.edist(p3, p1); let s3 = utils.edist(p1, p2); return [s1, s2, s3]; } static law_of_cosines(a,b,c) { return (b * b + c * c - a * a) / (2 * b * c); } get cosines() { const [a, b, c] = this.sides; const x = this.constructor.law_of_cosines(a, b, c); const y = this.constructor.law_of_cosines(b, c, a); const z = this.constructor.law_of_cosines(c, a, b); return [x, y, z]; } get semiperimeter() { return 0.5 * this.L; } get area_sqr() { // heron's formula^2 const [a,b,c] = this.sides; const s = this.semiperimeter; return s * (s - a) * (s - b) * (s - c); } get area() { return Math.sqrt(this.area_sqr); } inradius() { const area = this.area; const s = this.semiperimeter; return area/s; } circumradius() { const abc = utils.product(this.sides); const r = this.inradius(); const s = this.semiperimeter; return abc/(4 * r * s); } trilin_to_cartesian(ts) { let z = this.sides.map((s,i)=>s*ts[i]); let denom = utils.sum(z); return [utils.dot(z, this.vtx.map(v=>v[0])) / denom, utils.dot(z, this.vtx.map(v=>v[1])) / denom]; } incenter() { // 1:1:1 return this.trilin_to_cartesian([1,1,1]); } circumcenter() { // cosA:cosB:cosC return this.trilin_to_cartesian(this.cosines); } extouch() { const [a,b,c] = this.sides; const ts = [[0, (a - b + c) / b, (a + b - c) / c], [(-a + b + c) / a, 0, (a + b - c) / c], [(-a + b + c) / a, (a - b + c) / b, 0]]; return ts.map(t=>this.trilin_to_cartesian(t)); } excentral() { const ts = [[-1, 1, 1], [1, -1, 1], [1, 1, -1]]; return ts.map(t=>this.trilin_to_cartesian(t)); } }37:T9a6,utils = class { static toRad(tDeg) { return tDeg * Math.PI / 180; } static vscale(u, s) { return [u[0]*s, u[1]*s]; } static magn2(p) { return p[0] * p[0] + p[1] * p[1]; } static magn(p) { return Math.sqrt(this.magn2(p)); } static vdiff(u,v) { return [u[0] - v[0], u[1] - v[1]]; } static vsum(u,v) { return [u[0] + v[0], u[1] + v[1]]; } static vdot(u,v) { return u[0]*v[0]+u[1]*v[1]; } static vperp([x,y]) { return [-y,x]; } static vperpNeg([x,y]) { return [y,-x]; } static edist2(p1, p2) { return this.magn2(this.vdiff(p1, p2)); } static edist(p1, p2) { return Math.sqrt(this.edist2(p1, p2)); } static vnorm(p) { return this.vscale(p,1/this.magn(p)); } static ell_grad(a, [x,y]) { return [-x, -y * a * a]; } static ellb_grad(a, b, [x,y]) { return [-x * b * b, -y * a * a]; } static ell_norm(a, p) { return this.vnorm(this.ell_grad(a,p)); } static ellb_norm(a, b, p) { return this.vnorm(this.ellb_grad(a,b,p)); } static ell_point(a,b,tDeg) { const t = this.toRad(tDeg); return [a*Math.cos(t), b*Math.sin(t)]; } static rotSinCos([x, y], st, ct) { return [ct * x - st * y, st * x + ct * y]; } static vray(p,n,t) { return this.vsum(p,this.vscale(n,t)); } static dot(v, u) { let acc = 0; for (let i = 0; i < v.length; i++) acc += v[i] * u[i]; return acc; } static sum(v) { let acc = 0; for (let i = 0; i < v.length; i++) acc += v[i]; return acc; } static product(v) { let acc = 1; for (let i = 0; i < v.length; i++) acc *= v[i]; return acc; } static quadRoots(a, b, c) { let discr2 = b * b - 4 * a * c; if (discr2 < 0) { console.log("quadRoots: negative discriminant!"); return [0, 0]; } else { let discr = Math.sqrt(discr2); return [(-b - discr) / (2 * a), (-b + discr) / (2 * a)]; } } static ellInterRay(a, [x, y], [nx, ny]) { const a2 = a * a; const c2 = nx * nx + a2 * ny * ny; const c1 = 2 * (nx * x + a2 * ny * y); const c0 = x * x + a2 * y * y - a2; const ss = this.quadRoots(c2, c1, c0); return this.vray([x, y], [nx, ny], ss[1]); } static ellInterRayb(a,b,[x,y],[nx,ny]) { const a2 = a*a, b2=b*b; const c2 = b2*nx*nx + a2*ny*ny; const c1 = 2*(b2*nx*x + a2*ny*y); const c0 = -a2*b2 + b2*x*x + a2*y*y; const ss = this.quadRoots(c2, c1, c0); return this.vray([x, y], [nx, ny], ss[1]); } static gen01(n) { return Array.from(Array(n+1).keys()).map(v=>v/(n)); } }38:[{"id":"5b89df43d3d609915984355af10f852ead9a5a2291b4a8bd4f4abc904e5d682b298c1a29a37dfea16adc9aa1263a74b6a2ce164cb2466772270284f0b863ecea","href":"https://static.observableusercontent.com/files/5b89df43d3d609915984355af10f852ead9a5a2291b4a8bd4f4abc904e5d682b298c1a29a37dfea16adc9aa1263a74b6a2ce164cb2466772270284f0b863ecea","name":"red_strip.png","type":"image/png","lastModified":1620667717038.311,"size":233128},{"id":"729e07e20e89c97802c23df16092eef8181c2b8fabeffa34da5e84c91962a729a66671a646a61bd646143b9ab56614d4c512778c7e8e547e25da706f0ba90181","href":"https://static.observableusercontent.com/files/729e07e20e89c97802c23df16092eef8181c2b8fabeffa34da5e84c91962a729a66671a646a61bd646143b9ab56614d4c512778c7e8e547e25da706f0ba90181","name":"gaussian.png","type":"image/png","lastModified":1620667653526.781,"size":413437},{"id":"46db5d33a9401f97d928e5bef40a73f6b00fa698680987867964bf0cf999ef8670610e612858811c8dbed1ba8ded0b21d161ff9b9c0b61c242d725013507c576","href":"https://static.observableusercontent.com/files/46db5d33a9401f97d928e5bef40a73f6b00fa698680987867964bf0cf999ef8670610e612858811c8dbed1ba8ded0b21d161ff9b9c0b61c242d725013507c576","name":"knot.png","type":"image/png","lastModified":1620686861826.503,"size":318164},{"id":"9f1864476d257819bb71b45f4b3484562437e291e26254531a223adbd4a12622d755369b894911c9e811f0db4e9ddb31f76b44cd50b6fe84915f58f3079d296f","href":"https://static.observableusercontent.com/files/9f1864476d257819bb71b45f4b3484562437e291e26254531a223adbd4a12622d755369b894911c9e811f0db4e9ddb31f76b44cd50b6fe84915f58f3079d296f","name":"000_front_cover_shiny.png","type":"image/png","lastModified":1620948920990.527,"size":100559},{"id":"9baaf2c3d9dd1807d9d20acce395a08610515a163db6ef897d0ea4b1fa80fd30830849e337ce5d178b20be4d26b66f8d6bae35468181927431fd68fad61b44ee","href":"https://static.observableusercontent.com/files/9baaf2c3d9dd1807d9d20acce395a08610515a163db6ef897d0ea4b1fa80fd30830849e337ce5d178b20be4d26b66f8d6bae35468181927431fd68fad61b44ee","name":"jacobi spiral.png","type":"image/png","lastModified":1621260333198.73,"size":55489},{"id":"fbeb69cd46eb50af3e91ed63851f339ee666246c1472afec7ae90a1295dca35f76626d3477da38007319a55dd6e6cc5bd363c2549974bca410aca30187c7e98d","href":"https://static.observableusercontent.com/files/fbeb69cd46eb50af3e91ed63851f339ee666246c1472afec7ae90a1295dca35f76626d3477da38007319a55dd6e6cc5bd363c2549974bca410aca30187c7e98d","name":"gaussian_mean_curv.png","type":"image/png","lastModified":1621261253985.215,"size":146207}] 2e:{"id":"c0869cc96d45f71e","slug":"elliptic-billiard-triangle","title":"Elliptic Billiard 3-Periodics & Spatio-Temporal Visualization","thumbnail":"7e5bff0e964ec7be8c235efb4abbe2496f130dd7f41e0c0df59a96ad7f1e7b7f","access_level":"public","create_time":"$D2021-05-06T20:23:32.205Z","update_time":"$D2021-06-04T20:31:23.654Z","view_time":null,"first_public_time":"$D2021-05-06T20:58:27.621Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"5f70011df0350296","login":"dan-reznik","name":"Dan S. Reznik","avatar_url":"https://avatars-next.observableusercontent.com/34300050560dea2b36d63efd30e3f07e6f455717f9e917936080d33429d8b426","tier":"starter_2024"},"version":1677,"publish_version":1677,"role":null,"authored":false,"authors":[{"type":"individual","id":"bda3bb7cbffeec7d","login":"dan-reznik","name":"Dan S. Reznik","avatar_url":"https://avatars-next.observableusercontent.com/34300050560dea2b36d63efd30e3f07e6f455717f9e917936080d33429d8b426","tier":null}],"members":[{"type":"individual","id":"bda3bb7cbffeec7d","login":"dan-reznik","name":"Dan S. Reznik","avatar_url":"https://avatars-next.observableusercontent.com/34300050560dea2b36d63efd30e3f07e6f455717f9e917936080d33429d8b426","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6543aeb6f72c303d","slug":"elliptic-billiards","title":"Poncelet Phenomena","owner":{"id":"5f70011df0350296","login":"dan-reznik","name":"Dan S. Reznik"}},"type":"notebook","body":{"titling":"auto","title":"Elliptic Billiard 3-Periodics & Spatio-Temporal Visualization","cells":[{"id":0,"value":"md`# Elliptic Billiard 3-Periodics & Spatio-Temporal Visualization\n*C. Esperança, R. Garcia, and D. Reznik*\\n\nMay 2021`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"md`Depicted below is the 1d family of Poncelet 3-periodic orbits *interscribed* between two *confocal* ellipses, i.e., inscribed in an outer one while simultaneously circumscribing an inner one (aka. the *caustic*). The red dots mark where sidelines touch the caustic. See references [1,2,3,4] below. The family is parametrized using Jacobi elliptic functions described in [11]. Our goal is to visualize the *space-time* surface the sidelines sweep (see below).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"viewof a = Range([1.001, 3], {label: md`**a/b**`, value: 1.5, step: .001, format: x => x.toFixed(3)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"viewof glob_scale = Range([.1, 2], {label: md`**zoom**`, value: .8, step: .01, format: x => x.toFixed(2)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"{\n const kw = 1.8, height = 400, width=kw*height;\n const dr = new draw(height,width);\n const [ac,bc]=caustic_axes(a);\n while (true) {\n const tDeg_raw = (Date.now()/20);\n const tDeg = tDeg_raw % 360; //360*(1-Math.trunc(tDeg_raw)+tDeg_raw);\n const ons = jacobi_three_periodic(a, tDeg, ac,bc);\n draw_orbit(dr,ons,ac,bc,drChoices);\n yield dr.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"viewof drChoices = Checkbox([\"circles\", \"excentral\", \"extouch\"], {label: md`**show**`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"md`## Caustic semi-axes\nLet ${tex`a_c,b_c`} denote the confocal caustic semi-axes. Confocality means ${tex`a^2-b^2=a_c^2-b_c^2=c^2`}. The Cayley condition for a concentric, axis-parallel pair [4] is:\n${tex.block`\\frac{a_c}{a}+\\frac{b_c}{b}=1.`}\n\nThis yields [10]:\n${tex.block`\n [a_c,b_c]=\\frac{1}{c^2} \\left[a (\\delta-b^2), b(a^2-\\delta)\\right].`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"md`## Spatiotemporal 3-Periodics. \nThe universal measure parametrization is useful in rendering the spatio-temporal *surfaces* swept by 3-periodic sidelines over the family. Using time as the third dimension, these become a 3-sided ruled spiral, shown below. The caustic touchpoints (vertices of the extouch triangle) are shown as thin white lines. Recall a known fact about ruled surfaces is that their Gaussian curvature is non-positive everywhere.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"md`The picture below shows a pseudo-toroidal embedding of the above so that the endpoints can be shown identified. Ruled components of the surface are colored by the angular velocity of the corresponding 3-periodic sideline (blue slower, red faster). Check out our [interactive tool](https://observablehq.com/@esperanc/3-periodic-elliptical-billiards-3d-sweep) where this and other variants of this surface can be rotated about. More pictures and details coming soon.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"md`Shown below are a couple more examples of the types of interesting spatio-temporal surfaces which can be obtained.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"md`It turns out the three curves corresponding to the caustic touchpoints are knotted.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"md`## Gaussian and Mean Curvatures\nWe are working on overlaying (via textures) the gaussian and mean curvatures on top of the spatiotemporal surfaces. This is what they look like in 2d, obtained with Wolfram Mathematica's \\`ContourPlot[]\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1459,"value":"md`## Companion webpages:\n- 3d visualization of [Spatiotemporal Billiard 3-Periodics](https://observablehq.com/@esperanc/3-periodic-elliptical-billiards-3d-sweep)\n- Calculation of Jacobi [Elliptic Functions](https://observablehq.com/@dan-reznik/jacobi-elliptic-functions)\n- Gaussian and Mean [Curvatures](https://observablehq.com/@dan-reznik/spatiotemporal-curvature)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"md`## Media, videos, etc.:\n * Prof. Claudio Esperança's [billiard 3-periodics in 3d](https://observablehq.com/@esperanc/3-periodic-elliptical-billiards-3d-sweep)\n * Oliver Nash's page on [*Poncelet's porism*](http://olivernash.org/2018/07/08/poring-over-poncelet/index.html), advanced\n * Numberphile's Poncelet's porism [video](https://youtu.be/n5bw-Y13pdY)\n * Our videos on [YouTube](https://www.youtube.com/channel/UCJ3BPNdm0z1UzcJYTwxlsjA)\n * Loci of triangle centers in the elliptic billiard: [link](https://dan-reznik.github.io/why-so-many-ellipses/)\n * Our June 2019 [IMPA talk](https://youtu.be/t872mftaI2g), in Portuguese, with English subtitles.\n * Early [webpage](https://dan-reznik.github.io/Elliptical-Billiards-Triangular-Orbits/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`## Computing billiard 3-periodic data:\n\\`\\`\\`js\nimport {orbit_normals,caustic_axes,jacobi_three_periodic} from \\'@dan-reznik/elliptic-billiard-triangle\\'\n// for standard parametrization p1(t) = [a cos(t), sin(t)] (by r. garcia)\nons = orbit_normals(a, θ)\n// for jacobi's parametrization (by h. stachel)\nconst [ac,bc] = caustic_axes(a) // only need to do this once\nons = jacobi_three_periodic(a,θ,ac,bc)\n\\`\\`\\`\nwhere:\n* \\`a\\`: billiard's major semi-axis length. Note: b = 1, ctr=[0,0].\n* \\`θ\\`: angle (from 0 to 360 degrees) for ${tex`P_1=[a\\cos\\theta,\\sin\\theta]`} \n* \\`ac,bc\\`: caustic sem-axes obtained\n\nreturns js object with fields:\n* \\`.o\\`: 3-element array of 2d vertex coordinates\n* \\`.n\\`: angle bisectors (i.e., ellipse normals) as unit vectors\n* \\`.s\\`: sidelengths\n* \\`.e\\`: 3-element array of 2d coordinates of side touchpoints to inner ellipse\n* \\`.r\\`: inradius\n* \\`.R\\`: circumradius\n\n## To obtain caustic semi-axes call:\n\\`[ac,bc]=caustic_axes(a)\\`\n\nnote: assumes b=1.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`## Example:\nobtain vertices for an a=1.5, b=1 billiard, with θ=-33 degrees:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"orbit_normals(1.5, -33.)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"caustic_axes(1.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"md`## Code:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"caustic_axes = function(a,b=1) {\n const a2 = a * a, b2 = b * b;\n const delta = Math.sqrt(a2 * a2 - a2 * b2 + b2 * b2);\n const c2 = a2-b2;\n const ac = a*(delta-b2)/c2;\n const bc = b*(a2-delta)/c2;\n return [ac, bc];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"caustic_axes(1.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1643,"value":"utils.ellInterRayb(1.5, 1, [0.1,.2],[-.1,1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1651,"value":"utils.quadRoots(-.215,.88,2.26)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"jacobi_three_periodic = function(a,tDeg,ac,bc) {\n const t = utils.toRad(tDeg);\n const ps = stachel.three_periodic(ac,bc,t);\n const ns = ps.map(p=>utils.ell_norm(a, p));\n const o = new triangle(ps);\n const x1 = o.incenter();\n const x3 = o.circumcenter();\n const r = o.inradius();\n const R = utils.edist(x3,o.vtx[0]);\n const rOvR = r/R;\n const ext = o.extouch(), extA = new triangle(ext).A;\n const exc = o.excentral(), excA = new triangle(exc).A;\n const obj = {\n a: a,\n o: o.vtx,\n n: ns,\n s: o.sides,\n e: ext, // bwd compatibility, claudio esperança\n ext: ext,\n exc: exc,\n r: r,\n R: R,\n rOvR: rOvR,\n sumCos: 1+rOvR,\n x1 : x1,\n x3 : x3,\n areaRatioExc: excA/o.A,\n areaRatioInt: o.A/extA,\n A: o.A,\n L: o.L\n };\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"stachel = class {\n static three_periodic(ac,bc,u0_2pi) {\n return [0,1,2].map(i=>this.stachelPn(1,3,i,u0_2pi,ac,bc));\n }\n static stachelPn(tau, n, vertex_i, u0_2pi, ac, bc) { \n let d2 = ac*ac - bc*bc;\n let m = d2/(ac*ac);\n let K = jacobi.ellipticK(m);\n let deltau = 2*tau*K/n;\n const u0 = 2 * K * (u0_2pi / Math.PI); // u0_2pi/(2 pi) expresses fraction of 4K period\n let ut = u0 + 2*vertex_i*deltau;\n let be = bc/jacobi.sn_cn_dn(deltau, m).cn;\n let ae = Math.sqrt(be*be + d2);\n let jac = jacobi.sn_cn_dn(ut,m);\n // there is a problem w the sign of sn\n return [-ae*jac.sn, be*jac.cn];\n }\n static K(ac,bc) {\n const d2 = ac*ac - bc*bc;\n const m = d2/(ac*ac);\n return jacobi.ellipticK(m);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"import {jacobi} from '@dan-reznik/jacobi-elliptic-functions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"import {Range,Toggle,Checkbox} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 2f:"$2e:body"