2d:null 2e:["$","title",null,{"children":"Multi-level Thesholding | Vinícius Mello | Observable"}] 33:T403,draw = { const texture = regl.texture({ width: imageData.width, height: imageData.height, data: imageData.data, min: 'nearest', mag: 'nearest', wrap: 'clamp', }); const draw = regl({ frag: ` precision mediump float; uniform sampler2D texture; uniform sampler2D lut; varying vec2 uv; void main () { vec4 p = texture2D(texture, uv); p.x = texture2D(lut, vec2(p.x, 0.5)).x; p.y = texture2D(lut, vec2(p.y, 0.5)).y; p.z = texture2D(lut, vec2(p.z, 0.5)).z; gl_FragColor = p; }`, vert: ` precision mediump float; attribute vec2 position; varying vec2 uv; void main () { uv = position; gl_Position = vec4( 2.0 * position - 1.0, 0.0, 1.0); gl_Position.y = -gl_Position.y; }`, attributes: { position: [ [0, 0], [1, 0], [1, 1], [1, 1], [0, 1], [0, 0] ] }, uniforms: { texture: texture, lut: regl.prop('lut') }, primitive: 'triangles', count: 6 }); return draw; }34:T9fc,function multiLevels(data) { let data2; const svg = d3.create("svg") .attr("width", width) .attr("height", 40) .attr("viewBox", `0 0 ${width} 40`); let svgNode = svg.node(); svgNode.value = data; let scale = d3.scaleLinear() .domain([0, 255]) .range([20, width-20]); let axis = d3.axisBottom() .scale(scale); const sortedIndex = (array, value) => { let low = 0, high = array.length; while (low < high) { let mid = low + high >>> 1; if (array[mid] < value) low = mid + 1; else high = mid; } return low; } const up = (data) => { svg.selectAll("circle") .data(data, d => d) .join( enter => enter.append("circle") .attr("cursor", "move") // .attr("stroke", "black") .attr("stroke-width", 1) .attr("r", 6) .attr("fill", "white") .attr("visibility", (d) => d==255 ? 'hidden' : 'visible') .attr("pointer-events", "visible") .attr("cx", d => scale(d) ) .attr("cy", 20) .on("click", (d) => { if(d3.event.ctrlKey) { data.splice(sortedIndex(data, d), 1); up(data); } }) .call(d3.drag() .on("start", function(d) { data2 = data.slice(); }) .on("drag", function(d) { let xi = d3.event.x; xi = xi>0 ? xi : 0; let x = Math.floor(scale.invert(xi)); let i = sortedIndex(data2, d); if((i==0 && x<=data2[1]) || (i !=0 && x>data2[i-1] && x<=data2[i+1])) { d3.select(this).attr('cx', xi); data[i] = x; d3.select(this).datum(x); svgNode.dispatchEvent(new CustomEvent("input")) } }) .on("end", function(d) { d3.event.sourceEvent.stopPropagation(); // silence other listeners })), update => update, exit => exit.remove()); svgNode.dispatchEvent(new CustomEvent("input")) } svg.append("g").attr("transform", "translate(0,20)") // .attr("color", "black") .call(axis) .on("click", (d) => { if(d3.event.ctrlKey) { let xi = d3.event.x-10; xi = xi>0 ? xi : 0; let x = Math.floor(scale.invert(xi)); data.splice(sortedIndex(data,x), 0, x); up(data); } }); up(data); return svgNode; }35:[{"id":"3806d7615304d98ee096b785de9baedcf4d988a2807a108bfb589711b31d591a6bb257da9e266c05f56026a15aee09788620f32cc4f0b464cff821322b1e6432","href":"https://static.observableusercontent.com/files/3806d7615304d98ee096b785de9baedcf4d988a2807a108bfb589711b31d591a6bb257da9e266c05f56026a15aee09788620f32cc4f0b464cff821322b1e6432","name":"113016.jpg","type":"image/jpeg","lastModified":1595031536783.758,"size":39333}] 31:{"id":"de3e75e5d90b2f28","slug":"multi-level-thesholding","title":"Multi-level Thesholding","thumbnail":"0d81a3190d6708e5268036b3315b0bb1f822c926f3279c5291a38f4eb9306189","access_level":"public","create_time":"$D2020-07-14T20:01:24.506Z","update_time":"$D2020-07-18T00:25:20.122Z","view_time":null,"first_public_time":"$D2020-07-15T01:49:48.735Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7a4ecd430a93cd6f","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":"starter_2024"},"version":345,"publish_version":345,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecc4854ab7ad95b6","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":null}],"members":[{"type":"individual","id":"ecc4854ab7ad95b6","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Multi-level Thesholding","cells":[{"id":0,"value":"md`# Multi-level Thesholding`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"image = FileAttachment(\"113016.jpg\").image() //d3.image(\"https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Polarlicht_2.jpg/1024px-Polarlicht_2.jpg\", {crossOrigin: \"anonymous\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"imageData = {\n const canvas = DOM.canvas(image.naturalWidth, image.naturalHeight);\n const context = canvas.getContext(\"2d\");\n canvas.style = \"width: 100%\";\n context.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);\n const imageData = context.getImageData( 0, 0, image.naturalWidth, image.naturalHeight);\n return imageData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof regl = {\n const div = html`

`;\n const output = DOM.canvas(imageData.width, imageData.height);\n output.style = \"width: 50%\";\n const input = DOM.canvas(imageData.width, imageData.height);\n const context = input.getContext(\"2d\");\n context.drawImage(image, 0, 0, imageData.width, imageData.height);\n input.style = \"width: 50%\";\n div.appendChild(input);\n div.appendChild(output);\n div.value = reglWrap(output);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof r_level = { \n let r_level = multiLevels([50, 100, 200, 255]);\n r_level.style = \"color: red; stroke: red\";\n return r_level;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"viewof g_level = { \n let g_level = multiLevels([50, 100, 200, 255]);\n g_level.style = \"color: green; stroke: green\";\n return g_level;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof b_level = { \n let b_level = multiLevels([50, 100, 200, 255]);\n b_level.style = \"color: blue; stroke: blue\";\n return b_level;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"threshold = { \n return [\n r_level,\n g_level,\n b_level\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"{\n const ranges = (a, f, o) => {\n let r = [];\n for(let i=0;i {\n return (a,b) => {\n let m = 0;\n let s = 0;\n for(let i=a+1; i<=b; ++i) {\n m = m+hist[c][i]*i;\n s = s+hist[c][i];\n }\n return m/s; // (a+b)/2; \n }\n };\n const at = (i, c, v) => { lut[4*i+c]=v ; };\n let m = [];\n for(let c=0; c<3; ++c) \n m.push(ranges(threshold[c], meanLevel(c), -1));\n let ci = [0, 0, 0];\n for(let i=0;i<256;++i) {\n for(let c=0; c<3; ++c) {\n if(i>threshold[c][ci[c]]) ci[c]++;\n at(i, c, m[c][ci[c]]);\n }\n }\n const lutTex = regl.texture({\n width: 256,\n height: 1,\n data: lut,\n min: 'nearest',\n mag: 'nearest',\n wrap: 'clamp',\n });\n draw({lut: lutTex});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"lut = new Uint8ClampedArray(4*256)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"hist = {\n return [\n getHistogram(imageData, 0),\n getHistogram(imageData, 1),\n getHistogram(imageData, 2),\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function getPixel(im, i, j, c) {\n if(i<0 || i>=im.width || j<0 || j>=im.height) return 0;\n return im.data[4*im.width*j+4*i+c];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"function getHistogram(im, c) {\n let hist = new Uint32Array(256);\n for(let i=0;i