45:["$","title",null,{"children":"Canvas to video - sample 2 | Paolo Andrenacci | Observable"}] 4d:[] 49:{"id":"c2ec601a68790fbf","slug":"realtime-canvas-to-video-sample-2","title":"Canvas to video - sample 2","thumbnail":"d500d3efd95b90d0203636ed083492b81bf156849f3f2f6fda8f98d006e24e06","access_level":"public","create_time":"$D2021-01-10T09:49:32.699Z","update_time":"$D2021-01-12T09:10:52.427Z","view_time":null,"first_public_time":"$D2021-01-10T10:26:02.017Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":423,"publish_version":423,"role":null,"authored":false,"authors":[{"type":"individual","id":"ed8740f4700202b7","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ed8740f4700202b7","login":"zawinul","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/5cf0f05427bb66405cd76829c2ade969967efb177b4ffefd635433c153ce8f46","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Canvas to video - sample 2","cells":[{"id":0,"value":"md`# Canvas to video - sample 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"theCanvas=html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"realTimeVideoRecorder(theCanvas)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function draw(canvas, r){\n var cv=canvas;\n var blur = .25;\n var alpha=.45;\n \n var ctx = cv.getContext('2d');\n var w = cv.width;\n var h = cv.height;\n ctx.font = '16px sans-serif'; \n ctx.textAlign = 'left';\n ctx.globalCompositeOperation = 'source-over';\n //ctx.globalCompositeOperation = 'copy';\n\n ctx.filter = 'blur('+blur+'px)';\n\n ctx.fillStyle = `black`; \n ctx.globalAlpha=1;\n ctx.fillRect(0, 0, w, h);\n ctx.globalAlpha=alpha;\n\n //ctx.globalCompositeOperation = `difference`; \n\n var p = polygons;\n //var colors=['#ff0000', '#00ff00', '#0000ff', '#808000', '#008080'];\n var colors=['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'];\n for(var i=0;ix(computedCursor))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"polygons={\n var c=computedPoints;\n var p = [\n [c[0], c[1], c[3], c[2]], //top\n [c[0], c[2], c[4], c[6]], //left\n [c[4], c[6], c[7], c[5]], //bottom\n [c[7], c[5], c[3], c[2]], //right\n [c[2], c[3], c[5], c[4]] //center\n ];\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"polygons[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"loop= {\n var button=html``;\n var text=html``;\n var div=html`

`;\n div.appendChild(button);\n div.appendChild(text);\n var paused=false;\n var frame=1;\n $(button).click(function(){\n paused=!paused;\n $(button).text(paused?'resume':'pause');\n });\n \n while(true) {\n if (!paused) {\n div.value=frame++; \n //draw(theCanvas, frame);\n $(text).text('v: '+frame);\n yield div;\n }\n }\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"computedCursor=cursor(loop.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"clip=(x,min,max)=>xmax?max:x);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"import {realTimeVideoRecorder, style, $} from '@zawinul/real-time-canvas-video-recorder'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null