2b:null 2c:["$","title",null,{"children":"Parameter Space of Gabor (Animation) | Chuncheng | Observable"}] 31:Td43,canvas = { const ctx = DOM.context2d(width, height); 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 var srcParam, dstParam, r; // srcParam = customParam; // dstParam = keepRandomParam ? randomParam : rndParam(); loop(); function loop() { r = (new Date() - movingParams.t0) / movingParams.step; if (r > 1) { movingParams.trace1.shift(); movingParams.trace1.push(rndParam()); movingParams.trace2.shift(); movingParams.trace2.push(rndParam()); movingParams.t0 = new Date() - 0; } r %= 1; srcParam = interpolateParam( movingParams.trace1[0], movingParams.trace1[1], r ); dstParam = interpolateParam( movingParams.trace2[0], movingParams.trace2[1], r ); ctx.fillStyle = "hsl(216deg 100% 13%)"; ctx.fillRect(0, 0, width, height); ctx.canvas.style.background = "hsl(216deg 20% 90%)"; draw(srcParam, dstParam); window.requestAnimationFrame(loop); } function draw(srcParam, dstParam) { // 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":"3086e234fa8bde2c","slug":"parameter-space-of-gabor-animation","title":"Parameter Space of Gabor (Animation)","thumbnail":"3e2a277ac948d649d7fdc5d70f57c30acb92ffcbb29d0cb1d0ef3751ba3ac9af","access_level":"public","create_time":"$D2022-11-29T01:25:35.694Z","update_time":"$D2022-11-29T03:15:31.063Z","view_time":null,"first_public_time":"$D2022-11-29T02:01:02.169Z","fork":{"id":"47e1f1e969ca7980","slug":"parameter-space-of-gabor","title":"Parameter Space of Gabor","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"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":888,"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":0,"collection":{"id":"3aa143c61490363d","slug":"math","title":"Math","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Parameter Space of Gabor (Animation)","cells":[{"id":0,"value":"# Parameter Space of Gabor (Animation)\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\nThis notebook shows in the animation. The cycling length is 5 seconds.\n\n## How to use\n\nThe animation is automatically played.\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":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":882,"value":"lines = 25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"n = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"movingParams = {\n return {\n t0: new Date() - 0,\n step: 5 * 1000,\n trace1: [rndParam(), rndParam()],\n trace2: [rndParam(), rndParam()]\n };\n}","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 return rndParam();\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":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, omega } = param;\n return gabor(n, sigma, omega, 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":876,"value":"palette = \"Warm\"","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"