29:null 2a:["$","title",null,{"children":"Animated slides | Yaroslav Sergienko | Observable"}] 2f:T5cf,function* previewSlide(slide, previewHeight, noLoop=false, withControls=true) { const { timeMin, timeMax, duration, width: slideWidth, height: slideHeight, } = slide; const slideRatio = slideWidth / slideHeight; const previewWidth = previewHeight * slideRatio; const ctx = DOM.context2d(previewWidth, previewHeight); const startTime = Number(new Date()) / 1000; const framerate = 60; const applyMotionBlur = false; const saveVideoDom = saveVideo( 'webm', framerate, Math.ceil(duration * framerate), frame => { const ctx = DOM.context2d(slideWidth, slideHeight); const time = timeMin + frame / framerate / duration * (timeMax - timeMin); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, slideWidth, slideHeight); slide.render(time, ctx); return ctx.canvas; }, applyMotionBlur, ); const res = html`${ctx.canvas}${withControls && saveVideoDom}`; while (true) { const curTime = Number(new Date()) / 1000; let relTime = (curTime - startTime) / duration; if (noLoop) { relTime = Math.min(relTime, 1); } else { relTime = relTime % 1; } const time = timeMin + (timeMax - timeMin) * relTime; ctx.fillStyle = 'white'; ctx.fillRect(0, 0, previewWidth, previewHeight); ctx.save(); const s = previewHeight / slideHeight; ctx.scale(s, s); slide.render(time, ctx); ctx.restore(); yield res; if (relTime >= 1 && noLoop) break; } }30:T4ba,createVideo = async (format, framerate, frames, renderCanvas, motionBlur=false) => { // ccapture.js modifies the HTMLVideoElement prototype, removing the currentTime setter // See https://github.com/spite/ccapture.js/blob/master/src/CCapture.js#L749 // We prevent it to modify the prototype, in order to be able to navigate in the video with the slider Object.freeze(HTMLVideoElement.prototype); const capturer = new ccapture({ format, framerate, verbose: false, motionBlurFrames: motionBlur ? 960 / framerate : 0, }); let frame = 0; let animationFrame = 0; const render = async (resolve, reject) => { if (frame > frames) { cancelAnimationFrame(animationFrame); capturer.stop(); capturer.save(); resolve(); } else { const c = await renderCanvas(frame); capturer.capture(c); frame = frame + 1; animationFrame = requestAnimationFrame(() => render(resolve, reject)); } }; // Commented because we added a Promise: it's not cancellable // invalidation.then(() => cancelAnimationFrame(animationFrame)); return new Promise((resolve, reject) => { capturer.start(); return render(resolve, reject); }); }31:[] 2d:{"id":"36ce76ee41d8fc24","slug":null,"title":"Animated slides","thumbnail":"f0139192d5e7e456b9205e9c56a5c3106944e017d5eac6c78b642bcc3c503b97","access_level":"public","create_time":"$D2023-01-14T15:23:27.688Z","update_time":"$D2023-01-19T11:05:19.493Z","view_time":null,"first_public_time":"$D2023-01-14T15:23:27.688Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ae7dadfe8dcf0cbe","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":"starter_2024"},"version":336,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null}],"members":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Animated slides","cells":[{"id":0,"value":"# Animated slides\n\nOur ultimate goal is to make YouTube videos entirely in ObservableHQ.\n\nSo, video consists of slides, each slide is an animation.\n\n## What is a slide\n\nSlide is an object of the following type\n\n```typescript\ntype Slide = {\n width: number;\n height: number;\n timeMin: number;\n timeMax: number;\n duration: number; // in seconds\n render: (time: number, ctx: CanvasRenderingContext2D) => void;\n}\n```\n\nTo preview slide in a loop, use function\n\n```typescript\npreviewSlide(slide: Slide, previewHeight: number): HTMLCanvasElement\n```\n\nSlide can be downloaded as .webm video with a button below it.\n\n## What is a video\n\nVideo is just an array of slides. To preview a video with slide controls, use function\n\n```typescript\npreviewSlides(slides: Slide[], previewHeight: number): HTMLElement\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":258,"value":"previewSlides(slides, 400)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"## See also\n\n* https://observablehq.com/@mbostock/slide\n* https://observablehq.com/@visnup/slides\n* https://observablehq.com/@severo/asynchronous-canvas-recorder\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":74,"value":"## Example slides","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":172,"value":"previewSlide(slide1, 200)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"slide1 = ({\n width: 1920,\n height: 1080,\n timeMin: 0,\n timeMax: 1,\n duration: 3,\n render(time, ctx) {\n const {width, height} = this;\n ctx.fillStyle = 'lightgray';\n ctx.fillRect(0, 0, width, height);\n ctx.fillStyle = 'black';\n ctx.fillRect(\n time * (width / 2 - 50) + 50,\n 50,\n width / 2 - 50,\n height - 100,\n );\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"previewSlide(slide2, 200)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"slide2 = ({\n width: 500,\n height: 500,\n timeMin: 1,\n timeMax: 2,\n duration: 3,\n render(time, ctx) {\n const {width, height} = this;\n ctx.fillStyle = 'lightgray';\n ctx.fillRect(0, 0, width, height);\n ctx.fillStyle = 'green';\n ctx.fillRect(\n time * (width / 2 - 50) + 50,\n 50,\n width / 2 - 50,\n height - 100,\n );\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"slides = [slide1, slide2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"## Implementation\n\nThe following function is used to preview single slide","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":329,"value":"function previewFrame(slide, previewHeight) {\n const {\n width: slideWidth,\n height: slideHeight,\n } = slide;\n const slideRatio = slideWidth / slideHeight;\n const previewWidth = previewHeight * slideRatio;\n const ctx = DOM.context2d(previewWidth, previewHeight);\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, previewWidth, previewHeight);\n ctx.save();\n const s = previewHeight / slideHeight;\n ctx.scale(s, s);\n slide.render(ctx);\n ctx.restore();\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"function slideControls(curSlideNum, setSlide, slides) {\n const start = html``;\n start.onclick = () => setSlide(0);\n const next = html``;\n next.onclick = () => {\n if (curSlideNum + 1 < slides.length) {\n setSlide(curSlideNum + 1);\n }\n }\n const prev = html``;\n prev.onclick = () => {\n if (curSlideNum > 0) {\n setSlide(curSlideNum - 1);\n }\n }\n return html`

${start}${prev}${next} slide ${curSlideNum + 1} / ${slides.length}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"function* previewSlides(slides, previewHeight) {\n let curSlideNum = 0;\n let resetSlideTime = false;\n while (true) {\n const slide = slides[curSlideNum];\n resetSlideTime = false;\n const controls = slideControls(curSlideNum, i => {\n curSlideNum = i;\n resetSlideTime = true;\n }, slides);\n let res = null;\n for (const canvas of previewSlide(slide, previewHeight, true)) {\n if (res === null) {\n res = html`${canvas}${controls}`;\n }\n yield res;\n if (resetSlideTime) break;\n }\n while (true) {\n yield res;\n if (resetSlideTime) break;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"## Save video implementation\n\nForked from https://observablehq.com/@severo/asynchronous-canvas-recorder","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":295,"value":"saveVideo = (format, framerate, frames, renderCanvas, motionBlur=false) => {\n const text = format === 'webm' ? `Download .webm video` : `Create images archive`;\n const button = html`

`;\n button.onclick = async () => {\n button.children[0].innerHTML = \"rendering ...\";\n try {\n await createVideo(format, framerate, frames, renderCanvas, motionBlur);\n } catch (e) {\n button.children[1].innerHTML = e;\n }\n button.children[0].innerHTML = text;\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"ccapture = require('ccapture.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"