25:["$","title",null,{"children":"Stacking Polygons In A Circle | Степан Гребнев | Observable"}] 49:Tb1b,{ const cLeft = initContext(size, size); const cRight = initContext(size, size); const cOut = initContext(size, size); const {PI} = Math; const PIH = PI / 2; const speed = 3e-4; const step = PI / count; const overdraw = PIH; const areaFull = [0, 0, size, size]; const areaLeft = [0, 0, size / 2, size]; const areaRight = [size / 2, 0, size / 2, size]; cOut.fillStyle = 'white'; cOut.canvas.style.maxWidth = `${size}px`; cOut.canvas.style.width = '100%'; if(createGIF) return compile(); return preview(); // A full loop finishes at t = 1. function renderFrame(t) { cOut.fillRect(...areaFull); cLeft.clearRect(...areaLeft); cRight.clearRect(...areaRight); const rotation = i => Math.cos(interval * i) + t * Math.PI * 2; for (let i = -PIH - overdraw; i < PIH + overdraw; i += step) draw(cRight, i, rotation(i)); for (let i = PIH - overdraw; i < PI + PIH + overdraw; i += step) draw(cLeft, i, rotation(i)); cOut.drawImage(cLeft.canvas, ...areaLeft, ...areaLeft); cOut.drawImage(cRight.canvas, ...areaRight, ...areaRight); return cOut.canvas; } async function *preview() { while(true) yield renderFrame(Date.now() * speed); } // Renders to gif, returns the compiled gif image. async function *compile() { const workers = 2; const gif = new GifCompiler({workers}); invalidation.then(() => gif.terminate()); const progress = (status, progress) => html`${status}
${progress * 100}%`; const fps = 30; const length = 1 / speed; const delay = Math.floor(1000 / fps); const step = 1 / (length / delay); const tMax = 1 / sides; for(let t = 0; t < tMax; t += step) { gif.addFrame(renderFrame(t), delay); yield progress('Rendering ...', t / tMax); } const render = gif.renderProgress(); let data; while((data = render.next()) && !data.done) yield progress('Compiling ...', data.value); yield html`

`; } function initContext(w, h) { const c = DOM.context2d(w, h, 1); c.lineWidth = 2; c.fillStyle = '#555'; c.strokeStyle = 'rgba(255,255,255,.8)'; return c; } function poly(sides, r, a, x = 0, y = 0) { const step = PI * 2 / sides; return Array(sides).fill().map((v,i) => [ x + Math.cos(a + i * step) * r, y + Math.sin(a + i * step) * r ]); } function draw(c, a, rot = 0) { const cx = size / 2 + Math.cos(a) * radius; const cy = size / 2 + Math.sin(a) * radius; c.beginPath(); poly(sides, polyRadius, a + rot, cx, cy).forEach(([x, y], i) => i ? c.lineTo(x, y) : c.moveTo(x, y)); c.closePath(); c.fill(); c.stroke(); } }4a:[] 29:{"id":"eaca877e0abebbfd","slug":null,"title":"Stacking Polygons In A Circle","thumbnail":"701fd8233c011d0b9af118a5adb74e7ecef2ef7e650210b5e2321bdb2487f51b","access_level":"public","create_time":"$D2023-07-25T00:48:56.098Z","update_time":"$D2023-07-25T00:48:56.098Z","view_time":null,"first_public_time":"$D2023-07-25T00:48:56.098Z","has_unpublished_edits":null,"fork":{"id":"0e2205b246ac8a1a","slug":"exercise-for-the-reader","title":"Stacking Polygons In A Circle","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a77e3d98d736999b","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":680,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ca7f05a63c88cb","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"76ca7f05a63c88cb","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Stacking Polygons In A Circle","cells":[{"id":0,"value":"md`\n# Stacking Polygons In A Circle\n\nIn response to [this tweet](https://twitter.com/tmcw/status/1047518863993106434) by @tmcw.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"viewof sides = slider({title: 'Polygon sides', min: 3, max: 10, step: 1, value: 3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"viewof interval = slider({title: 'Full rotations', min: 0, max: 10, step: 1, value: 3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"viewof count = slider({title: 'Density', min: 3, max: 300, step: 1, value: 60})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"viewof polyRadius = slider({title: 'Ring width', min: 10, max: size / 6, step: 1, value: 70})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof radius = slider({title: 'Ring radius', min: polyRadius, max: size / 2 - polyRadius, step: 1, value: this ? this.value : 300})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"viewof createGIF = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"size = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`\n---\n## Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"import {GifCompiler} from '@mootari/orientation'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"GIF = require('gif.js@0.2.0/dist/gif.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"gifWorkerScript = {\n const script = await (await fetch('https://unpkg.com/gif.js@0.2.0/dist/gif.worker.js')).text();\n const blob = new Blob([script], {type: 'application/javascript'});\n return URL.createObjectURL(blob);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null