2b:null 2c:["$","title",null,{"children":"The Algebra and Geometry of Regular Polygons | Scott Vorthmann | Observable"}] 31:T9c0,{ const { w=285, h=285, minX=-111, minY=-15, stroke="black", strokeWidth="2" } = {} const svg = DOM.svg( w, h ) const container = d3.select(svg) .attr( "viewBox", minX+" "+minY+" "+w+" "+h ) .append( "g" ) drawPolygon( container, ring.vertices ) drawDiagonal( container, 3, 2 ) .attr( "stroke", "blue" ) drawDiagonal( container, 2, 4 ) .attr( "stroke", "green" ) drawDiagonal( container, 4, 1 ) .attr( "stroke", "blue" ) drawDiagonal( container, 1, 5 ) .attr( "stroke", "green" ) drawDiagonal( container, 5, 0 ) .attr( "stroke", "blue" ) drawDiagonal( container, 0, 6 ) .attr( "stroke", "green" ) drawDiagonal( container, 6, 12 ) .attr( "stroke", "blue" ) drawDiagonal( container, 12, 7 ) .attr( "stroke", "green" ) drawDiagonal( container, 7, 11 ) .attr( "stroke", "blue" ) drawDiagonal( container, 11, 8 ) .attr( "stroke", "green" ) drawDiagonal( container, 8, 10 ) .attr( "stroke", "blue" ) drawDiagonal( container, 10, 9 ) .attr( "stroke", "green" ) drawDiagonal( container, 0, 12 ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[1], diagonalIntersection( checkOverlap( 1, 11, 0, 5 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[2], diagonalIntersection( checkOverlap( 2, 10, 1, 4 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[3], diagonalIntersection( checkOverlap( 3, 9, 2, 4 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[4], diagonalIntersection( checkOverlap( 4, 8, 1, 5 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[5], diagonalIntersection( checkOverlap( 5, 7, 0, 6 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[7], diagonalIntersection( checkOverlap( 5, 7, 12, 6 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[8], diagonalIntersection( checkOverlap( 4, 8, 11, 7 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[9], diagonalIntersection( checkOverlap( 3, 9, 10, 8 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[10], diagonalIntersection( checkOverlap( 2, 10, 11, 8 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) drawPath( container, [ ring.vertices[11], diagonalIntersection( checkOverlap( 1, 11, 12, 7 ) ) ] .map( embed ) ) .attr( "stroke", "red" ) return svg }32:T4fe,{ const { w=285, h=285, minX=-111, minY=-15, stroke="black", strokeWidth="2" } = {} const svg = DOM.svg( w, h ) const container = d3.select(svg) .attr( "viewBox", minX+" "+minY+" "+w+" "+h ) .append( "g" ) // labelVertices( container ) drawPolygon( container, ring.vertices ) const ry_overlap = checkOverlap( y1, y2, r1, r2 ) const ry = ry_overlap && ! ry_overlap.commonVertex && diagonalIntersection( ry_overlap ) const yb_overlap = checkOverlap( b1, b2, y1, y2 ) const yb = yb_overlap && ! yb_overlap.commonVertex && diagonalIntersection( yb_overlap ) const br_overlap = checkOverlap( r1, r2, b1, b2 ) const br = br_overlap && ! br_overlap.commonVertex && diagonalIntersection( br_overlap ) if ( ry && yb && br ) { const tri = vertexTriangle( ry_overlap, yb_overlap.a[0], yb_overlap.a[1] ) drawPolygon( container, tri ) .attr( "fill", "#cccccc" ) .attr( "stroke", "none" ) drawPolygon( container, [ ry, yb, br ] ) .attr( "fill", "#aaaaaa" ) .attr( "stroke", "none" ) } drawDiagonal( container, r1, r2 ) .attr( "stroke", "red" ) drawDiagonal( container, y1, y2 ) .attr( "stroke", "yellow" ) drawDiagonal( container, b1, b2 ) .attr( "stroke", "blue" ) return svg }33:T51b,{ const { w=285, h=285, minX=-111, minY=-15, stroke="black", strokeWidth="2" } = {} const svg = DOM.svg( w, h ) const container = d3.select(svg) .attr( "viewBox", minX+" "+minY+" "+w+" "+h ) .append( "g" ) // labelVertices( container ) drawPolygon( container, ring.vertices ) const overlap = checkOverlap( y1, y2, r1, r2 ) const intersection = overlap && ! overlap.commonVertex && diagonalIntersection( overlap ) if ( intersection ) { const tri = vertexTriangle( overlap ) drawPolygon( container, tri ) .attr( "fill", "#cccccc" ) .attr( "stroke", "none" ) drawPolygon( container, [ intersection, ring.vertices[ overlap.b[0] ], ring.vertices[ overlap.a[1] ] ] ) .attr( "fill", "#aaaaaa" ) .attr( "stroke", "none" ) } drawDiagonal( container, r1, r2 ) .attr( "stroke", "red" ) drawDiagonal( container, y1, y2 ) .attr( "stroke", "yellow" ) if ( overlap ) { if ( overlap.commonVertex ) { const vertex = ring.vertices[ overlap.commonVertex ] drawCircle( container, vertex ) .attr( "fill", "orange" ) } else { drawDiagonal( container, overlap.b[0], overlap.a[1] ) .attr( "stroke", "blue" ) drawCircle( container, intersection ) .attr( "fill", "orange" ) } } return svg }34:T4d8,function checkOverlap( a1, a2, b1, b2 ) { // parameters represent diagonals a and b const a = canonicalDiagonal( a1, a2 ) if ( a === undefined ) return undefined const b = canonicalDiagonal( b1, b2 ) if ( b === undefined ) return undefined const [ c1, c2 ] = a const [ d1, d2 ] = b // No degenerate intersection if ( c1 == d1 && c2 == d2 ) return undefined // Intersection is a vertex if ( c2 == d1 || c2 == d2 ) return { commonVertex: c2 } if ( c1 == d2 || c1 == d1 ) return { commonVertex: c1 } // What's left: a and b overlap strictly // Check for non-crossing cases if ( c2 < d1 || d2 < c1 ) return undefined if ( c1 < d1 && c2 > d2 ) return undefined if ( c1 > d1 && c2 < d2 ) return undefined // Now we know we have a good intersection but in which order? const reversed = c1 < d1 const zone_a = ring.mod( c1 + c2 ) const zone_b = ring.mod( d1 + d2 ) const zone_diam = ring.mod( c2 + d1 ) const angle_a_b = ring.mod( zone_b - zone_a ) const angle_b_diam = ring.mod( zone_diam - zone_b ) const angle_diam_a = ring.mod( zone_a - zone_diam ) return { a, b, reversed, zone_b, zone_a, zone_diam, angle_a_b, angle_b_diam, angle_diam_a } }35:Ta92,md`The first section of code below contains an implementation of the triskaidecagon numbers, an algebraic *ring* derived from the diagonals of the triskaidecagram, as described in [Steinbach1997][1] and [Steinbach2000][3]. I use ${tex`\alpha`}, ${tex`\beta`}, ${tex`\gamma`}, ${tex`\delta`}, and ${tex`\epsilon`} for the diagonals of a unit-sided triskaidecagram, in order of increasing length. Any ring element has the form ${tex`a+b\alpha+c\beta+d\gamma+e\delta+f\epsilon`}, for some integers ${tex`a`}, ${tex`b`}, ${tex`c`}, ${tex`d`}, ${tex`e`}, and ${tex`f`}. Given the table of basic products and reciprocals below, I can scale any number or vector up or down by factors of ${tex`\alpha`}, ${tex`\beta`}, ${tex`\gamma`}, ${tex`\delta`}, and ${tex`\epsilon`}. With this ability, I don't require general division, so I can limit my coefficients to integers rather than rationals. This is why the algebraic structure is a ring rather than a field. | | ${tex`*\alpha`} | ${tex`*\beta`} | ${tex`*\gamma`} | ${tex`*\delta`} | ${tex`*\epsilon`} | ${tex`1/`} | |:---|:---|:---|:---|:---|:---| | ${tex`\alpha`} | ${tex`\alpha\alpha=1+\beta`} | ${tex`\alpha\beta=\alpha+\gamma`} | ${tex`\alpha\gamma=\beta+\delta`} | ${tex`\alpha\delta=\gamma+\epsilon`} | ${tex`\alpha\epsilon=\delta+\epsilon`} | ${tex`1/\alpha=\alpha+\beta+\epsilon-\delta-\gamma-1`}| | ${tex`\beta`} | | ${tex`\beta\beta=1+\beta+\delta`} | ${tex`\beta\gamma=\alpha+\gamma+\epsilon`} | ${tex`\beta\delta=\beta+\delta+\epsilon`} | ${tex`\beta\epsilon=\gamma+\delta+\epsilon`} | ${tex`1/\beta=\beta+\gamma-\alpha-\delta`}| | ${tex`\gamma`} | | | ${tex`\gamma\gamma=1+\beta+\delta+\epsilon`} | ${tex`\gamma\delta=\alpha+\gamma+\delta+\epsilon`} | ${tex`\gamma\epsilon=\beta+\gamma+\delta+\epsilon`} | ${tex`1/\gamma=1+\gamma-\epsilon`}| | ${tex`\delta`} | | | | ${tex`\delta\delta=1+\beta+\gamma+\delta+\epsilon`} | ${tex`\delta\epsilon=\alpha+\beta+\gamma+\delta+\epsilon`} | ${tex`1/\delta=\delta+\gamma-1-\alpha-\epsilon`}| | ${tex`\epsilon`} | | | | | ${tex`\epsilon\epsilon=1+\alpha+\beta+\gamma+\delta+\epsilon`} | ${tex`1/\epsilon=\epsilon-\delta`}| All of these products and quotients can be derived using basic geometry, by considering various similar triangles in the triskaidecagon and inscribed triskaidecagrams. I've explained the technique in more detail with respect to the [heptagon field][2]. [1]: https://www.jstor.org/stable/2691048?seq=1#page_scan_tab_contents [2]: http://nbviewer.ipython.org/github/vorth/ipython/blob/master/heptagons/HeptagonNumbers.ipynb [3]: https://archive.bridgesmathart.org/2000/bridges2000-35.html `36:Td20,triskaidecagonRing = { const order = 13 const zero = [0,0,0,0,0,0] const one = [1,0,0,0,0,0] const reals = i => Math.sin( i * Math.PI / order ) / Math.sin( Math.PI / order ) const embed = function( x ) { return x .reduce( (acc, xi, i) => acc + reals( i+1 ) * xi, 0 ) } const timesAlpha = function( x ) { const [ a=0, b=0, c=0, d=0, e=0, f=0 ] = x return [ b, a+c, b+d, e+c, f+d, e+f ] } const timesBeta = function( x ) { const [ a=0, b=0, c=0, d=0, e=0, f=0 ] = x return [ c, b+d, a+c+e, b+d+f, e+c+f, e+d+f ] } const timesGamma = function( x ) { const [ ones=0, alpha=0, beta=0, gamma=0, delta=0, epsilon=0 ] = x return [ gamma, beta+delta, alpha+gamma+epsilon, beta+delta+ones+epsilon, alpha+gamma+epsilon+delta, beta+delta+gamma+epsilon ] } const timesDelta = function( x ) { const [ a=0, b=0, c=0, d=0, e=0, f=0 ] = x return [ e, d+f, c+e+f, b+d+e+f, a+c+d+e+f, b+c+d+e+f ] } const timesEpsilon = function( x ) { const [ a=0, b=0, c=0, d=0, e=0, f=0 ] = x return [ f, e+f, d+e+f, c+d+e+f, b+c+d+e+f, a+b+c+d+e+f ] } const times = function( x, y ) { if ( y instanceof Array ) { const [ a=0, b=0, c=0, d=0, e=0, f=0 ] = y return [ times( x, a ), times( timesAlpha( x ), b ), times( timesBeta( x ), c ), times( timesGamma( x ), d ), times( timesDelta( x ), e ), times( timesEpsilon( x ), f ) ] .reduce( (acc, v) => plus( acc, v ), zero ) } else if ( typeof y === "number" ) { return x .map( (xi=0) => xi * y ) } else { throw new TypeError( 'Argument to "times" is not a number or Array' ); } } const mod = function( x ) { const rem = x % order return (rem < 0)? (rem+order) : rem } const alpha = timesAlpha( one ) const beta = timesBeta( one ) const gamma = timesGamma( one ) const delta = timesDelta( one ) const epsilon = timesEpsilon( one ) const diagonals = [ zero, one, alpha, beta, gamma, delta, epsilon, epsilon, delta, gamma, beta, alpha, one ] const inverses = [ , one, [ -1, 1, 1, -1, -1, 1 ], [ 0, -1, 1, 1, -1, 0 ], [ 1, 0, 0, 1, 0, -1 ], [ -1, -1, 0, 1, 1, -1 ], [ 0, 0, 0, 0, -1, 1 ], [ 0, 0, 0, 0, -1, 1 ], [ -1, -1, 0, 1, 1, -1 ], [ 1, 0, 0, 1, 0, -1 ], [ 0, -1, 1, 1, -1, 0 ], [ -1, 1, 1, -1, -1, 1 ], one ] const A = Math.sin( (6.0/13.0) * Math.PI ) const B = 2 * embed( diagonals[ 6 ] ) const embedv = function( v ) { const [ x, y ] = v .map( embed ) // return [ x, y ] return [ x + y / B, A * y ] } const vertices = [ [ zero, zero ], [ neg( delta ), alpha ], [ neg( plus( beta, delta ) ), plus( alpha, gamma ) ], [ neg( plus( plus( one, beta ), delta ) ), timesGamma( beta ) ], [ neg( plus( beta, delta ) ), timesGamma( delta ) ], [ neg( delta ), timesEpsilon( delta ) ], [ zero, timesEpsilon( epsilon ) ], [ epsilon, timesEpsilon( delta ) ], [ plus( gamma, epsilon ), timesGamma( delta ) ], [ timesGamma( beta ), timesGamma( beta ) ], [ timesGamma( beta ), plus( gamma, alpha ) ], [ plus( gamma, epsilon ), alpha ], [ epsilon, zero ] ] return { order, mod, zero, one, times, reals, diagonals, inverses, embed, embedv, vertices } }37:[] 2f:{"id":"51d53865a3a71439","slug":"regular-polygon-algebra-geometry","title":"The Algebra and Geometry of Regular Polygons","thumbnail":"ecb28c7ec4a1446763a132b2352f2fe75ec8fb8362cf7685e941561f93e77d1c","access_level":"public","create_time":"$D2018-05-19T15:09:16.642Z","update_time":"$D2019-12-24T06:25:45.743Z","view_time":null,"first_public_time":"$D2019-04-06T20:30:22.854Z","fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"bd8d3517f25bb386","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":"starter_2024"},"version":1814,"publish_version":1814,"role":null,"authored":false,"authors":[{"type":"individual","id":"c80882137d4e42a5","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":null}],"members":[{"type":"individual","id":"c80882137d4e42a5","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"The Algebra and Geometry of Regular Polygons","cells":[{"id":0,"value":"md`# The Algebra and Geometry of Regular Polygons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"md`\nRegular polygons are full of symmetry, and this generates a plethora of\ngeometrical results that are easy to prove. This notebook explores\nthe geometry of a regular polygon of N sides, where N is odd.\n\n(THIS NOTEBOOK IS A WORK-IN-PROGRESS! I have added a minimum of explanatory\nprose, but much more is needed.)\n\nWe start by considering the regular 13-sided polygon, also known as\nthe triskaidecagon, and all of its interior diagonals (line segments\nconnecting two vertices of the polygon):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1482,"value":"{\n const { w=285, h=285, minX=-111, minY=-15, stroke=\"black\", strokeWidth=\"2\" } = {}\n const svg = DOM.svg( w, h )\n\n const container = d3.select(svg)\n .attr( \"viewBox\", minX+\" \"+minY+\" \"+w+\" \"+h )\n .append( \"g\" )\n\n for ( var i = 0; i < ring.order/2; i++ ) {\n for ( var j = 0; j < ring.order; j++ ) {\n const color = d3.interpolateRainbow( i / (ring.order-3) )\n drawDiagonal( container, ring.mod( i+j ), ring.mod( ring.order-i+j ) )\n .attr( \"stroke\", color )\n }\n }\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1598,"value":"md`\nThe first thing to notice about the figure above is that the diagonals\ncan be organized into families by their lengths, shown here with each\nfamily in a different color.\n\nThe second thing to notice is that the diagonals can be organized into\nfamilies of parallel lines.\nMove the slider below to adjust the endpoint of the ${colorWord(\"red\")} diagonal,\nand simultaneously adjust all the parallel ${colorWord(\"green\")} diagonals.\n\nNote that *every* diagonal is parallel to one of the edges of the polygon\n(drawn in ${colorWord(\"blue\")}),\nso there are exactly 13 sets of parallel diagonals.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"viewof n3 = slider({\n min: 1, \n max: ring.order - 1, \n step: 1, \n value: 3, \n title: \"diagonal\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"{\n const { w=285, h=285, minX=-111, minY=-15, stroke=\"black\", strokeWidth=\"2\" } = {}\n const svg = DOM.svg( w, h )\n\n const container = d3.select(svg)\n .attr( \"viewBox\", minX+\" \"+minY+\" \"+w+\" \"+h )\n .append( \"g\" )\n\n //labelVertices( container )\n drawPolygon( container, ring.vertices )\n // drawDiagonalsFrom( container, 0 )\n\n for ( var i = 0; i < ring.order; i++ ) {\n const j = ring.mod( n3-i )\n const line = drawDiagonal( container, i, j ) .attr( \"stroke\", \"green\" )\n if ( i-j == 1 ) {\n line .attr( \"stroke\", \"blue\" ) .attr( \"stroke-width\", \"3\" )\n }\n }\n \n drawDiagonal( container, 0, n3 ) .attr( \"stroke\", \"red\" )\n .attr( \"stroke-width\", \"3\" )\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"md`\nNow, let's look at angles. In the figure below, clearly the ${colorWord(\"blue\")} \ndiagonals are all parallel, as are the ${colorWord(\"green\")} diagonals and ${colorWord(\"red\")} line segments.\nThis immediately implies that all of the ${colorWord(\"red\")}-${colorWord(\"green\")}-${colorWord(\"blue\")} triangles are similar,\nand all the ${colorWord(\"blue\")} ${colorWord(\"green\")} angles are congruent.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1485,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"md`\nWe can rearrange those same triangles into the figure below,\nwhich makes it very clear that the angle between any two\nadjacent diagonals at a vertex is always ${tex`\\pi`}/13.\n\nThis implies the angle between any two diagonals is\nan integer multiple of ${tex`\\pi`}/13. It also means we can\nuse those integer multiples to represent the angles;\nthis becomes very useful when we write code to generate\nsuch figures.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1581,"value":"{\n const { w=285, h=285, minX=-111, minY=-15, stroke=\"black\", strokeWidth=\"2\" } = {}\n const svg = DOM.svg( w, h )\n\n const container = d3.select(svg)\n .attr( \"viewBox\", minX+\" \"+minY+\" \"+w+\" \"+h )\n .append( \"g\" )\n\n drawPolygon( container, ring.vertices )\n\n for ( var i=0; i < ring.order; i++ )\n drawDiagonal( container, i, 6 ) .attr( \"stroke\", \"blue\" )\n\n drawDiagonal( container, 0, 12 ) .attr( \"stroke\", \"red\" )\n for ( var i=1; i < ring.order/2; i++ )\n drawPath( container, [ ring.vertices[i], diagonalIntersection( checkOverlap( i, 12, i-1, 6 ) ) ] .map( embed ) )\n .attr( \"stroke\", \"red\" )\n for ( var i=7; i < ring.order-1; i++ )\n drawPath( container, [ ring.vertices[i], diagonalIntersection( checkOverlap( i, 0, i+1, 6 ) ) ] .map( embed ) )\n .attr( \"stroke\", \"red\" )\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"md`\nWhen we organize the diagonals by length (all the diagonals with\nthe same color in the first figure), we can also associate a particular\nangle with each diagonal, and therefore a particular integer.\nYou can explore this by adjusting the start vertex and the angle\nfor the figure below.\nNotice that the shape of the triangle changes as you adjust\nthe start vertex, but the ${colorWord(\"blue\")}-${colorWord(\"purple\")} angle and the ${colorWord(\"red\")}\ndiagonal length both remain fixed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1286,"value":"viewof start = slider({\n min: 1, \n max: ring.order - 1, \n step: 1,\n value: 2, \n title: \"start\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"viewof angle = slider({\n min: 1, \n max: ring.order - 2, \n step: 1, \n value: 1, \n title: \"angle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"{\n const { w=285, h=285, minX=-111, minY=-15, stroke=\"black\", strokeWidth=\"2\" } = {}\n const svg = DOM.svg( w, h )\n\n const container = d3.select(svg)\n .attr( \"viewBox\", minX+\" \"+minY+\" \"+w+\" \"+h )\n .append( \"g\" )\n\n //labelVertices( container )\n drawPolygon( container, ring.vertices )\n drawDiagonalsFrom( container, 0 )\n \n const end = Math.min( start+angle, ring.order-1 )\n \n drawDiagonal( container, 0, start ) .attr( \"stroke\", \"blue\" )\n drawDiagonal( container, 0, end ) .attr( \"stroke\", \"purple\" )\n drawDiagonal( container, start, end ) .attr( \"stroke\", \"red\" )\n .attr( \"stroke-width\", \"4\" )\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"md`\nTaken together, all of the facts above together imply that there are a small,\nfinite number of different triangle shapes that appear in the original figure \nwith all diagonals. For each shape, there are a large number of similar triangles\nidentifiable in that figure.\n\nIt is also easy to see that every triangle shape family is represented by 13 triangles\nwhose vertices lie on the original polygon vertices.\nTry adjusting the endpoint vertices of the ${colorWord(\"red\")}, ${colorWord(\"yellow\")}, and ${colorWord(\"blue\")} diagonals\nin the figure below.\nThe controls for ${colorWord(\"red\")} and ${colorWord(\"yellow\")} are below the figure.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"viewof b1 = slider({\n min: 0, \n max: ring.order - 1, \n step: 1, \n value: 4, \n title: \"blue 1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"viewof b2 = slider({\n min: 0, \n max: ring.order - 1, \n step: 1, \n value: 10, \n title: \"blue 2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"md`\nWe can use proportions derived from triangle similarity to compute\nintersections of diagonals.\n\nMORE HERE\n\nUse the controls for red and yellow diagonal endpoints to see how\nthis works.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"viewof r1 = slider({\n min: 0, \n max: ring.order - 1, \n step: 1, \n value: 2, \n title: \"red 1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"viewof r2 = slider({\n min: 0, \n max: ring.order - 1, \n step: 1, \n value: 8, \n title: \"red 2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"viewof y1 = slider({\n min: 0, \n max: ring.order - 1, \n step: 1, \n value: 6, \n title: \"yellow 1\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"viewof y2 = slider({\n min: 0, \n max: ring.order - 1, \n step: 1, \n value: 12, \n title: \"yellow 2\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"viewof n2 = slider({\n min: 0, \n max: ring.order, \n step: 1, \n value: 4, \n title: \"steps\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"viewof n1 = slider({\n min: 1, \n max: Math.floor( ring.order/2 ), \n step: 1, \n value: 1, \n title: \"base diagonal\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"{\n const { w=285, h=285, minX=-111, minY=-15, stroke=\"black\", strokeWidth=\"2\" } = {}\n const svg = DOM.svg( w, h )\n\n const container = d3.select(svg)\n .attr( \"viewBox\", minX+\" \"+minY+\" \"+w+\" \"+h )\n .append( \"g\" )\n\n // labelVertices( container )\n drawPolygon( container, ring.vertices )\n\n const arc = innerNgonPath( n1, n2 ) .map( embed )\n drawPath( container, arc )\n .attr( \"stroke\", \"orange\" )\n .attr( \"stroke-width\", \"3\" )\n drawDiagonalsFrom( container, 0, \"red\" )\n drawDiagonalsFrom( container, n1, \"green\" )\n\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1421,"value":"{\n const { w=285, h=285, minX=-111, minY=-15, stroke=\"black\", strokeWidth=\"2\" } = {}\n const svg = DOM.svg( w, h )\n\n const container = d3.select(svg)\n .attr( \"viewBox\", minX+\" \"+minY+\" \"+w+\" \"+h )\n .append( \"g\" )\n\n // labelVertices( container )\n drawPolygon( container, ring.vertices )\n\n for ( var i=0; i < 10; i++ )\n drawPath( container, innerNgonPathReverse( i, 9 ) .map( embed ) )\n .attr( \"stroke\", \"green\" )\n .attr( \"stroke-width\", \"2\" )\n\n for ( var i=1; i < 4; i++ )\n drawPath( container, innerNgonPath( i, 9 ) .map( embed ) )\n .attr( \"stroke\", \"navy\" )\n .attr( \"stroke-width\", \"2\" )\n\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1699,"value":"{\n // a V-shaped function, for a loop through the color interpolation\n const v = (x,min) => Math.abs( x - 0.5 ) + min\n \n const { w=285, h=285, minX=-111, minY=-15, stroke=\"black\", strokeWidth=\"2\" } = {}\n const svg = DOM.svg( w, h )\n\n const container = d3.select(svg)\n .attr( \"viewBox\", minX+\" \"+minY+\" \"+w+\" \"+h )\n .append( \"g\" )\n \n // Mostly for debugging the viewBox\n container.append(\"rect\")\n .attr( \"x\", minX ) .attr( \"y\", minY )\n .attr( \"width\", w ) .attr( \"height\", h );\n\n const loop = [ [1,3], [2,7], [3,9], [4,13], [11,14] ]\n // const loop = [ [10,12], [11,1], [7,12], [9,3], [6,10] ] // simpler loop\n for ( var j = 0; j < ring.order; j++ ) {\n const color = d3.interpolateViridis( v( (j+2)%ring.order / ring.order, 0.4 ) )\n const points = loopPoints( loop, j, ring.order )\n drawPolygon( container, points ) .attr( \"stroke\", color )\n .attr( \"stroke-width\", \"2\" ) }\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1621,"value":"md`\n## Geometry Code\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"function vertexTriangle( overlap, v1=overlap.b[0], v2= overlap.a[1] ) {\n if ( ! overlap || overlap.commonVertex )\n return undefined\n\n const d = v1+v2 - overlap.angle_a_b\n const p1 = ring.mod( ( d%2==0 )? d/2 : (d+ring.order)/2 )\n const p2 = ring.mod( p1 + overlap.angle_a_b )\n const p3 = ring.mod( p2 + overlap.angle_diam_a )\n return [ p1, p2, p3 ] .map( i => ring.vertices[ i ] )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"function canonicalDiagonal( v1, v2 ) {\n if ( v1 === v2 )\n return undefined\n return ( v1 < v2 )? [ v1, v2 ] : [ v2, v1 ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"function diagonalIntersection( overlap ) {\n if ( ! overlap )\n return undefined\n\n if ( overlap.commonVertex != undefined )\n return ring.vertices[ overlap.commonVertex ]\n \n const ratio = ring.times( ring.diagonals[ overlap.angle_diam_a ], ring.inverses[ overlap.angle_a_b ] )\n const diff = ring.mod( overlap.a[1] - overlap.b[0] )\n const ax_len = ring.times( ratio, ring.diagonals[ diff ] )\n const vertex_b1 = ring.vertices[ overlap.b[0] ]\n const vertex_b2 = ring.vertices[ overlap.b[1] ]\n const b_vector = vminus( vertex_b2, vertex_b1 )\n const ratio2 = ring.times( ax_len, ring.inverses[ overlap.b[1] - overlap.b[0] ] )\n return vplus( vertex_b1, b_vector .map( vi => ring.times( ratio2, vi ) ) )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"innerNgonPath = function( baseDiagonal, steps ) {\n const points = [ ring.vertices[ 0 ] ];\n for ( var j = 0; j <= steps; j++ ) {\n const overlap = checkOverlap( 0, baseDiagonal + steps - j, baseDiagonal, (ring.order-1)-j )\n if ( overlap )\n points .push( diagonalIntersection( overlap ) )\n }\n return points\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"innerNgonPathReverse = function( baseDiagonal, steps ) {\n const points = [ ring.vertices[ 0 ] ];\n for ( var j = 0; j <= steps; j++ ) {\n const overlap = checkOverlap( 0, j + steps - baseDiagonal, j, (ring.order-1)-baseDiagonal )\n if ( overlap )\n points .push( diagonalIntersection( overlap ) )\n }\n return points\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"function loopPoints( loop, offset, N ) {\n const points = []\n const n = loop.length\n for ( var i = 0; i < n; i++ ) {\n let [ a, b ] = loop[ i ]\n let [ c, d ] = loop[ (i+1)%n ]\n a = ( a + offset ) % N\n b = ( b + offset ) % N\n c = ( c + offset ) % N\n d = ( d + offset ) % N\n points .push( diagonalIntersection( checkOverlap( a, b, c ,d ) ) )\n }\n return points\n}\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md`## Drawing Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"function colorWord( name ) {\n return html`${name}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"scale = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"function drawPolygon( container, points ) {\n const vertices = points .map( embed )\n return container .append(\"polygon\")\n .attr( \"points\", vertices .map( d => d.join(\",\") ).join(\" \") ) \n .attr( \"fill\", \"none\" )\n .attr( \"stroke\", \"black\" )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"function embed( point ) {\n return ring.embedv( point ) .map( x => x * scale )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"function labelVertices( container ) {\n ring.vertices .map( embed ) .map( (vi,i) => {\n container .append( \"text\" )\n .attr( \"x\", vi[0] )\n .attr( \"y\", vi[1] )\n .text( i )\n .attr( \"font-family\", \"sans-serif\" )\n .attr( \"font-size\", \"16px\" )\n .attr( \"fill\", \"blue\" );\n } )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"function drawDiagonal( container, a, b ) {\n const [ x1, y1 ] = embed( ring.vertices[ a ] )\n const [ x2, y2 ] = embed( ring.vertices[ b ] )\n return container .append(\"line\")\n .attr( \"stroke-width\", \"2\" )\n .attr( \"stroke\", \"black\" )\n .attr( \"x1\", x1 )\n .attr( \"y1\", y1 )\n .attr( \"x2\", x2 )\n .attr( \"y2\", y2 )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1318,"value":"function drawDiagonalsFrom( container, start, color=\"black\", width=\"0.5\" ) {\n for (var i = 0; i < ring.order; i++) {\n drawDiagonal( container, start, ring.mod( start + i + 1 ) )\n .attr( \"stroke-width\", width )\n .attr( \"stroke\", color )\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"function drawCircle( container, c ) {\n const [ cx, cy ] = embed( c )\n return container .append(\"circle\")\n .attr( \"r\", \"8\" )\n .attr( \"cx\", cx )\n .attr( \"cy\", cy )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"function drawPath( container, points ) {\n const lineFunction = d3.line()\n .x(function(d) { return d[0]; })\n .y(function(d) { return d[1]; })\n return container.append(\"path\")\n .attr(\"d\", lineFunction( points ) )\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"none\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`My approach here consciously adopts a couple of constraints. First, I compute everything with exact arithmetic, using integers rather than floating point numbers. Second, I compute intersection points by applying proportions, rather than by intersecting lines.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Triskaidecagon Numbers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"equals = function( a1, a2 ){\n return a1.every((value=0, index) => value === (a2[index]||0))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"neg = x => x .map( xi => -xi )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"plus = function( x, y ) {\n return x .map( ( xi=0, i ) => xi + ( y[i] || 0 ) )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"minus = function( x, y ) {\n return x .map( ( xi=0, i ) => xi - ( y[i] || 0 ) );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"vplus = function( v1, v2 ) {\n return v1 .map( ( vi=[0], i ) => plus( vi, ( v2[i] || [0] ) ) )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"vminus = function( v1, v2 ) {\n return v1 .map( ( vi=[0], i ) => minus( vi, ( v2[i] || [0] ) ) )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"vneg = v => v .map( (vi=[0]) => neg( vi ) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"ring = triskaidecagonRing","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"alpha = triskaidecagonRing .diagonals[ 2 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"beta = triskaidecagonRing .diagonals[ 3 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"gamma = triskaidecagonRing .diagonals[ 4 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"delta = triskaidecagonRing .diagonals[ 5 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"epsilon = triskaidecagonRing .diagonals[ 6 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"ring.embed( epsilon )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"equals( alpha, [,1] )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"equals( beta, [,,1] )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"equals( delta, [,,,,1] )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"equals( triskaidecagonRing.times( triskaidecagonRing.one, triskaidecagonRing.inverses[ 2 ] ), [-1,1,1,-1,-1,1] )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"equals( triskaidecagonRing.times( alpha, triskaidecagonRing.inverses[ 2 ] ), triskaidecagonRing.one )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"equals( triskaidecagonRing.times( epsilon, triskaidecagonRing.inverses[ 6 ] ), triskaidecagonRing.one )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"equals( plus( gamma, plus( delta, epsilon ) ), triskaidecagonRing.times( epsilon, beta ) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`## Vectors and Rendering\n\nThe next section of code is a simple implementation of two-dimensional vectors over the triskaidecagon numbers. The only noteworthy point here is the render function, which does two things. First, it converts the coordinate triskaidecagon numbers to real numbers. Next, it performs a skew transformation to map from the initial coordinate frame to the frame I need to use for drawing. These coordinate frames are different because the first one allows a simple encoding of the triskaidecagon vertices, using a frame aligned with a diagonal of the triskaidecagon. This simplifies all the later computations based on these vertices. The only cost is to perform the skew transformation when it is time to render to the screen.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"