31:T4a3,Penrose5 = { let points3 = d3.permute(triplePoint(sideLength * (1 + e1), [200, 200]), [ 0, 1, 2 ]); let view = html` `; yield view; }32:[] 2f:{"title":"Making Penrose Triangle","cells":[{"id":0,"value":"md`# Making Penrose Triangle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"html`\n

\n ${d3.range(1, 4).map(\n (_, i) => html`\n \n `\n )}\n \n \n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof sideLength = DOM.range(5, 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"md`\n\n---\n\n---\n\n---\n\n---\n\n---\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"pi = Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"sin60 = Math.sin(Math.PI / 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"cos60=Math.cos(Math.PI / 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"md`Almost...\n---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"PENROSE = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"md`**Breakdown: Inner Triangle**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"Penrose2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"function triplePoint(sideLength, centerPosition, parentNode) {\n var points,\n pi = Math.PI,\n cen = centerPosition,\n halfSide = sideLength / 2,\n // polygon = parentNode.append('polygon'),\n // Inner innerHypotenuse angle = 120, hyp = half side. Cos 120 * adjacent\n innerHypotenuse = halfSide * (1 / Math.cos((30 * pi) / 180));\n\n // SqRt(Hyp^2 - Adj^2) pythagoras\n let innerOpposite = halfSide * (1 / Math.tan((60 * pi) / 180));\n\n let leftVertex = [];\n let rightVertex = [];\n let topVertex = [];\n\n leftVertex[0] = cen[0] - halfSide;\n leftVertex[1] = cen[1] + innerOpposite;\n\n rightVertex[0] = cen[0] + halfSide;\n rightVertex[1] = cen[1] + innerOpposite;\n\n topVertex[0] = cen[0];\n topVertex[1] = cen[1] - innerHypotenuse;\n\n return [leftVertex, rightVertex, topVertex].reverse();\n // polygon.attr('points', points);\n // polygon.attr('fill', 'none').attr('stroke', 'black');\n // parentNode.appendChild(polygon);\n // return polygon;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"points1 = triplePoint(sideLength, [200, 200])","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"Penrose3 = html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"points2 = [[points1[2], points1[0]], ...d3.pairs(points1)].map(d =>\n getExtensionPoints(...d)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"line = (p1, p2) => {\n let m = (p2[1] - p1[1]) / (p2[0] - p1[0]);\n let b = -(m * p1[0] - p1[1]);\n return [m, b];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"getExtensionPoints = (p1, p2) => {\n let [m, b] = line(p1, p2);\n var x;\n if (m === 0) x = p2[0] - sideLength * e1;\n else {\n x = p2[0] + (sideLength * e1) / 2;\n }\n let y = m * x + b;\n return [x, y];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"points1[2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"getExtensionPoints([0, 0], [10, 10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"Math.cos(Math.PI * 0.3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"points3 = points2.map(x => {\n return [x[0] * Math.cos(Math.PI / 3), x[1] * Math.sin(Math.PI / 0.3)];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"50 * Math.cos(Math.PI / 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"Math.cos(Math.PI / 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"triplePoint(65, [200, 200])","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"Math.cos(232.5) + Math.sin(218.76)","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"{\n let p2 = 232.5,\n p1 = 167.5;\n return p2 - p1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"points2.map(x => Math.pow(x, 2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"weirdlength = sideLength * 1.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"e1","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"-0 == 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"getExtensionPoints([10, 10], [0, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"textPoint = getExtensionPoints(points1[0], points1[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"line(points1[2], points1[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"points1[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"triplePoint(sideLength + extension, [200, 200])","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"centerPosition = [200, 200]","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"innerHypotenuse = length => (length / 2) * (1 / Math.cos((30 * Math.PI) / 180))","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"innerOpposite = length => (length / 2) * (1 / Math.tan((60 * Math.PI) / 180))","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"innerHypotenuse(50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"leftVertex = length => [\n centerPosition[0] - sideLength / 2,\n centerPosition[1] + innerOpposite(length)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"rightVertex = length => [\n centerPosition[0] + sideLength / 2,\n centerPosition[1] + innerOpposite(length)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"//extension-factor\nviewof e1 = DOM.range(0, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"topVertex = length => [\n centerPosition[0],\n centerPosition[1] - innerHypotenuse(length)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"polygon = d3\n .select(DOM.svg(400, 400))\n .call(g =>\n g\n .selectAll('line')\n .data(points1)\n .join('line')\n .attr('x1')\n )\n .node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"Math.sqrt(Math.hypot(25 * 25 + 50 * 50))","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof extension = DOM.range(0, 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"Penrose = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}