2b:null 2c:["$","title",null,{"children":"Repetitive rectangular-to-spiral patterns | Adam Jurczyk | Observable"}] 31:[] 2f:{"id":"3b5474b6ac36fe2c","slug":"repetitive-rectangular-to-spiral-patterns","title":"Repetitive rectangular-to-spiral patterns","thumbnail":"af0a2a6e0e633d00ab3a61bd6bb156ec06b2af8f096fa679a1ce9f9ddcca9a62","access_level":"public","create_time":"$D2021-02-12T09:52:08.898Z","update_time":"$D2021-03-04T15:26:23.533Z","view_time":null,"first_public_time":"$D2021-03-04T15:26:31.785Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024"},"version":324,"publish_version":324,"role":null,"authored":false,"authors":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null}],"members":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Repetitive rectangular-to-spiral patterns","cells":[{"id":0,"value":"md`# Repetitive rectangular-to-spiral patterns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"md`### Rotated and scaled squares\n\nEach inner square is rotated with given angle offset, and scaled so that it fits outer square. This process repeates about dozen times for each next square combining all outer squares transformations.\n\nThis process creates this nice, spiral vanishing point effect.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"viewof size = Range([20, width], { value: 200, label: \"Size\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"viewof rotationOffset = Range([0, 45], { value: 6, label: \"Rotation offset\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"viewof flags = Checkbox([\"caleidoscope\"], { label: \"Caleidoscope\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"{\n const A = size;\n const N = Math.floor(width / A);\n const W = N * A;\n const scale = (rows, cols) =>\n flags.includes(\"caleidoscope\")\n ? `${1 - 2 * (rows % 2)},${1 - 2 * (cols % 2)}`\n : '1';\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"drawRects = a => {\n const angle = PI / 4 - degToRad(rotationOffset);\n const scale = 1 / (Math.sqrt(2) * Math.cos(angle));\n return Array.from({ length: 50 }, (_, i) => i).reduce(\n (acc, i) =>\n `\n ${acc}`\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"md`### Polygon with rotation hitting oposite wall\n\nStarts with square, than each next line is drawn with slight angle offset inward, from previous point, to point at oposite wall.\n\nThis leads to rectangular shape inside, that possibly could be avoided with different starting shape, instead of square.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"viewof rotationOffset2 = Range([0, 45], {\n value: 6,\n label: \"Rotation offset for poly\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"{\n const A = 600;\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"drawPoly = a => {\n const angle = degToRad(rotationOffset2);\n const points = [\n { x: a / 2, y: a / 2 },\n { x: -a / 2, y: a / 2 },\n { x: -a / 2, y: -a / 2 },\n { x: a / 2, y: -a / 2 },\n { x: a / 2, y: a / 2 }\n ];\n for (let i = 0; i < 1000; ++i) {\n const n = points.length;\n const pRot = rotatePointOverPoint(points[n - 1], points[n - 4], angle);\n const pN = intersectonOfTwoLines(\n points[n - 4],\n points[n - 3],\n pRot,\n points[n - 1]\n );\n if (!pN || !isPointBetweenPoints(pN, points[n - 4], points[n - 3])) break;\n points.push(pN);\n }\n const d = points.map(p => \"\" + p.x + \",\" + p.y).join(\" \");\n return ``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"md`## Lib`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":302,"value":"isPointBetweenPoints = (p, a, b) => {\n const pa = abDist(p, a);\n const pb = abDist(p, b);\n const ab = abDist(a, b);\n return pa + pb - ab < ab * 0.0001;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"abDist = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"intersectonOfTwoLines = (\n { x: x1, y: y1 },\n { x: x2, y: y2 },\n { x: x3, y: y3 },\n { x: x4, y: y4 }\n) => {\n const d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);\n if (d < Number.EPSILON) return null;\n const dx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4);\n const dy = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4);\n return {\n x: dx / d,\n y: dy / d\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"rotatePointOverPoint = (p0, p1, angle) => ({\n x: (p1.x - p0.x) * Math.cos(angle) - (p1.y - p0.y) * Math.sin(angle) + p0.x,\n y: (p1.x - p0.x) * Math.sin(angle) + (p1.y - p0.y) * Math.cos(angle) + p0.y\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"pointsDistance = ({x: x1, y: y1}, {x: x2, y: y2}) => Math.sqrt()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"degToRad = d => d * (PI / 180)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"radToDeg = r => r * (180 / PI)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"import { Checkbox, Range } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"