31: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(); } }32:[] 2f:{"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"},{"id":216,"value":"viewof sides = slider({title: 'Polygon sides', min: 3, max: 10, step: 1, value: 3})","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"viewof interval = slider({title: 'Full rotations', min: 0, max: 10, step: 1, value: 3})","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof count = slider({title: 'Density', min: 3, max: 300, step: 1, value: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"viewof polyRadius = slider({title: 'Ring width', min: 10, max: size / 6, step: 1, value: 70})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":285,"value":"viewof createGIF = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"size = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`\n---\n## Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"import {GifCompiler} from '@mootari/orientation'","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"GIF = require('gif.js@0.2.0/dist/gif.js')","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}