31:Tcec,{ const S = 250; const s = 250/200; const svg = d3.select(DOM.svg(S+60, S+60)) const g = svg.append('g').attr('transform', `translate(30 30)`) g.append('rect').attr('width', S).attr('height', S) .attr('fill', '#fff').attr('stroke-width', 1.5).attr('stroke', '#333') const drawing = g.append('g').attr('transform', `translate(${S/2} ${S/2})`) const fg = drawing.append('g').attr('class', 'fold_layer') const hg = drawing.append('g').attr('class', 'handle_layer') const arrow = 'm -12,5 c 0,0 1.97113,-9.33254 12.74391,-10.66635 7.69511,-0.95276 13.62817,5.32308 13.62817,5.32308 l -1.31421,-7.84868 1.31421,7.84868 -7.29747,1.09825'; const u = 40; const unitvectors = points.map(p => rotate([0,0,1],Math.atan2(p[1], p[0]))([u,0,0])); // draw creases fg.selectAll('path.crease').data(points.map((p,i) => [p,unitvectors[i]])) .enter().append('path').attr('class', 'crease') .attr('stroke-width', 1.5).attr('stroke', '#333').attr('stroke-dasharray', '3 3') .attr('d', line) // draw a,b,c,d unit vectors fg.selectAll('path.unitvector').data(unitvectors) .enter().append('path').attr('class', 'unitvector') .attr('stroke-linecap', 'round').attr('stroke-linejoin', 'round') .attr('stroke-width', 1.5).attr('stroke', '#333').attr('fill', '#000') .attr('d', P => `m 0 0 l ${u} 0 l -10 -6 l 3 6 l -3 6 l 10 -6`) .attr('transform', p => `rotate(${180/PI*Math.atan2(p[1], p[0])})`) // ..and their labels fg.selectAll('text.unitvector').data(unitvectors) .enter().append('text').attr('class', 'unitvector') .attr('x', p => p[0]+12).attr('y', p => p[1]-5) .text((p,i) => points[i][3].toLowerCase()) .attr('font-size', 14) .attr('font-family', 'monospace') .attr('font-style', 'italic') // r_b, r_a fg.selectAll('path.arrow').remove(); const b = glm.vec3.angle(points[0], points[1]) - PI/3 - .2; fg.append('path').attr('class', 'arrow') .attr('d', arrow) .attr('stroke-linecap', 'round').attr('stroke-linejoin', 'round') .attr('stroke-width', 1.5).attr('stroke', '#333').attr('fill', 'none') .attr('transform', `translate(${points[1][0]*2/3} ${points[1][1]*2/3}) rotate(${b*180/PI})`) fg.append('text').text('rb').attr('font-family', 'monospace').attr('font-size', 14) .attr('transform', `translate(${points[1][0]*2/3+10} ${points[1][1]*2/3-10})`) .attr('font-style', 'italic') fg.append('path').attr('class', 'arrow') .attr('d', arrow) .attr('stroke-linecap', 'round').attr('stroke-linejoin', 'round') .attr('stroke-width', 1.5).attr('stroke', '#333').attr('fill', 'none') .attr('transform', `translate(90 0) rotate(90)`) fg.append('text').text('ra').attr('font-family', 'monospace').attr('font-size', 14) .attr('transform', `translate(90 -15)`) .attr('font-style', 'italic') const h = hg.selectAll('g').data(points, pt => pt[3]); const h_add = h.enter().append('g'); h_add.append('circle').attr('r', 6) .attr('fill', '#000').attr('stroke', 'none') h_add.append('text').attr('y', -14).text(P => P[3]) .attr('font-family', 'monospace') const h_upd = h_add.merge(h) h_upd.select('circle').attr('cx', P => P[0]).attr('cy', P => P[1]) h_upd.select('text').attr('x', P => P[0]+6).attr('y', P => P[1]-12) return svg.node(); }32:Tff1,viewof points = { const S = 250; const s = 250/200; const svg = d3.select(DOM.svg(S+60, S+60)) const g = svg.append('g').attr('transform', `translate(30 30)`) g.append('rect').attr('width', S).attr('height', S) .attr('fill', '#fff').attr('stroke-width', 1.5).attr('stroke', '#333') const drawing = g.append('g').attr('transform', `translate(${S/2} ${S/2})`) const fg = drawing.append('g').attr('class', 'fold_layer') const hg = drawing.append('g').attr('class', 'handle_layer') const arrow = 'm -12,5 c 0,0 1.97113,-9.33254 12.74391,-10.66635 7.69511,-0.95276 13.62817,5.32308 13.62817,5.32308 l -1.31421,-7.84868 1.31421,7.84868 -7.29747,1.09825'; const points = [ [ 100*s, 0*s, 0, 'A'], [ 23*s, 100*s, 0, 'B'], [-100*s, -63*s, 0, 'C'], [ 56*s,-100*s, 0, 'D'], ]; function update () { const fold = fg.selectAll('path.crease').data(points, pt => pt[3]); fold.enter().append('path').attr('class', 'crease') .attr('stroke-width', 1.5).attr('stroke', '#333').attr('stroke-dasharray', '3 3') .merge(fold) .attr('d', P => line([[0,0],P])) // r_b, r_a fg.selectAll('path.arrow').remove(); fg.selectAll('text').remove(); const b = glm.vec3.angle(points[0], points[1]) - PI/3 - .2; fg.append('path').attr('class', 'arrow') .attr('d', arrow) .attr('stroke-linecap', 'round').attr('stroke-linejoin', 'round') .attr('stroke-width', 1.5).attr('stroke', '#333').attr('fill', 'none') .attr('transform', `translate(${points[1][0]/2} ${points[1][1]/2}) rotate(${b*180/PI})`) fg.append('text').text('rb').attr('font-family', 'monospace').attr('font-size', 14) .attr('transform', `translate(${points[1][0]/2+4} ${points[1][1]/2-16})`) fg.append('path').attr('class', 'arrow') .attr('d', arrow) .attr('stroke-linecap', 'round').attr('stroke-linejoin', 'round') .attr('stroke-width', 1.5).attr('stroke', '#333').attr('fill', 'none') .attr('transform', `translate(50 ) rotate(90)`) fg.append('text').text('ra').attr('font-family', 'monospace').attr('font-size', 14) .attr('transform', `translate(58 -12)`) const h = hg.selectAll('g').data(points, pt => pt[3]); const h_add = h.enter().append('g'); h_add.append('circle').attr('r', 6) .attr('fill', pt => pt[3] == 'A' ? '#000' : '#fff').attr('stroke-width', 2).attr('stroke', '#333') .attr('cursor', P => P[3] != 'A' ? 'pointer' : 'normal') .call(d3.drag().on('start drag', drag_handle)) h_add.append('text').attr('y', -14).text(P => P[3]) .attr('font-family', 'monospace') const h_upd = h_add.merge(h) h_upd.select('circle').attr('cx', P => P[0]).attr('cy', P => P[1]) h_upd.select('text').attr('x', P => P[0]+6).attr('y', P => P[1]-12) } function drag_handle (P) { if (P[3] == 'A') return; // A is not draggable var x = constrain(d3.event.x, -100*s, 100*s); var y = constrain(d3.event.y, -100*s, 100*s); /* THIS WORKS, except that the geometry is not updated accordingly yet // temporarily switch to angle presentation, in order to constrain point between prev & next const i = points.indexOf(P); const prev = points[(i-1+points.length)%points.length]; const next = points[(i+1)%points.length]; const a = constrain_angle(Math.atan2(y, x), Math.atan2(prev[1], prev[0]), Math.atan2(next[1], next[0]), .1); // ..and then back again x = cos(a); y = sin(a); // 'stick' point to border of paper if (abs(x) > abs(y)) { // stick to left or right border P[0] = x < 0 ? -100*s : 100*s; P[1] = y * (P[0] / x); } else { // stick to top or bottom border P[1] = y < 0 ? -100*s : 100*s; P[0] = x * (P[1] / y); } */ if (P[3] == 'C') { P[1] = y } else { P[0] = x } update(); svg.node().dispatchEvent(new CustomEvent('input')); } update(); svg.node().value = points; return svg.node(); }33:T55a,r_a = { const { beta, gamma, delta } = angles; /* const beta = .7*PI/2; const gamma = 1.7*PI/2; const g = gamma; const delta = .6*PI/2; */ const a = [1,0,0]; const b = [cos(beta),sin(beta),0]; const c = [cos(gamma),-sin(gamma),0]; const d = [cos(delta),-sin(delta),0]; const c2 = rotate(b,r_b)(c); // const d2 = rotate(a,r_a)(d); const x = (cos(delta)*cos(r_b)+cos(beta)*cos(beta)*cos(delta)*(1-cos(r_b))); const y = (cos(gamma)*cos(beta)*sin(beta)*sin(delta)*(cos(r_b)-1)+sin(gamma)*(cos(beta)*cos(beta)*sin(delta)*(cos(r_b)-1)+sin(delta))); const num = cos(gamma)*x + sin(gamma)*cos(beta)*sin(beta)*cos(delta)*(cos(r_b)-1) - cos(delta-gamma); const denom = (cos(gamma)*sin(beta)*sin(delta)*sin(r_b)+sin(gamma)*cos(beta)*sin(delta)*sin(r_b)); const k = -num/denom; // sin(r_a) - (y/denom)*cos(r_a) - k = 0 const r_a_solved = solve_sincos(1, -(y/denom), -k); //sin(r_a) = // return [k - (y/denom)*cos(r_a), sin(r_a), sin(r_a_solved[0]), sin(r_a_solved[1])]; // const d2 = rotate(a,r_a_solved[0])(d); // d2[1] = -d2[1]; // interesting... //return [d2, rotate(a,r_a)(d)] //return [acos(dot(c2,d2)), acos(dot(c,d))]; return r_a_solved.map(r_a => { if (abs(r_b) < 0.00001) { r_a = 0; } else { r_a += PI; } if (r_a > PI) { r_a -= 2*PI; } return r_a % (2*PI); }); }34:T7da,geometry = r_a => { const S = 125; const [A,B,C,D] = points.map(p => p.slice(0,3)); const atan2v = u => Math.atan2(u[1],u[0]); const faces = [ { from: atan2v(A), to: atan2v(B), between: [] }, { from: atan2v(B), to: atan2v(C), between: [] }, { from: atan2v(C), to: atan2v(D), between: [] }, { from: atan2v(D), to: atan2v(A), between: [] }, ]; [1/4*PI, 3/4*PI, -3/4*PI, -1/4*PI].map(corner => { const face = _.find(faces, (face, i) => angle_between(corner, face.from, face.to)); face.between.push(corner); }); const to_edge = a => { const u = [cos(a), sin(a), 0]; if (-PI*1/4 <= a && a <= PI*1/4) return scale(S/ cos(a), u); if ( PI*1/4 <= a && a <= PI*3/4) return scale(S/ sin(a), u); if ( PI*3/4 <= a || a <= -PI*3/4) return scale(S/-cos(a), u); if (-PI*3/4 <= a && a <= -PI*1/4) return scale(S/-sin(a), u); throw `Err @ geometry/to_edge`; }; for (var nface, face, i = 0; face = faces[i], i < faces.length; i++) { nface = [[0,0,0], to_edge(face.from)]; face.between.forEach(a => nface.push(to_edge(a))); nface.push(to_edge(face.to)); faces[i] = nface; } faces[1] = rotate(B,-r_b)(faces[1]); faces[3] = rotate(A,r_a)(faces[3]); const C2 = faces[2][1] = faces[1][faces[1].length - 1]; // rotated C const D2 = faces[2][faces[2].length - 1] = faces[3][1]; // rotated D faces[2].splice(2, faces[2].length - 3); /* faces[2].slice(2, faces[2].length - 1).forEach((__, i) => { // we'll need to re-express this one in terms of rotated C and D const k2 = (sin(delta)*sin(gamma)+sin(delta)*cos(gamma))/(cos(delta)*sin(gamma)-sin(delta)*cos(gamma)); faces[2][i+2] = add( scale(1-(cos(delta)/sin(delta))*k2, C2), scale(-k2, D2) ); }); */ /* const k2 = (sin(delta)*sin(gamma)+sin(delta)*cos(gamma))/(cos(delta)*sin(gamma)-sin(delta)*cos(gamma)); const CD = add( scale(1-(cos(delta)/sin(delta))*k2, C2), scale(-k2, D2) ); */ return { faces }; }35:T410,html`

${md`\`\`\`maxima kill(a, b, c, d, c2, d2, r_a, r_b, eq); a: [1, 0, 0]; b: [cos(beta), sin(beta), 0]; c: [cos(g), -sin(g), 0]; d: [cos(delta), -sin(delta), 0]; \`\`\` \`\`\`maxima rot(v, theta) := block([u, ux, uy, uz, cth, c1, sth], cth: cos(theta), sth: sin(theta), c1: 1-cth, u: sqrt(v[1]^2 + v[2]^2 + v[3]^2), if u = 0 then error("A non-zero vector is required."), ux: v[1]/u, uy: v[2]/u, uz: v[3]/u, matrix([cth+ux^2*c1, ux*uy*c1-uz*sth, ux*uz*c1+uy*sth], [uy*ux*c1+uz*sth, cth+uy^2*c1, uy*uz*c1-ux*sth], [uz*ux*c1-uy*sth, uz*uy*c1+ux*sth, cth+uz^2*c1]) )$ \`\`\` \`\`\`maxima c2: trigsimp(rot(b, r_b) . c); /* rotated c */ d2: rot(a, r_a) . d; /* rotated d */ trigsimp(c2 . d2); eq: trigsimp(c2 . d2 - cos(g - delta)); /* view a plot for specific values of beta,gamma,delta */ plot3d(ev(eq, [beta=.9,g=1.1,delta=1.7]), [r_a,-π/4,π/4], [r_b,-π/4,π/4]); solve([eq = 0], r_a); \`\`\` `}

`36:T9ab,function plot (fns, [xmin, xmax], [ymin, ymax], params = {}) { const S = 250; const pad = { top: 50, le: 60, ri: 10, bot: 10 }; const W = S + pad.le + pad.ri; const H = S + pad.top + pad.bot; const svg = d3.select(DOM.svg(W, H)); const el = svg.node(); const fmt = d3.format('.3'); /* function fmt (x) { x = x*16; if (!x) return '0'; const d = Math.abs(gcd(x, 16)); return `${x/d}/${16/d} π`; }*/ function decorate_axis (axis) { return axis.tickSize(4).tickPadding(8).tickFormat(fmt) } function decorate_label (label) { label .style('text-anchor', 'middle') .style('font-weight', 'bold') .style('font-family', 'sans-serif') .attr('font-size', 14) } if (params.xLabel) svg.append('text').text(params.xLabel).call(decorate_label) .attr('transform', `translate(${pad.le + (W-pad.ri-pad.le)/2} 15)`) if (params.yLabel) svg.append('text').text(params.yLabel).call(decorate_label) .attr('transform', `translate(25 ${pad.top + (H-pad.top-pad.bot)/2}) rotate(-90)`) // scales const xScale = d3.scaleLinear().domain([xmin, xmax]).range([0, W - pad.ri - pad.le]).clamp(true) const yScale = d3.scaleLinear().domain([ymin, ymax]).range([0, H - pad.top - pad.bot]).clamp(true) // axes const xAxis = decorate_axis(d3.axisTop(xScale)).ticks(5) const yAxis = decorate_axis(d3.axisLeft(yScale)).ticks(5) const g = svg.append('g').attr('transform', `translate(${pad.le} ${pad.top})`); // (fold,skew) square g.append('g').call(xAxis) g.append('g').call(yAxis) // draw line const line = d3.line(); for (var o, i = 0; o = fns[i]; i++) { if (typeof o == 'function') o = { fn: o }; const { fn, stroke } = fns[i] = _.defaults(o, { stroke: '#000', }); const data = []; for (var px = 0; px < W - pad.ri - pad.le; px++) { data.push([px, yScale(fn(xScale.invert(px)))]); } g.append('path').attr('d', line(data)).attr('fill', 'none').attr('stroke', stroke).attr('stroke-width', 2); } return html`

${el}

${o.desc}

`; }37:Tc63,function draw (polygons, params) { var { rotx, roty, W, H, inline, download, z_comp, styles } = _.defaults(params, { rotx: 30, // initial rotation around up axis roty: 10, // initial rotation around right axis inline: false, download: 'download.svg', z_comp: z_mean_comp, styles: [], }); // orthographic rotation var intrinsic_up = [0,-1,0]; // in polygon coordinates var intrinsic_right = [1,0,0]; // polygon coordinates function rotr (around_up, around_right) { intrinsic_right = rotate(intrinsic_up, around_up)(intrinsic_right); polygons = rotate(intrinsic_up, around_up)(polygons); intrinsic_up = rotate([1,0,0], around_right)(intrinsic_up); polygons = rotate([1,0,0], around_right)(polygons); } // initial rotation rotr(-rotx*PI/180, roty*PI/180); const dline = d3.line(); var S; if (inline) { const points = _.flatten(polygons); const xExtent = d3.extent(points.map(p => p[0])); const yExtent = d3.extent(points.map(p => p[1])); H = H || 30; W = 8 + (H-2) * (xExtent[1] - xExtent[0]) / (yExtent[1] - yExtent[0]); const xScale = d3.scaleLinear().domain(xExtent).range([4, W-4]); const yScale = d3.scaleLinear().domain(yExtent).range([1, H-1]); dline.x(p => xScale(p[0])).y(p => yScale(p[1])) } else { W = W || 400; H = H || 400; S = Math.min(W, H); } const svg = d3.select(DOM.svg(W, H)).style('vertical-align', inline ? 'text-bottom' : 'normal'); const bg = svg.append('rect').attr('fill', '#fff').attr('stroke', 'none').attr('width', W).attr('height', H); const g = svg.append('g') .attr('class', 'drawing') .attr('transform', inline ? `` : `translate(${W/2} ${H/2})`); const light = glm.vec3.normalize([0,0,0], [.2, .3, -.7]); function redraw () { const paths = g.selectAll('path.line') .data(polygons.sort(z_comp)); paths.exit().remove(); const all = paths.enter().append('path').attr('class', 'line') .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr('stroke-width', 1.5) .attr('stroke', '#000') .merge(paths) .attr('d', line => dline(line) + 'z') .attr('fill', poly => { // apply some dorky lighting. enough to get the idea that it's 3D :D const normal = glm.vec3.cross([0,0,0], sub(poly[1],poly[0]), sub(poly[2],poly[1])); glm.vec3.normalize(normal, normal); const v = dot(normal, light); return d3.interpolateGreys(.8 * ((v+1)/3)); return '#fff'; }) } var root = svg.node(); var syncRoot; function ondrag (initial = true) { rotr((d3.event.dx / 2.4)*PI/180, (d3.event.dy / 2.4)*PI/180); redraw(); if (syncRoot && initial) syncRoot.ondrag(false); } if (!inline) { // mouse interactivity svg.call(d3.drag().on('drag', ondrag)); if (download !== false) { root = wrap_svg_downloadable(root); } } // This is just really really ugly. Just a messy quick hack. Needs fixing. root.ondrag = ondrag; root.sync = r => syncRoot = r; // initial draw redraw(); return root; }38:T88c,function threedraw (meshes) { const W = 700; const H = 300; // RENDERER const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); renderer.setSize(W, H); renderer.setPixelRatio(devicePixelRatio); const view = renderer.domElement; //d3.select(view).attr('stroke', '#000') // CAMERA const fov = 30; const aspect = W/H; const near = 1; const far = 1000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); const a = .5 camera.position.x = 600 * sin(a); camera.position.y = -100 camera.position.z = 600 * cos(a); // CONTROLS const controls = new THREE.OrbitControls(camera, view); controls.enableZoom = false; controls.enablePan = false; //controls.rotateLeft(.1); controls.minPolarAngle = -Math.PI; // radians controls.maxPolarAngle = 2*Math.PI; // radians // SCENE const scene = new THREE.Scene(); scene.background = new THREE.Color(0xffffff); //const geometry = new THREE.BoxGeometry(1, 1, 1); meshes.forEach(mesh => scene.add(mesh)); // LIGHTING const lights = scene.lights = {}; lights.ambient = new THREE.AmbientLight(0x333333, .6); scene.add(lights.ambient); lights.spot = new THREE.SpotLight(0x8c7e96, .5); lights.spot.position.set(800, -500, -300); scene.add(lights.spot); lights.hemiLight = new THREE.HemisphereLight(0xefede8, 0x727248, .8); scene.add(lights.hemiLight); // sun lights.shadow = new THREE.DirectionalLight(0xffffff, .3); lights.shadow.position.set(-0, 700, 500); // (x,y,z) = BACK, ?, DOWN lights.shadow.castShadow = true; lights.shadow.shadow.mapSize.width = 1024; lights.shadow.shadow.mapSize.height = 1024; var d = 1000; lights.shadow.shadow.camera.left = -d; lights.shadow.shadow.camera.right = d; lights.shadow.shadow.camera.top = d; lights.shadow.shadow.camera.bottom = -d; lights.shadow.shadow.camera.near = 1; lights.shadow.shadow.camera.far = 3000; lights.shadow.shadow.bias = -0.0005; scene.add(lights.shadow); function render () { renderer.render(scene, camera); } controls.addEventListener('change', render); render(); return view; }39:T1632,// https://riccardoscalco.github.io/textures/ textures = { var t=function(){return(Math.random().toString(36)+"00000000000000000").replace(/[^a-z]+/g,"").slice(0,5)};return{circles:function(){var r=20,n="",e=2,a=!1,u="#343434",i="#343434",c=0,l=t(),o=function(t){var o=t.append("defs").append("pattern").attr("id",l).attr("patternUnits","userSpaceOnUse").attr("width",r).attr("height",r);n&&o.append("rect").attr("width",r).attr("height",r).attr("fill",n),o.append("circle").attr("cx",r/2).attr("cy",r/2).attr("r",e).attr("fill",u).attr("stroke",i).attr("stroke-width",c),a&&[[0,0],[0,r],[r,0],[r,r]].forEach(function(t){o.append("circle").attr("cx",t[0]).attr("cy",t[1]).attr("r",e).attr("fill",u).attr("stroke",i).attr("stroke-width",c)})};return o.heavier=function(t){return 0===arguments.length?e*=2:e*=2*t,o},o.lighter=function(t){return 0===arguments.length?e/=2:e/=2*t,o},o.thinner=function(t){return 0===arguments.length?r*=2:r*=2*t,o},o.thicker=function(t){return 0===arguments.length?r/=2:r/=2*t,o},o.background=function(t){return n=t,o},o.size=function(t){return r=t,o},o.complement=function(t){return a=0===arguments.length||t,o},o.radius=function(t){return e=t,o},o.fill=function(t){return u=t,o},o.stroke=function(t){return i=t,o},o.strokeWidth=function(t){return c=t,o},o.id=function(t){return 0===arguments.length?l:(l=t,o)},o.url=function(){return"url(#"+l+")"},o},lines:function(){var r=20,n="#343434",e=2,a="",u=t(),i=["diagonal"],c="auto",l=function(t){var n=r;switch(t){case"0/8":case"vertical":return"M "+n/2+", 0 l 0, "+n;case"1/8":return"M "+n/4+",0 l "+n/2+","+n+" M "+-n/4+",0 l "+n/2+","+n+" M "+3*n/4+",0 l "+n/2+","+n;case"2/8":case"diagonal":return"M 0,"+n+" l "+n+","+-n+" M "+-n/4+","+n/4+" l "+n/2+","+-n/2+" M "+.75*n+","+5/4*n+" l "+n/2+","+-n/2;case"3/8":return"M 0,"+.75*n+" l "+n+","+-n/2+" M 0,"+n/4+" l "+n+","+-n/2+" M 0,"+5*n/4+" l "+n+","+-n/2;case"4/8":case"horizontal":return"M 0,"+n/2+" l "+n+",0";case"5/8":return"M 0,"+-n/4+" l "+n+","+n/2+"M 0,"+n/4+" l "+n+","+n/2+" M 0,"+3*n/4+" l "+n+","+n/2;case"6/8":return"M 0,0 l "+n+","+n+" M "+-n/4+","+.75*n+" l "+n/2+","+n/2+" M "+3*n/4+","+-n/4+" l "+n/2+","+n/2;case"7/8":return"M "+-n/4+",0 l "+n/2+","+n+" M "+n/4+",0 l "+n/2+","+n+" M "+3*n/4+",0 l "+n/2+","+n;default:return"M "+n/2+", 0 l 0, "+n}},o=function(t){var o=t.append("defs").append("pattern").attr("id",u).attr("patternUnits","userSpaceOnUse").attr("width",r).attr("height",r);a&&o.append("rect").attr("width",r).attr("height",r).attr("fill",a),i.forEach(function(t){o.append("path").attr("d",l(t)).attr("stroke-width",e).attr("shape-rendering",c).attr("stroke",n).attr("stroke-linecap","square")})};return o.heavier=function(t){return 0===arguments.length?e*=2:e*=2*t,o},o.lighter=function(t){return 0===arguments.length?e/=2:e/=2*t,o},o.thinner=function(t){return 0===arguments.length?r*=2:r*=2*t,o},o.thicker=function(t){return 0===arguments.length?r/=2:r/=2*t,o},o.background=function(t){return a=t,o},o.size=function(t){return r=t,o},o.orientation=function(){for(var t=arguments.length,r=Array(t),n=0;n EPS // using small-angle approximation cos(x/2) = 1 - x^2 / 8 if ( zoomChanged || lastPosition.distanceToSquared( scope.object.position ) > EPS || 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) { scope.dispatchEvent( changeEvent ); lastPosition.copy( scope.object.position ); lastQuaternion.copy( scope.object.quaternion ); zoomChanged = false; return true; } return false; }; }(); this.dispose = function() { scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false ); scope.domElement.removeEventListener( 'mousedown', onMouseDown, false ); scope.domElement.removeEventListener( 'wheel', onMouseWheel, false ); scope.domElement.removeEventListener( 'touchstart', onTouchStart, false ); scope.domElement.removeEventListener( 'touchend', onTouchEnd, false ); scope.domElement.removeEventListener( 'touchmove', onTouchMove, false ); document.removeEventListener( 'mousemove', onMouseMove, false ); document.removeEventListener( 'mouseup', onMouseUp, false ); window.removeEventListener( 'keydown', onKeyDown, false ); //scope.dispatchEvent( { type: 'dispose' } ); // should this be added here? }; // // internals // var scope = this; var changeEvent = { type: 'change' }; var startEvent = { type: 'start' }; var endEvent = { type: 'end' }; var STATE = { NONE : - 1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 }; var state = STATE.NONE; var EPS = 0.000001; // current position in spherical coordinates var spherical = new THREE.Spherical(); var sphericalDelta = new THREE.Spherical(); var scale = 1; var panOffset = new THREE.Vector3(); var zoomChanged = false; var rotateStart = new THREE.Vector2(); var rotateEnd = new THREE.Vector2(); var rotateDelta = new THREE.Vector2(); var panStart = new THREE.Vector2(); var panEnd = new THREE.Vector2(); var panDelta = new THREE.Vector2(); var dollyStart = new THREE.Vector2(); var dollyEnd = new THREE.Vector2(); var dollyDelta = new THREE.Vector2(); function getAutoRotationAngle() { return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; } function getZoomScale() { return Math.pow( 0.95, scope.zoomSpeed ); } function rotateLeft( angle ) { sphericalDelta.theta -= angle; } function rotateUp( angle ) { sphericalDelta.phi -= angle; } var panLeft = function() { var v = new THREE.Vector3(); return function panLeft( distance, objectMatrix ) { v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix v.multiplyScalar( - distance ); panOffset.add( v ); }; }(); var panUp = function() { var v = new THREE.Vector3(); return function panUp( distance, objectMatrix ) { v.setFromMatrixColumn( objectMatrix, 1 ); // get Y column of objectMatrix v.multiplyScalar( distance ); panOffset.add( v ); }; }(); // deltaX and deltaY are in pixels; right and down are positive var pan = function() { var offset = new THREE.Vector3(); return function pan ( deltaX, deltaY ) { var element = scope.domElement === document ? scope.domElement.body : scope.domElement; if ( scope.object instanceof THREE.PerspectiveCamera ) { // perspective var position = scope.object.position; offset.copy( position ).sub( scope.target ); var targetDistance = offset.length(); // half of the fov is center to top of screen targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 ); // we actually don't use screenWidth, since perspective camera is fixed to screen height panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix ); panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix ); } else if ( scope.object instanceof THREE.OrthographicCamera ) { // orthographic panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix ); panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix ); } else { // camera neither orthographic nor perspective console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' ); scope.enablePan = false; } }; }(); function dollyIn( dollyScale ) { if ( scope.object instanceof THREE.PerspectiveCamera ) { scale /= dollyScale; } else if ( scope.object instanceof THREE.OrthographicCamera ) { scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' ); scope.enableZoom = false; } } function dollyOut( dollyScale ) { if ( scope.object instanceof THREE.PerspectiveCamera ) { scale *= dollyScale; } else if ( scope.object instanceof THREE.OrthographicCamera ) { scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' ); scope.enableZoom = false; } } // // event callbacks - update the object state // function handleMouseDownRotate( event ) { //console.log( 'handleMouseDownRotate' ); rotateStart.set( event.clientX, event.clientY ); } function handleMouseDownDolly( event ) { //console.log( 'handleMouseDownDolly' ); dollyStart.set( event.clientX, event.clientY ); } function handleMouseDownPan( event ) { //console.log( 'handleMouseDownPan' ); panStart.set( event.clientX, event.clientY ); } function handleMouseMoveRotate( event ) { //console.log( 'handleMouseMoveRotate' ); rotateEnd.set( event.clientX, event.clientY ); rotateDelta.subVectors( rotateEnd, rotateStart ); var element = scope.domElement === document ? scope.domElement.body : scope.domElement; // rotating across whole screen goes 360 degrees around rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); // rotating up and down along whole screen attempts to go 360, but limited to 180 rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); rotateStart.copy( rotateEnd ); scope.update(); } function handleMouseMoveDolly( event ) { //console.log( 'handleMouseMoveDolly' ); dollyEnd.set( event.clientX, event.clientY ); dollyDelta.subVectors( dollyEnd, dollyStart ); if ( dollyDelta.y > 0 ) { dollyIn( getZoomScale() ); } else if ( dollyDelta.y < 0 ) { dollyOut( getZoomScale() ); } dollyStart.copy( dollyEnd ); scope.update(); } function handleMouseMovePan( event ) { //console.log( 'handleMouseMovePan' ); panEnd.set( event.clientX, event.clientY ); panDelta.subVectors( panEnd, panStart ); pan( panDelta.x, panDelta.y ); panStart.copy( panEnd ); scope.update(); } function handleMouseUp( event ) { //console.log( 'handleMouseUp' ); } function handleMouseWheel( event ) { //console.log( 'handleMouseWheel' ); if ( event.deltaY < 0 ) { dollyOut( getZoomScale() ); } else if ( event.deltaY > 0 ) { dollyIn( getZoomScale() ); } scope.update(); } function handleKeyDown( event ) { //console.log( 'handleKeyDown' ); switch ( event.keyCode ) { case scope.keys.UP: pan( 0, scope.keyPanSpeed ); scope.update(); break; case scope.keys.BOTTOM: pan( 0, - scope.keyPanSpeed ); scope.update(); break; case scope.keys.LEFT: pan( scope.keyPanSpeed, 0 ); scope.update(); break; case scope.keys.RIGHT: pan( - scope.keyPanSpeed, 0 ); scope.update(); break; } } function handleTouchStartRotate( event ) { //console.log( 'handleTouchStartRotate' ); rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); } function handleTouchStartDolly( event ) { //console.log( 'handleTouchStartDolly' ); var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; var distance = Math.sqrt( dx * dx + dy * dy ); dollyStart.set( 0, distance ); } function handleTouchStartPan( event ) { //console.log( 'handleTouchStartPan' ); panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); } function handleTouchMoveRotate( event ) { //console.log( 'handleTouchMoveRotate' ); rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); rotateDelta.subVectors( rotateEnd, rotateStart ); var element = scope.domElement === document ? scope.domElement.body : scope.domElement; // rotating across whole screen goes 360 degrees around rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed ); // rotating up and down along whole screen attempts to go 360, but limited to 180 rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed ); rotateStart.copy( rotateEnd ); scope.update(); } function handleTouchMoveDolly( event ) { //console.log( 'handleTouchMoveDolly' ); var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; var distance = Math.sqrt( dx * dx + dy * dy ); dollyEnd.set( 0, distance ); dollyDelta.subVectors( dollyEnd, dollyStart ); if ( dollyDelta.y > 0 ) { dollyOut( getZoomScale() ); } else if ( dollyDelta.y < 0 ) { dollyIn( getZoomScale() ); } dollyStart.copy( dollyEnd ); scope.update(); } function handleTouchMovePan( event ) { //console.log( 'handleTouchMovePan' ); panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ); panDelta.subVectors( panEnd, panStart ); pan( panDelta.x, panDelta.y ); panStart.copy( panEnd ); scope.update(); } function handleTouchEnd( event ) { //console.log( 'handleTouchEnd' ); } // // event handlers - FSM: listen for events and reset state // function onMouseDown( event ) { if ( scope.enabled === false ) return; event.preventDefault(); if ( event.button === scope.mouseButtons.ORBIT ) { if ( scope.enableRotate === false ) return; handleMouseDownRotate( event ); state = STATE.ROTATE; } else if ( event.button === scope.mouseButtons.ZOOM ) { if ( scope.enableZoom === false ) return; handleMouseDownDolly( event ); state = STATE.DOLLY; } else if ( event.button === scope.mouseButtons.PAN ) { if ( scope.enablePan === false ) return; handleMouseDownPan( event ); state = STATE.PAN; } if ( state !== STATE.NONE ) { document.addEventListener( 'mousemove', onMouseMove, false ); document.addEventListener( 'mouseup', onMouseUp, false ); scope.dispatchEvent( startEvent ); } } function onMouseMove( event ) { if ( scope.enabled === false ) return; event.preventDefault(); if ( state === STATE.ROTATE ) { if ( scope.enableRotate === false ) return; handleMouseMoveRotate( event ); } else if ( state === STATE.DOLLY ) { if ( scope.enableZoom === false ) return; handleMouseMoveDolly( event ); } else if ( state === STATE.PAN ) { if ( scope.enablePan === false ) return; handleMouseMovePan( event ); } } function onMouseUp( event ) { if ( scope.enabled === false ) return; handleMouseUp( event ); document.removeEventListener( 'mousemove', onMouseMove, false ); document.removeEventListener( 'mouseup', onMouseUp, false ); scope.dispatchEvent( endEvent ); state = STATE.NONE; } function onMouseWheel( event ) { if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return; event.preventDefault(); event.stopPropagation(); handleMouseWheel( event ); scope.dispatchEvent( startEvent ); // not sure why these are here... scope.dispatchEvent( endEvent ); } function onKeyDown( event ) { if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return; handleKeyDown( event ); } function onTouchStart( event ) { if ( scope.enabled === false ) return; switch ( event.touches.length ) { case 1: // one-fingered touch: rotate if ( scope.enableRotate === false ) return; handleTouchStartRotate( event ); state = STATE.TOUCH_ROTATE; break; case 2: // two-fingered touch: dolly if ( scope.enableZoom === false ) return; handleTouchStartDolly( event ); state = STATE.TOUCH_DOLLY; break; case 3: // three-fingered touch: pan if ( scope.enablePan === false ) return; handleTouchStartPan( event ); state = STATE.TOUCH_PAN; break; default: state = STATE.NONE; } if ( state !== STATE.NONE ) { scope.dispatchEvent( startEvent ); } } function onTouchMove( event ) { if ( scope.enabled === false ) return; event.preventDefault(); event.stopPropagation(); switch ( event.touches.length ) { case 1: // one-fingered touch: rotate if ( scope.enableRotate === false ) return; if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?... handleTouchMoveRotate( event ); break; case 2: // two-fingered touch: dolly if ( scope.enableZoom === false ) return; if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?... handleTouchMoveDolly( event ); break; case 3: // three-fingered touch: pan if ( scope.enablePan === false ) return; if ( state !== STATE.TOUCH_PAN ) return; // is this needed?... handleTouchMovePan( event ); break; default: state = STATE.NONE; } } function onTouchEnd( event ) { if ( scope.enabled === false ) return; handleTouchEnd( event ); scope.dispatchEvent( endEvent ); state = STATE.NONE; } function onContextMenu( event ) { if (!scope.noPan) { event.preventDefault(); } } scope.domElement.addEventListener( 'contextmenu', onContextMenu, false ); scope.domElement.addEventListener( 'mousedown', onMouseDown, false ); scope.domElement.addEventListener( 'wheel', onMouseWheel, false ); scope.domElement.addEventListener( 'touchstart', onTouchStart, false ); scope.domElement.addEventListener( 'touchend', onTouchEnd, false ); scope.domElement.addEventListener( 'touchmove', onTouchMove, false ); window.addEventListener( 'keydown', onKeyDown, false ); // force an update at start this.update(); }; OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype ); OrbitControls.prototype.constructor = OrbitControls; Object.defineProperties( OrbitControls.prototype, { center: { get: function () { console.warn( 'THREE.OrbitControls: .center has been renamed to .target' ); return this.target; } }, // backward compatibility noZoom: { get: function () { console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' ); return ! this.enableZoom; }, set: function ( value ) { console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' ); this.enableZoom = ! value; } }, noRotate: { get: function () { console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' ); return ! this.enableRotate; }, set: function ( value ) { console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' ); this.enableRotate = ! value; } }, noPan: { get: function () { console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' ); return ! this.enablePan; }, set: function ( value ) { console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' ); this.enablePan = ! value; } }, noKeys: { get: function () { console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' ); return ! this.enableKeys; }, set: function ( value ) { console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' ); this.enableKeys = ! value; } }, staticMoving : { get: function () { console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' ); return ! this.enableDamping; }, set: function ( value ) { console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' ); this.enableDamping = ! value; } }, dynamicDampingFactor : { get: function () { console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' ); return this.dampingFactor; }, set: function ( value ) { console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' ); this.dampingFactor = value; } } } ); return OrbitControls; }())3b:[] 2f:{"title":"Folding paper symbolically","cells":[{"id":0,"value":"md`# Folding paper symbolically`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9319,"value":"md`\"Determining the dependent angles of a paper fold symbolically\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9069,"value":"md`If we consider the crease pattern with four points ${tex`A,B,C,D`} on the edges of a piece of paper, and creases from the center of the paper to these points—then the angle of any single one of these folds will determine all the others. But how to figure out their relationship, mathematically?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9565,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9990,"value":"md`First we need to fix some names. Let ${tex`a,b,c`} and ${tex`d`} be unit vectors from the center of the paper, which will also be the origin ${tex`(0,0,0)`}, in the direction of ${tex`A,B,C`} and ${tex`D`}. If ${tex`\\beta,\\gamma`} and ${tex`\\delta`} are the angles between ${tex`A`} and (respectively) ${tex`B,C`} and ${tex`D`}, this means that:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10044,"value":"tex.block`\\begin{aligned}\n a &= (1,0,0) \\\\\n b &= (\\cos(\\beta),\\sin(\\beta),0) \\\\\n c &= (\\cos(\\gamma),-\\sin(\\gamma),0) \\\\\n d &= (\\cos(\\delta),-\\sin(\\delta),0) \\\\\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10012,"value":"md`These are all just data that we can draw 'on the piece paper', i.e. all with ${tex`z = 0`}. Now for the 3D part, let ${tex`r_a`} and ${tex`r_b`} denote the rotations of the folds around ${tex`a`} and ${tex`b`}. We know, however, from our experience with folding an actual piece of paper, that these two folds are interdependent: one determines the other (and the rest of the folded paper). What we're going to do, then, is try to find an equation of the form ${tex`r_a = t(r_b)`} expressing this relationship.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9079,"value":"md`The easiest way to do this, I think, is considering the angle between ${tex`c`} and ${tex`d`}. Whether the paper is flat (i.e. ${tex`r_a=r_b=0`}), or folded, this angle should remain the same. This means we can write down an equation like:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10027,"value":"tex.block`\\text{angle}(c_\\text{folded},d_\\text{folded}) = \\text{angle}(c,d)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10034,"value":"md`Folding ${tex`c`} amounts to rotating it by ${tex`r_b`} around ${tex`b`}, and similarly folding ${tex`d`} amounts to rotating it by ${tex`r_a`} around ${tex`a`}. The rotated vectors will still be of unit length, of course, and finding the angle between unit vectors is easy: its cosine is their dot product. Hence we can write:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9084,"value":"tex.block`R_{b,r_b}(c) \\cdot R_{a,r_a}(d) = \\cos(\\gamma-\\delta)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10066,"value":"md`3D rotations are a bit hairy, with a lot of sines and cosines, but we can just use computer algebra systems like [Maxima](https://en.wikipedia.org/wiki/Maxima_%28software%29) to relieve our anxiety. For completeness, though:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10072,"value":"tex.block` \\begin{aligned}\n R_{a,r_a}(d) &= \\begin{pmatrix}\n\t\t\\cos(\\delta) \\\\[4pt]\n\t\t-\\sin(\\delta)\\cos(r_a) \\\\[4pt]\n\t\t-\\sin(\\delta)\\sin(r_a)\n\t\\end{pmatrix} \\\\[25pt]\n R_{b,r_b}(c) &= \\begin{pmatrix}\n\t\t\\big(\\cos(\\beta)\\sin(\\beta)\\sin(\\gamma)+\\big(1-\\cos(\\beta)^2\\big)\\cos(\\gamma)\\big)\\cos(r_b)-\\cos(\\beta)\\sin(\\beta)\\sin(\\gamma)+\\cos(\\beta)^2\\cos(\\gamma) \\\\[4pt]\n\t\t(-\\cos(\\beta)^2\\sin(\\gamma)-\\cos(\\beta)\\sin(\\beta)\\cos(\\gamma))\\cos(r_b)+(\\cos(\\beta)^2-1)\\sin(\\gamma)+\\cos(\\beta)\\sin(\\beta)\\cos(\\gamma) \\\\[4pt]\n\t\t\\big(-\\cos(\\beta)\\sin(\\gamma)-\\sin(\\beta)\\cos(\\gamma)\\big)\\sin(r_b)\n\\end{pmatrix}\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9113,"value":"md`Figuring out the relationship between ${tex`r_a`} and ${tex`r_b`} from this equation is not necessarily easy at all (the rotation matrices are quite hairy), and I definitely had troubles trying, but with some help from Maxima we get the following:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9117,"value":"tex.block`\n \\textbf{sin}\\bm(\\bm r_\\bm a\\bm) = \\frac{\\begin{gathered}\n \\left(\\begin{gathered} \\sin(\\delta)\\sin(\\gamma) + \\cos^2(\\beta)\\sin(\\delta)\\sin(\\gamma)\\big(\\cos(r_b)-1\\big) \\\\ + \\cos(\\beta)\\sin(\\beta)\\sin(\\delta)\\cos(\\gamma)\\big(\\cos(r_b)-1\\big)\\end{gathered}\\right)\\textbf{cos}\\bm(\\bm r_\\bm a\\bm) \\\\\n + \\cos^2(\\beta)\\cos(\\delta)\\cos(\\gamma)\\big(1-\\cos(r_b)\\big) - \\cos(\\gamma-\\delta) \\\\\n - \\cos(\\delta)\\cos(\\gamma)\\cos(r_b) - \\cos(\\beta)\\sin(\\beta)\\cos(\\delta)\\sin(\\gamma)\\big(\\cos(r_b)-1\\big)\n\\end{gathered}}\n{\\cos(\\beta)\\sin(\\delta)\\sin(\\gamma)\\sin(r_b)+\\sin(\\beta)\\sin(\\delta)\\cos(\\gamma)\\sin(r_b)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10108,"value":"md`…which, although it looks scary, just amounts to the following, for certain constants ${tex`C`} and ${tex`K`}:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10110,"value":"tex.block`\\begin{aligned}\n \\sin(r_a) &= C\\cos(r_a)+K\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9202,"value":"md`Finally, solving an equation of this form is something that the internet knows how to do (because I forgot), and which in general gives 0, 1 or 2 solutions for ${tex`r_a`}. Because of our special case, we know that it will have at least 1 solution, if the paper is flat, and 2 if folded. Hence, we have a method of finding ${tex`r_a`} for a given ${tex`r_b`}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9251,"value":"tex.block`r_{a,1} = f_1(r_b) \\qquad r_{a,2} = f_2(r_b)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9254,"value":"md`Then, all we need to do is figure out the 3D coordinates of the faces of the folded paper.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9230,"value":"md`### Drag the points to adjust the crease pattern:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8851,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9257,"value":"md`### …and then fold the paper:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9497,"value":"viewof r_b = slider({ min: -PI/2, value: .7, max: PI/2, precision: 3, description: \"r_b\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":8204,"value":"{\n const g = r_a.map(geometry);\n const d = g.map(g => draw(rotate([1,0,0],-PI/2)(g.faces/*[\n [[0,0,0], g.A, g.AB, g.B],\n [[0,0,0], g.B, g.BC, g.C],\n [[0,0,0], g.C, g.CD, g.D],\n [[0,0,0], g.D, g.DA, g.A],\n ]*/), { roty: 50, rotx: 40, z_comp: z_sel_mean_comp, styles: [\n { texture: textures.circles().lighter().thicker().fill('#999') },\n ] }));\n \n d[0].sync(d[1]);\n d[1].sync(d[0]);\n \n return html`

\n ${d[0]}${d[1]}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9489,"value":"tex.block`\\begin{aligned}\n r_b &= ${r_b} \\\\\n r_{a,1} &= ${fmt(r_a[0])} \\quad\\textit{(computed)} \\\\\n r_{a,2} &= ${fmt(r_a[1])} \\quad\\textit{(computed)}\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9356,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":9360,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":9239,"value":"angles = ({\n beta: glm.vec3.angle(points[0], points[1]),\n delta: glm.vec3.angle(points[0], points[3]),\n gamma: glm.vec3.angle(points[0], points[3]) + glm.vec3.angle(points[2], points[3]),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8603,"value":"function solve_sincos (a,b,c) {\n // Solves [a*sin(x) + b*cos(x) + c == 0] for x\n \n const a2 = a*a;\n const b2 = b*b;\n const c2 = c*c;\n const a4 = a2*a2;\n \n const e = (b*sqrt(-a2*(-a2 - b2 + c2)))/(a2 + b2);\n const f = sqrt(a4 + a2*b2 - a2*c2);\n \n const x = [\n Math.atan2(\n (-c + (b2*c)/(a2 + b2) + e)/a,\n (-b*c - f)/(a2 + b2)\n ),\n Math.atan2(\n (-c + (b2*c)/(a2 + b2) - e)/a,\n (-b*c + f)/(a2 + b2)\n ),\n ];\n \n x.forEach(x => {\n if (Math.abs(a*sin(x) + b*cos(x) + c - 0) > 0.000001) {\n throw 'Solution not valid';\n }\n });\n \n return x;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10226,"value":"md`### The Maxima code used`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10171,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2030,"value":"md`## Implementation details`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9436,"value":"fmt = d3.format('.3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":8853,"value":"constrain = (x, min, max) => Math.max(Math.min(x, max), min)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10334,"value":"function angle_clockwise_dist (a, b) {\n return (b-a+4*PI) % (2*PI);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10329,"value":"function angle_between (a, min, max, off = 0) {\n const d0 = angle_clockwise_dist(min, a);\n const d1 = angle_clockwise_dist(a, max);\n return d0 >= 0 && d1 >= 0 && (d0 + d1) < 2*PI;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9764,"value":"function constrain_angle (a, min, max, off = 0) {\n const F = 2*PI;\n \n a = (a+F) % F;\n max = (max-off+F) % F;\n min = (min+off+F) % F;\n \n const dist = (a,b) => {\n const d = (a-b+F)%F;\n return d < PI ? d : F - d;\n }\n \n if (a < min || a > max) {\n return (dist(a,max) > dist(a,min)) ? min : max;\n }\n \n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8856,"value":"line = d3.line()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4928,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":9538,"value":"function z_sel_mean_comp (a, b) {\n/* a = a.slice().sort((p,q) => p[2] - q[2]).map((p,i) => abs(-200-p[2])/Math.pow(2,1+i))\n b = b.slice().sort((p,q) => p[2] - q[2]).map((p,i) => abs(-200-p[2])/Math.pow(2,1+i))\n return d3.mean(b) - d3.mean(a)\n */\n a = a.slice().sort((p,q) => p[2] - q[2]).slice(0, 2);\n b = b.slice().sort((p,q) => p[2] - q[2]).slice(0, 2);\n const z_a = abs(-200-a[0][2])*9 + abs(-200-a[1][2])*1;\n const z_b = abs(-200-b[0][2])*9 + abs(-200-b[1][2])*1;\n return z_b - z_a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9502,"value":"function z_weighted_mean_comp (a, b) {\n var dmin = Infinity;\n var mi, mj;\n for (var i = 0; i < a.length; i++) {\n for (var j = 0; j < b.length; j++) {\n var d = Math.hypot(a[i][0]-b[j][0], a[i][1]-b[j][1]);\n d += ((a[i][2]+b[j][2])/2) / (1+d)\n if (d < dmin) {\n dmin = d; mi = i; mj = j;\n }\n }\n }\n \n console.log(`chosen: ${a[mi].map(fmt).join(',')} and ${b[mj].map(fmt).join(',')}`);\n \n const z_a = d3.mean(a.slice(0,mi).map(p => Math.abs(-200-p[2]))\n .concat(a.slice(mi+1, a.length).map(p => Math.abs(-200-p[2])))\n )*.05 + .95*Math.abs(-200-a[mi][2]);\n \n const z_b = d3.mean(b.slice(0,mj).map(p => Math.abs(-200-p[2]))\n .concat(b.slice(mj+1, b.length).map(p => Math.abs(-200-p[2])))\n )*.05 + .95*Math.abs(-200-b[mj][2]);\n \n return z_b - z_a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7660,"value":"function z_mean_comp (a, b) {\n var z_a = d3.mean(a.map(p => Math.abs(-200-p[2])));\n var z_b = d3.mean(b.map(p => Math.abs(-200-p[2])));\n return z_a < z_b ? 1 : -1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1964,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":9928,"value":"{return;\n const g = geometry;\n const objects = [\n trianglemesh([[[0,0,0], g.A, g.AB], [[0,0,0], g.AB, g.B]]),\n trianglemesh([[[0,0,0], g.B, g.BC], [[0,0,0], g.BC, g.C]]),\n trianglemesh([[[0,0,0], g.C, g.CD], [[0,0,0], g.CD, g.D]]),\n trianglemesh([[[0,0,0], g.D, g.DA], [[0,0,0], g.DA, g.A]]),\n ];\n objects.forEach(o => o.rotateX(PI))\n return threedraw(objects);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9381,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":9869,"value":"function createMultiMaterialObject ( geometry, materials ) {\n\n\t\tvar group = new THREE.Group();\n\n\t\tfor ( var i = 0, l = materials.length; i < l; i ++ ) {\n\n\t\t\tgroup.add( new THREE.Mesh( geometry, materials[ i ] ) );\n\n\t\t}\n\n\t\treturn group;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9813,"value":"function trianglemesh (triangles) {\n const geometry = new THREE.Geometry();\n triangles.forEach((tr, i) => {\n const [ a, b, c ] = tr;\n geometry.vertices.push(new THREE.Vector3(a[0], a[1], a[2]));\n geometry.vertices.push(new THREE.Vector3(b[0], b[1], b[2]));\n geometry.vertices.push(new THREE.Vector3(c[0], c[1], c[2]));\n geometry.faces.push(new THREE.Face3(3*i, 3*i+1, 3*i+2));\n });\n geometry.computeFaceNormals();\n \n const fmaterial = new THREE.MeshPhongMaterial({ color: '#32ba5d', side: THREE.FrontSide }); // green\n const bmaterial = new THREE.MeshPhongMaterial({ color: '#3182bc', side: THREE.BackSide }); // blue\n //const mesh = new THREE.Mesh(geometry, material);\n const mesh = createMultiMaterialObject(geometry, [fmaterial, bmaterial]);\n \n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8540,"value":"dot = (v,w) => v.map((_,i) => v[i]*w[i]).reduce((a,b) => a+b)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9576,"value":"normalize = v => glm.vec3.normalize([0,0,0],v)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8219,"value":"len = v => Math.hypot(...v)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"dist = glm.vec3.dist","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"sub = (v,w) => v.map((_,i) => v[i]-w[i])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"add = (v,w) => v.map((_,i) => v[i]+w[i])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":" function rotate (axis = [1,0,0], angle = 0, origin = [0,0,0]) {\n axis = glm.vec3.normalize([0,0,0], axis);\n const q = glm.quat.setAxisAngle(glm.quat.create(), axis, angle);\n\n return function rotate_inner (data) {\n if (typeof data[0] != 'number') return data.map(rotate_inner);\n return add(glm.vec3.transformQuat([0,0,0], sub(data, origin), q), origin);\n }\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":7332,"value":"function center (d) {\n const sum = [0,0,0];\n var N = 0;\n function accum_points (d) {\n if (typeof d[0] != 'number') return _.map(d, accum_points);\n sum[0] += d[0];\n sum[1] += d[1];\n sum[2] += d[2];\n N++;\n }\n accum_points(d);\n return scale(1/N, sum);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8709,"value":"function sum (s, d) {\n return typeof d == 'number' ? s*d : d.map(e => scale(s, e));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"function scale (s, d) {\n return typeof d == 'number' ? s*d : d.map(e => scale(s, e));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"rad = deg => deg * Math.PI/180","pinned":false,"hidden":false,"mode":"ojs"},{"id":1888,"value":"deg = rad => rad * 180/Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":4452,"value":"function gcd (a, b) {\n return !b ? a : gcd(b, a % b);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5108,"value":"cos = Math.cos","pinned":false,"hidden":false,"mode":"ojs"},{"id":5110,"value":"sin = Math.sin","pinned":false,"hidden":false,"mode":"ojs"},{"id":5114,"value":"tan = Math.tan","pinned":false,"hidden":false,"mode":"ojs"},{"id":5112,"value":"acos = Math.acos","pinned":false,"hidden":false,"mode":"ojs"},{"id":5116,"value":"asin = Math.asin","pinned":false,"hidden":false,"mode":"ojs"},{"id":5118,"value":"atan = Math.atan","pinned":false,"hidden":false,"mode":"ojs"},{"id":5123,"value":"pow = Math.pow","pinned":false,"hidden":false,"mode":"ojs"},{"id":5176,"value":"sqrt = Math.sqrt","pinned":false,"hidden":false,"mode":"ojs"},{"id":5281,"value":"abs = Math.abs","pinned":false,"hidden":false,"mode":"ojs"},{"id":5194,"value":"PI = Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":8408,"value":"// 'interpret' a Mathematica-style expression\nfunction M (str) {\n str = str.replace(/\\n\\s*/g, '')\n .replace(/\\[Sqrt\\]/g, 'sqrt')\n .replace(/\\[Alpha\\]/g, 'alpha')\n .replace(/\\[Beta\\]/g, 'beta')\n .replace(/Cos\\[([^\\]]+)\\]/g, 'cos($1)')\n .replace(/Sin\\[([^\\]]+)\\]/g, 'sin($1)')\n .replace(/Csc\\[([^\\]]+)\\]/g, '(1/sin($1))');\n \n if (str.indexOf('[') >= 0 || str.indexOf(']') >= 0 || str.toLowerCase() != str) {\n throw 'Needs some manual work';\n }\n \n return math.parse(str).compile().eval;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7061,"value":"import { wrap_svg_downloadable, toggle, bgrid, mapinputdata } from '@kelleyvanevert/little-things'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7070,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6466,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6827,"value":"function rasterize(svg, scale = 1) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width * scale, rect.height * scale);\n context.drawImage(image, 0, 0, rect.width * scale, rect.height * scale);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6217,"value":"function pseudocode (code) {\n return html`

${code}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3942,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"glm = require('gl-matrix@2.4.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"import { slider, button, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"_ = require('lodash@4.17.5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9402,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":8420,"value":"math = require('https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.0.1/math.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9338,"value":"THREE = {\n  const THREE = await require(\"three@0.90.0/build/three.min.js\")//@0.82.1/build/three.min.js\");\n /* if (!THREE.OrbitControls) { // If not previously loaded.\n    const module = window.module = { exports: undefined };\n    THREE.OrbitControls = await require(\"https://kelleyvanevert.nl/scratch/orbitcontrols.js\").catch(() => module.exports(THREE));\n  }*/\n  return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9335,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}