30:T77d,runner = { let t0 = Date.now(); mutable frame = ((frame || 0) + 1) % cfg.depth; let i, top, lh = cfg.height / cfg.depth, lines = cfg.height / lh, w = cfg.width, h = cfg.height, next = (frame + 1) % cfg.depth, bytes = w * h * cfg.depth * 3 ; if (trick === "none") { // do nothing } else if (trick === "copy") { target.getContext('2d').drawImage(source, 0, 0, w, h); } else if (trick === "delay") { buffer[frame].getContext('2d').drawImage(source, 0, 0, w, h); target.getContext('2d').drawImage(buffer[next], 0, 0, w, h); } else if (trick === "flow") { buffer[frame].getContext('2d').drawImage(source, 0, 0, w, h); for (i=0; i

Running ${trick} with depth ${cfg.depth}

${bytes/1e6} MB Memory ${lines} / ${lh} Lines/Height ${frame} pointer ${Date.now() - t0} frame duration ${buffer.length} buffer length ` }31:[] 2e:{"title":"Cam Tricks","cells":[{"id":0,"value":"title = md`# Cam Tricks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"import {button, checkbox, radio, addWheelListener, View} from \"@arcticio/toolbox\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"viewof depth = new View(120)","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"{\n const input = html``;\n viewof depth.addEventListener(\"input\", event => input.value = event.value);\n input.addEventListener(\"input\", () => viewof depth.value = input.valueAsNumber);\n input.value = viewof depth.value;\n \n yield input;\n //input.parent.appendChild(html`

HUHU

`)\n console.log(input)\n \n while (true) yield input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"cfg = {\n return {\n width: 640,\n height: 480,\n depth: depth,\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"viewof tricks = radio([\"None\", \"Copy\", \"Delay\", \"Flow\", \"Random\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"source = {\n \n const \n video = html`

`,\n constraints = { audio: false, video: { width: {exact: 640}, height: {exact: 480}} },\n stream = navigator.mediaDevices ?\n navigator.mediaDevices.getUserMedia(constraints) :\n new Promise((y, n) => navigator.getUserMedia(constraints, y, n))\n ;\n\n video.style.maxWidth = \"100%\";\n\n yield stream.then(stream => {\n\n if (\"srcObject\" in video) {\n video.srcObject = stream;\n } else {\n video.src = URL.createObjectURL(stream);\n }\n\n invalidation.then(() => {\n stream.getTracks().forEach(t => t.stop());\n URL.revokeObjectURL(video.src);\n });\n\n return video;\n\n });\n\n while (true) { yield video }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"target = {\n\n let cvs, max = 0, w = cfg.width, h = cfg.height;\n\n if (!this) {\n cvs = DOM.context2d(w, h, 1).canvas;\n cvs.style.background = \"#333\";\n cvs.style.width = `${w}px`;\n cvs.style.height = `${h}px`;\n cvs.className = \"mirror\";\n cvs.id = \"target\";\n\n }\n\n return (cvs || this);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"{\n const button = html``;\n \n function fullScreen(element) {\n if(element.requestFullScreen) {\n element.requestFullScreen();\n } else if(element.webkitRequestFullScreen ) {\n element.webkitRequestFullScreen();\n } else if(element.mozRequestFullScreen) {\n element.mozRequestFullScreen();\n } else {\n console.log(element, \"no fullscreen support\");\n }\n }\n \n button.onclick = function () {\n fullScreen( document.querySelector(\"#target\") );\n }\n\n while (true) yield button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"CSS = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"trick = {\n yield tricks.toLowerCase();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"mutable frame = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"buffer = {\n \n cfg; depth;\n \n var i, cvss;\n \n function update () {\n cvss = [];\n for ( i=0; i {\n cvss = undefined;\n });\n\n return cvss;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"yield new Promise((resolve, reject) => {\n const image = new Image;\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.crossOrigin = \"anonymous\";\n image.src = url;\n})\n\nlet imageData = {\n const width = 224, height = 224;\n const context = this ? this.context : DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, width, height);\n const data = context.getImageData(0, 0, width, height);\n data.context = context;\n return data;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}