25:["$","title",null,{"children":"059 Lazy polygons | Saneef H. Ansari | Observable"}] 4b:T425,function drawPolygonBySide({ cx = 0, cy = 0, side, fill = "none", edges = 3, rotate = 0, stroke = `hsl(0, 0%, 5%)`, strokeWidth = 1, rotateToFirstEdge = false, alignY, v, t = 0, shouldRotate360deg } = {}) { edges = Math.max(3, edges); const segmentAngle = (Math.PI * 2) / edges; const r = side2r(side, segmentAngle); const animationAngle = shouldRotate360deg ? Math.PI * 2 : segmentAngle; let dTheta = t * animationAngle + rotate - Math.PI / 2; if (rotateToFirstEdge) { dTheta = dTheta + segmentAngle / 2; } const innerR = r2innerR(r, segmentAngle); const dy = v * (alignY - innerR); const points = d3.range(edges).reduce((acc, i) => { const angle = i * segmentAngle + dTheta; const x = cx + r * Math.cos(angle); const y = cy + r * Math.sin(angle) + dy; return [...acc, [x, y]]; }, []); const shape = htl.svg``; return Object.assign(shape, { r }); }4c:[] 47:{"id":"d4b47ece0df2aa7e","slug":"059-lazy-polygons","title":"059 Lazy polygons","thumbnail":"b28fcab0ae5a7e8a13e37dcfeb8be97e219a4e07ed91f6eefd1e154bc96c8b4b","access_level":"public","create_time":"$D2022-10-17T11:12:55.092Z","update_time":"$D2022-11-12T17:41:09.402Z","view_time":null,"first_public_time":"$D2022-10-20T20:39:00.340Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024","bio":"Consultant Designer & Developer","followed_by_you":false,"follows_you":false},"version":658,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"bio":"Consultant Designer & Developer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"titling":"auto","title":"059 Lazy polygons","cells":[{"id":0,"value":"# 059 Lazy polygons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"viewof frame = Scrubber(d3.range(totalFrames))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"viewof shouldRotate360deg = Inputs.toggle({\n label: \"Rotate 360°\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof polygons = Inputs.range([1, 30], {\n label: \"Polygons\",\n step: 1,\n value: 7\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"viewof rotate = Inputs.range([0, 360], {\n label: \"Rotate all polygons\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"viewof v = Inputs.range([0, 1], {\n label: \"Shift polygons off centre\",\n step: 0.01,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"viewof strokeUV = Inputs.range([0, 1], {\n label: \"Stroke\",\n step: 0.01,\n value: 1 / 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"viewof marginUV = Inputs.range([0, 1], {\n label: \"Margin\",\n step: 0.01,\n value: 0.4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"viewof duration = Inputs.range([1, 10], {\n label: md`Duration _(seconds)_`,\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"## Notes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"I was trying to replicate an animation I saw on [an Apple Music Playlist cover](https://music.apple.com/in/playlist/immersive-gaming/pl.94e6d58e06ea47a4818bab7f39dd0c9f). It seemed simple. But, for me, the maths behind this took a while. The outermost shape is drawn by drawing a polygon of a given radius with N vertices ([`drawPolygonByRadius`](#drawPolygonByRadius)). But, the inner polygons I need to draw by side ([`drawPolygonBySide`](drawPolygonBySide)). In this case, use the side of the outermost polygon, Then, align and rotate to the outer polygon.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":607,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"t = frame / (totalFrames - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"totalFrames = 60 * duration","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"function delayedT(t, n = 1, maxN = 1) {\n const dt = 1 / maxN;\n\n let u = math.mapRange(\n t,\n ((n - 1) * dt) / 4,\n // 1 - dt,\n 1 - ((maxN - n) * dt) / 2,\n 0,\n 1,\n true\n );\n u = eases.quadOut(u);\n return u;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"function drawShapes({\n polygons,\n cx,\n cy,\n r,\n fill,\n strokeWidth,\n rotate = 0,\n stroke,\n t,\n shouldRotate360deg\n} = {}) {\n polygons = Math.max(polygons, 1);\n const maxEdges = polygons + 2;\n const outershape = drawPolygonByRadius({\n cx,\n cy,\n r,\n fill,\n stroke,\n strokeWidth,\n rotate: rotate,\n edges: maxEdges,\n rotateToFirstEdge: maxEdges % 2 == 0,\n t: delayedT(t, polygons, polygons),\n shouldRotate360deg\n });\n let shapes = [outershape];\n const { side, rMin } = outershape;\n\n shapes = [\n ...shapes,\n ...d3.range(polygons - 1, 0, -1).map((n) => {\n return drawPolygonBySide({\n edges: n + 2,\n cx,\n cy,\n strokeWidth,\n stroke,\n rotate: rotate,\n rotateToFirstEdge: n % 2 === 0,\n side,\n fill,\n alignY: rMin,\n v,\n t: delayedT(t, n, polygons),\n shouldRotate360deg\n });\n })\n ];\n return shapes;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"d3.range(4, 0, -1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"strokeWidth = 1 + strokeUV * 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"side2r(320, (2 * Math.PI) / 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"function side2r(side, angle) {\n const opp = side / 2;\n const theta = angle / 2;\n return opp / Math.sin(theta);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"function r2side(r, angle) {\n const theta = angle / 2;\n return 2 * Math.sin(theta) * r;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"function r2innerR(r, angle) {\n const theta = angle / 2;\n return Math.cos(theta) * r;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function drawPolygonByRadius({\n cx,\n cy,\n r,\n fill = \"none\",\n edges = 3,\n rotate = 0,\n stroke = `hsl(0, 0%, 5%)`,\n strokeWidth = 1,\n rotateToFirstEdge = false,\n t = 0,\n shouldRotate360deg\n} = {}) {\n edges = Math.max(3, edges);\n const segmentAngle = (Math.PI * 2) / edges;\n const animationAngle = shouldRotate360deg ? Math.PI * 2 : segmentAngle;\n let dTheta = t * animationAngle + rotate - Math.PI / 2;\n\n if (rotateToFirstEdge) {\n dTheta = dTheta + segmentAngle / 2;\n }\n\n const points = d3.range(edges).reduce((acc, i) => {\n const angle = i * segmentAngle + dTheta;\n const x = cx + r * Math.cos(angle);\n const y = cy + r * Math.sin(angle);\n\n return [...acc, [x, y]];\n }, []);\n\n const shape = htl.svg``;\n const side = r2side(r, segmentAngle);\n const rMin = r2innerR(r, segmentAngle);\n return Object.assign(shape, { side, rMin });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3.range(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"w = width //Math.min(width, 600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"aspectRatio = 16 / 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"h = Math.floor(w / aspectRatio)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"maxSize = Math.min(w, h)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"margin = (marginUV * 2 * maxSize) / 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"size = maxSize - 2 * margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"marginX = (w - size) / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"marginY = (h - size) / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"palette = ({\n bg: \"hsl(33, 74%, 90%)\",\n fg: \"hsl(177, 100%, 34%)\" //\"hsl(29, 84%, 56%)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"import { CSMath as math, CSRandom as rand } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"eases = require(\"https://bundle.run/eases@1.0.8\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":604,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null