2b:null 2c:["$","title",null,{"children":"gpu.js laser detection v3 | Brian Hann | Observable"}] 31:T556,function imageKernel(width, height) { let kernel = gpu.createKernel(function(image) { const pixel = image[this.thread.y][this.thread.x]; const hsv = rgb2hsv(pixel[0], pixel[1], pixel[2]) const h = hsv[0]; const s = hsv[1]; const v = hsv[2]; // if (this.thread.x >= 419 && this.thread.x <= 438 && // this.thread.y >= 510 && this.thread.y <= 526) if (this.thread.x >= 309 && this.thread.x <= 328 && this.thread.y >= 335 && this.thread.y <= 355) { // this.color(1, 1, 0, 1); // console.log(pixel[0] * 255, pixel[1] * 255, pixel[2] * 255) // console.log([pixel[0], pixel[1], pixel[2], pixel[3]]); // console.log(h, s, v); } // hue_min=20, hue_max=160, // sat_min=100, sat_max=255, val_min=200, val_max=256, if ( // h >= 20 && h <= 160 && s >= 0 && s <= 100 && v >= 78 && v <= 100 && h >= 318 ) { // this.color(pixel[0], pixel[1], pixel[2], pixel[3]); this.color(0, 1, 0, 1); // } else if (this.thread.x >= 309 && this.thread.x <= 328 && this.thread.y >= 335 && this.thread.y <= 355) { // this.color(1, 1, 0, 1); return 1; } else { this.color(pixel[0], pixel[1], pixel[2], pixel[3]); return 0; } }) // .setGraphical(true) .setOutput([width, height]); return kernel; }32:T7e7,{ let img = document.createElement('img'); let canvas img.crossOrigin = "" img.onload = function() { // Scale down image // img.height = parseInt(img.height / 2, 10); // img.width = parseInt(img.width / 2, 10); // Comment out if returning below console.log(img.width, img.height) let kernel = imageKernel(img.width, img.height) // let kernel2 = boxKernel(img.width, img.height) console.log('running!') let start = window.performance.now() let out = kernel(img) // console.log(out); console.log('Size', out.length, out[0].length); // Out is an array of Float32Arrays that is height x width (height first, i.e. Array is `height` in length) const dots = []; let minx = img.width; let miny = img.height; let maxx = 0; let maxy = 0; for (let y = 0; y <= out.length-1; y++) { const arr = out[y]; for (let x = 0; x <= arr.length-1; x++) { if (arr[x] == 1) { if (x < minx) minx = x; if (x > maxx) maxx = x; if (y < miny) miny = y; if (y > maxy) maxy = y; } } } // Inverse miny = img.height - miny; maxy = img.height - maxy; console.log([minx, miny], [maxx, maxy]); let boxSize = Math.max(maxx - minx, maxy - miny); let stop = window.performance.now() console.log('Took', stop - start); canvas2.width = img.width; canvas2.height = img.height; const ctx = canvas2.getContext("2d"); ctx.drawImage(img, 0, 0); console.log(canvas); ctx.beginPath(); const mid = (a, b) => ((b - a) / 2) + a; ctx.arc(mid(minx, maxx), mid(miny, maxy), boxSize, 0, 2 * Math.PI); ctx.strokeStyle = 'yellow'; ctx.stroke(); } // img.src = 'https://i.imgur.com/qb1ywMq.jpg' // img.src = 'https://i.imgur.com/eLpI3sN.jpg' // img.src = 'https://i.imgur.com/q4t1tgb.jpg' // img.src = 'https://i.imgur.com/QKgG5vT.jpg' img.src = 'https://i.imgur.com/QOyFPcN.jpg' // return img }33:[] 2f:{"id":"04ad9b3fe64269b3","slug":"gpu-js-laser-detection-v3","title":"gpu.js laser detection v3","thumbnail":"90616889b3f497ddd80ca6342258a4a7330097c5cdb0860d82ae575a681bb3da","access_level":"public","create_time":"$D2019-08-16T21:28:30.972Z","update_time":"$D2022-08-16T18:50:51.319Z","view_time":null,"first_public_time":"$D2022-08-16T18:50:58.525Z","fork":{"id":"443ead88a359c7ac","slug":"gpu-js-laser-detection-v2","title":"gpu.js laser detection v2","owner":{"id":"d9ebd3e30cc18fea","login":"c0bra","name":"Brian Hann"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d9ebd3e30cc18fea","login":"c0bra","name":"Brian Hann","avatar_url":"https://avatars-next.observableusercontent.com/2a762199400ae2ccef5e142c5e8ab07d3100bae6b0b786b75b1b560cc51630fc","tier":"starter_2024"},"version":395,"publish_version":395,"role":null,"authored":false,"authors":[{"type":"individual","id":"0506b686766d1f20","login":"c0bra","name":"Brian Hann","avatar_url":"https://avatars-next.observableusercontent.com/2a762199400ae2ccef5e142c5e8ab07d3100bae6b0b786b75b1b560cc51630fc","tier":null}],"members":[{"type":"individual","id":"0506b686766d1f20","login":"c0bra","name":"Brian Hann","avatar_url":"https://avatars-next.observableusercontent.com/2a762199400ae2ccef5e142c5e8ab07d3100bae6b0b786b75b1b560cc51630fc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"gpu.js laser detection v3","cells":[{"id":0,"value":"md`# gpu.js laser detection v3`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"GPU = (await require('gpu.js@2.15.2')).GPU","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"canvas = document.createElement('canvas');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"canvas2 = document.createElement('canvas');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"gpu = new GPU({ mode: 'gpu', canvas })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"function rgb2hsv(r, g, b) {\n let rr = 0, gg = 0, bb = 0,\n h = 0, s = 0;\n let v = Math.max(r, g);\n v = Math.max(v, b);\n \n let minv = Math.min(r, g);\n minv = Math.min(minv, b);\n let diff = v - minv;\n\n function diffc(c, v, diff) {\n return (v - c) / 6 / diff + 1 / 2;\n }\n\n if (diff == 0) {\n h = s = 0;\n } else {\n s = diff / v;\n rr = diffc(r, v, diff);\n gg = diffc(g, v, diff);\n bb = diffc(b, v, diff);\n\n if (r === v) {\n h = bb - gg;\n } else if (g === v) {\n h = (1 / 3) + rr - bb;\n } else if (b === v) {\n h = (2 / 3) + gg - rr;\n }\n \n if (h < 0) {\n h += 1;\n } else if (h > 1) {\n h -= 1;\n }\n }\n \n return [Math.round(h * 360), Math.round(s * 100), Math.round(v * 100)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"gpu.addFunction(rgb2hsv, { returnType: 'Array(3)' }); // { returnType: 'Array(3)' }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"function boxKernel(width, height) {\n let kernel = gpu.createKernel(function(image) {\n \n })\n .setOutput([width, height]);\n \n return kernel;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"c2 = document.createElement('canvas');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"{\n let ctx = c2.getContext('2d');\n let array = [];\n \n function saveFrame(blob) {\n array.push(blob);\n }\n \n function drawFrame(e) {\n requestAnimationFrame(() => {\n this.pause();\n ctx.drawImage(this, 0, 0);\n /* \n this will save as a Blob, less memory consumptive than toDataURL\n a polyfill can be found at\n https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill\n */\n // canvas.toBlob(saveFrame, 'image/jpeg');\n if (this.currentTime < this.duration) {\n this.play();\n }\n });\n }\n \n let video = document.createElement('video')\n video.addEventListener('timeupdate', drawFrame, false);\n // video.autoplay = \"true\"\n video.addEventListener('loadeddata', () => {\n if (video.offsetHeight > 0) {\n c2.height = video.offsetHeight;\n c2.width = video.offsetWidth;\n }\n }, false);\n video.src = 'https://i.imgur.com/2e8x4tH.mp4'\n video.play()\n \n return video\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"