31:Teda,viewof example = { // Most of these examples lifted from Tau's parameric surface plotter: // https://observablehq.com/@timhau/parametric-surfaces let enneper = function (u, v) { const w = 15; const s = v * Math.cos(u); const t = v * Math.sin(u); const x = s * (1 - (1 / 3) * s ** 2 + t ** 2) * w; const y = t * (1 - (1 / 3) * t ** 2 + s ** 2) * w; const z = (s ** 2 - t ** 2) * w; return [x, z, y]; }; let roman = function x(u, v) { const a = 20; const x = (a ** 2 / 4) * Math.sin(2 * u) * Math.cos(v) ** 2; const y = (a ** 2 / 4) * Math.sin(u) * Math.sin(2 * v); const z = (a ** 2 / 4) * Math.cos(u) * Math.sin(2 * v); return [x, z, y]; }; let breather = function (u_in, v_in) { const a = 0.4; const w = 20; const u = -13.2 + u_in * 26.4; const v = -37.4 + v_in * 2 * 37.4; const r = 1 - a ** 2; const l = Math.sqrt(r); const d = a * ((l * Math.cosh(a * u)) ** 2 + (a * Math.sin(l * v)) ** 2); const x = -u + (2 * r * Math.cosh(a * u) * Math.sinh(a * u)) / d; const y = (2 * l * Math.cosh(a * u) * (-(l * Math.cos(v) * Math.cos(l * v)) - Math.sin(v) * Math.sin(l * v))) / d; const z = (2 * l * Math.cosh(a * u) * (-(l * Math.sin(v) * Math.cos(l * v)) + Math.cos(v) * Math.sin(l * v))) / d; return [x * w, z * w, y * w]; }; function helicoid(u, v) { const w = 5; // const u = -4 + u_ * 8; // const v = -4 + v_ * 8; // const k = 3 + a / 20; const k = 1.618 ** 2; const x = (Math.sinh(v) * Math.cos(k * u)) / (1 + Math.cosh(u) * Math.cosh(v)); const y = (Math.sinh(v) * Math.sin(k * u)) / (1 + Math.cosh(u) * Math.cosh(v)); const z = (Math.cosh(v) * Math.sinh(u)) / (1 + Math.cosh(u) * Math.cosh(v)); return [x * w, y * w, z * w]; } let examples = [ { name: "paraboloid", p: (x, y) => [x, y, x ** 2 + y ** 2], u: [-1, 1], v: [-1, 1] }, { name: "hyperbolic paraboloid", p: (x, y) => [x, y, x ** 2 - y ** 2], u: [-1, 1], v: [-1, 1] }, { name: "circular paraboloid", p: (r, t) => [r * Math.cos(t), r * Math.sin(t), r ** 2], u: [0, 1], v: [0, 2 * Math.PI] }, { name: "elliptic paraboloid", p: (r, t) => [2 * r * Math.cos(t), r * Math.sin(t), 2 * (1 - r ** 2)], u: [0, 1], v: [0, 2 * Math.PI] }, { name: "ellipsoid", p: (theta, phi) => [ (Math.sin(phi) * Math.cos(theta)) / 2, Math.sin(phi) * Math.sin(theta), Math.cos(phi) / 2 ], u: [0, 2 * Math.PI], v: [0, Math.PI] }, { name: "hyperboloid", p: (u, v) => [ Math.sqrt(1 + u ** 2) * Math.cos(v), Math.sqrt(1 + u ** 2) * Math.sin(v), u ], u: [-3, 3], v: [0, 2 * Math.PI] }, { name: "mobius_strip", p: (u, v) => [ (1 + (v * Math.cos(u / 2)) / 2) * Math.cos(u), (1 + (v * Math.cos(u / 2)) / 2) * Math.sin(u), (v * Math.sin(u / 2)) / 2 ], u: [0, 2 * Math.PI], v: [-1, 1] }, { name: "enneper", p: enneper, u: [0, 2 * Math.PI], v: [0, 2.5] }, { name: "roman", p: roman, u: [0, Math.PI], v: [0, Math.PI] }, { name: "breather", p: breather, u: [0, 1], v: [0, 1] }, { name: "helicoid", p: helicoid, u: [-4, 4], v: [-5, 5] } ]; let radio = Radio(examples, { format: (o) => o.name, value: examples[2] // label: html`

example:

` }); d3.select(radio).select("label"); //.style("width", "55px"); return radio; }32:[] 2f:{"title":"Examples of parametric surfaces","cells":[{"id":0,"value":"md`# Examples of parametric surfaces\n\nHere's a little toy to illustrate a few parametric surfaces - all generated by [PlotX3D](https://observablehq.com/@mcmcclur/plotx3d).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"html`\n color:\n ${viewof color_picker}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"transparency = {\n let slider = Range([0, 1], {\n value: 0,\n step: 0.01,\n label: html`

transparency:

`\n });\n d3.select(slider).on('input', function() {\n d3.select(pic)\n .select('#demo')\n .select('material')\n .attr('transparency', slider.value);\n });\n d3.select(slider)\n .select('input')\n .style('width', '70px');\n d3.select(slider)\n .select('label')\n .style('width', '90px');\n return slider;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"viewof show_axes = {\n let show_axes = Toggle({\n label: html`show axes:`,\n value: false\n });\n d3.select(show_axes)\n .select('label')\n .style('width', '72px');\n return show_axes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"pic = show_x3d(\n [\n create_surface(example.p, example.u, example.v, {\n id: \"demo\",\n color: color\n })\n ],\n { show_axes: show_axes, width: image_height }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`### Comments\n\nThe color, example, and show axes interactions all use \\`viewof\\` and Observable reactivity. The transparency interaction actually selects the surface and resets just the transparency attribute, as described in [PlotX3D Interactions](https://observablehq.com/@mcmcclur/plot-x3d-interactions0). Note how much smoother it is to drag the transparency slider than it is to drag the color picker.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"import { viewof xy as color_picker, viewof color } with {\n w as width,\n h as height\n} from '@toja/yes-mum-its-a-color-picker'","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"image_height = 800 //width < 800 ? width : 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"w = 120","pinned":true,"hidden":false,"mode":"ojs"},{"id":533,"value":"h = 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"import { Radio, Range, Toggle } from '@observablehq/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":718,"value":"import { create_surface, show_x3d } from \"@mcmcclur/parametric-surfaces\"","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":"$W32","stdlib":"1","titling":"auto"}