2e:null 2f:["$","title",null,{"children":"Looping an image | Joshua Horowitz | Observable"}] 34:T49d,{ const button = gifProgress < 1 ? html`` : html`` button.addEventListener('click', () => { mutable gif = undefined; mutable gifProgress = 0; const gif = new GIF(); const sitOptions = {copy: true, delay: Math.floor(1000 * gifSitSeconds)}; const transitionOptions = {copy: true, delay: Math.floor(1000 / gifFramesPerSecond)}; const numTransitionFrames = Math.ceil(gifTransitionSeconds * gifFramesPerSecond); gif.addFrame(draw(0), sitOptions); for (let n = 0; n < numTransitionFrames; n++) { let p = (n + 1) / (numTransitionFrames + 1); let p2 = d3Ease.easeQuadInOut(p); gif.addFrame(draw(p2 * 360*degree), transitionOptions); } gif.addFrame(draw(360*degree), sitOptions); for (let n = 0; n < numTransitionFrames; n++) { let p = (n + 1) / (numTransitionFrames + 1); let p2 = d3Ease.easeQuadInOut(p); gif.addFrame(draw((1 - p2) * 360*degree), transitionOptions); } gif.on('progress', (d) => mutable gifProgress = d); gif.on('finished', (d) => mutable gif = d); gif.render(); }); return button; }35:T725,draw = (angle) => { const canvas = document.createElement('canvas'); const cw = Math.ceil(xMax - xMin); const ch = Math.ceil(yMax - yMin); canvas.width = cw; canvas.height = ch; canvas.style.zoom = width / cw * 0.7; const ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, cw, ch); const imgData = ctx.createImageData(cw, ch); const data = imgData.data; const dx = xOffset(angle) - xMin; const dy = yOffset(angle) - yMin; let i = 0; for (let r = 0; r < ch; r++) { const y = r - dy; for (let c = 0; c < cw; c++) { const x = c - dx; let drew = false; attempt: { let ox, oy; if (angle === 0) { ox = x; oy = y; } else { const outsideR = outsideRadius(angle); oy = outsideR - Math.hypot(x, y - outsideR); if (!(0 <= oy && oy < h)) { break attempt; } const oang = mod(90 * degree - Math.atan2(outsideR - y, x), 360 * degree); ox = oang / angle * w; } if (0 <= ox && ox < w && 0 <= oy && oy < h) { const pox = Math.floor(ox); const poy = Math.floor(oy); const oi = 4 * (pox + w * poy); data[i ] = origData[oi ]; data[i + 1] = origData[oi + 1]; data[i + 2] = origData[oi + 2]; data[i + 3] = 255; drew = true; } } if (!drew) { data[i ] = 255; data[i + 1] = 255; data[i + 2] = 255; data[i + 3] = 255; } i += 4; } } ctx.putImageData(imgData, 0, 0); // ctx.beginPath(); // ctx.rect( // xLeft(angle) + dx, // yTop(angle) + dy, // xRight(angle) - xLeft(angle), // yBottom(angle) - yTop(angle), // ); // ctx.stroke(); return canvas }36:[{"id":"a0a936d28cbba7faf8d65b65421c82095ea36ae291322434ea884a837d4445723e8b2ed6565397bffb90fedd880c3e5a0cad1cb3561b9266a484cfb13239d488","href":"https://static.observableusercontent.com/files/a0a936d28cbba7faf8d65b65421c82095ea36ae291322434ea884a837d4445723e8b2ed6565397bffb90fedd880c3e5a0cad1cb3561b9266a484cfb13239d488","name":"orig.png","type":"image/png","lastModified":1617946320084.451,"size":61247}] 32:{"id":"7ce0ac5f01d3c341","slug":"looping-an-image","title":"Looping an image","thumbnail":"ea1c4d5115c86849e5510cc2fd8793d8064b44090397507eac3ba954bb616372","access_level":"public","create_time":"$D2021-04-09T05:31:47.087Z","update_time":"$D2021-04-11T08:51:35.249Z","view_time":null,"first_public_time":"$D2021-04-09T09:08:38.172Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4a29764d3c5ac978","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":"starter_2024"},"version":726,"publish_version":726,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddc378ed3cec53e0","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":null}],"members":[{"type":"individual","id":"ddc378ed3cec53e0","login":"joshuahhh","name":"Joshua Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/c2ab36a2b36058e9d5ad6cab5c830958647aa34d40616ae28603a9a9e5d0064a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Looping an image","cells":[{"id":0,"value":"md`\n# Looping an image\n\nDrag the slider to loop the image.\n\nIdea & default image by [Ethan Hein](http://www.ethanhein.com/wp/2021/groove-melodies/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"viewof angle = Range([0, 360*degree + ε], {label: html`Angle (°)`, value: 0, step: 1*degree, format: (x) => Math.round(x / degree)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"draw(angle);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"viewof verticalPosition = Select(['True center', 'Box center', 'Top', 'Bottom'], {label: \"Vertical position\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"viewof horizontalPosition = Select(['True center', 'Fix left edge', 'Transition left edge', 'Box center', 'Left', 'Right'], {label: \"Horizontal position\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"viewof animate = Toggle({label: \"Animate preview\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`Use your own image, by providing a public URL or uploading from your computer:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"viewof orig = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\"orig.png\").url()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"md`(Large images will produce slow results. Someday this should be rebuilt with WebGL. 🤷)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md`## GIF maker`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"viewof gifSitSeconds = Range([0, 5], {label: html`Seconds per sit`, value: 1, step: 0.05, format: (x) => x.toFixed(2)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"viewof gifTransitionSeconds = Range([0.1, 5], {label: html`Seconds per transition`, value: 1, step: 0.05, format: (x) => x.toFixed(2)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"viewof gifFramesPerSecond = Range([1, 30], {label: html`Frames per second`, value: 15, step: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"{\n if (gif) {\n return html`\n

GIF generated! Copy / drag from below, or click here: ${DOM.download(gif)}

\n `\n } else {\n const width = 360;\n const height = 20;\n const context = DOM.context2d(width, height);\n context.canvas.style.border = \"solid 1px black\";\n context.clearRect(0, 0, width, height);\n context.fillRect(0, 0, width * gifProgress, height);\n return html`\n

GIF is being generated...

\n ${context.canvas}\n `;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`\n

\n## implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"md`### gif state`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"mutable gifProgress = 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"mutable gif = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"md`### etc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"{\n if (animate) {\n set(viewof angle, clamp((Math.sin(now / 1000) * 1.2 + 1) / 2, 0, 1) * 360*degree);\n }\n return html`[animation controller in here]`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"w = orig.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"h = orig.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"origData = {\n const canvas = document.createElement('canvas');\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext('2d');\n\n ctx.drawImage(orig, 0, 0, w, h);\n return ctx.getImageData(0, 0, w, h).data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"insideRadius = (angle) => {\n // angle * inside_radius = w, so...\n if (angle === 0) {\n return Infinity;\n } else {\n return w / angle;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"outsideRadius = (angle) =>\n insideRadius(angle) + h","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"xOffset = (angle) => {\n switch (horizontalPosition) {\n case 'True center':\n return angle === 0 ? -w/2 : -insideRadius(angle) * (1 - Math.cos(angle)) / angle;\n case 'Fix left edge':\n return 0;\n case 'Transition left edge':\n const r = angle / (360*degree);\n return -w/2 * (1-r);\n case 'Box center':\n return -(xRight(angle) + xLeft(angle)) / 2;\n case 'Left':\n return -xLeft(angle);\n case 'Right':\n return -xRight(angle);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"xRight = (angle) => {\n if (angle === 0) {\n return w;\n } else if (angle < 90*degree) {\n // it's the warped top-right\n return Math.sin(angle) * outsideRadius(angle);\n } else {\n // it's the right edge of the outside circle\n return outsideRadius(angle);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"xLeft = (angle) => {\n if (angle < 180*degree) {\n return 0;\n } else if (angle < 270*degree) {\n // it's the warped top-right\n return Math.sin(angle) * outsideRadius(angle);\n } else {\n // it's the left edge of the outside circle\n return -outsideRadius(angle);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"xMin = _.min(_.range(0, 360*degree + ε, degree).map(\n (angle) => xLeft(angle) + xOffset(angle)\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"xMax = _.max(_.range(0, 360*degree + ε, degree).map(\n (angle) => xRight(angle) + xOffset(angle)\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"yOffset = (angle) => {\n switch (verticalPosition) {\n case 'True center':\n return angle === 0 ? 0 : -insideRadius(angle) * (1 - Math.sin(angle) / angle);\n case 'Box center':\n return -yBottom(angle) / 2;\n case 'Top':\n return 0;\n case 'Bottom':\n return -yBottom(angle);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"yBottom = (angle) => {\n if (angle === 0) {\n return h;\n } else if (angle < 90*degree) {\n // it's the warped bottom-right\n return insideRadius(angle) * (1 - Math.cos(angle)) + h;\n } else if (angle < 180*degree) {\n // it's the warped top-right\n return outsideRadius(angle) * (1 - Math.cos(angle));\n } else {\n // it's the bottom edge of the outside circle\n return 2 * outsideRadius(angle);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"yTop = (angle) => 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"yMin = _.min(_.range(0, 360*degree + ε, degree).map(\n (angle) => yTop(angle) + yOffset(angle)\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"yMax = _.max(_.range(0, 360*degree + ε, degree).map(\n (angle) => yBottom(angle) + yOffset(angle)\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"md`### math`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"mod = (a, b) => ((a % b) + b) % b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"function clamp(number, min, max) {\n return Math.max(min, Math.min(number, max));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"degree = 2 * Math.PI / 360","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"ε = 0.0001","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`### dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {Range, Select, Toggle, Button} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"import {set} from '@observablehq/synchronized-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"import {GIF} from '@mbostock/canvas-to-gif'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"d3Ease = require(\"d3-ease\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"