29:null 2a:["$","title",null,{"children":"Interactive design with smooth splines | Deepesh Toshniwal | Observable"}] 2f:T437,md`### Example 1: Control points, control net and interactive design Geometric models such as the F1 cars above are created and modified inside CAD software by moving points in space. These points control what the final geometry looks like and, therefore, they are called control points. Let us look at an example. The curve in blue below is a simple geometric model; it is created using the control points shown as yellow disks. The control points are themselves connected by a white multi-segment line, the control net. You can get an idea of what the curve looks like by rotating the view. The control net is to the blue curve what a puppet master is to a puppet. Indeed, notice that the blue curve simply looks like a smoother version of the white control net; they have very similar shapes. You can modify the blue curve by modifying its control net, i.e., by moving the control points that form the control net. Just drag and drop the control points wherever you like and watch the geometry change. Welcome to interactive or freeform geometric design!`30:T931,md`### Splines: A brief introduction Control points control the geometry. The question is: how? How is the geometry built from the control points? The missing ingredient here are functions called splines. Spline functions of one variable can be used to build one-dimensional geometries (i.e., curves); spline functions of two variables can be used to build two-dimensional geometries (i.e., surfaces); and so on. The blue curve in Example 1 is built using one-variable splines. There is one spline chosen for each control point (so, seven different splines for the seven control points in Example 1). Since these are functions of a single variable, we can denote them by ${await mj`$$N_i(t),\;i=0,1,\dots,6\;,$$`} where ${await mj`$t$`} is the variable. Assume that ${await mj`$t$`} varies between two numbers ${await mj`$t_0$`} and ${await mj`$t_1$`} (e.g., ${await mj`$t_0 = 0$`} and ${await mj`$t_1 = 2.5$`}). Then, for any value of ${await mj`$t$`} between ${await mj`$t_0$`} and ${await mj`$t_1$`}, we can find out the value of any spline ${await mj`$N_i(t),\;i=0,1,\dots,6$`}. How can we use splines to build the blue curve in Example 1? We start by choosing some value of ${await mj`$t$`} between ${await mj`$t_0$`} and ${await mj`$t_1$`}. For this value, a corresponding point on the blue curve is denoted as ${await mj`$\mathbf{p}(t)$`}. Let us also denote the positions of the seven control points as ${await mj`$\mathbf{P}_i,\;i=0,1,\dots,6$`}. Then, ${await mj`$\mathbf{p}(t)$`} is computed as the following weighted combination of control point positions, ${await mj`$$\mathbf{p}(t) = {\mathbf{P}_0N_0(t) + \mathbf{P}_1N_1(t) + \cdots + \mathbf{P}_6N_6(t)}\;.$$`} Choosing a different value of ${await mj`$t$`} leads to a different point on the curve, and the entire curve is built by letting ${await mj`$t$`} take all the values between ${await mj`$t_0$`} and ${await mj`$t_1$`}. As mentioned in Example 1, the control net (or the control points) allow intuitive control of the geometry, like a puppeteer controlling a puppet. This is made possible by splines that have certain properties (e.g., splines that never become negative). Moreover, if the splines are smooth functions of the variable ${await mj`$t$`}, then the geometry they define is also smooth, just as in Example 1. `31:T450,md`### Example 2: Control point influence To summarize the brief introduction to splines above, each point on the geometry is computed by "blending" together the positions of the control points, i.e., as a weighted average of control point positions. The weights used for this "blending" are specified by values of spline functions. Then, we can visualize what the contribution of each control point is to the points on the curve. If the influence is large on a portion of the curve, then moving the control point will lead to a large modification to that portion of the curve. Conversely, if the influence is small on a portion of the curve, then moving the control point will lead to small modifications there. This influence is visualized below for the current curve configuration in Example 1. Choose a control point from the dropdown list below, its influence on different parts of the curve will be color-coded (green = weak, fuchsia = strong). Try moving the selected control point, you will see that the resulting modifications to the curve correspond to the control point's influence. `32:T600,md`### Mathematics of smooth splines The difficulty highlighted by the above challenge is the reason why interactive designers prefer to work with geometric models where moving the control points will not destroy the smoothness of the geometry. No one wants a car with spikes all over it (unless you are mad and your name is Max)! In other words, when you want to build smooth geometries, you want the control points to be associated to smooth splines. A part of my research is focused on precisely this - I study the theoretical and practical aspects of smooth splines. Such splines can be used to create smooth geometric models. Moreover, they can also be used for solving partial differential equations on/around the geometric models (e.g., to simulate the aerodynamics of F1 cars). There is a lot of interesting mathematics underlying smooth splines (e.g., from the fields of algebraic and differential geometry, numerical linear algebra, numerical analysis). It is a rich and diverse field of study, and has something for everyone. If you liked this quick introduction and are interested in more advanced reading on the topic, check out the following:

Farin, Gerald (2014). Curves and Surfaces for CAGD: A Practical Guide. Elsevier.
Schumaker, Larry (2007). Spline functions: basic theory. Cambridge University Press.
Cottrell, J. Austin, Hughes, Thomas J. R., & Bazilevs, Yuri (2009). Isogeometric analysis: Toward integration of CAD and FEA. John Wiley & Sons.

`33:T433,geometry = { const lmaterial = new THREE.LineBasicMaterial({ color: 0x0080FF, linewidth: 3 }); var points_bez = matrixDot(univariate_extraction, points); var geometry = []; for (let i = 0; i < num_patches; i++) { const offset = i * (degree + 1); const cp = points_bez.slice(offset, offset + degree + 1); var vertices = []; for (let j = 0; j < num_eval; j++) { const u = j / (num_eval - 1); const bu = d3 .range(0, degree + 1) .map(x => W_u[x] * bernstein_1d(x, degree, u)); var pointx = 0; var pointy = 0; var pointz = 0; for (let s = 0; s <= degree; s++) { pointx += bu[s] * cp[s][0]; pointy += bu[s] * cp[s][1]; pointz += bu[s] * cp[s][2]; } pointx *= 1 / weights_u[j]; pointy *= 1 / weights_u[j]; pointz *= 1 / weights_u[j]; vertices.push(new THREE.Vector3(pointx, pointy, pointz)); } geometry[i] = new THREE.Line( new THREE.BufferGeometry().setFromPoints(vertices), lmaterial ); } return geometry; }34:T40e,renderer = { const renderer = new THREE.WebGLRenderer({ antialias: false }); const ocontrols = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (ocontrols.dispose(), renderer.dispose())); renderer.setSize(Math.min(width, 1400), height); renderer.setPixelRatio(devicePixelRatio); ocontrols.addEventListener("change", () => renderer.render(scene, camera)); const dcontrols = new THREE.DragControls( controlpoints, camera, renderer.domElement ); dcontrols.addEventListener("dragstart", () => { ocontrols.enabled = false; renderer.render(scene, camera); }); dcontrols.addEventListener("dragend", () => { ocontrols.enabled = true; for (let i = 0; i < points.length; i++) { mutable points[i] = controlpoints[i].position.toArray(); } mutable points = mutable points; renderer.render(scene, camera); }); dcontrols.addEventListener("drag", () => { renderer.render(scene, camera); }); renderer.render(scene, camera); return renderer; }35:T6e1,geometry_influence = { const color0 = new Float32Array([0.25, 1.0, 0.0]); // green (normalized) const color1 = new Float32Array([1.0, 0.0, 1.0]); // blue (normalized) var points_bez = matrixDot(univariate_extraction, points_influence); var values = matrixDot(univariate_extraction, dofs); var geometry = []; for (let i = 0; i < num_patches; i++) { const offset = i * (degree + 1); const cp = points_bez.slice(offset, offset + degree + 1); const vals = values.slice(offset, offset + degree + 1); var vertices = []; var colors = new Float32Array(num_eval * 3); for (let j = 0; j < num_eval; j++) { const u = j / (num_eval - 1); const bu = d3 .range(0, degree + 1) .map(x => W_u[x] * bernstein_1d(x, degree, u)); var pointx = 0; var pointy = 0; var pointz = 0; var val = 0; for (let s = 0; s <= degree; s++) { pointx += bu[s] * cp[s][0]; pointy += bu[s] * cp[s][1]; pointz += bu[s] * cp[s][2]; val += bu[s] * vals[s][0]; } pointx *= 1 / weights_u[j]; pointy *= 1 / weights_u[j]; pointz *= 1 / weights_u[j]; val *= 1 / weights_u[j]; vertices.push(new THREE.Vector3(pointx, pointy, pointz)); for (let k = 0; k < 3; k++) { colors[3 * j + k] = color1[k] * val + color0[k] * (1 - val); } } const egeometry = new THREE.BufferGeometry().setFromPoints(vertices); egeometry.addAttribute('color', new THREE.BufferAttribute(colors, 3)); const lmaterial = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors, linewidth: 3 }); geometry[i] = new THREE.Line(egeometry, lmaterial); geometry[i].computeLineDistances(); } return geometry; }36:T49d,renderer_influence = { const renderer = new THREE.WebGLRenderer({ antialias: false }); const ocontrols = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (ocontrols.dispose(), renderer.dispose())); renderer.setSize(Math.min(width, 1400), height); renderer.setPixelRatio(devicePixelRatio); ocontrols.addEventListener("change", () => renderer.render(scene_influence, camera) ); const dcontrols = new THREE.DragControls( controlpoints_influence, camera, renderer.domElement ); dcontrols.addEventListener("dragstart", () => { ocontrols.enabled = false; renderer.render(scene_influence, camera); }); dcontrols.addEventListener("dragend", () => { ocontrols.enabled = true; for (let i = 0; i < points_influence.length; i++) { mutable points_influence[i] = controlpoints_influence[ i ].position.toArray(); } mutable points_influence = mutable points_influence; renderer.render(scene_influence, camera); }); dcontrols.addEventListener("drag", () => { renderer.render(scene_influence, camera); }); renderer.render(scene_influence, camera); return renderer; }37:T417,geometry_dc = { const lmaterial = new THREE.LineBasicMaterial({ color: 0xFF4040, linewidth: 3 }); var points_bez = points_dc; var geometry = []; for (let i = 0; i < num_patches; i++) { const offset = i * (degree + 1); const cp = points_bez.slice(offset, offset + degree + 1); var vertices = []; for (let j = 0; j < num_eval; j++) { const u = j / (num_eval - 1); const bu = d3 .range(0, degree + 1) .map(x => W_u[x] * bernstein_1d(x, degree, u)); var pointx = 0; var pointy = 0; var pointz = 0; for (let s = 0; s <= degree; s++) { pointx += bu[s] * cp[s][0]; pointy += bu[s] * cp[s][1]; pointz += bu[s] * cp[s][2]; } pointx *= 1 / weights_u[j]; pointy *= 1 / weights_u[j]; pointz *= 1 / weights_u[j]; vertices.push(new THREE.Vector3(pointx, pointy, pointz)); } geometry[i] = new THREE.Line( new THREE.BufferGeometry().setFromPoints(vertices), lmaterial ); } return geometry; }38:T432,renderer_dc = { const renderer = new THREE.WebGLRenderer({ antialias: false }); const ocontrols = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (ocontrols.dispose(), renderer.dispose())); renderer.setSize(Math.min(width, 1400), height); renderer.setPixelRatio(devicePixelRatio); ocontrols.addEventListener("change", () => renderer.render(scene_dc, camera)); const dcontrols = new THREE.DragControls( controlpoints_dc, camera, renderer.domElement ); dcontrols.addEventListener("dragstart", () => { ocontrols.enabled = false; renderer.render(scene_dc, camera); }); dcontrols.addEventListener("dragend", () => { ocontrols.enabled = true; for (let i = 0; i < points_dc.length; i++) { mutable points_dc[i] = controlpoints_dc[i].position.toArray(); } mutable points_dc = mutable points_dc; renderer.render(scene_dc, camera); }); dcontrols.addEventListener("drag", () => { renderer.render(scene_dc, camera); }); renderer.render(scene_dc, camera); return renderer; }39:[] 2d:{"id":"edc862fc5a751a4b","slug":"interactive-design-with-smooth-splines","title":"Interactive design with smooth splines","thumbnail":"f126f0c12494970c30c735c778bda6d6c1cac0f34bce530d5c55cc4f813c4c28","access_level":"public","create_time":"$D2020-06-16T09:44:21.288Z","update_time":"$D2021-11-01T07:49:53.970Z","view_time":null,"first_public_time":"$D2020-08-06T20:05:08.419Z","has_unpublished_edits":null,"fork":true,"stars":12,"starred":false,"owner":{"type":"team","id":"f47475f54aaa0849","login":"dtoshniwal","name":"Deepesh Toshniwal","avatar_url":"https://avatars-next.observableusercontent.com/c5e03c6e45cf84896a5e5ce9003f594be30dbe6808cb44ed9516c18c983fc99d","tier":"starter_2024"},"version":1734,"publish_version":1734,"role":null,"authored":false,"authors":[{"type":"individual","id":"995156602d0fd216","login":"dtoshniwal","name":"Deepesh Toshniwal","avatar_url":"https://avatars-next.observableusercontent.com/c5e03c6e45cf84896a5e5ce9003f594be30dbe6808cb44ed9516c18c983fc99d","tier":null}],"members":[{"type":"individual","id":"995156602d0fd216","login":"dtoshniwal","name":"Deepesh Toshniwal","avatar_url":"https://avatars-next.observableusercontent.com/c5e03c6e45cf84896a5e5ce9003f594be30dbe6808cb44ed9516c18c983fc99d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Interactive design with smooth splines","cells":[{"id":719,"value":"md`# Interactive design with smooth splines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"md`Almost everything that we see around us starts its life as a geometric model inside a Computer-Aided Design (CAD) software. The chair that you are sitting on, the smartphone or laptop you are reading this on, and the vehicle you used to go to work today. For example, these cool CAD models of F1 cars by Reddit user FrankyDoodle.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"graphic = renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"{\n const init = html``;\n init.onclick = () => {\n mutable points = [\n [-1, -1, 0],\n [1, -1, 0.25],\n [1, 1, 0.5],\n [-1, 1, 0.75],\n [-1, -1, 1.0],\n [1, -1, 1.25],\n [0, 0, 0.75]\n ];\n };\n return init;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"md`When you change the positions of the control points, pay close attention to exactly how the change affects the curve. When you move a point up a portion of the curve moves up, and when you move a point down the opposite happens.\n\nIn other words, nothing unexpected happens - when you move the control points, the curve imitates that movement. At the same time, the curve is smooth before you move the points and it remains smooth after you are done moving the points. This option of interactively creating smooth geometries is important for designers.\n\nNext, let us dive into the minimal mathematics that goes behind the construction of such geometric models in CAD.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1397,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1648,"value":"md`Note: All examples are related, and so they use the same camera angles so that the curves can be compared to each other. As a side effect, if you change the viewpoint in one of them, it will also change for the other examples.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"viewof cp_ind = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"graphic_influence = renderer_influence.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"md`### Example 3: Inconvenient interactions in the absence of smoothness\nThe curves in Example 1 and 2 are created using smooth splines.\nAs a consequence, moving the control points modifies the curves smoothly.\nThis is very convenient when interactively modifying the curve! To see this, let us consider a counterexample.\n\nThe curve in red shown below is exactly the same as the blue curve from Example 1.\nHowever, now it is represented using splines that are not smooth.\nAs a result, when you move the control points, you will see that the curve develops kinks and may even fracture into smaller curves.\nTry it out for yourself below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"graphic_dc = renderer_dc.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"{\n const init = html``;\n init.onclick = () => {\n mutable points_dc = matrixDot(univariate_extraction, [\n [-1, -1, 0],\n [1, -1, 0.25],\n [1, 1, 0.5],\n [-1, 1, 0.75],\n [-1, -1, 1.0],\n [1, -1, 1.25],\n [0, 0, 0.75]\n ]);\n };\n return init;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"md`#### Challenge\nWhen you play around with the control points in Example 2, the initially smooth red curve will develop corners and even fracture into one or more pieces.\nThe challenge is to try and bring these pieces together to once againg form an (approximately) smooth curve.\nThis is hard and requires a lot of trial and error.\nImagine having to do this \"manual smoothing\" over and over again for a complicated three dimensional geometry (e.g., the F1 cars above) after each control point movement - nightmare!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"md`Epilogue: I started out by creating an interactive spline geometry editor.\nAs this is also related to my research, added a bit of meat on the bones to make this notebook a gentle introduction to one of the many applications of smooth splines: interactive design.\n\nThis was my first post here, thanks Fons van der Plas for introducing me to Observable!\nI quite liked the experience; plan to elaborate on other aspects of my research in future posts, when time permits.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`### Parameters for quadratic splines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"degree = 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"num_patches = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`### Initial control points of quadratic spline\n\nThe following sets up the (mutable) control points of the quadratic spline curve.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"mutable points = [\n [-1, -1, 0],\n [1, -1, 0.25],\n [1, 1, 0.5],\n [-1, 1, 0.75],\n [-1, -1, 1.0],\n [1, -1, 1.25],\n [0, 0, 0.75]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"mutable points_influence = [\n [-1, -1, 0],\n [1, -1, 0.25],\n [1, 1, 0.5],\n [-1, 1, 0.75],\n [-1, -1, 1.0],\n [1, -1, 1.25],\n [0, 0, 0.75]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"mutable points_dc = matrixDot(univariate_extraction, points)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`### Curve evaluations\n\nThe following evaluates the curve for the chosen number of evaluation points, and generates the control net and control points for the scene.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"num_eval = 42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"md`##### Geometry for Example 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"controlnet = {\n var lmaterial = new THREE.LineBasicMaterial({ color: 'white' });\n var vertices = [];\n for (let i = 0; i < points.length; i++) {\n vertices.push(new THREE.Vector3(points[i][0], points[i][1], points[i][2]));\n }\n vertices.push(new THREE.Vector3(points[0][0], points[0][1], points[0][2]));\n const cnet = new THREE.Line(\n new THREE.BufferGeometry().setFromPoints(vertices),\n lmaterial\n );\n\n return cnet;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"controlpoints = {\n var size = 0.05,\n lgeometry = new THREE.SphereGeometry(size, 14, 14),\n lmaterial = new THREE.MeshBasicMaterial({ color: 'yellow' });\n\n var controls = [];\n for (let i = 0; i < points.length; i++) {\n controls[i] = new THREE.Mesh(lgeometry, lmaterial);\n controls[i].position.set(points[i][0], points[i][1], points[i][2]);\n }\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(\"black\");\n const material = new THREE.MeshNormalMaterial({\n flatShading: true,\n side: THREE.DoubleSide\n });\n for (let i = 0; i < num_patches; i++) {\n scene.add(geometry[i]);\n }\n for (let i = 0; i < points.length; i++) {\n scene.add(controlpoints[i]);\n }\n scene.add(controlnet);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1562,"value":"md`##### Geometry for Example 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1586,"value":"mutable dofs = {\n var dofs = [[0], [0], [0], [0], [0], [0], [0]];\n dofs[cp_ind * 1][0] = 1;\n return dofs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"controlpoints_influence = {\n var size = 0.05,\n lgeometry = new THREE.SphereGeometry(size, 14, 14),\n lmaterial = new THREE.MeshBasicMaterial({ color: 'yellow' }),\n lmaterial_sel = new THREE.MeshBasicMaterial({ color: 'red' });\n\n var controls = [];\n for (let i = 0; i < points_influence.length; i++) {\n if (i != cp_ind * 1) {\n controls[i] = new THREE.Mesh(lgeometry, lmaterial);\n } else {\n controls[i] = new THREE.Mesh(lgeometry, lmaterial_sel);\n }\n controls[i].position.set(\n points_influence[i][0],\n points_influence[i][1],\n points_influence[i][2]\n );\n }\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1645,"value":"controlnet_influence = {\n var lmaterial = new THREE.LineBasicMaterial({ color: 'white' });\n var vertices = [];\n for (let i = 0; i < points_influence.length; i++) {\n vertices.push(\n new THREE.Vector3(\n points_influence[i][0],\n points_influence[i][1],\n points_influence[i][2]\n )\n );\n }\n vertices.push(\n new THREE.Vector3(\n points_influence[0][0],\n points_influence[0][1],\n points_influence[0][2]\n )\n );\n const cnet = new THREE.Line(\n new THREE.BufferGeometry().setFromPoints(vertices),\n lmaterial\n );\n\n return cnet;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1616,"value":"scene_influence = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(\"black\");\n const material = new THREE.MeshNormalMaterial({\n flatShading: true,\n side: THREE.DoubleSide\n });\n for (let i = 0; i < num_patches; i++) {\n scene.add(geometry_influence[i]);\n }\n scene.add(controlnet_influence);\n for (let i = 0; i < points_influence.length; i++) {\n scene.add(controlpoints_influence[i]);\n }\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1619,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"md`##### Geometry for Example 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"controlnet_dc = {\n var lmaterial = new THREE.LineBasicMaterial({ color: 'white' });\n var cnet = [];\n for (let i = 0; i < num_patches; i++) {\n var vertices = [];\n for (let j = i * (degree + 1); j < (i + 1) * (degree + 1); j++) {\n vertices.push(\n new THREE.Vector3(points_dc[j][0], points_dc[j][1], points_dc[j][2])\n );\n }\n cnet[i] = new THREE.Line(\n new THREE.BufferGeometry().setFromPoints(vertices),\n lmaterial\n );\n scene_dc.add(cnet[i]);\n }\n\n return cnet;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1317,"value":"controlpoints_dc = {\n var size = 0.05,\n lgeometry = new THREE.SphereGeometry(size, 14, 14),\n lmaterial = new THREE.MeshBasicMaterial({ color: 'yellow' });\n\n var controls = [];\n for (let i = 0; i < points_dc.length; i++) {\n controls[i] = new THREE.Mesh(lgeometry, lmaterial);\n controls[i].position.set(points_dc[i][0], points_dc[i][1], points_dc[i][2]);\n scene_dc.add(controls[i]);\n }\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"scene_dc = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(\"black\");\n const material = new THREE.MeshNormalMaterial({\n flatShading: true,\n side: THREE.DoubleSide\n });\n for (let i = 0; i < num_patches; i++) {\n scene.add(geometry_dc[i]);\n }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`### Bernstein-Bezier polynomials\n\nThe following functions compute factorials, use them to compute the binomial coefficients, and use the result to compute Bernstein-Bezier polynomials.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"function bernstein_1d(i, n, t) {\n return binomial(n, i) * t ** i * (1 - t) ** (n - i);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function binomial(n, k) {\n return Number(factorial(n) / (factorial(k) * factorial(n - k)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function factorial(n)\n{\n if (n === 0)\n { return 1; }\n else\n { return n * factorial( n - 1 ); }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`### Extractions, univariate weights, matrix products\n\nHere, we compute the polar and tensor extraction operators, and the weights for univariate rational Bernstein-Bezier polynomials.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"W_u = [1, 1/Math.sqrt(2), 1];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"weights_u = {\n var weights = [];\n for (let i = 0; i < num_eval; i++) {\n weights[i] = 0;\n const u = i/(num_eval-1);\n const b = d3.range(0, degree+1).map(x => bernstein_1d(x,degree,u));\n for (let r = 0; r <= degree; r++) {\n weights[i] += b[r]*W_u[r];\n }\n }\n return weights;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"univariate_extraction = {\n const Hs = [\n [0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0.5, 1, 0.5],\n [0.5, 1, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5],\n [0, 0, 0.5, 0.5, 1, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0.5, 0.5, 1, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0.5, 1, 0.5, 0.5, 0, 0, 0, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0.5, 1, 0.5, 0.5, 0, 0, 0, 0, 0],\n [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 0.5, 1, 0.5, 0.5, 0, 0]\n ];\n\n return Hs[0].map((_, colIndex) => Hs.map(row => row[colIndex]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"function matrixDot (A, B) {\n var result = new Array(A.length).fill(0).map(row => new Array(B[0].length).fill(0));\n\n return result.map((row, i) => {\n return row.map((val, j) => {\n return A[i].reduce((sum, elm, k) => sum + (elm*B[k][j]) ,0)\n })\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"function mapAB(a,b,fn){\n var k=0, out = Array(a.length*b.length);\n for(var i=0; i {});\n await require(\"three@0.114/examples/js/controls/DragControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"md`### MathJax for LaTeX\n(from Alf Eaton)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"MathJax = require(\"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML\")\n .catch(() => window.MathJax)\n .then(MathJax => {\n MathJax.Hub.Config({\n CommonHTML: { scale: 100 }, // scaling to get the same size as katex (but katex still has more spacing between lines...)\n tex2jax: { inlineMath: [[\"$\", \"$\"], [\"\\\$\", \"\\\$\"]] },\n displayMath: [[\"$$\", \"$$\"], [\"\\\\[\", \"\\\\]\"]],\n processEscapes: true,\n TeX: { extensions: [\"autoload-all.js\"] }\n });\n return new Promise(resolve =>\n MathJax.Hub.Register.StartupHook(\"End\", () => resolve(MathJax))\n );\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"mjCSS = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1423,"value":"function mj() {\n const raw = String.raw(...arguments);\n if (!document.getElementById('observable-mathjax-style'))\n document.body.appendChild(mjCSS);\n // hack to autoload AMScd if necessary\n // (won't be necessary in MathJax v3: https://github.com/mathjax/mathjax-v3/pull/235)\n if (!document.getElementById('mathjax-amscd') && /\\\\begin\\{CD\\}/.test(raw)) {\n MathJax.Hub.Queue([\n \"Typeset\",\n MathJax.Hub,\n document.body.appendChild(\n html`

$\\\\require{AMScd}$`\n )\n ]);\n }\n const elem = document.body.appendChild(html`${raw}`);\n return new Promise(resolve =>\n MathJax.Hub.Queue([\n \"Typeset\",\n MathJax.Hub,\n elem,\n () => resolve(document.body.removeChild(elem))\n ])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2e:"$2d:body"