2b:null 2c:["$","title",null,{"children":"Parameter Space of Gabor | Chuncheng | Observable"}] 31:T9fe,canvas = { const ctx = DOM.context2d(width, height); ctx.fillStyle = "hsl(216deg 100% 13%)"; ctx.fillRect(0, 0, boxWidth * width, height); ctx.canvas.style.background = "hsl(216deg 20% 90%)"; const xScale = d3.scaleLinear().domain([-1.2, 1.2]).range([0, width]), yScale = d3 .scaleLinear() .domain([-1, 1]) .range([(height / 5) * 4, height / 3]); // Setup params const srcParam = customParam, dstParam = keepRandomParam ? randomParam : rndParam(); // Draw params drawSrcDstParam(); const params = drawInterpolateParams(); // Draw distance matrix { const nw = [width - width / 10 - width / 20, width / 20], w = width / 10, h = width / 10; drawDistanceMatrix( ctx, params, nw, w, h, "dist-matrix-div", "dist-line-div" ); } // Draw param cycle (radius: sigma, sigma: phi) { const center = [(width / 20) * 5, (width / 20) * 2], radius = width / 20; drawParamCycle(ctx, params, center, radius); } // Draw Param rect (y: sigma, x: omega) { const nw = [width / 20, width / 20], w = width / 10, h = width / 10; drawParamRect(ctx, params, nw, w, h); } // Draw source and target gabor function drawSrcDstParam() { // Draw Source gabor { ctx.strokeStyle = d3.color(colorMap(0)).hex() + opacityPostfix; ctx.lineWidth = 3; ctx.beginPath(); computeGabor(srcParam).map((pnt) => { const { x, y } = pnt; ctx.lineTo(xScale(x), yScale(y)); }); ctx.stroke(); } // Draw Target gabor { ctx.strokeStyle = d3.color(colorMap(1)).hex() + opacityPostfix; ctx.lineWidth = 3; ctx.beginPath(); computeGabor(dstParam).map((pnt) => { const { x, y } = pnt; ctx.lineTo(xScale(x), yScale(y)); }); ctx.stroke(); } } // Interpolate params, draw them and return them // Each param contains { param, color, gabor } function drawInterpolateParams() { const params = []; for (let r = 0; r < 1; r += 1 / lines) { const param = interpolateParam(srcParam, dstParam, r), color = colorMap(r), gabor = computeGabor(param); params.push({ param, color, gabor }); ctx.strokeStyle = d3.color(color).hex() + opacityPostfix; ctx.lineWidth = 3; ctx.beginPath(); gabor.map((pnt) => { const { x, y } = pnt; ctx.lineTo(xScale(x), yScale(y)); }); ctx.stroke(); } return params; } return ctx.canvas; }32:Tb17,// Draw distance matrix, // it also update "dist-matrix-div" and "dist-line-div" function drawDistanceMatrix(ctx, params, nw, w, h, divMatrix, divLine) { // NorthWest, Width, Height // I will translate the canvas to the NorthWest point, // So the painting inside the box focuses only the w and h ctx.save(); ctx.translate(nw[0], nw[1]); // Draw box { ctx.strokeStyle = "black"; ctx.lineWidth = 5; ctx.beginPath(), ctx.lineTo(0, 0), ctx.lineTo(w, 0), ctx.lineTo(w, h), ctx.lineTo(0, h), ctx.closePath(), ctx.stroke(); } const xScale = d3.scaleLinear().domain([0, 1]).range([0, w]), yScale = d3.scaleLinear().domain([0, 1]).range([0, h]); const n = params.length, nr = 1 / params.length, maxDst = computeDst(params[0].gabor, params[n - 1].gabor); var g1, g2, dst, color, x, y; // Draw axis const radius = xScale(nr); for (let i = 0; i < n; ++i) { const { color } = params[i]; ctx.fillStyle = d3.color(color).hex() + opacityPostfix; x = xScale(i * nr); y = yScale(1.1 + nr); ctx.beginPath(), ctx.arc(x, y, radius, 0, Math.PI * 2), ctx.fill(); y = yScale(i * nr); x = xScale(-0.1 - nr); ctx.beginPath(), ctx.arc(x, y, radius, 0, Math.PI * 2), ctx.fill(); } // Draw matrix const maybeMatrix = []; for (let i = 0; i < n; ++i) { for (let j = i; j < n; ++j) { dst = computeDst(params[i].gabor, params[j].gabor); maybeMatrix.push({ i, j, dst }); color = dstColorMap(dst / maxDst); x = xScale(i * nr); y = yScale(j * nr); ctx.fillStyle = d3.color(color).hex(); ctx.beginPath(), ctx.rect(x, y, xScale(nr), yScale(nr)), ctx.fill(); } } // Update matrix div { const p = Plot.plot({ width: width / 4, height: width / 4, padding: 0.05, grid: true, x: { axis: "top", label: "Src" }, y: { label: "Target" }, color: { scheme: "PiYG", legend: true }, marks: [ Plot.cell(maybeMatrix, { x: "i", y: "j", fill: "dst" // rx: 20 // uncomment for circles }), Plot.text(maybeMatrix, { x: "i", y: "j", text: (d) => (d) => d.dst?.toFixed(1), title: "title" }) ] }); document.getElementById(divMatrix).innerHTML = p.outerHTML; } // Update line div { const p = Plot.plot({ width: width / 4, height: width / 4, y: { grid: true }, x: { reverse: true }, marks: [ Plot.line( maybeMatrix.filter((e) => e.i == 0), { x: "j", y: "dst" } ) ] }); document.getElementById(divLine).innerHTML = p.outerHTML; } ctx.restore(); }33:T4c7,// Draw param cycle (radius: sigma, sigma: phi) function drawParamCycle(ctx, params, center, radius) { // Center, Radius // I will translate the canvas to the Center point, // So the painting inside the box focuses only the Radius const { sigma: sigmaRange } = paramRange; const sigmaRScale = d3 .scaleLinear() .domain([0, sigmaRange[1]]) .range([0, radius]); ctx.save(); ctx.translate(center[0], center[1]); // Draw outline { ctx.strokeStyle = "black"; ctx.lineWidth = 5; ctx.beginPath(), ctx.arc(0, 0, radius, 0, Math.PI * 2), ctx.stroke(); sigmaRange.map((sigma) => { ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.beginPath(), ctx.arc(0, 0, sigmaRScale(sigma), 0, Math.PI * 2), ctx.stroke(); }); } // Draw params { const radius = 3; params.map(({ param, color }) => { const { sigma, phi } = param; ctx.fillStyle = d3.color(color).hex() + opacityPostfix; ctx.beginPath(), ctx.arc( sigmaRScale(sigma) * Math.cos(phi), sigmaRScale(sigma) * Math.sin(phi), radius, 0, Math.PI * 2 ), ctx.fill(); }); } ctx.restore(); }34:T65b,// Draw Param rect (y: sigma, x: omega) function drawParamRect(ctx, params, nw, w, h) { // NorthWest, Width, Height // I will translate the canvas to the NorthWest point, // So the painting inside the box focuses only the w and h ctx.save(); ctx.translate(nw[0], nw[1]); const { sigma: sigmaRange } = paramRange; const sigmaScale = d3.scaleLinear().domain([0, 1]).range(sigmaRange), sigmaYScale = d3.scaleLinear().domain(sigmaRange).range([h, 0]), omegaXScale = d3 .scaleLinear() .domain([0, omegaFactor / sigmaRange[0]]) .range([0, w]); // Draw box { ctx.strokeStyle = "black"; ctx.lineWidth = 5; ctx.beginPath(), ctx.lineTo(0, 0), ctx.lineTo(w, 0), ctx.lineTo(w, h), ctx.lineTo(0, h), ctx.closePath(), ctx.stroke(); } // Draw margin, x: omega, y: sigma { ctx.strokeStyle = "white"; ctx.lineWidth = 2; var sigma, omega; ctx.beginPath(); ctx.lineTo(omegaXScale(0), sigmaYScale(sigmaScale(0))); for (let i = 0; i <= 1; i += 0.1) { sigma = sigmaScale(i); omega = omegaFactor / sigma; ctx.lineTo(omegaXScale(omega), sigmaYScale(sigma)); } ctx.lineTo(omegaXScale(0), sigmaYScale(sigmaScale(1))); ctx.closePath(); ctx.stroke(); } // Draw params { const radius = 3; params.map(({ param, color }) => { const { omega, sigma } = param; ctx.fillStyle = d3.color(color).hex() + opacityPostfix; ctx.beginPath(), ctx.arc(omegaXScale(omega), sigmaYScale(sigma), radius, 0, Math.PI * 2), ctx.fill(); }); } ctx.restore(); }35:[] 2f:{"id":"47e1f1e969ca7980","slug":"parameter-space-of-gabor","title":"Parameter Space of Gabor","thumbnail":"4f7fa327fd3e166decdf3f4a9145cb711e3614b75b8e60ad2b8b40cc6c904489","access_level":"public","create_time":"$D2022-11-25T13:42:34.238Z","update_time":"$D2022-11-29T03:03:49.123Z","view_time":null,"first_public_time":"$D2022-11-27T02:49:10.572Z","fork":{"id":"7a0980291ec2d753","slug":"interactive-html-canvas","title":"Interactive HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":827,"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":2,"collection":{"id":"3aa143c61490363d","slug":"math","title":"Math","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Parameter Space of Gabor","cells":[{"id":0,"value":"# Parameter Space of Gabor\n\nThe Gabor function is defined as the following,\nit is a quite simple version.\nI would like to explain the dynamic when the parameters are changing.\n\n${tex.block`\\begin{aligned}\ny &= exp(-\\frac{(x-\\mu)^2}{\\sigma^2}) \\cdot cos(\\omega x + \\phi) \\\\\nx &\\in (-1, 1) \\\\\n\\mu &= 0 \\\\\n\\sigma &\\in (0.2, 1) \\\\\n\\omega &\\in (0, \\frac{${omegaFactor}}{\\sigma})\\\\\n\\phi &\\in (0, 2\\pi) \\\\\n\\end{aligned}`}\n\n## How to use\n\nDrag the parameter controllers to make your own Gabor function.\nThe Gabor waveform and its moving to the target Gabor function (automatically generated randomly) are drawn accordingly.\n\nMoreover, the distance dynamic in the moving process is also drawn.\n\n## Purpose\n\nThe notebook shows the Gabor function are non-convex function in the parameters space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof boxWidth = Inputs.range([0, 1], { label: \"Box width\", value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"viewof lines = Inputs.range([10, 40], { label: \"Lines\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"viewof n = Inputs.range(paramRange.n, { label: \"N\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"viewof sigma = Inputs.range(paramRange.sigma, { label: \"Sigma\", step: 0.1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof phi = Inputs.range(paramRange.phi, { label: \"Phi\", step: 0.1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof omega = Inputs.range([0, omegaFactor / sigma], {\n label: \"Omega\",\n step: 0.1\n // value: 5 / sigma\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"viewof keepRandomParam = Inputs.toggle({\n label: \"Keep Random Param\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"viewof btnRandomParam = Inputs.button(\"Re-Random Param\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof palette = Inputs.select(palettes, {\n label: \"ColorMap\",\n value: \"Warm\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"

Distance Regression

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"opacityPostfix = \"90\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"randomParam = {\n btnRandomParam;\n return rndParam();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"customParam = {\n return { n, sigma, phi, omega };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"dstColorMap = d3.interpolateOranges","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"// Compute norm2 distance between a and b\n// foo gets the required attribute\ncomputeDst = (a, b, foo = (e) => e.y) => {\n var sum = 0;\n a.map((a, i) => {\n sum += (foo(a) - foo(b[i])) * (foo(a) - foo(b[i]));\n });\n return sum;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"interpolateParam(randomParam, customParam, 0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"interpolateParam = (p1, p2, r) => {\n var scale = d3.scaleLinear().domain([0, 1]).range([0, 1]);\n\n const n = p1.n;\n\n scale.range([p1.sigma, p2.sigma]);\n const sigma = scale(r);\n\n scale.range([p1.omega, p2.omega]);\n const omega = scale(r);\n\n scale.range([p1.phi, p2.phi]);\n const phi = scale(r);\n\n return { n, sigma, omega, phi };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"rndParam()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"rndParam = () => {\n const { sigma, phi } = paramRange;\n const s = d3.randomUniform(sigma[0], sigma[1])();\n const omega = [0, 5 / s];\n\n return {\n n,\n sigma: s,\n omega: d3.randomUniform(omega[0], omega[1])(),\n phi: d3.randomUniform(phi[0], phi[1])()\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"computeGabor = (param) => {\n const { n, sigma, phi } = param;\n var omega1 = param.omega !== undefined ? param.omega : omega;\n return gabor(n, sigma, omega1, phi);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"gabor = (n, sigma, omega, phi, mu = 0) => {\n const sigma_r = 1 / sigma;\n\n const scale = d3.scaleLinear().domain([0, n]).range([-1, 1]);\n const x = Array(n)\n .fill(0)\n .map((e, i) => scale(i));\n\n var a, b, c;\n const y = x.map((x) => {\n a = (x - mu) * sigma_r;\n b = Math.exp(-a * a);\n c = Math.cos(omega * x + phi);\n return { x, y: b * c };\n });\n\n return y;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"paramRange = {\n return {\n n: [100, 500],\n sigma: [0.2, 1],\n phi: [0, 2 * Math.PI]\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"omegaFactor = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"colorMap = d3[`interpolate${palette}`]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"palettes = [\n \"RdBu\",\n \"PuOr\",\n \"Viridis\",\n \"Inferno\",\n \"Turbo\",\n \"Magma\",\n \"Plasma\",\n \"Cividis\",\n \"Warm\",\n \"Cool\",\n \"CubehelixDefault\",\n \"BuPu\",\n \"BuGn\",\n \"GnBu\",\n \"PuBu\",\n \"PuRd\",\n \"RdPu\",\n \"PuBuGn\",\n \"OrRd\",\n \"YlGnBu\",\n \"YlGn\",\n \"YlOrRd\",\n \"YlOrBr\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = (width * 9) / 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"