25:["$","title",null,{"children":"prova p5 v2 | Paolo Andrenacci | Observable"}] 4c:T56b,stepByStepRecorder=function(canvas) { var theCanvas = canvas; var left = $(html`Step-by-step Canvas Video Recorder`); var addFrameButton = $(html``); var compileButton = $(html``).hide(); var frameCount = $(html` `); var outLink = $(html`download video`).hide(); var div = html`

`; var jdiv = $(div); jdiv.css({color:'green', fontFamily:'arial'}); addFrameButton.add(compileButton).css({ margin:'0 5px', padding:'0 8px'}); jdiv.append(left, addFrameButton, frameCount, compileButton, outLink); function addFrame(canvas) { window.requestAnimationFrame(function(){ encoder.add((canvas || theCanvas).getContext('2d')); frameCount.text(''+encoder.frames.length); compileButton.show(); }); } div.addFrame = addFrame; div.videoURL=null; addFrameButton.click(function(){ addFrame(theCanvas);}); compileButton.click(function() { console.log('before compile start'); compileButton.text('wait...').attr('disabled', 'disabled'); div.encoderCompileReturn = encoder.compile(false, function(output){ var url = div.videoURL=URL.createObjectURL(output); outLink.show(); outLink.attr('href', url); compileButton.text('compile').removeAttr('disabled'); }); }); return div; } 4d:T696,logic = p5 => { var x1, y1, x2, y2; const irnd=()=>1+Math.floor(Math.random()*5); var wcur=[0,0,0,0]; var wnext=[1,0,0,0]; var alpha=0; var startcur = Math.random()*2*Math.PI; var startnext = Math.random()*2*Math.PI; p5.setup = function() { var canvas=p5.createCanvas(600, 600); canvas.parent('playground'); p5.changew=function() { mutable changecount++; for(var i=0; i<4;i++) { wcur[i] = wnext[i]; wnext[i] = irnd(); } //startcur=Math.random()*2*Math.PI; startcur=startnext; startnext = Math.random()*2*Math.PI; alpha=0; } } function drawone(w1, w2, alpha) { //console.log({w1,w2,alpha}); const N=1000; const dim=p5.width*.2; const c=p5.width/2; var deltay=new Date().getTime()/2000; const STEP = 2*Math.PI/N; p5.stroke(255,0,0); p5.strokeWeight(12); p5.fill('#000000'); p5.rect(0,0,p5.width,p5.height); //p5.clear(); for (var j = 0; j <= N; j++) { var ph1=j*STEP; var ph2=(j+1)*STEP; x1 = c + (Math.sin(ph1*w1[0])*(1-alpha)+Math.sin(ph1*w2[0])*alpha) * dim; y1 = c + (Math.sin(deltay+ph1*w1[1])*(1-alpha)+Math.sin(deltay+ph1*w2[1])*alpha) * dim; x2 = c + (Math.sin(ph2*w1[0])*(1-alpha)+Math.sin(ph2*w2[0])*alpha) * dim; y2 = c + (Math.sin(deltay+ph2*w1[1])*(1-alpha)+Math.sin(deltay+ph2*w2[1])*alpha) * dim; p5.line(x1,y1,x2,y2); } } p5.draw = function() { //p5.background(255); alpha+=.003; //if (alpha<2) { var a=Math.min(alpha,1); mutable drawcount++; drawone(wcur, wnext, a); // } if (alpha>1) p5.changew(); } } 4e:T4e4,stepbystep = { var main = html`

step by step grabber get video

`; var name = "CanvasCapture"; // Placed into the Mux and Write Application Name fields of the WebM header var quality = 0.7; // good quality 1 Best < 0.7 ok to poor var fps = 30; // I have tried all sorts of frame rates and all seem to work // Do some test to workout what your machine can handle as there // is a lot of variation between machines. var video; var nframes=0; main.canvas = $('canvas')[0]; $('.sbs-addframe', main).click(function(){ if (!video) video = new Groover.Video(fps,quality,name); video.addFrame($('#defaultCanvas0')[0]); $('.sbs-framecount', main).text('C:'+(++nframes)); }); $('.sbs-compile', main).click(function(){ var u = URL.createObjectURL(video.toBlob()); main.videoURL = u; $('.sbs-link', main).attr('href', u); }); return main; }4f:T2648,Groover = (function(){ // ensure webp is supported function canEncode(){ var canvas = document.createElement("canvas"); canvas.width = 8; canvas.height = 8; return canvas.toDataURL("image/webp",0.1).indexOf("image/webp") > -1; } if(!canEncode()){ return undefined; } var webmData = null; var clusterTimecode = 0; var clusterCounter = 0; var CLUSTER_MAX_DURATION = 30000; var frameNumber = 0; var width; var height; var frameDelay; var quality; var name; const videoMimeType = "video/webm"; // the only one. const frameMimeType = 'image/webp'; // can be no other const S = String.fromCharCode; const dataTypes = { object : function(data){ return toBlob(data);}, number : function(data){ return stream.num(data);}, string : function(data){ return stream.str(data);}, array : function(data){ return data;}, double2Str : function(num){ var c = new Uint8Array((new Float64Array([num])).buffer); return S(c[7]) + S(c[6]) + S(c[5]) + S(c[4]) + S(c[3]) + S(c[2]) + S(c[1]) + S(c[0]); } }; const stream = { num : function(num){ // writes int var parts = []; while(num > 0){ parts.push(num & 0xff); num = num >> 8; } return new Uint8Array(parts.reverse()); }, str : function(str){ // writes string var i, len, arr; len = str.length; arr = new Uint8Array(len); for(i = 0; i < len; i++){arr[i] = str.charCodeAt(i);} return arr; }, compInt : function(num){ // could not find full details so bit of a guess if(num < 128){ // number is prefixed with a bit (1000 is on byte 0100 two, 0010 three and so on) num += 0x80; return new Uint8Array([num]); }else if(num < 0x4000){ num += 0x4000; return new Uint8Array([num>>8, num]) }else if(num < 0x200000){ num += 0x200000; return new Uint8Array([num>>16, num>>8, num]) }else if(num < 0x10000000){ num += 0x10000000; return new Uint8Array([num>>24, num>>16, num>>8, num]) } } } const ids = { // header names and values videoData : 0x1a45dfa3, Version : 0x4286, ReadVersion : 0x42f7, MaxIDLength : 0x42f2, MaxSizeLength : 0x42f3, DocType : 0x4282, DocTypeVersion : 0x4287, DocTypeReadVersion : 0x4285, Segment : 0x18538067, Info : 0x1549a966, TimecodeScale : 0x2ad7b1, MuxingApp : 0x4d80, WritingApp : 0x5741, Duration : 0x4489, Tracks : 0x1654ae6b, TrackEntry : 0xae, TrackNumber : 0xd7, TrackUID : 0x63c5, FlagLacing : 0x9c, Language : 0x22b59c, CodecID : 0x86, CodecName : 0x258688, TrackType : 0x83, Video : 0xe0, PixelWidth : 0xb0, PixelHeight : 0xba, Cluster : 0x1f43b675, Timecode : 0xe7, Frame : 0xa3, Keyframe : 0x9d012a, FrameBlock : 0x81, }; const keyframeD64Header = '\x9d\x01\x2a'; //VP8 keyframe header 0x9d012a const videoDataPos = 1; // data pos of frame data header const defaultDelay = dataTypes.double2Str(1000/25); const header = [ // structure of webM header/chunks what ever they are called. ids.videoData,[ ids.Version, 1, ids.ReadVersion, 1, ids.MaxIDLength, 4, ids.MaxSizeLength, 8, ids.DocType, 'webm', ids.DocTypeVersion, 2, ids.DocTypeReadVersion, 2 ], ids.Segment, [ ids.Info, [ ids.TimecodeScale, 1000000, ids.MuxingApp, 'Groover', ids.WritingApp, 'Groover', ids.Duration, 0 ], ids.Tracks,[ ids.TrackEntry,[ ids.TrackNumber, 1, ids.TrackUID, 1, ids.FlagLacing, 0, // always o ids.Language, 'und', // undefined I think this means ids.CodecID, 'V_VP8', // These I think must not change ids.CodecName, 'VP8', // These I think must not change ids.TrackType, 1, ids.Video, [ ids.PixelWidth, 0, ids.PixelHeight, 0 ] ] ] ] ]; function getHeader(){ header[3][2][3] = name; header[3][2][5] = name; header[3][2][7] = dataTypes.double2Str(frameDelay); header[3][3][1][15][1] = width; header[3][3][1][15][3] = height; function create(dat){ var i,kv,data; data = []; for(i = 0; i < dat.length; i += 2){ kv = {i : dat[i]}; if(Array.isArray(dat[i + 1])){ kv.d = create(dat[i + 1]); }else{ kv.d = dat[i + 1]; } data.push(kv); } return data; } return create(header); } function addCluster(){ webmData[videoDataPos].d.push({ i: ids.Cluster,d: [{ i: ids.Timecode, d: Math.round(clusterTimecode)}]}); // Fixed bug with Round clusterCounter = 0; } function addFrame(frame){ var VP8, kfS,riff; riff = getWebPChunks(atob(frame.toDataURL(frameMimeType, quality).slice(23))); VP8 = riff.RIFF[0].WEBP[0]; kfS = VP8.indexOf(keyframeD64Header) + 3; frame = { width: ((VP8.charCodeAt(kfS + 1) << 8) | VP8.charCodeAt(kfS)) & 0x3FFF, height: ((VP8.charCodeAt(kfS + 3) << 8) | VP8.charCodeAt(kfS + 2)) & 0x3FFF, data: VP8, riff: riff }; if(clusterCounter > CLUSTER_MAX_DURATION){ addCluster(); } webmData[videoDataPos].d[webmData[videoDataPos].d.length-1].d.push({ i: ids.Frame, d: S(ids.FrameBlock) + S( Math.round(clusterCounter) >> 8) + S( Math.round(clusterCounter) & 0xff) + S(128) + frame.data.slice(4), }); clusterCounter += frameDelay; clusterTimecode += frameDelay; webmData[videoDataPos].d[0].d[3].d = dataTypes.double2Str(clusterTimecode); } function startEncoding(){ frameNumber = clusterCounter = clusterTimecode = 0; webmData = getHeader(); addCluster(); } function toBlob(vidData){ var data,i,vData, len; vData = []; for(i = 0; i < vidData.length; i++){ data = dataTypes[typeof vidData[i].d](vidData[i].d); len = data.size || data.byteLength || data.length; vData.push(stream.num(vidData[i].i)); vData.push(stream.compInt(len)); vData.push(data) } return new Blob(vData, {type: videoMimeType}); } function getWebPChunks(str){ var offset, chunks, id, len, data; offset = 0; chunks = {}; while (offset < str.length) { id = str.substr(offset, 4); // value will have top bit on (bit 32) so not simply a bitwise operation // Warning little endian (Will not work on big endian systems) len = new Uint32Array( new Uint8Array([ str.charCodeAt(offset + 7), str.charCodeAt(offset + 6), str.charCodeAt(offset + 5), str.charCodeAt(offset + 4) ]).buffer)[0]; id = str.substr(offset, 4); chunks[id] = chunks[id] === undefined ? [] : chunks[id]; if (id === 'RIFF' || id === 'LIST') { chunks[id].push(getWebPChunks(str.substr(offset + 8, len))); offset += 8 + len; } else if (id === 'WEBP') { chunks[id].push(str.substr(offset + 8)); break; } else { chunks[id].push(str.substr(offset + 4)); break; } } return chunks; } function Encoder(fps, _quality = 0.8, _name = "Groover"){ this.fps = fps; this.quality = quality = _quality; this.frameDelay = frameDelay = 1000 / fps; this.frame = 0; this.width = width = null; this.timecode = 0; this.name = name = _name; } Encoder.prototype = { addFrame : function(frame){ if('canvas' in frame){ frame = frame.canvas; } if(width === null){ this.width = width = frame.width, this.height = height = frame.height startEncoding(); }else if(width !== frame.width || height !== frame.height){ throw RangeError("Frame size error. Frames must be the same size."); } addFrame(frame); this.frame += 1; this.timecode = clusterTimecode; }, toBlob : function(){ return toBlob(webmData); } } return { Video: Encoder, } })()50:T81b,mycreateVideo = { function renderCanvas(frame) { console.log('renderCanvas ' +frame); //return Promise.resolve(canvas); return new Promise(function(resolve, reject){ window.setTimeout(function() { console.log('on timeout'); resolve(canvas); },1); }); } var format='webm', framerate=15, frames=150; var frame = 0; var animationFrame = 0; var canvas=$('#canvas2')[0]; var mainResolve, mainReject, mainPromise; var main = html`

mycreatevideo get video

`; var startButton = $('.sbs-start', main).click(start); var addFrameButton = $('.sbs-addframe', main).hide(); var link = $('.sbs-link', main).hide(); var framecount = $('.sbs-framecount', main).hide(); var compileButton = $('.sbs-compile', main).hide(); var capturer = new ccapture({ format:format, framerate:framerate, verbose: true }); $('.sbs-addframe', main).click(function(){ }); compileButton.click(function(){ }); Object.freeze(HTMLVideoElement.prototype); function start() { compileButton.show(); addFrameButton.show(); framecount.show(); capturer.start(); startButton.hide(); console.log('starting...'); window.setTimeout(render, 3000); } function render() { console.log('render frame '+frame); if (frame > frames) return stop(); framecount.text('F: '+frame); renderCanvas(frame).then(function(c){ console.log('rendercanvas then'); capturer.capture(c); frame = frame + 1; render(); }); }; function stop() { //cancelAnimationFrame(animationFrame); console.log('STOP'); capturer.stop(); console.log('saving...'); capturer.save(function (blob) { console.log('on save'); link.show().attr('href', URL.createObjectURL(blob)); }); } return main; }51:[] 48:{"id":"8a933bcc011fedf1","slug":"prova-p5-v2","title":"prova p5 v2","thumbnail":"913ffcfcdaa099284a2d2d7967e20b0c745e1933b9dbb05884e041ba1ac9064f","access_level":"public","create_time":"$D2021-01-13T10:40:59.548Z","update_time":"$D2021-01-15T12:34:10.696Z","view_time":null,"first_public_time":"$D2021-01-13T10:41:17.401Z","has_unpublished_edits":null,"fork":{"id":"a8d364e527e40103","slug":"prova-p5","title":"prova p5","owner":{"id":"3b42508407aca5a3","login":"zawinul","name":"Paolo Andrenacci"}},"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":914,"publish_version":914,"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":"prova p5 v2","cells":[{"id":44,"value":"md`\n# prova p5 v2 \n## capture video&img with transparency`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"html`p5 API reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"mutable drawcount=0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"mutable changecount=0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"div = html`

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"{\n var button = html``;\n button.onclick=function() {\n p5Sketch.changew();\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"realTimeVideoRecorder($('canvas')[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"grabpng(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"canvasrec1=stepByStepRecorder($('canvas')[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"canvasrec1.videoURL2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"showvideo= {\n while(true) {\n var u = canvasrec1.videoURL;\n var oldu=null;\n if (!u)\n yield 'waiting for video ...';\n else if (u!=oldu) {\n var v = html`

`;\n yield v;\n oldu=u;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"cvdata=$('canvas')[0].toDataURL()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"encoder = new Whammy.Video(15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"p5Sketch = new p5(logic)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"p5 = require('p5').then(async p5 => {\n await require('p5@0.6.1/lib/addons/p5.dom.js')\n return p5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"import {realTimeVideoRecorder, grabpng, $} 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":640,"value":"Whammy = loadjs(\"https://raw.githubusercontent.com/antimatter15/whammy/master/whammy.js\", \"window.Whammy\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"function loadjs(scriptURL, returnexpression) {\n return new Promise(function(resolve){\n $.ajax({\n url: scriptURL,\n dataType: \"text\",\n success: function(jsAsTxt) {\n eval(jsAsTxt);\n var ret = returnexpression ? eval(returnexpression):null;\n resolve(ret);\n }\n }); \n });\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"window","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"html`Groover`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"html`CCapture`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"ccapture = require('ccapture.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"ccapturer = {\n var main = html`

\n CCapture step by step grabber\n \n \n \n get video\n

`;\n var capturer = main.capturer = new window.CCapture( {\n framerate: 25,\n verbose: true,\n format:'webm'\n } );\n var nframes=0;\n main.canvas = $('canvas')[0];\n $('.sbs-link', main).hide();\n \n $('.sbs-addframe', main).click(function(){\n capturer.capture(main.canvas);\n $('.sbs-framecount', main).text('C:'+(++nframes));\n });\n\n $('.sbs-compile', main).click(function(){\n capturer.stop();\n capturer.save(function(blob) {\n var u = URL.creaoteObjectURL(blob);\n $('.sbs-link', main).attr('href', u);\n });\n });\n \n return main;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":" canvas2=html`