Published unlisted
Edited
Nov 16, 2019
Insert cell
Insert cell
Changed in fork
mything = { math; x3dom; d3;
-
let pic = html``;
const width = 800; const height = 500; let container = d3
-
.select(pic) .append('div')
+
.create('div')
.style('width', width.toString() + 'px') .style('height', height.toString() + 'px');
+
let scene = container .append('x3d') .attr('width', width.toString() + 'px') .attr('height', height.toString() + 'px') .append('scene'); scene .append("viewpoint") .attr("centerOfRotation", "0 0 0") .attr("position", "8.57023 3.32838 8.53848") .attr("orientation", "-0.28794 0.94292 0.16732 0.83483"); // Allow rotation with no zoom scene .append("NavigationInfo") .attr("type", "turntable") .attr('speed', '0'); let yaxis_transform = scene.append('transform').attr('translation', '0 0 0'); let yaxis_shape = yaxis_transform.append('shape'); yaxis_shape .append('appearance') .append('material') .attr('diffuseColor', '0 0 0') //'0.828 0.683 0.2148') .attr('transparency', 0.2); yaxis_shape .append('cylinder') .attr('radius', 0.01) .attr('subdivision', '32') .attr('height', '8'); let xaxis_transform = scene .append('transform') .attr('rotation', '0,0,1,1.570796') .attr('translation', '-2,0,0'); let xaxis_shape = xaxis_transform.append('shape'); xaxis_shape .append('appearance') .append('material') .attr('diffuseColor', '0 0 0') // '0.828 0.683 0.2148') .attr('transparency', 0.2); xaxis_shape .append('cylinder') .attr('radius', 0.02) .attr('subdivision', '32') .attr('height', '16'); let zaxis_transform = scene .append('transform') .attr('rotation', '1,0,0,1.570796'); let zaxis_shape = zaxis_transform.append('shape'); zaxis_shape .append('appearance') .append('material') .attr('diffuseColor', '0 0 0') //'0.828 0.683 0.2148') .attr('transparency', 0.2); zaxis_shape .append('cylinder') .attr('radius', 0.01) .attr('subdivision', '32') .attr('height', '12'); const transparency = 1.1; let bundle = scene.append('Group').attr('id', 'the_bundle'); for (let k = -8; k <= 8; k++) { let bundle_shape = bundle.append('Shape'); bundle_shape .attr('id', 'thread' + k.toString()) .append("appearance") .append('material') .attr('transparency', 1 - 1 / math.pow(transparency, math.abs(3 * k))); let bundle_lineset = bundle_shape.append('IndexedLineSet'); let coord_string = spindle_string(k); bundle_lineset.attr( "coordIndex", d3.range(coord_string.match(/,/g).length) ); bundle_lineset.append('Coordinate').attr('point', coord_string); }
-
return pic;
+
yield container.node(); x3dom.reload();
}
Insert cell
function x2x(x, k) {
if (math.abs(x) < 0.000001) {
return math.complex(1, 0);
} else {
var z = math.complex(x);
var twoPiI = math.complex(0, 1).mul(2 * math.pi);
return math.exp(z.mul(z.log().add(twoPiI.mul(k))));
}
}
Insert cell
function spindle_string(k) {
var result = '';
d3.range(-4, 2, 0.001).map(function(x) {
result = result + 2 * x.toString() + ' ';
var value = x2x(x, k);
var vre = value.re;
if (math.abs(vre) < 0.001) {
vre = 0.0;
}
var vim = value.im;
if (math.abs(vim) < 0.001) {
vim = 0.0;
}
result = result + vre.toString() + ' ' + vim.toString() + ', ';
});
result = result.slice(0, -2);
return result;
}
Insert cell
math = require('mathjs')
Insert cell
// x3dom is tricky. The require debugger suggests the following:
// https://observablehq.com/@tmcw/module-require-debugger
x3dom = require('x3dom').catch(() => window['x3dom'])
Insert cell
// d3 = require('d3@4')
Insert cell
d3 = require('d3')
Insert cell
html`<style>
canvas {
outline: none;
}
</style>`
Insert cell