28:null 29:["$","title",null,{"children":"Deformation with RBFs | Claudio Esperança | Observable"}] 2e:T53b,md`# Deformation with RBFs A [Radial basis function (RBF)](https://en.wikipedia.org/wiki/Radial_basis_function) provides a neat way to solve the so-called *scattered data interpolation* problem. In a nutshell, suppose you want a function ${tex`f(X)`} about which you nothing other than its value at a few points of the the domain, i.e., you know that ${tex`f(X_i) = Y_i`} for sets of points ${tex`\{X_0, X_1 \cdots X_n \}`} and ${tex`\{Y_0, Y_1 \cdots Y_n\}`}. The "radial" in RBF is because ${tex`f(X)`} depends on the distance from ${tex`X`} to all other domain points ${tex`X_i`}. The *kernel* of a RBF controls how distances are measured. For instance, a \`linear\` kernel means that the Euclidean norm ${tex`d_i (X) = \| X - X_i \|`} is used, whereas a \`quintic\` kernel employs the Euclidean norm to the fifth power, and so forth. The demo below allows you to experiment with RBFs by deforming a checkered cloth that represents the Euclidean plane. The red points mark the source points ${tex`X_i`}, whereas the blue points mark the corresponding target points ${tex`Y_i`}. You can drag the blue or the red points to change the RBF. Clicking on a red point removes it and its corresponding blue point from the RBF, while clicking on an empty region defines a new source/target point. The kernel can be selected in the menu below.`2f:T7e9,{ let ctx = DOM.context2d(w,w); function compute_rbf () { let anchors = [[-w*10,-w*10],[-w*10,w*10],[w*10,w*10],[w*10,-w*10]]; let src = controlPoints.src.concat(anchors); let dst = controlPoints.dst.concat(anchors); return RBF (src,dst,kernel) } let rbf = compute_rbf(); function render() { ctx.clearRect (0,0,w,w); drawgrid (ctx, grid, rbf); drawpoints (ctx, controlPoints.src, 12, 'red'); drawpoints (ctx, controlPoints.dst, 8, 'blue'); } render(); let sel; let last; let mode; ctx.canvas.onmousedown = function (e) { sel = null; mode = null; let [mousex,mousey] = [e.offsetX, e.offsetY]; let select = (pts) => { for (let p of pts) { let [x,y] = p; let [dx,dy] = [x-mousex,y-mousey]; if (Math.sqrt (dx*dx+dy*dy) < 20) { sel = p; } } return sel } if (select (controlPoints.dst)) mode = 'dragDst'; else if (select (controlPoints.src)) mode = 'dragOrRemoveSrc'; else mode = 'create'; rbf = compute_rbf(); render(); last = [mousex,mousey]; } ctx.canvas.onmouseup = function () { if (mode === 'dragOrRemoveSrc') { let i = controlPoints.src.findIndex(x => x == sel); if (i>=0) { controlPoints.src.splice (i,1); controlPoints.dst.splice (i,1); } } if (mode === 'create') { controlPoints.src.push(last.slice()); controlPoints.dst.push(last.slice()); } rbf = compute_rbf(); render(); mode = null; sel = null; } ctx.canvas.onmousemove = function (e) { let [mousex,mousey] = [e.offsetX, e.offsetY]; if (!sel) return; if (mode === 'dragOrRemoveSrc') mode = 'dragSrc'; if (mode === 'dragSrc' || mode === 'dragDst') { let [pmousex,pmousey] = last; let [dx,dy] = [mousex-pmousex,mousey-pmousey]; sel[0]+=dx; sel[1]+=dy; rbf = compute_rbf(); render(); } last = [mousex,mousey]; } return ctx.canvas }30:Te88,/** * This is essentially the rbf module by Thibaut Séguy, but modified to use a selectable norm * See https://github.com/thibauts/rbf **/ RBF = { var distanceFunctions = { 'linear': distanceLinear, 'cubic': distanceCubic, 'quintic': distanceQuintic, 'thin-plate': distanceThinPlate, 'gaussian': distanceGaussian, 'inverse-multiquadric': distanceInverseMultiquadric, 'multiquadric': distanceMultiquadric }; var normFunctions = { 'euclidean' : euclideanNorm, }; var distance = distanceFunctions.linear; var norm = normFunctions.euclidean; function RBF(points, values, distanceFunction, normFunction, epsilon) { if(distanceFunction) { distance = typeof distanceFunction !== 'string' ? distanceFunction : distanceFunctions[distanceFunction]; } if(normFunction) { norm = typeof normFunction !== 'string' ? normFunction : normFunctions[normFunction]; } // `identity` here serves as a shorthand to allocate // the matrix nested array. var M = numeric.identity(points.length); // First compute the point to point distance matrix // to allow computing epsilon if it's not provided for(var j=0; j