31:T115e,nurbs = { const svg = d3.select(DOM.svg(width, height)) .attr("fill", "none") .attr("id", "drawing"); var tooltip = svg .append("text") .attr("id", "tooltip") .attr("x", 10) .attr("y", height - padB - 10) .attr("fill", "black") .attr("fill", "black") .attr("text-anchor", "middle") .style("visibility", "hidden"); function weightDragged(event, d) { if (event.x < 0 || event.x >= width || event.y < 0 || event.y >= height) { return; } const dx = event.x - d[0][0]; const dy = event.y - d[0][1]; const l = Math.sqrt(dx * dx + dy * dy); d[1] = Math.round(l / 2) * 2 / 20; mutable poles = mutable poles; mutable knots = mutable knots; } function dragged(event, d) { if (event.x < 0 || event.x >= width || event.y < 0 || event.y >= height) { return; } d[0][0] = Math.round(event.x / 5) * 5; d[0][1] = Math.round(event.y / 5) * 5; mutable poles = mutable poles; mutable knots = mutable knots; } function knotDragged(event, d) { if(event.x < pad || event.x >= width - pad || event.y < 0 || event.y >= height) { return; } const t = Math.round((event.x - pad) / (width - 2 * pad) * 100) / 10; d[0] = t; d3.select("#tooltip") .attr("x", pad + t * (width - 2 * pad) / 10) .style("visibility", "visible") .text(d[0]); mutable poles = mutable poles; mutable knots = mutable knots; } svg.append("text") .attr("x", pad) .attr("y", 2 * pad) .attr("fill", "black") .html("Geometry Space:"); svg.append("text") .attr("x", pad) .attr("y", height - padB - 150) .attr("fill", "black") .html("Parameter Space:"); svg.append("path") .attr("class", "control-polygon") .attr("stroke-width", 1) .attr("stroke", "black") .attr("stroke-dasharray", "5 5"); for (let i = 0; i < nbPoles; i++) { svg.append("path") .attr("class", `shape-function-${i}`) .attr("stroke-width", 1) .attr("stroke", d3.schemeCategory10[i]); } svg.append("line") .attr("class", "param-space") .attr("stroke-width", 1) .attr("stroke", "black") .attr("x1", 10) .attr("y1", height - padB) .attr("x2", width - pad) .attr("y2", height - padB); for (let i = 0; i < nbSpans(degree, nbKnots); i++) { svg.append("path") .attr("class", `geom-span-${i}`) .attr("stroke-width", 2) .attr("stroke", d3.schemeSet1[degree + i - 1]); svg.append("line") .attr("class", `para-span-${i}`) .attr("stroke-width", 2) .attr("stroke", d3.schemeSet1[degree + i - 1]) } svg.append("g") .attr("class", "weights") .attr("fill", "none") .attr("stroke-width", 20) .attr("stroke-opacity", 0.3) .attr("cursor", "move") .attr("pointer-events", "stroke") .selectAll("circle") .data(mutable poles) .enter() .append("circle") .attr("stroke", (d, i) => d3.schemeCategory10[i]) .call(d3.drag().on("drag", weightDragged)); svg.append("g") .attr("class", "knots3d") .attr("stroke-width", 2) .attr("stroke", "#000") .selectAll("circle") .data(mutable knots.slice(0, nbKnots)) .enter() .append("circle") .attr("r", 4) .attr("id", (d, i) => `geom-knot-${i}`) .attr("fill", (d, i) => d3.schemeSet1[i]); svg.append("g") .attr("class", "knots") .attr("stroke-width", 2) .attr("stroke", "black") .attr("cursor", "move") .attr("pointer-events", "all") .selectAll("circle") .data(mutable knots.slice(0, nbKnots)) .enter() .append("circle") .attr("id", (d, i) => `para-knot-${i}`) .attr("r", 5) .attr("cy", height - padB) .attr("fill", (d, i) => d3.schemeSet1[i]) .call(d3.drag() .on("drag", knotDragged) .on("end", function(d) { d3.select("#tooltip").style("visibility", "hidden"); })); svg.append("g") .attr("class", "control") .attr("cursor", "move") .attr("pointer-events", "all") .selectAll("circle") .data(mutable poles) .enter() .append("circle") .attr("r", 4) .attr("stroke", (d, i) => d3.schemeCategory10[i]) .attr("stroke-width", 2) .attr("fill", 'white') .call(d3.drag().on("drag", dragged)); mutable poles = mutable poles; mutable knots = mutable knots; return svg.node(); } 32:T8a9,update = { const _poles = poles.map(o => o[0]); const _weights = poles.map(o => o[1]); const _knots = knots.slice(0, nbPoles + degree - 1).map(t => t[0]); _knots.sort((a, b) => a - b); d3.selectAll(".control-polygon") .attr("d", `M${_poles.join("L")}`); d3.selectAll(".control circle") .attr("cx", d => d[0][0]) .attr("cy", d => d[0][1]); d3.selectAll(".weights circle") .attr("r", d => d[1] * 20) .attr("cx", d => d[0][0]) .attr("cy", d => d[0][1]); const curve = new NurbsCurveGeometry(2, degree, _knots, _poles, _weights); for (let i = 0; i < _knots.length; i++) { const point = curve.pointAt(_knots[i]); d3.selectAll(`#geom-knot-${i}`) .attr("cx", d => curve.pointAt(d[0])[0]) .attr("cy", d => curve.pointAt(d[0])[1]); d3.selectAll(`#para-knot-${i}`) .attr("cx", d => 10 + d[0] * (width - 20) / 10); } const spans = curve.spans(); for (let i = 0; i < nbSpans(degree, nbKnots); i++) { const span = spans[i]; const tessellation = tessellate(new Curve(curve, span), 0.01); d3.selectAll(`.geom-span-${i}`) .attr("d", `M${tessellation.polygon.join("L")}`); d3.selectAll(`.para-span-${i}`) .attr("x1", pad + span.t0 / 10 * (width - 2 * pad)) .attr("y1", height - padB) .attr("x2", pad + span.t1 / 10 * (width - 2 * pad)) .attr("y2", height - padB); } let shapeFuns = []; for (let i = 0; i < _poles.length; i++) { shapeFuns.push([]); } let t0 = _knots[0]; let t1 = _knots[_knots.length - 1]; const shapeFunctions = new NurbsCurveShapeFunction(degree, 0); for (let t of linspace(t0, t1, Math.round((t1 - t0) * 100))) { shapeFunctions.compute(_knots, t, _weights); const x = pad + t / 10 * (width - 2 * pad); for (let i = 0; i < _poles.length; i++) { const y = height - padB - (shapeFunctions.isNonzeroPole(i) ? shapeFunctions.value(0, i - shapeFunctions.firstNonzeroPole) * 100 : 0); shapeFuns[i].push([x, y]); } } for (let i = 0; i < _poles.length; i++) { d3.selectAll(`.shape-function-${i}`) .attr("d", `M${shapeFuns[i].join("L")}`); } return 'update'; }33:[] 2f:{"title":"NURBS-Curve","cells":[{"id":0,"value":"md`# NURBS-Curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`A *Basis Spline* (*B-Spline*) is defined by the *polynomial degree*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"viewof degree = slider({\n min: 1,\n max: 4,\n step: 1,\n value: 2,\n format: v => tex`p = ${v}`,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"md`the *knot vector*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"knotsTeX = tex.block`\\left( \\mathrm{\\Xi}_j \\right) = \\begin{pmatrix} ${knots.slice(0, nbKnots).map(o => o[0]).sort((a, b) => a - b).join('&&')} \\end{pmatrix}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"md`and the set of *control points*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"polesTeX = tex.block`\\left( \\mathbf{P}_i \\right)\n=\n\\begin{pmatrix}\n x_i \\\\\n y_i \\\\\n\\end{pmatrix}\n=\n\\begin{pmatrix}\n ${poles.map(o => o[0][0]).join('&&')} \\\\\n ${poles.map(o => o[0][1]).join('&&')} \\\\\n\\end{pmatrix}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"md`Note that the reduced form of the knot vector is used. In most NURBS books you will find knot vectors with length ${tex`m = n + p + 1`} where ${tex`n`} is the number of control points. It turns out that the external values have no influence on the geometry. In modern code, these values are therefore simply omitted to simplify the algorithms.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`This results in the following relationship between the polynomial degree ${tex`p`}, the number of nodes ${tex`m`} and the number of control points ${tex`n`}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"tex.block`m = n + p - 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"md`For *Non-Uniform Rational B-Splines* (*NURBS*), each control point can be given an additional *weight*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"weightsTeX = tex.block`\\left( w_i \\right) = \\begin{pmatrix} ${poles.map(o => o[1]).join('&&')} \\end{pmatrix}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"md`The shape of the geometry can be adjusted by weighting the control points differently. This allows the representation of conic sections with NURBS.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"md`If all control points are equally weighted, NURBS are identical to B-Splines.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"md`In the following figure you see the resulting NURBS curve (${svg``}). In addition, the control polygon (${svg``}) and the graph of the shape functions (${[0, 1, 2].map(i => svg``)}…) are shown.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"md`You can move the control points in the geometry space (${[0, 1, 2].map(i => svg``)}…) and the knots in the parameter space (${[0, 1, 2].map(i => svg``)}…) with the mouse. The weight of a control point can be adjusted by dragging the outer circle (${[0, 1, 2].map(i => svg``)}…).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"pad = 10;","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"padB = 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"nbPoles = 5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"nbKnots = nbPoles + degree - 1;","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"mutable knots = [[0], [0], [4], [6], [10], [10], [10], [10]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"mutable poles = [[[295, 70], 1], [[90, 320], 1], [[500, 405], 1], [[665, 155], 1], [[495, 60], 1]].map(([[x, y], w]) => [[x * width / 800, y], w]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3-selection@2\", \"d3-drag@2\", \"d3-scale-chromatic@2\", \"d3-format@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"function linspace(a, b, n) {\n if (typeof n === 'undefined') {\n n = Math.max(Math.round(b - a) + 1, 1);\n }\n \n if (n < 2) {\n return n === 1 ? [a] : [];\n }\n\n var i, ret = Array(n);\n\n n--;\n\n for (i = n; i >= 0; i--) {\n ret[i] = (i * b + (n - i) * a) / n;\n }\n\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"import {nbSpans, Curve, NurbsCurveShapeFunction, NurbsCurveGeometry, tessellate} from \"@oberbichler/anurbs-js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}