30:T8b9,md`A soccer ball pattern is made up of pentagons and hexagons. To create the soccer ball globe, we coded the vertices of the polygons as if they were geographic points with longitude and latitude. We started by considering an image of a soccer ball from Wikipedia: ${html`

By Watchduck (a.k.a. Tilman Piesk) - Own work, CC BY 4.0

`} In order to measure distances along the sphere, we assign variables to various features of the pentagon, hexagon, and sphere: ${html`

`} * ${tex`r`}: radius of the globe * ${tex`s`}: side of the pentagon (or hexagon - equivalent) * ${tex`t`}: apothem of the pentagon * ${tex`u`}: radius of the pentagon * ${tex`uh`}: apothem of the hexagon We can see that one meridian - from the north pole to the south pole - was equal to ${tex`3uh + s + 2(t + u)`}. **We defined ${tex`r = 1`} and made the following calculations to find ${tex`s`} in degrees:** ${tex` \pi r = 180^{\circ} = s(1 + 2\sqrt{3}+\sqrt{1+\frac{1}{tan^2 36^{\circ}}}+\frac{1}{tan36^{\circ}}) \newline 1 + 2\sqrt{3}+\sqrt{1+\frac{1}{tan^2 36^{\circ}}}+\frac{1}{tan36^{\circ}} = 7.54178 \newline s = \pi / 7.54178 = 0.41656 = 23.86702^{\circ} \newline`} **Then to find ${tex`t`}:** ${tex`tan36^{\circ} = \frac{s/2}{t} = \frac{s}{2t} \newline t = \frac{s}{2tan36^{\circ}} = 16.42507^{\circ} \newline`} **Then to find ${tex`u`}:** ${tex`sin36^{\circ} = \frac{s/2}{u} = \frac{s}{2u} \newline u = \frac{s}{2sin36^{\circ}} = 20.30251^{\circ} \newline`} `31:T44c,seamData = [ [ballData[0][0],ballData[4][4]], [ballData[0][1],ballData[10][4]], [ballData[0][2],ballData[1][2]], [ballData[0][3],ballData[6][0]], [ballData[0][4],ballData[2][0]], [ballData[1][0],ballData[11][3]], [ballData[1][1],ballData[10][3]], [ballData[1][3],ballData[6][1]], [ballData[1][4],ballData[7][1]], [ballData[2][1],ballData[6][4]], [ballData[2][2],ballData[3][2]], [ballData[2][3],ballData[8][0]], [ballData[2][4],ballData[4][0]], [ballData[3][0],ballData[7][3]], [ballData[3][1],ballData[6][3]], [ballData[3][3],ballData[8][1]], [ballData[3][4],ballData[9][1]], [ballData[4][1],ballData[8][4]], [ballData[4][2],ballData[5][2]], [ballData[4][3],ballData[10][0]], [ballData[5][0],ballData[9][3]], [ballData[5][1],ballData[8][3]], [ballData[5][3],ballData[10][1]], [ballData[5][4],ballData[11][1]], [ballData[6][2],ballData[7][2]], [ballData[7][0],ballData[11][4]], [ballData[7][4],ballData[9][0]], [ballData[8][2],ballData[9][2]], [ballData[9][4],ballData[11][0]], [ballData[10][2],ballData[11][2]], ]32:[] 2e:{"title":"Soccer Ball Globe","cells":[{"id":0,"value":"md`# Soccer Ball Globe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"globe = {\n const context = this ? this.getContext(\"2d\") : DOM.context2d(width, width);\n const path = d3.geoPath(projection, context);\n context.canvas.angle = context.canvas.angle || 0;\n while(true){\n projection.rotate([context.canvas.angle += 1, -17, 0])\n context.clearRect(0, 0, width, width);\n context.beginPath(), path(seam), context.strokeStyle = \"#ccc\", context.stroke();\n context.beginPath(), path(ball), context.fill();\n context.beginPath(), path({type: \"Sphere\"}), context.strokeStyle = \"#000\", context.stroke();\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"s = 180 / (1 + 2*Math.sqrt(3) + Math.sqrt(1 + 1/(Math.pow(Math.tan(rad(36)),2))) + 1/Math.tan(rad(36)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"t = s/(2*Math.tan(rad(36)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"u = s/(2*Math.sin(rad(36)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"uh = s*Math.sqrt(3)/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"md`To efficiently generate the coordinates of the vertices, we grouped them by the pentagon to which they belong. We grouped pentagons by the six \"columns\" in which they appear around the globe, evenly spaced every 60 degrees of longitude. Note that every other column is effectively an inversion of the ones before/after it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"ball = { return {\n \"type\": \"FeatureCollection\",\n \"features\": [\n {\n \"type\": \"Feature\",\n \"properties\": {},\n \"geometry\": {\n \"type\": \"MultiPolygon\",\n \"coordinates\": [ballData]\n }\n }\n ]\n}}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"ballData = generateBall()","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"function generateBall(){\n return [\n ...([180, 60, -60].map(d => generateColumn(d, 90 - uh - t))),\n ...([120, 0, -120].map(d => generateColumn(d, 90 - 3*uh - t)))\n ].reduce((t,v) => [...t,...v])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"//lat0 is the latitude of the center of the pentagon\nfunction generateColumn(meridian, lat0){\n return [\n generatePentagon(meridian, lat0, false),\n generatePentagon(meridian, lat0 - s - 2*u, true)\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"// @x, y: NUMERIC long/lat center of the pentagon\n// @up: BOOL is the point up (vs down)\nfunction generatePentagon(x,y,up){\n const i = up ? -1 : 1\n // adjust longitude offsets based on own latitude to keep distances equal at all latitudes\n // https://gis.stackexchange.com/questions/142326/calculating-longitude-length-in-miles\n const adj = y0 => 1/Math.cos(rad(y0))\n // calculate \"arms\" of the pentagon, 18 degrees from parallel to ground\n const cp = Math.cos(rad(18))*u\n const sp = Math.sin(rad(18))*u\n return [[\n x + 0.5*s * adj(y + i*t),\n y + i*t\n ],[\n x + cp * adj(y - i*sp), \n y - i*sp\n ],[\n x,\n y - i*u\n ],[\n x - cp * adj(y - i*sp), \n y - i*sp\n ],[\n x - 0.5*s * adj(y + i*t), \n y + i*t\n ],[\n x + 0.5*s * adj(y + i*t), \n y + i*t\n ]]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"md`We coded the \"seams\" - the edges of the soccer ball - by identifying the pairs of vertices that form each edge. We have not yet determined if there is a pattern, given the order in which we generated vertices, that could allow us to identify the pairs algorithmically.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"seam = { return {\n type: \"MultiLineString\",\n coordinates: seamData\n}}","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"projection = d3.geoOrthographic()\n .rotate([0, 0])\n .translate([width/2, width/2])\n .fitExtent([[5, 5], [width - 5, width - 5]], {type: \"Sphere\"})\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"rad = d => d*Math.PI/180","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"md`Created at \n![TWO-N](www.two-n.com/favicon.ico). Visit us [online](http://www.two-n.com), [@2nfo](http://twitter.com/2nfo), and [@2ngrams](http://instagram.com/2ngrams).`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}