30:T516,colorize = { await visibility(); const Dre = inverse; // write the image const contextRe = DOM.context2d(pixels.width, pixels.height, 1), dataRe = contextRe.getImageData(0, 0, pixels.width, pixels.height); const a = options && options.includes("autocontrast") ? 25 / d3.quantile(Dre, 0.95) : 1; const D = options && options.includes("diff"); if (D) { const diffs = Dre.map((d, k) => d - pixels.data[k]), M = d3.mean(diffs), D = options && options.includes("autocontrast") ? d3.deviation(diffs) : 30; diffScale.domain([M - D, M, M + D]); } for (let k = 0; k < Dre.length; k++) { let c; if (D) { const r = Dre[k] - pixels.data[k]; c = d3.rgb(diffScale(r)); } else { const r = (options.includes("original") ? pixels.data[k] : Dre[k] * a) + pixels.mean, r0 = r * 2.55; // in the Lab model, 0≤L≤100; c = options && options.includes("colorize") ? d3.rgb(d3.lab(r, pixels.a?.[k], pixels.b?.[k])) : { r: r0, g: r0, b: r0 }; } const k4 = 4 * k; dataRe.data[k4] = c.r; dataRe.data[k4 + 1] = c.g; dataRe.data[k4 + 2] = c.b; dataRe.data[k4 + 3] = 255; } contextRe.putImageData(dataRe, 0, 0); return contextRe.canvas; }31:Tda1,viewof mouses = { const w = pixels.width, h = pixels.height, context = DOM.context2d(w, h, 1), canvas = context.canvas; const mouse = { x: w, y: 0 }; const mouses = []; mouses.push(mouse); /* // these coordinates represent a wave: // - length => frequency in pixels (scaled by the width) // - angle => direction // remarkably they do not change with the image's dimensions, // which means we can work quickly with a reduced image // */ //if (true) mouses.push({ x: 77, y: 76, radius: 5.32 }); /* */ // create the magnitude image const { Dre, Dim } = fwd; const contextMag = DOM.context2d(w, h, 1), dataMag = contextMag.getImageData(0, 0, w, h), mag = contextMag.canvas; const pre = Dre.map((re, i) => Math.log1p(255 * Math.hypot(re, Dim[i]))), a = 255.999 / d3.max(pre); const colors = d3.range(256).map(i => d3.rgb(d3.interpolateViridis(i / 255))); const wh = Math.floor(w / 2), hh = Math.floor(h / 2); for (let i = 0; i < w; i++) { for (let j = 0; j < h; j++) { // https://ch.mathworks.com/help/matlab/ref/fftshift.html const c = colors[(a * pre[i + w * j]) | 0]; const shifti = (i + w - wh) % w; const shiftj = (j + h - hh) % h; const shiftk = shifti + w * shiftj; const k4 = 4 * shiftk; dataMag.data[k4] = c.r; dataMag.data[k4 + 1] = c.g; dataMag.data[k4 + 2] = c.b; dataMag.data[k4 + 3] = 255; } } contextMag.putImageData(dataMag, 0, 0); const view = html`

${context.canvas}

${contextMag.canvas}`; view.value = mouses; function draw() { context.clearRect(0, 0, w, h); mouses[0].radius = viewof radius.value; for (const m of mouses) { context.beginPath(); context.arc(wh + m.x, hh + m.y, m.radius, 0, 6.3); context.arc(wh - m.x, hh - m.y, m.radius, 0, 6.3); context.fillStyle = "rgba(0,0,0,0.7)"; if (m.down && m.x < w) { context.fillRect(0, 0, w, h); context.save(); context.clip(); context.clearRect(0, 0, w, h); context.restore(); } else { context.fill(); } } const path = d3.geoPath().context(context); context.strokeStyle = "black"; for (const c of contours) { context.beginPath(); path(c); context.stroke(); } } d3.select(canvas) .on("mousemove", event => { const m = d3.pointer(event); // fftshift mouse.x = m[0] - wh; mouse.y = m[1] - hh; // symmetry if (mouse.x < 0) (mouse.x = -mouse.x), (mouse.y = -mouse.y); draw(); setTimeout(dispatch, 300); }) .on("mouseup mouseout", event => { mouses.down = false; if (event.type === "mouseout") mouse.x = w; draw(); setTimeout(dispatch, 10); }) .on("mousedown", event => { mouses.down = true; const i = d3.leastIndex( mouses.slice(1), d => Math.max(0, d.radius - Math.hypot(mouse.x - d.x, mouse.y - d.y)) || NaN ); if (i >= 0) mouses.splice(i + 1, 1); else mouses.push({ ...mouse, radius: viewof radius.value }); draw(); setTimeout(dispatch, 10); }); draw(); let lastvalue; function dispatch() { const newvalue = JSON.stringify(mouse); if (lastvalue !== newvalue) { lastvalue = newvalue; view.dispatchEvent(new CustomEvent("input")); } } return view; }32:T96e,phase = { await visibility(); const w = pixels.width, h = pixels.height, context = DOM.context2d(w, h, 1), canvas = context.canvas; // create the phase image const { Dre, Dim } = filtered; const contextMag = DOM.context2d(w, h, 1), dataMag = contextMag.getImageData(0, 0, w, h), mag = contextMag.canvas; const pre = Dre.map( (re, i) => (Math.atan2(re, Dim[i]) + Math.PI) * (255 / 2 / Math.PI) ); const colors = d3 .range(256) .map(i => d3.rgb(d3.interpolateSpectral(i / 255))); const wh = Math.floor(w / 2), hh = Math.floor(h / 2); for (let i = 0; i < w; i++) { for (let j = 0; j < h; j++) { // https://ch.mathworks.com/help/matlab/ref/fftshift.html const c = colors[pre[i + w * j] | 0]; const shifti = (i + w - wh) % w; const shiftj = (j + h - hh) % h; const shiftk = shifti + w * shiftj; const k4 = 4 * shiftk; dataMag.data[k4] = c.r; dataMag.data[k4 + 1] = c.g; dataMag.data[k4 + 2] = c.b; dataMag.data[k4 + 3] = 255; } } contextMag.putImageData(dataMag, 0, 0); const view = html`

${context.canvas}

${contextMag.canvas}`, value = (view.value = { x: w, y: 0 }); function draw() { context.clearRect(0, 0, w, h); context.beginPath(); context.arc(wh + value.x, hh + value.y, viewof radius.value, 0, 6.3); context.arc(wh - value.x, hh - value.y, viewof radius.value, 0, 6.3); context.fillStyle = "rgba(0,0,0,0.7)"; if (value.down && value.x < w) { context.fillRect(0, 0, w, h); context.save(); context.clip(); context.clearRect(0, 0, w, h); context.restore(); } else { context.fill(); } } d3.select(canvas) .on("mousemove", event => { const m = d3.pointer(event); // fftshift value.x = m[0] - wh; value.y = m[1] - hh; draw(); setTimeout(dispatch, 300); }) .on("mousedown mouseup mouseout", event => { value.down = event.type === "mousedown"; if (event.type === "mouseout") value.x = w; draw(); setTimeout(dispatch, 10); }); draw(); let lastvalue; function dispatch() { const newvalue = JSON.stringify(value); if (lastvalue !== newvalue) { lastvalue = newvalue; view.dispatchEvent(new CustomEvent("input")); } } return view; }33:T443,function FILTERED(fwd) { const Dre = fwd.Dre.slice(), Dim = fwd.Dim.slice(); const w = pixels.width, h = pixels.height, wh = Math.floor(w / 2), hh = Math.floor(h / 2); // low-pass (blur) const r = lowpass_radius; if (r < wh) { for (let k = 0; k < Dre.length; k++) { const i = k % w, j = Math.floor(k / w); const shifti = i > wh ? i - w : i; const shiftj = j > hh ? j - h : j; if (Math.hypot(shifti, shiftj) > r) Dre[k] = Dim[k] = 0; } } // manipulate D as needed for (let i = 0; i < mouses.length; i++) { const mouse = mouses[i]; const down = i === 0 && mouses.down; for (let k = 0; k < Dre.length; k++) { const i = k % w, j = Math.floor(k / w); const shifti = i > wh ? i - w : i; const shiftj = j > hh ? j - h : j; if ( (down && mouse.x < w) ^ (Math.hypot(shifti - mouse.x, shiftj - mouse.y) < mouse.radius || Math.hypot(shifti + mouse.x, shiftj + mouse.y) < mouse.radius) ) Dre[k] = Dim[k] = 0; } } return { Dre, Dim }; }34:T430,function INVERSE({ data, width: w, height: h }) { if (w === undefined) { w = data.length; h = 1; } const Dre = data.Dre.slice(), Dim = data.Dim.slice(); const wh = Math.floor(w / 2), hh = Math.floor(h / 2); // horizontal { const re = new Float64Array(w), im = new Float64Array(w); for (let j = 0; j < h; j++) { for (let i = 0; i < w; i++) { re[i] = Dre[i + w * j]; im[i] = Dim[i + w * j]; } FFT.inverseTransform(re, im); for (let i = 0; i < re.length; i++) { Dre[i + w * j] = re[i]; Dim[i + w * j] = im[i]; } } } // vertical { const re = new Float64Array(h), im = new Float64Array(h); const a = 1 / (w * h); // normalization for (let i = 0; i < w; i++) { for (let j = 0; j < h; j++) { re[j] = Dre[i + w * j]; im[j] = Dim[i + w * j]; } FFT.inverseTransform(re, im); for (let j = 0; j < re.length; j++) { Dre[i + w * j] = re[j] * a; } } } return Dre; // we ditch the Dim }35:[{"id":"d112a11cdffb8a3281fdd83a8b0a7e718da049c6e102f7498316281fadaa3f3dd2b7383eeee146abad62dc7c01040b15ab83e2b86a2f337385285ae902fa3a0c","href":"https://static.observableusercontent.com/files/d112a11cdffb8a3281fdd83a8b0a7e718da049c6e102f7498316281fadaa3f3dd2b7383eeee146abad62dc7c01040b15ab83e2b86a2f337385285ae902fa3a0c","name":"IMG_0099.JPG","type":"image/jpeg","lastModified":1598651236085.614,"size":1671625},{"id":"26b1fb7ecc110c2692f2473a780474ee93a084af7c480c2cb8405b12392812786c16e4a1720d2f4748ee140626b1535ddb132508ade753250c158c2e49c08e1c","href":"https://static.observableusercontent.com/files/26b1fb7ecc110c2692f2473a780474ee93a084af7c480c2cb8405b12392812786c16e4a1720d2f4748ee140626b1535ddb132508ade753250c158c2e49c08e1c","name":"cln1.gif","type":"image/gif","lastModified":1598870046240.961,"size":71086},{"id":"e95958760306a85822451c622a3cb3adba12471e48f96451e0169ee8ce998743e296adb1fb0505b0979bfbc628b8ff61a1d01e21133bac88b390045f5d9c636b","href":"https://static.observableusercontent.com/files/e95958760306a85822451c622a3cb3adba12471e48f96451e0169ee8ce998743e296adb1fb0505b0979bfbc628b8ff61a1d01e21133bac88b390045f5d9c636b","name":"car_pad.png","type":"image/png","lastModified":1598890284560.828,"size":154708}] 2e:{"title":"Image FFT","cells":[{"id":0,"value":"md`# Image FFT\n\nUsing [Nayuki’s implementation](https://www.nayuki.io/page/free-small-fft-in-multiple-languages) of the fast Fourier transform.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"viewof im1 = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl:\n \"https://upload.wikimedia.org/wikipedia/commons/0/0a/Radio-frequency-anechoic-chamber-HDR-0a.jpg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"viewof options = checkbox([\"original\", \"colorize\", \"autocontrast\", \"diff\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"viewof maxwidth = select({\n options: [256, 512, 1024, 2048],\n description: \"image width (higher = slower)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"viewof radius = slider({\n min: 1,\n max: 40,\n value: 20,\n description:\n \"radius (hover on the spectrum to cancel some frequencies, click to save)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"viewof lowpass_radius = slider({\n min: 0,\n max: pixels.width / 2,\n value: pixels.width / 4,\n step: 1,\n description: \"lowpass filter radius (cancel higher freqs)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"md`---\n_code_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"diffScale = d3.scaleDiverging(d3.interpolatePiYG)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1174,"value":"contours = {\n const { Dre } = fwd;\n const w = pixels.width,\n h = pixels.height,\n wh = Math.floor(w / 2),\n hh = Math.floor(h / 2);\n\n const values = Float32Array.from(Dre).fill(0);\n\n // fftshift\n for (let k = 0; k < values.length; k++) {\n const i = k % w,\n j = Math.floor(k / w);\n const shifti = (i >= wh ? i - w : i) + wh;\n const shiftj = (j >= hh ? j - h : j) + hh;\n values[shifti + w * shiftj] = Math.log1p(Math.hypot(Dre[k]));\n }\n\n return d3.contours().size([pixels.width, pixels.height]).thresholds(8)(\n d3.blur2({ data: values, width: pixels.width }, 4).data\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"N = Math.min(+maxwidth, original.naturalWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"M = Math.round((N * original.naturalHeight) / original.naturalWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1000,"value":"original = Object.assign(im1, {\n style: `max-width:${width}px; max-height: 180px`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"imageData = {\n const context = DOM.context2d(N, M, 1);\n context.drawImage(original, 0, 0, N, M);\n return context.getImageData(0, 0, N, M);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"pixels = {\n const length = imageData.data.length / 4;\n const l = Float32Array.from({ length }),\n a = Float32Array.from({ length }),\n b = Float32Array.from({ length });\n\n for (let i = 0; i < length; i++) {\n const i4 = 4 * i;\n const c = d3.lab(\n d3.rgb(imageData.data[i4], imageData.data[i4 + 1], imageData.data[i4 + 2])\n );\n l[i] = c.l;\n a[i] = c.a;\n b[i] = c.b;\n }\n const mean = d3.mean(l);\n for (let i = 0; i < l.length; i++) l[i] -= mean;\n\n return {\n data: l,\n a,\n b,\n mean,\n width: imageData.width,\n height: imageData.height\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1441,"value":"// FWD({ data: pixels.data, width: pixels.width, height: pixels.height })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1440,"value":"fwd = Generators.observe(\n worker(\n FWD,\n { data: pixels.data, width: pixels.width, height: pixels.height },\n \"const FFT = \" + FFTtext\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"function FWD({ data, width: w, height: h }) {\n if (w === undefined) {\n w = data.length;\n h = 1;\n }\n const Dre = Float64Array.from({ length: h * w }),\n Dim = Float64Array.from({ length: h * w });\n\n // horizontal\n {\n const re = new Float64Array(w),\n im = new Float64Array(w);\n for (let j = 0; j < h; j++) {\n for (let i = 0; i < w; i++) {\n re[i] = data[i + w * j];\n im[i] = 0;\n }\n\n FFT.transform(re, im);\n\n for (let i = 0; i < w; i++) {\n const k = i + w * j;\n Dre[k] = re[i];\n Dim[k] = im[i];\n }\n }\n }\n\n // vertical\n {\n const re = new Float64Array(h),\n im = new Float64Array(h);\n for (let i = 0; i < w; i++) {\n for (let j = 0; j < h; j++) {\n re[j] = Dre[i + w * j];\n im[j] = Dim[i + w * j];\n }\n\n FFT.transform(re, im);\n\n for (let j = 0; j < h; j++) {\n const k = i + w * j;\n Dre[k] = re[j];\n Dim[k] = im[j];\n }\n }\n }\n\n return { Dre, Dim };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1438,"value":"filtered = FILTERED(fwd)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1161,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1435,"value":"// INVERSE({ data: filtered, w: pixels.width, h: pixels.height })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1434,"value":"inverse = Generators.observe(\n worker(\n INVERSE,\n { data: filtered, width: imageData.width, height: imageData.height },\n \"const FFT = \" + FFTtext\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1431,"value":"import { worker } from \"@fil/worker\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1241,"value":"// probably one of the worst ways to load code :)\nFFTtext = d3\n .text(\n \"https://raw.githubusercontent.com/nayuki/Nayuki-web-published-code/master/free-small-fft-in-multiple-languages/fft.js\"\n )\n .then(\n d => \"(function() { \" + d + \"; return { transform, inverseTransform }; })()\"\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1429,"value":"FFT = \"🤘\" // eval(FFTtext) if you want to use it without the worker","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"import { checkbox, file, select, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1471,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}