1d:{"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"},{"id":15,"value":"svgEl = {\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"viewof randomize = Button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"viewof animate = Toggle({ label: \"⏯ Animate\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"md`⚠️ In Safari, animation stutters when \\`Show Circular Mask\\` is active.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":542,"value":"viewof mask = Toggle({ label: \"Show Circular Mask\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":470,"value":"framesPerRaf = fps / 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"dotsPerLineRange = [3, 75]","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"rotationRange = [-1, 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"totalFrameRange = [10, 240]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":69,"value":"colors = ({\n fg: \"hsl(0,0%,5%)\",\n bg: \"hsl(0,0%,95%)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { Button, Range, Toggle } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"CSUtil = require(\"https://bundle.run/canvas-sketch-util@1.10.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"CSMath = CSUtil.math","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"CSRandom = CSUtil.random","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"d3Timer = import(\"https://unpkg.com/d3-timer@2.0.0/src/index.js?module\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W1f","stdlib":"1"}