2c:null 2d:["$","title",null,{"children":"030 Karel Martens’s Kinetic Work | Saneef H. Ansari | Observable"}] 32:[] 30:{"id":"a9dba198cc7f13b1","slug":"030-two-grid-of-dots","title":"030 Karel Martens’s Kinetic Work","thumbnail":"bf6abfb1c37ae32f4ef6901292d473277d9ca755b60feffec61ff48d97553faf","access_level":"public","create_time":"$D2021-04-26T09:27:32.682Z","update_time":"$D2022-10-05T14:47:56.298Z","view_time":null,"first_public_time":"$D2021-04-26T17:49:14.569Z","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"},"version":569,"publish_version":569,"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"}],"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":false,"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":"030 Karel Martens’s Kinetic Work","cells":[{"id":0,"value":"md`# 030 Karel Martens’s Kinetic Work\n\nReference: [Karel Martens: Printed Matter / Drukwerk](https://www.goodreads.com/book/show/641600.Karel_Martens)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"svgEl = {\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof randomize = Button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"viewof animate = Toggle({ label: \"⏯ Animate\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`⚠️ In Safari, animation stutters when \\`Show Circular Mask\\` is active.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"viewof dr = Range(rotationRange, {\n value: randomizedValues.rotation,\n step: 0.015625,\n label: md`Rotation`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof dotsPerLine = Range(dotsPerLineRange, {\n value: randomizedValues.dotsPerLine,\n step: 1,\n label: md`Dots/Line`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof size = Range([100, width], {\n value: Math.floor(width / 2),\n step: 1,\n label: md`Size _(px)_`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"viewof mask = Toggle({ label: \"Show Circular Mask\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"viewof maskR = Range([Math.floor(size / 2), Math.floor(size / 10)], {\n value: Math.floor(size / 2.5),\n step: 1,\n label: md`Mask Radius`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"viewof scale = Range([0.1, 2], {\n value: 1,\n step: 0.01,\n label: md`Grid Scale`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof fps = Range([1, 60], {\n value: 60,\n step: 1,\n label: md`FPS`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"viewof totalFrames = Range(totalFrameRange, {\n value: totalFrameRange[1],\n step: 10,\n label: md`Total Frames`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"draw = {\n let frame = 0;\n\n if (animate) {\n let rafRef;\n function animateRotation() {\n frame = frame + framesPerRaf;\n\n const currentFrame = frame % totalFrames;\n const playhead = currentFrame / (totalFrames - 1);\n rotate(playhead + dr);\n\n if (animate) {\n rafRef = window.requestAnimationFrame(animateRotation);\n }\n }\n animateRotation();\n invalidation.then(() => window.cancelAnimationFrame(rafRef));\n } else {\n rotate(dr);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"framesPerRaf = fps / 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"dotsPerLineRange = [3, 75]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"rotationRange = [-1, 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"totalFrameRange = [10, 240]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"randomizedValues = {\n randomize;\n\n return {\n rotation: CSRandom.range(...rotationRange),\n dotsPerLine: CSRandom.rangeFloor(...dotsPerLineRange)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"colors = ({\n fg: \"hsl(0,0%,5%)\",\n bg: \"hsl(0,0%,95%)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"baseDots = CSMath.linspace(dotsPerLine, true)\n .map((v) => CSMath.linspace(dotsPerLine, true).map((u) => [u, v]))\n .flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"function drawDots(t) {\n let dotEls = \"\";\n const scaledSize = size * scale;\n const scaledMargin = (size - scaledSize) / 2;\n const cellSize = scaledSize / dotsPerLine;\n const r = cellSize / 4;\n baseDots.forEach((d) => {\n const [u, v] = d;\n const cx = scaledMargin + r + CSMath.lerp(0, scaledSize - 2 * r, u);\n const cy = scaledMargin + r + CSMath.lerp(0, scaledSize - 2 * r, v);\n\n dotEls += ``;\n });\n return dotEls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"rotate = (playhead) => {\n const degs = animate ? playhead * 90 : dr * 90;\n const offset = size / 2;\n\n const transform = `translate(${size / 2} ${size / 2}) \n rotate(${degs})\n translate(-${size / 2} -${size / 2})`;\n\n const groups = Array.from(svgEl.querySelectorAll(\".rotating-grid\"));\n\n groups.forEach((g) => g.setAttribute(\"transform\", transform));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { Button, Range, Toggle } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"CSUtil = require(\"https://bundle.run/canvas-sketch-util@1.10.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"CSMath = CSUtil.math","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"CSRandom = CSUtil.random","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"d3Timer = import(\"https://unpkg.com/d3-timer@2.0.0/src/index.js?module\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"