31:T61b,function create_surface(p, [a, b], [c, d], opts = {}) { let { Nu = 100, nu = 10, Nv = 100, nv = 10, color = "#40bfbf", transparency = 0, show_mesh = true } = opts; let surface_strings = make_surface_strings(p, [a, b], [c, d], opts); let surface_transform = d3.create("transform"); if (opts.id) { surface_transform.attr("id", `${opts.id}`); } if (opts.class) { surface_transform.attr("class", `${opts.class}`); } let surface_shape = surface_transform.append("shape"); let appearance = surface_shape.append("appearance"); if (opts.sortKey || opts.sortKey === 0) { appearance.attr("sortKey", opts.sortKey); } let material = appearance .append("material") .attr("diffuseColor", color) .attr("transparency", transparency); let indexedFaceSet = surface_shape .append("indexedFaceset") .attr("coordIndex", surface_strings.face_index_string) .attr("solid", "false") .attr("creaseAngle", "3.14156"); indexedFaceSet .append("coordinate") .attr("point", surface_strings.coord_string); if (show_mesh) { let mesh = surface_transform.append("shape"); mesh .append("appearance") .append("material") .attr("transparency", transparency); mesh .append("IndexedLineSet") .attr("coordIndex", surface_strings.line_index_string) .append("Coordinate") .attr("point", surface_strings.coord_string); } let surface_node = surface_transform.node(); surface_node.extent = surface_strings.extent; return surface_node; }32:T5a4,function make_surface_strings(p, [a, b], [c, d], opts = {}) { let { Nu = 100, nu = 10, Nv = 100, nv = 10 } = opts; let Du = (b - a) / Nu; let Dv = (d - c) / Nv; let u_cut = Math.floor(Nu / nu); let v_cut = Math.floor(Nv / nv); let grid = []; let k = 0; let quads = []; let lines = []; for (let i = 0; i <= Nu; i++) { for (let j = 0; j <= Nv; j++) { let u = a + i * Du; let v = c + j * Dv; grid.push(p(u, v)); if (i < Nu && j < Nv) { quads.push([k, k + 1, k + Nv + 2, k + Nv + 1]); } if (j % v_cut == 0 && i < Nu) { lines.push([k, k + Nv + 1]); } if (i % u_cut == 0 && j < Nv) { lines.push([k, k + 1]); } k++; } } let coord_string = pt_list_to_coordString(grid); let face_index_string = quads.map(a => a.toString() + ',-1').toString(); let line_index_string = lines.map(a => a.toString() + ',-1').toString(); let xs = grid.map(pt => pt[0]); let xmin = d3.min(xs); let xmax = d3.max(xs); let ys = grid.map(pt => pt[1]); let ymin = d3.min(ys); let ymax = d3.max(ys); let zs = grid.map(pt => pt[2]); let zmin = d3.min(zs); let zmax = d3.max(zs); return { coord_string: coord_string, face_index_string: face_index_string, line_index_string: line_index_string, extent: { xmin: xmin, xmax: xmax, ymin: ymin, ymax: ymax, zmin: zmin, zmax: zmax } }; }33:[] 2f:{"title":"Parametric surfaces","cells":[{"id":0,"value":"md`# Parametric surfaces\n\nThis notebook defines a \\`create_surface\\` command that, when used as part of the [PlotX3D collection](https://observablehq.com/@mcmcclur/plotx3d), makes it relatively easy to draw parameterized surfaces in three dimensions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"Mathematically, we might think of a *parametric surface* as a way to visualize a function ${tex`p:\\mathbb R^2 \\to \\mathbb R^3`}. Thus, the input is a point in the two-dimensional plane and we sketch the image of that input under the action of the function. That distorts the domain of the function into a surface that lives in space, something like the figure shown below:","pinned":false,"hidden":false,"mode":"md"},{"id":709,"value":"sheet = {\n function T(u, v) {\n return [\n u + v + 1 / 3,\n u ** 2 - v ** 2 + 0.1,\n Math.sin(u + v + (u ** 2 - v ** 2))\n ];\n }\n let x0 = 0.9;\n let y0 = 0.3;\n let [u0, v0, w0] = T(x0, y0);\n return show_x3d(\n [\n create_surface((x, y) => [x, y, 0], [0, 1], [0, 1], { color: \"#266dd9\" }),\n create_surface(T, [0, 1], [0, 1], {\n transparency: 0.4,\n color: \"#266dd9\"\n }),\n create_sphere([x0, y0, 0], 0.03, { color: \"green\" }),\n create_sphere([u0, v0, w0], 0.03, { color: \"red\" }),\n create_arrow([x0, y0, 0], [u0 - x0, v0 - y0, w0], {\n v_length: 1.2,\n v_radius: 0.01,\n h_radius: 0.03\n })\n ],\n {\n width: width < 600 ? width : 600,\n viewpoint: {\n position: \"1.133 3.0988 2.363\",\n orientation: \"0.007 0.46 0.888,3.14\"\n }\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"md`## Examples\n\nHere are a few examples to illustrate basic usage and options. The basic syntax for \\`create_surface\\` is \n\n create_surface(p, domain1, domain2)\n\nwhere \\`p\\` is a function of two variables that returns a numeric Javascript array of length 3 and where \\`domain1\\` and \\`domain2\\` specify the domains of those variables..`","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"md`### A function of ${tex`x`} and ${tex`y`}\n\nWe can plot a function ${tex`z=f(x,y)`} by using a function \\`p\\` of the form \n\n p(x,y)=[x,y,f(x,y)].\n\nFor example, here's the graph of \n${tex.block`f(x,y) = \\frac{1}{4}(x^2+y^2)`}\nover ${tex`[-3,3]\\times[-3,3]`}:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"show_x3d([\n create_surface((x, y) => [x, y, (x ** 2 + y ** 2) / 4], [-3, 3], [-3, 3])\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"md`### Polar coordinates\n\nGraphs of function like the last one display a rotational symmetry that is best illustrated in polar coordinates. We can convert using the substitutions \n${tex.block`\n\\begin{aligned}\n x&=r\\cos(\\theta) \\\\\n y&=r\\sin(\\theta) \\\\\n x^2 + y^2 &= r^2.\n\\end{aligned}\n`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"show_x3d([\n create_surface(\n (r, t) => [r * Math.cos(t), r * Math.sin(t), r ** 2 / 4],\n [0, 3],\n [0, 2 * Math.PI]\n )\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":926,"value":"md`### Spherical coordinates\n\nSome objects will probably look better using spherical coordinates, like this ellipsoid:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"show_x3d(\n [\n create_surface(\n (phi, theta) => [\n 8 * Math.sin(phi) * Math.cos(theta),\n 5 * Math.sin(phi) * Math.sin(theta),\n 3 * Math.cos(phi)\n ],\n [0, Math.PI],\n [0, 2 * Math.PI]\n )\n ],\n {\n show_axes: false,\n viewpoint: {\n position: '14 11 7',\n orientation: '0.25 0.5 0.8,2.4'\n }\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"md`### More examples\n\nHere are some more complicated examples using \\`create_surface\\` in other notebooks:\n\n * [Non-orientability of the Mobius strip](https://observablehq.com/@mcmcclur/non-orientability-of-a-mobius-strip)\n * [Non-orientability of the Klein bottle](https://observablehq.com/@mcmcclur/non-orientability-of-the-klein-bottle)\n * [A PlotX3D animation](https://observablehq.com/@mcmcclur/a-plotx3d-animation)\n * [Examples of parametric surfaces](https://observablehq.com/@mcmcclur/examples-of-parametric-surfaces)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"function make_coord_string(p, [a, b], [c, d], opts = {}) {\n let { Nu = 100, nu = 10, Nv = 100, nv = 10 } = opts;\n\n let Du = (b - a) / Nu;\n let Dv = (d - c) / Nv;\n let grid = [];\n let quads = [];\n let lines = [];\n for (let i = 0; i <= Nu; i++) {\n for (let j = 0; j <= Nv; j++) {\n let u = a + i * Du;\n let v = c + j * Dv;\n grid.push(p(u, v));\n }\n }\n let coord_string = pt_list_to_coordString(grid);\n return coord_string;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { pt_list_to_coordString } from '@mcmcclur/x3dom-utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"import {\n show_x3d,\n create_sphere,\n create_arrow\n} from \"@mcmcclur/x3dom-primitives\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3-selection@2', 'd3-array@2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"html`\n \n`\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}