2b:null 2c:["$","title",null,{"children":"Image Cookbook | Chuncheng | Observable"}] 31:T63d,// This is not very efficient, so don't use this in filters with big // radii. On the other hand, it's easier to follow code-wise function selectNearest(cx, cy, dx, dy, source, width, height) { // assuming that source is an RGBA array, the central index should be at: const cIdx = (cx + cy * width) * 4; // Side-note: interesting dilemma: do we pick "per color" or "per color channel"? // I suspect the latter will perform better. However, we first try this with a // closest-color formula using Kotsarenko/Ramos. // 35215 is the maximum possible value for the Kotsarenko/Ramos YIQ difference metric let minDiff = 35215 ; let pick = cIdx; // we only want to test pixels that are inside the boundaries if (cx + dx < width && cy + dy < height) { const pos = cIdx + (dx + dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff < minDiff) { pick = pos; minDiff = diff; } } if (cx - dx >= 0 && cy - dy >= 0) { const pos = cIdx - (dx + dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff < minDiff) { pick = pos; minDiff = diff; } } if (cx + dy < width && cy - dx >= 0) { const pos = cIdx + (dy - dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff < minDiff) { pick = pos; minDiff = diff; } } if (cx - dy >= 0 && cy + dx < height) { const pos = cIdx - (dy - dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff < minDiff) { pick = pos; minDiff = diff; } } return pick; }32:T56a,function boxblurSNNTwoPass({source, width, height, radius}) { let target = new Uint8ClampedArray(source.length), buffer = new Float64Array(source.length); const factor = 1 / (radius + 1); const {min, max} = Math; // Horizontal pass for(let y = 0; y < height; y++) { const line = y * width * 4; for (let x = 0; x < width; x++) { const cIdx = x*4 + line; let r = source[cIdx]; let g = source[cIdx]; let b = source[cIdx]; for (let dx = 1; dx <= radius; dx++) { const pick = selectNearest(x, y, dx, 0, source, width, height); r += source[pick]; g += source[pick + 1]; b += source[pick + 2]; } buffer[cIdx] = r * factor; buffer[cIdx+1] = g * factor; buffer[cIdx+2] = b * factor; } } for(let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const cIdx = (x + y * width) * 4; let r = buffer[cIdx]; let g = buffer[cIdx+1]; let b = buffer[cIdx+2]; for (let dy = 1; dy <= radius; dy++) { const pick = selectNearest(x, y, 0, dy, buffer, width, height); r += buffer[pick]; g += buffer[pick + 1]; b += buffer[pick + 2]; } target[cIdx] = r * factor | 0; target[cIdx+1] = g * factor | 0; target[cIdx+2] = b * factor | 0; target[cIdx+3] = 255; } } return target; }33:T485,// Assumes the filter will return a typed array function makeFilterWorker(filter, params) { const script = makeFilterWorkerScript(filter); const context = DOM.context2d(params.width, params.height, 1); const imageData = context.getImageData(0, 0, params.width, params.height); // use original image to start with imageData.data.set(params.source); context.putImageData(imageData, 0, 0); // emphasize that this is the unrendered image context.font = "40px serif"; context.fillStyle = "#00000088"; context.fillRect(0, 0, params.width, params.height); context.fillText("Rendering...", 24, 64); context.fillStyle = "white"; context.fillText("Rendering...", 20, 60); context.strokeStyle = "black"; context.strokeText("Rendering...", 20, 60); const worker = new Worker(script); const messaged = ({ data: { rgba } }) => { imageData.data.set(rgba); context.putImageData(imageData, 0, 0); }; invalidation.then(() => worker.terminate()); worker.onmessage = messaged; worker.postMessage({ params }); context.canvas.style = "image-rendering: crisp-edges; image-rendering: pixelated"; return context.canvas; }34:T40a,// Assumes the filter will return a typed array function makeFilterWorkerScript(filter) { const filterScript = filter.toString(); const script = ` // Inline all the generic functions used by the filter ${colorDelta.toString()} ${filterScript.indexOf("selectNearest") !== -1 ? selectNearest.toString() : ""} ${filterScript.indexOf("selectFurthest") !== -1 ? selectFurthest.toString() : ""} ${filterScript.indexOf("selectDipole") !== -1 ? selectDipole.toString() : ""} ${filterScript.indexOf("bellcurvish2D") !== -1 ? bellcurvish2D.toString() : ""} ${filterScript.indexOf("bellcurvish1D") !== -1 ? bellcurvish1D.toString() : ""} // Inline the filter ${filterScript} onmessage = event => { const {params} = event.data; const rgba = ${filter.name}(params); postMessage({rgba}, [rgba.buffer]); close(); } `; const url = URL.createObjectURL(new Blob([script], {type: 'text/javascript'})) invalidation.then(() => URL.revokeObjectURL(url)); return url; }35:T656,function selectDipole(cx, cy, dx, dy, source, width, height) { // assuming that source is an RGBA array, the central index should be at: const cIdx = (cx + cy * width) * 4; // 35215 is the maximum possible value for the Kotsarenko/Ramos YIQ difference metric let minDiff = 35215, maxDiff = 0; let minPick = cIdx, maxPick = cIdx; // we only want to test pixels that are within the boundaries if (cx + dx < width && cy + dy < height) { const pos = cIdx + (dx + dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff < minDiff) { minPick = pos; minDiff = diff; } if (diff > maxDiff) { maxPick = pos; maxDiff = diff; } } if (cx - dx >= 0 && cy - dy >= 0) { const pos = cIdx - (dx + dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff < minDiff) { minPick = pos; minDiff = diff; } if (diff > maxDiff) { maxPick = pos; maxDiff = diff; } } if (cx + dy < width && cy - dx >= 0) { const pos = cIdx + (dy - dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff < minDiff) { minPick = pos; minDiff = diff; } if (diff > maxDiff) { maxPick = pos; maxDiff = diff; } } if (cx - dy >= 0 && cy + dx < height) { const pos = cIdx - (dy - dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff < minDiff) { minPick = pos; minDiff = diff; } if (diff > maxDiff) { maxPick = pos; maxDiff = diff; } } return {minPick, minDiff, maxPick, maxDiff}; }36:T430,function selectFurthest(cx, cy, dx, dy, source, width, height) { const cIdx = (cx + cy * width) * 4; let maxDiff = 0; let pick = cIdx; // we only want to test pixels that are inside the boundaries if (cx + dx < width && cy + dy < height) { const pos = cIdx + (dx + dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff > maxDiff) { pick = pos; maxDiff = diff; } } if (cx - dx >= 0 && cy - dy >= 0) { const pos = cIdx - (dx + dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff > maxDiff) { pick = pos; maxDiff = diff; } } if (cx + dy < width && cy - dx >= 0) { const pos = cIdx + (dy - dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff > maxDiff) { pick = pos; maxDiff = diff; } } if (cx - dy >= 0 && cy + dx < height) { const pos = cIdx - (dy - dy * width) * 4; const diff = colorDelta(source, cIdx, pos); if (diff > maxDiff) { pick = pos; maxDiff = diff; } } return pick; }37:T911,// Adapted from code in https://github.com/mapbox/pixelmatch /* Inlined for better performance // function rgb2y(r, g, b) { return r * 0.29889531 + g * 0.58662247 + b * 0.11448223; } // function rgb2i(r, g, b) { return r * 0.59597799 - g * 0.27417610 - b * 0.32180189; } // function rgb2q(r, g, b) { return r * 0.21147017 - g * 0.52261711 + b * 0.31114694; } // // blend semi-transparent color with white // function blend(c, a) { // return 255 + (c - 255) * a; // } */ // calculate color difference according to the paper "Measuring perceived color difference // using YIQ NTSC transmission color space in mobile applications" by Y. Kotsarenko and F. Ramos function colorDelta(img, pos1, pos2) { let r1 = img[pos1 + 0]; let g1 = img[pos1 + 1]; let b1 = img[pos1 + 2]; // let a1 = img[pos1 + 3]; // we ignore alpha in this demo, for perf reasons let r2 = img[pos2 + 0]; let g2 = img[pos2 + 1]; let b2 = img[pos2 + 2]; // let a2 = img[pos2 + 3]; if (r1 === r2 && g1 === g2 && b1 === b2) return 0; // if (a1 < 255) { // a1 /= 255; // r1 = 255 + (r1 - 255) * a1; // blend(r1, a1); // g1 = 255 + (g1 - 255) * a1; // blend(g1, a1); // b1 = 255 + (b1 - 255) * a1; // blend(b1, a1); // } // if (a2 < 255) { // a2 /= 255; // r2 = 255 + (r2 - 255) * a2; // blend(r2, a2); // g2 = 255 + (g2 - 255) * a2; // blend(g2, a2); // b2 = 255 + (b2 - 255) * a2; // blend(b2, a2); // } // const y = rgb2y(r1, g1, b1) - rgb2y(r2, g2, b2); // const i = rgb2i(r1, g1, b1) - rgb2i(r2, g2, b2); // const q = rgb2q(r1, g1, b1) - rgb2q(r2, g2, b2); const r = r1 - r2; const g = g1 - g2; const b = b1 - b2; // Without strength-reduction // const y = r * 0.29889531 + g * 0.58662247 + b * 0.11448223 // const i = r * 0.59597799 - g * 0.27417610 - b * 0.32180189 // const q = r * 0.21147017 - g * 0.52261711 + b * 0.31114694 // return 0.5053 * y * y + 0.299 * i * i + 0.1957 * q * q; // With strength-reduced constants const y = r * 0.2124681075446384 + g * 0.4169973963260294 + b * 0.08137907133969426; const i = r * 0.3258860837850668 - g * 0.14992193838645426 - b * 0.17596414539861255; const q = r * 0.0935501584120867 - g * 0.23119531908149002 + b * 0.13764516066940333; return y*y + i*i + q*q }38:T4de,fragmentShaderSNN = { const shader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource( shader, ` precision mediump float; // our texture uniform sampler2D u_image; uniform float u_size; #define KERNEL_SIZE ${KERNEL_SIZE} #define HALF_SIZE (KERNEL_SIZE / 2) #define DIRECT ${SelectSNNDirect} void main() { float u_pixelsCountRev = 1.0 / float(HALF_SIZE * KERNEL_SIZE); vec2 textCoord = vec2(gl_FragCoord.x / u_size, 1.0 - gl_FragCoord.y / u_size); vec2 onePixel = vec2(1.0, 1.0) / u_size; vec4 meanColor = vec4(0); vec4 v = texture2D(u_image, textCoord); int count = 0; for (int y = 0; y <= HALF_SIZE; y++) { for (int x = -HALF_SIZE; x <= HALF_SIZE; x++) { vec4 v1 = texture2D(u_image, textCoord + vec2(x, y) * onePixel); vec4 v2 = texture2D(u_image, textCoord + vec2(-x, -y) * onePixel); vec4 d1 = abs(v - v1); vec4 d2 = abs(v - v2); float dd1 = dot(d1, d1); float dd2 = dot(d2, d2); vec4 rv = (dd1 DIRECT dd2) ? v1 : v2; meanColor += rv; } } gl_FragColor = meanColor * u_pixelsCountRev; } ` ); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; throw new Error(gl.getShaderInfoLog(shader)); }39:T432,fragmentShaderOutline = { const shader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource( shader, ` precision highp float; uniform sampler2D u_image; uniform float u_size; void main() { float x = gl_FragCoord.x / u_size; float y = 1.0 - gl_FragCoord.y / u_size; float px = 1.0 / u_size; vec3 a0 = texture2D(u_image, vec2(x - px, y + px)).xyz; vec3 a1 = texture2D(u_image, vec2(x, y + px)).xyz; vec3 a2 = texture2D(u_image, vec2(x + px, y + px)).xyz; vec3 a3 = texture2D(u_image, vec2(x - px, y)).xyz; vec3 a5 = texture2D(u_image, vec2(x + px, y)).xyz; vec3 a6 = texture2D(u_image, vec2(x - px, y - px)).xyz; vec3 a7 = texture2D(u_image, vec2(x, y - px)).xyz; vec3 a8 = texture2D(u_image, vec2(x + px, y - px)).xyz; vec3 gx = -a0 + a2 - 2.0 * a3 + 2.0 * a5 - a6 + a8; vec3 gy = -a0 - 2.0 * a1 - a2 + a6 + 2.0 * a7 + a8; gl_FragColor = vec4(sqrt(gx * gx + gy * gy), 1.0); } ` ); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; throw new Error(gl.getShaderInfoLog(shader)); }3a:[] 2f:{"id":"8f95bff1061d7553","slug":"image-cookbook","title":"Image Cookbook","thumbnail":"592408a891fe40a9738197afc72809bab77948ababc2de004bcd062bfbc58069","access_level":"public","create_time":"$D2023-01-07T11:43:04.561Z","update_time":"$D2023-01-09T11:23:14.754Z","view_time":null,"first_public_time":"$D2023-01-07T11:43:04.561Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":318,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"7a372bf651d9b6a4","slug":"gpu-io","title":"GPU-IO","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Image Cookbook","cells":[{"id":0,"value":"# Image Cookbook\n\nThe methods of handling an image.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"## Source random Image from the Unsplash\n\nLoad an online image, and convert it into image object using Promise.\nThe Unsplash manual is in\nhttps://awik.io/generate-random-images-unsplash-without-using-api/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof selectCategory = Inputs.select(\n [\n \"?plant\",\n \"?flower\",\n \"?city\",\n \"?fruit\",\n \"?people\",\n \"?pet\",\n \"?hill\",\n \"?crowd\"\n ],\n {\n label: \"Select Category\",\n value: \"?city\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"url = \"https://source.unsplash.com/random/600x600/\" + selectCategory","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"

\n The rawImage is loaded, the size is\n ${rawImage.width}\n x\n ${rawImage.height}\n

\n The rawImageData is the Uint8ClampedArray of\n ${rawImageDate.data.length}\n elements.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"rawImage = {\n return await new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\n resolve(image);\n };\n image.src = url;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"rawImageDate = {\n width; // trigger resize when going to fullscreen, or landscape on mobile\n const ctx = DOM.context2d(rawImage.width, rawImage.height, 1);\n ctx.drawImage(rawImage, 0, 0, ctx.canvas.width, ctx.canvas.height);\n const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);\n return imageData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"## The SNN filtered Image\nThe SNN (Symmetric Nearest Neighbor Filter).\nThe SNN filter is https://fiveko.com/symmetric-nearest-neighbor-filter/\n\nThe script is copied from https://observablehq.com/@jobleonard/symmetric-nearest-neighbour-all-the-things","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"viewof SNNFilterRadius = Inputs.range([10, 50], {\n label: \"Radius of SNN\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"filteredRawImageData = {\n const blurParams = makeFilterParams(rawImageDate, SNNFilterRadius);\n return makeFilterWorker(boxblurSNNTwoPass, blurParams);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function makeFilterParams(imageData, radius) {\n return {\n source: imageData.data,\n width: imageData.width,\n height: imageData.height,\n radius\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"function bellcurvish2D(radius) {\n const p = new Uint32Array(radius + 1);\n for (let i = 0; i <= (radius + 1) / 2; i++) {\n for (let j = 0; j <= radius / 2; j++) {\n p[i + j]++;\n }\n }\n const q = new Uint32Array(p.length * 2 - 1);\n for (let i = 0; i < p.length; i++) {\n for (let j = 0; j < p.length; j++) {\n q[i + j] += p[j];\n }\n }\n\n let total = 0;\n const quadratic2D = [];\n for (let i = 0; i < q.length; i++) {\n const c = q[i];\n const q2 = [];\n for (let j = 0; j < q.length; j++) {\n const val = c * q[j];\n total += val;\n q2.push(val);\n }\n quadratic2D.push(q2);\n }\n const norm = 1 / total;\n for (let i = 0; i < q.length; i++) {\n for (let j = 0; j < q.length; j++) {\n quadratic2D[i][j] *= norm;\n }\n }\n return quadratic2D;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"function bellcurvish1D(radius) {\n const p = new Uint32Array(radius + 1);\n for (let i = 0; i <= (radius + 1) / 2; i++) {\n for (let j = 0; j <= radius / 2; j++) {\n p[i + j]++;\n }\n }\n const q = new Uint32Array(p.length * 2 - 1);\n for (let i = 0; i < p.length; i++) {\n for (let j = 0; j < p.length; j++) {\n q[i + j] += p[j];\n }\n }\n\n const quadratic = [];\n for (let v of q) {\n quadratic.push(v * v);\n }\n return quadratic;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"## Real-time Webgl Shader\n\nIt is a much faster WebGL rendering for the filter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"viewof KERNEL_SIZE = Inputs.range([10, 100], {\n label: \"KERNEL_SIZE\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"viewof SelectSNNDirect = Inputs.select([\">\", \"<\"], {\n label: html`\n

Select SNN Direct

<:SmallestNN

>: LargestNN

\n`,\n value: \"<\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"viewof selectFilter = Inputs.select([\"SNN\", \"Outline\"], {\n label: \"Select Filter\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof gl = {\n const canvas = DOM.canvas(width, height);\n canvas.value = canvas.getContext(\"webgl\");\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"width = rawImage.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"height = rawImage.height //~~(width * 9) / 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"program = {\n const program = gl.createProgram();\n\n var shader;\n if (selectFilter === \"SNN\") shader = fragmentShaderSNN;\n if (selectFilter === \"Outline\") shader = fragmentShaderOutline;\n\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, shader);\n gl.linkProgram(program);\n\n if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;\n throw new Error(gl.getProgramInfoLog(program));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"draw = {\n const u_size = gl.getUniformLocation(program, \"u_size\");\n const a_vertex = gl.getAttribLocation(program, \"a_vertex\");\n\n gl.useProgram(program);\n\n gl.enableVertexAttribArray(a_vertex);\n gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);\n\n gl.uniform1f(u_size, Math.max(viewof gl.width, viewof gl.height));\n\n // while (true)\n function render() {\n gl.texImage2D(\n gl.TEXTURE_2D,\n 0,\n gl.RGBA,\n gl.RGBA,\n gl.UNSIGNED_BYTE,\n rawImage\n );\n gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n // yield;\n }\n\n render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"vertexShader = {\n const shader = gl.createShader(gl.VERTEX_SHADER);\n gl.shaderSource(\n shader,\n `\nattribute vec2 a_vertex;\n\nvoid main(void) {\n gl_Position = vec4(a_vertex, 0.0, 1.0);\n}\n`\n );\n gl.compileShader(shader);\n if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;\n throw new Error(gl.getShaderInfoLog(shader));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"{\n const texture = gl.createTexture();\n gl.bindTexture(gl.TEXTURE_2D, texture);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n return texture;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"{\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(\n gl.ARRAY_BUFFER,\n Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1),\n gl.STATIC_DRAW\n );\n return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"// video = {\n// const video = document\n// .createElement(\"div\")\n// .appendChild(html`