25:["$","title",null,{"children":"prova 2d 4 | Paolo Andrenacci | Observable"}] 4b:T407,function draw(t) { pts.next(); let {w,h} = cfg; //console.log('draw '+t); let c = ctx[1]; c.save(); c.clearRect(0,0,w,h); //c.fillStyle = 'rgba(0,0,0,.02)'; //c.fillRect(0,0,w,h); clip(c,w,h); c.globalAlpha=1; c.drawImage(video,0,0,video.videoWidth, video.videoHeight,0,0,w,h); c.restore(); simmetric(canvas[1], canvas[2]); rombo(canvas[2], canvas[3]); rombo(canvas[3], canvas[4]); rombo(canvas[4], canvas[5]); rombo(canvas[5], canvas[6]); rombo(canvas[6], canvas[7]); rombo(canvas[7], canvas[8]); rombo(canvas[8], canvas[9]); rombo(canvas[9], canvas[10]); //ctx[0].fillStyle = 'rgba(0,0,0,.01)'; ctx[0].fillStyle = 'black'; ctx[0].fillRect(0,0,w,h); ctx[0].globalAlpha=1; for(var i=1;i<6;i+=1) { ctx[0].fillStyle='rgba(255,255,255,.03)'; ctx[0].fillRect(0,0,w,h); ctx[0].drawImage(canvas[i],0,0); } //provasimmetria.getContext('2d').drawImage(video,0,0,video.videoWidth, video.videoHeight,0,0,w,h); //simmetric(provasimmetria, provasimmetria); } 4c:T735,realTimeVideoRecorder = function(canvas) { var div = html`

` $('').text('RT Video Rec').appendTo(div); var startButton = $('').appendTo(div).css({margin:"0 14px"}).click(onStart); var stopButton = $('').appendTo(div).css({margin:"0 14px"}).hide().click(onStop); var progress = $('progress...').appendTo(div).hide(); var link = $('').appendTo(div).hide(); var recordedChunks = []; var mediaRecorder; var t0; var progressInterval=-1; const now = ()=> new Date().getTime(); function onStart(){ startButton.hide(); stopButton.show(); progress.show(); link.hide(); recordedChunks=[]; var fps = 25; var stream = canvas.captureStream(fps); mediaRecorder = new MediaRecorder(stream, { mimeType: rectype }); mediaRecorder.start(); mediaRecorder.ondataavailable = function (event) { //console.log({ondataavailable:event.data}); recordedChunks.push(event.data); }; mediaRecorder.onstop = function (event) { //console.log({onstop:recordedChunks.length}); var blob = new Blob(recordedChunks, { type: "video/webm" }); var url = URL.createObjectURL(blob); link.text("download video").attr('href', url); }; t0=now(); progressInterval = setInterval(function(){ console.log('prog intv'); var t=((now()-t0)/1000).toFixed(1); progress.text("time: "+t+" sec"); }, 250); } function onStop(){ startButton.show(); stopButton.hide(); progress.hide(); link.show(); mediaRecorder.stop(); clearInterval(progressInterval); } return div; }4d:[] 47:{"id":"e437ae7ccc1b76db","slug":"prova-2d-4","title":"prova 2d 4","thumbnail":"cc2fa75d6d5c2a42211bcaddff4c1c84dad71edf1022151ed2a0f0b99b368309","access_level":"public","create_time":"$D2023-02-12T19:01:56.034Z","update_time":"$D2023-04-25T14:45:04.804Z","view_time":null,"first_public_time":"$D2023-02-12T19:01:56.034Z","has_unpublished_edits":null,"fork":{"id":"16b5227216ab193f","slug":"prova-2d-3","title":"prova 2d 3","owner":{"id":"8f312c34120e2497","login":"paoloandrenacci","name":"Paolo Andrenacci"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8f312c34120e2497","login":"paoloandrenacci","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/6afb12025151f7f643997ab2f4d1b47d21d89c84205415400758c66fd4058382","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1371,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"00e56cf4dcae3d7a","login":"paoloandrenacci","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/6afb12025151f7f643997ab2f4d1b47d21d89c84205415400758c66fd4058382","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"00e56cf4dcae3d7a","login":"paoloandrenacci","name":"Paolo Andrenacci","avatar_url":"https://avatars-next.observableusercontent.com/6afb12025151f7f643997ab2f4d1b47d21d89c84205415400758c66fd4058382","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 2d 4","cells":[{"id":0,"value":"# prova 2d 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"{\n const div = html`

`\n function f() {\n render();\n requestAnimationFrame(f);\n }\n div.append(canvas[0]);\n f();\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":343,"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":389,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1216,"value":"{let x=html `

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"function pt() {\n let x=Math.random();\n let y=Math.random();\n let tx=Math.random();\n let ty=Math.random();\n\n function next() {\n if (Math.random()*400<1) {\n tx=Math.random();\n ty=Math.random();\n }\n x += (tx-x)*.013;\n y += (ty-y)*.013;\n return {x,y};\n }\n function cur() {\n return {x,y};\n }\n return {next,cur}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"rectype = 'video/webm;codecs=h264,vp9,opus';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"video.videoWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"video=html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"initvideo = {\n const constraints = { video: { width: 1280, height: 720, facingMode: 'user' } };\n function onStream(stream) {\n video.srcObject = stream;\n video.play(); \n }\n function onError(error) {\n\t\tconsole.error( 'Unable to access the camera/webcam.', error ); \n }\n navigator.mediaDevices.getUserMedia( constraints ).then(onStream, onError);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":336,"value":"import { jQuery as $ } from \"@ddspog/useful-libs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"import {adobe} from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"import {colorhunt} from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null