30:T482,button = { let transform = d3.select(main_pic).select('.tnb_circle'); let unit_tangent0 = T(0); let [a0, b0, c0] = unit_tangent0; let running = false; function start(t) { let [x, y, z] = p(t / 800); let unit_tangent1 = T(t / 800); let [a1, b1, c1] = unit_tangent1; let dot = a0 * a1 + b0 * b1 + c0 * c1; let theta = Math.acos(dot); let [a, b, c] = cross(unit_tangent0, unit_tangent1); transform .attr('rotation', `${a} ${b} ${c} ${theta}`) .attr('translation', [x, y, z].toString().replace(/,/g, ' ')); } function stop() { timer.stop(); transform.attr('translation', '0 0 -1').attr('rotation', '1 0 0 0'); } let timer = d3.timer(start); stop(); // d3.select(small_pic) // .on('mouseover', () => timer.restart(start)) // .on('mouseout', stop); function restart() { if (running) { button.textContent = 'Play'; running = false; stop(); } else { button.textContent = 'Reset'; running = true; timer.restart(start); } } let button = html``; button.addEventListener("click", restart); return button; }31:T45f,// Generate the coordinate and index strings for the surface surface_strings = { let s_steps = 32; let t_steps = 4 * 64; let s_step = (2 * Math.PI) / s_steps; let t_step = (2 * Math.PI) / t_steps; let coord = ''; for (let i = 0; i <= t_steps; i++) { for (let j = 0; j <= s_steps; j++) { let s = j * s_step; let t = i * t_step; let xyz = trefoil_tube(s, t, r); let x = xyz[0]; let y = xyz[1]; let z = xyz[2]; coord = coord + x.toString() + ' '; coord = coord + y.toString() + ' '; coord = coord + z.toString() + ', '; } } let faces = ''; for (let i = 6; i < t_steps - 6; i++) { for (let j = 0; j < s_steps; j++) { let v1 = i * s_steps + j + i; v1 = v1.toString(); let v2 = i * s_steps + j + i + 1; v2 = v2.toString(); let v3 = (i + 1) * s_steps + (j + 1) + i + 1; v3 = v3.toString(); let v4 = (i + 1) * s_steps + (j + 1) + i; v4 = v4.toString(); faces = faces + v1 + ' ' + v2 + ' ' + v3 + ' ' + v4 + ' ' + v1 + ' -1 '; } } return { coord: coord, faces: faces }; }32:T45f,// Generate the coordinate and index strings for the mesh mesh_strings = { let s_steps = 16; let t_steps = 2 * 64; let s_step = (2 * Math.PI) / s_steps; let t_step = (2 * Math.PI) / t_steps; let coord = ''; for (let i = 0; i <= t_steps; i++) { for (let j = 0; j <= s_steps; j++) { let s = j * s_step; let t = i * t_step; let xyz = trefoil_tube(s, t, 1.02 * r); let x = xyz[0]; let y = xyz[1]; let z = xyz[2]; coord = coord + x.toString() + ' '; coord = coord + y.toString() + ' '; coord = coord + z.toString() + ', '; } } let faces = ''; for (let i = 3; i < t_steps - 3; i++) { for (let j = 0; j < s_steps; j++) { let v1 = i * s_steps + j + i; v1 = v1.toString(); let v2 = i * s_steps + j + i + 1; v2 = v2.toString(); let v3 = (i + 1) * s_steps + (j + 1) + i + 1; v3 = v3.toString(); let v4 = (i + 1) * s_steps + (j + 1) + i; v4 = v4.toString(); faces = faces + v1 + ' ' + v2 + ' ' + v3 + ' ' + v4 + ' ' + v1 + ' -1 '; } } return { coord: coord, faces: faces }; }33:T11e0,// Generate the TNB frame and the circle it generates. // Kinda long because there are 7 parts - a cylinder and // cone for the stem and head of each arrow, plus the // circle. Accounting for the position and orientation of // the frame is a bit tricky as well. function tnb_circle() { let t0 = 0; let unit_tangent = T(t0); let unit_normal = N(t0); let bi_normal = cross(T(t0), N(t0)); let arrows = d3 .create('transform') .attr('class', 'tnb_circle') .attr('translation', '0 0 -1'); let [a, b, c] = unit_tangent; let norm = Math.sqrt(a ** 2 + b ** 2 + c ** 2); let theta = -Math.acos(b); let unit_tangent_transform = arrows .append('transform') .attr('translation', `${(r * a) / 2} ${(r * b) / 2} ${(r * c) / 2}`) .attr('rotation', `${-c} 0 ${a} ${theta}`); let unit_tangent_vector = unit_tangent_transform.append('shape'); unit_tangent_vector .append('appearance') .attr('sortKey', 1) .append('material') .attr('diffuseColor', '0 0 0'); unit_tangent_vector .append('cylinder') .attr('radius', 0.01) .attr('height', `${r}`) .attr('subdivision', '32'); let head_length = 0.2; let unit_tangent_vector_head = arrows .append('transform') .attr('rotation', `${-c} 0 ${a} ${theta}`) .attr( 'translation', `${(r - head_length / 2) * a} ${(r - head_length / 2) * b} ${(r - head_length / 2) * c}` ) .append('shape'); unit_tangent_vector_head .append('appearance') .attr('sortKey', 1) .append('material') .attr('diffuseColor', '0 0 0'); unit_tangent_vector_head .append('cone') .attr('bottomRadius', '0.05') .attr('topRadius', '0') .attr('height', head_length); [a, b, c] = unit_normal; norm = Math.sqrt(a ** 2 + b ** 2 + c ** 2); theta = -Math.acos(b); let normal_transform = arrows .append('transform') .attr('translation', `0 0 ${r / 2}`) .attr('rotation', `${-c} 0 ${a} ${theta}`); let normal_vector = normal_transform.append('shape'); normal_vector .append('appearance') .append('material') .attr('diffuseColor', '0 0 0'); normal_vector .append('cylinder') .attr('radius', 0.01) .attr('height', `${r}`) .attr('subdivision', '32'); let normal_vector_head = arrows .append('transform') .attr('rotation', `${-c} 0 ${a} ${theta}`) .attr('translation', `0 0 ${r - head_length / 2}`) .append('shape'); normal_vector_head .append('appearance') .append('material') .attr('diffuseColor', '0 0 0'); normal_vector_head .append('cone') .attr('bottomRadius', '0.05') .attr('topRadius', '0') .attr('height', head_length); [a, b, c] = bi_normal; norm = Math.sqrt(a ** 2 + b ** 2 + c ** 2); theta = -Math.acos(b); let bi_normal_transform = arrows .append('transform') .attr('translation', `${(r * a) / 2} ${(r * b) / 2} ${(r * c) / 2}`) .attr('rotation', `${-c} 0 ${a} ${theta}`); let bi_normal_vector = bi_normal_transform.append('shape'); bi_normal_vector .append('appearance') .append('material') .attr('diffuseColor', '0 0 0'); bi_normal_vector .append('cylinder') .attr('radius', 0.01) .attr('height', `${r}`) .attr('subdivision', '32'); let bi_normal_vector_head = arrows .append('transform') .attr('rotation', `${-c} 0 ${a} ${theta}`) .attr( 'translation', `${(r - head_length / 2) * a} ${(r - head_length / 2) * b} ${(r - head_length / 2) * c}` ) .append('shape'); bi_normal_vector_head .append('appearance') .append('material') .attr('diffuseColor', '0 0 0'); bi_normal_vector_head .append('cone') .attr('bottomRadius', '0.05') .attr('topRadius', '0') .attr('height', head_length); let circle_string = ''; let n = 64; for (let i = 0; i <= n; i++) { let t = (2 * i * Math.PI) / n; let x = r * Math.cos(t) * unit_normal[0] + r * Math.sin(t) * bi_normal[0]; let y = r * Math.cos(t) * unit_normal[1] + r * Math.sin(t) * bi_normal[1]; let z = r * Math.cos(t) * unit_normal[2] + r * Math.sin(t) * bi_normal[2]; circle_string = circle_string + x.toString() + ' '; circle_string = circle_string + y.toString() + ' '; circle_string = circle_string + z.toString(); if (i < n) { circle_string = circle_string + ', '; } } let circle = arrows.append('shape'); circle .append('IndexedLineSet') .attr('coordIndex', d3.range(circle_string.split(',').length)) .append('Coordinate') .attr('point', circle_string); return arrows; }34:[] 2e:{"title":"The trefoil knot","cells":[{"id":0,"value":"md`# The trefoil knot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"main_pic = trefoil_pic()","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`The [trefoil knot](https://en.wikipedia.org/wiki/Trefoil_knot) is the simplest loop in three dimensional space that cannot be untangled. The image above uses the [TNB frame](https://en.wikipedia.org/wiki/Frenet%E2%80%93Serret_formulas) to wrap a tube around the trefoil knot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`## Some mathematical details\n\n### Parameterizing the trefoil knot\n\nBy a \"loop in three dimensional space\", we mean a path through space that starts and stops at the same point but does not otherwise intersect itself. Mathematically, a path through space is described by a function ${tex`p`} that maps an interval ${tex`[a,b]`} to ${tex`\\mathbb R^3`}, i.e. ${tex`p:[a,b] \\to \\mathbb R^3`}. This type of function is called a *parameterization*. The trefoil knot, for example, can be parameterized by ${tex`p(t) = (x(t),y(t),z(t))`}, where`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"tex.block`\\begin{array}{l}\n x(t) = \\sin(3t) \\\\ \n y(t) = \\sin(t) + 2\\sin(2t) \\\\\n z(t) = \\cos(t) - 2\\cos(2t)\n\\end{array}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"md`If we think of ${tex`t`} as time, then ${tex`p`} defines the position of a point as a function of time, i.e. ${tex`p`} describes motion through space. If we plot the position ${tex`p`} as time varies from ${tex`t=0`} to ${tex`t=2\\pi`}, we get an image of the trefoil knot that looks something like so:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"point_path_pic = {\n // Basic setup\n let this_width = 0.5 * width;\n let this_height = this_width;\n let container = d3\n .create('div')\n .style('width', this_width.toString() + 'px')\n .style('height', this_height.toString() + 'px');\n let scene = container\n .append('x3d')\n .attr('width', this_width.toString() + 'px')\n .attr('height', this_height.toString() + 'px')\n .append('scene');\n scene.append(() => viewpoint().node());\n\n let g = scene.append('group');\n g.append(() => trefoil_path().node());\n\n let point_transform = g\n .append('transform')\n .attr('translation', '0 0 -1')\n .attr('class', 'position');\n let sphere_shape = point_transform.append('shape');\n sphere_shape\n .append('appearance')\n .append('material')\n .attr('diffuseColor', '0 0 0');\n sphere_shape.append('sphere').attr('radius', '0.05');\n\n yield container.node();\n x3dom.reload();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"viewof t_point = Scrubber(t_values, { autoplay: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"md`### The TNB frame\n\nIt's not easy to see which part of the path is above and which part is below in the last image of the trefoil knot. We can enhance the image to make this easier by wrapping a tube around the curve. The key to doing so is to obtain a pair of vectors that are perpendicular to the curve as well as to each other. Such a pair of vectors can be used to construct a circle around the curve and the collection of all such circles forms the tube we seek.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"frame_path_pic = {\n // Basic setup\n let this_width = 0.5 * width;\n let this_height = this_width;\n let container = d3\n .create('div')\n .style('width', this_width.toString() + 'px')\n .style('height', this_height.toString() + 'px');\n let scene = container\n .append('x3d')\n .attr('width', this_width.toString() + 'px')\n .attr('height', this_height.toString() + 'px')\n .append('scene');\n scene.append(() => viewpoint().node());\n let g = scene.append('group');\n g.append(() => trefoil_path().node());\n g.append(() => tnb_circle().node());\n\n yield container.node();\n x3dom.reload();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"viewof t_frame = Scrubber(t_values, { autoplay: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"md`### The path and vectors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"// A parametrization p(t) of the trefoil knot\nfunction p(t) {\n return [\n Math.sin(3 * t),\n Math.sin(t) + 2 * Math.sin(2 * t),\n Math.cos(t) - 2 * Math.cos(2 * t)\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":752,"value":"// p'(t) - the tangent vector\nfunction pp(t) {\n return [\n 3 * Math.cos(3 * t),\n Math.cos(t) + 4 * Math.cos(2 * t),\n 4 * Math.sin(2 * t) - Math.sin(t)\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"// The unit tangent\nfunction T(t) {\n let v = pp(t);\n let norm = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);\n return [v[0] / norm, v[1] / norm, v[2] / norm];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"// The unit normal vector\nfunction N(t) {\n let v = pp(t);\n let norm = Math.sqrt(v[1] * v[1] + v[2] * v[2]);\n return [0, -v[2] / norm, v[1] / norm];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"// We'll the bi-normal vector using the\n// cross product of T and N\nfunction cross(v1, v2) {\n let X = v1[1] * v2[2] - v1[2] * v2[1];\n let Y = v1[2] * v2[0] - v1[0] * v2[2];\n let Z = v1[0] * v2[1] - v1[1] * v2[0];\n return [X, Y, Z];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"md`### Graphic functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"// A global parameter defining the radius of the tube\nr = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"viewpoint().attr(\"position\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":806,"value":"// The common viewpoint for all the pictures is to\n// look down the positive x-axis.\nfunction viewpoint() {\n let rot = (2 * Math.PI) / 3;\n rot = rot.toString();\n let d = 1 / Math.sqrt(3);\n d = d.toString();\n let ddd = d + \" \" + d + \" \" + d;\n return d3\n .create(\"viewpoint\")\n .attr(\"position\", \"10 0 -1\")\n .attr(\"orientation\", ddd + \" \" + rot);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"// This generates the main picture at the top of the page and\n// and the small picture at the bottom of the page.\n// The size parameter determines the overal size of the picture\n// as a fraction of the width of the window.\nfunction* trefoil_pic(size = 0.7) {\n let this_width = size * width;\n let this_height = this_width;\n let container = d3\n .create('div')\n .style('width', this_width.toString() + 'px')\n .style('height', this_height.toString() + 'px');\n let scene = container\n .append('x3d')\n .attr('width', this_width.toString() + 'px')\n .attr('height', this_height.toString() + 'px')\n .attr('showLog', false)\n .append('scene');\n scene.append(() => viewpoint().node());\n\n let transform = scene.append('transform');\n transform.append(() => surface().node());\n transform.append(() => mesh().node());\n transform.append(() => trefoil_path().node());\n transform.append(() => tnb_circle().node());\n\n yield container.node();\n x3dom.reload();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":773,"value":"// Generate the surface\nfunction surface() {\n let surface = d3.create('shape').attr('class', 'surface');\n surface\n .append('appearance')\n .attr('sortKey', 2)\n .append('material')\n .attr('diffuseColor', '0.6 0.6 1')\n .attr('specularColor', '0.2 0.2 0.4')\n .attr('transparency', 0);\n surface\n .append('IndexedFaceSet')\n .attr('solid', 'false')\n .attr('creaseAngle', '3.14156')\n .attr('coordIndex', surface_strings.faces)\n .append('Coordinate')\n .attr('id', 'the_Coordinate')\n .attr('point', surface_strings.coord);\n return surface;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"// Generates points on the surface of a tube of\n// radius r wrapped around the trefoil knot.\nfunction trefoil_tube(s, t, r) {\n let position = p(t);\n let unit_tangent = T(t);\n let unit_normal = N(t);\n let bi_normal = cross(unit_tangent, unit_normal);\n let cos = r * Math.cos(s);\n let sin = r * Math.sin(s);\n let x = position[0] + cos * unit_normal[0] + sin * bi_normal[0];\n let y = position[1] + cos * unit_normal[1] + sin * bi_normal[1];\n let z = position[2] + cos * unit_normal[2] + sin * bi_normal[2];\n return [x, y, z];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"surface_strings.faces","pinned":true,"hidden":false,"mode":"ojs"},{"id":776,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":781,"value":"// Generate the mesh\nfunction mesh() {\n let mesh = d3.create('shape');\n mesh\n .append('appearance')\n .append('material')\n .attr('transparency', '0.7');\n mesh\n .append('IndexedLineSet')\n .attr('coordIndex', mesh_strings.faces)\n .append('Coordinate')\n .attr('point', mesh_strings.coord);\n return mesh;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"// Generate the path\nfunction trefoil_path() {\n let path = d3.create('shape');\n path\n .append('IndexedLineSet')\n .attr('coordIndex', d3.range(path_string.split(',').length))\n .append('Coordinate')\n .attr('point', path_string);\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"// Generate the coordinate string for the path\npath_string = {\n let t_steps = 4 * 64;\n let t_step = (2 * Math.PI) / t_steps;\n let coord = '';\n for (let i = 0; i <= t_steps; i++) {\n let t = i * t_step;\n let xyz = p(t);\n let x = xyz[0];\n let y = xyz[1];\n let z = xyz[2];\n coord = coord + x.toString() + ' ';\n coord = coord + y.toString() + ' ';\n coord = coord + z.toString() + ', ';\n }\n return coord.substring(0, coord.length - 2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":804,"value":"md`### React to events`","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"// The t_values for both t_point and t_frame that are\n// pased to mbostock's Scrubber.\nt_values = d3.range(0, 2 * Math.PI, Math.PI / 100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":812,"value":"// Move the point on point_path_pic according to t_point\n{\n let [x, y, z] = p(t_point);\n d3.select(point_path_pic)\n .select('.position')\n .attr('translation', [x, y, z].toString().replace(/,/g, ' '));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"// Move the point on frame_path_pic according to t_frame\n{\n let unit_tangent0 = T(0);\n let [a0, b0, c0] = unit_tangent0;\n\n let [x, y, z] = p(t_frame);\n let unit_tangent1 = T(t_frame);\n let [a1, b1, c1] = unit_tangent1;\n let dot = a0 * a1 + b0 * b1 + c0 * c1;\n let theta = Math.acos(dot);\n let [a, b, c] = cross(unit_tangent0, unit_tangent1);\n d3.select(frame_path_pic)\n .select('.tnb_circle')\n .attr('rotation', `${a} ${b} ${c} ${theta}`)\n .attr('translation', [x, y, z].toString().replace(/,/g, ' '));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"x3dom = require('x3dom').catch(() => window['x3dom'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"import { radio, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"// Supress the dashed box that appears around X3Dom display.\nhtml``","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"md`## Extraneous export\n\nA small pic that reacts to mouseover for one of my web pages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"small_pic = trefoil_pic(0.3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":827,"value":"run_it = {\n let transform = d3.select(small_pic).select(\".tnb_circle\");\n let unit_tangent0 = T(0);\n let [a0, b0, c0] = unit_tangent0;\n\n function start(t) {\n let [x, y, z] = p(t / 500);\n let unit_tangent1 = T(t / 500);\n let [a1, b1, c1] = unit_tangent1;\n let dot = a0 * a1 + b0 * b1 + c0 * c1;\n let theta = Math.acos(dot);\n let [a, b, c] = cross(unit_tangent0, unit_tangent1);\n transform\n .attr(\"rotation\", `${a} ${b} ${c} ${theta}`)\n .attr(\"translation\", [x, y, z].toString().replace(/,/g, \" \"));\n }\n function stop() {\n timer.stop();\n transform.attr(\"translation\", \"0 0 -1\").attr(\"rotation\", \"1 0 0 0\");\n }\n let timer = d3.timer(start);\n stop();\n d3.select(small_pic)\n .on(\"mouseover\", () => timer.restart(start))\n .on(\"mouseout\", stop);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}