32:T3fe8,html``33:T7d2,viewof butterfly = def(md`**butterfly**_{(fold = π/4, skew = 0)} : butterfly`, function butterfly (fold = Math.PI/4, skew = 0) { const epsilon = .0001; const A = { push: [0,0,0] }; const tr = [ [0, 0, 0], // push = B.push [0,-u,-u], // top [0, 0,-u], // center ]; var le_wing_top = rotate([0,-1,0], -fold)(tr); var ri_wing_top = rotate([0,-1,0], fold)(tr); var le_wing_bot = rotate_polygon(le_wing_top, 2, Math.PI); var ri_wing_bot = rotate_polygon(ri_wing_top, 2, Math.PI); le_wing_top = rotate_polygon(le_wing_top, 2, -skew); // outwards ri_wing_top = rotate_polygon(ri_wing_top, 2, skew); // outwards le_wing_bot = rotate_polygon(le_wing_bot, 2, -skew); // outwards ri_wing_bot = rotate_polygon(ri_wing_bot, 2, skew); // outwards A.tl = le_wing_top[1]; A.tr = ri_wing_top[1]; A.bl = le_wing_bot[1]; A.br = ri_wing_bot[1]; if (dist(A.tr, A.tl) < epsilon) { // paper would have intersected, |tr-tl| ~= 0 const alpha = asin(sqrt(2 - 1/pow(cos(fold), 2))/sqrt(2)); A.cd = rotate([1,0,0], PI/4-alpha)([0,0,-u]); } else { const cd = intersect3spheres(A.tl, A.tr, A.push, u, u, u); if (cd.length > 0) { A.cd = closest_to(cd, A.bl); } else { // => computing the intersection failed because of rounding errors // (which I know for sure, because I restricted the admissible (fold, skew) values beforehand) // paper would have been stretched, |tr-tl| ~= 200 A.cd = mid(A.tl, A.tr); } } if (dist(A.br, A.bl) < epsilon) { // paper would have intersected, |br-bl| ~= 0 const alpha = asin(sqrt(2 - 1/pow(cos(fold), 2))/sqrt(2)); A.cu = rotate([-1,0,0], PI/4-alpha)([0,0,-u]); } else { const cu = intersect3spheres(A.bl, A.br, A.push, u, u, u); if (cu.length > 0) { A.cu = closest_to(cu, A.tl); } else { // paper would have been stretched, |tr-tl| ~= 200 A.cu = mid(A.bl, A.br); } } A.uv = [0,0]; return A; })34:T433,viewof triangles = def(md`**triangles** : butterfly -> Array( triangle )`, function triangles (B) { const trs = [ [B.tl, B.push, B.cd], [B.tr, B.push, B.cd].reverse(), [B.br, B.push, B.cu], [B.bl, B.push, B.cu].reverse(), // [B.tr, B.push, B.br], [B.tr, B.push, mid(B.tr, B.br)], [B.br, B.push, mid(B.tr, B.br)].reverse(), // [B.tl, B.push, B.bl], [B.tl, B.push, mid(B.tl, B.bl)].reverse(), [B.bl, B.push, mid(B.tl, B.bl)], ]; trs[0].uv = [uvs.tl(B.uv), uvs.push(B.uv), uvs.cd(B.uv)] trs[1].uv = [uvs.tr(B.uv), uvs.push(B.uv), uvs.cd(B.uv)].reverse() trs[2].uv = [uvs.br(B.uv), uvs.push(B.uv), uvs.cu(B.uv)] trs[3].uv = [uvs.bl(B.uv), uvs.push(B.uv), uvs.cu(B.uv)].reverse() // [B.tr, B.push, B.br], trs[4].uv = [uvs.tr(B.uv), uvs.push(B.uv), uvs.mr(B.uv)] trs[5].uv = [uvs.br(B.uv), uvs.push(B.uv), uvs.mr(B.uv)].reverse() // [B.tl, B.push, B.bl], trs[6].uv = [uvs.tl(B.uv), uvs.push(B.uv), uvs.ml(B.uv)].reverse() trs[7].uv = [uvs.bl(B.uv), uvs.push(B.uv), uvs.ml(B.uv)] return trs; })35:T831,md`Now for tiling. To create a new ${drawp(triangles(butterfly(.7, .25)), { inline: true })} "next to" an existing one, i.e. with the new butterfly's left wing touching the right wing of the existing one ${(() => { const A = butterfly(.7, .1); const B = next(A); return drawp(_.flatten([A,B].map(triangles)), { inline: true, H: 40 }); })()}, and with the same *fold* and *skew*, all we have to do, essentially, is mirror the butterfly over the plane that touches its right wing. We do have to choose an angle though, because the wing-connection is a kind of hinge, allowing for rotation. Suppose we want to place a new butterfly ${tex`B`} next to an existing one ${tex`A`}. To mirror, we need to specify the plane, which in turn needs a point, and a normal. The point is easily given as ${tex`{\tt tr}_A`}. We can create the normal as an orthogonal to an "up" vector pointing upwards along the right wing, ${tex.block`{\tt up} \triangleq {\tt tr}_A - {\tt br}_A`} I've found that the way to compute an "out" vector that is least suspectible to rounding errors, is to compute is as follows: ${tex.block`{\tt out} \triangleq {\tt up} \times ({\tt mid}({\tt tr}_A,\, {\tt br}_A) - {\tt mid}({\tt tl}_A,\, {\tt bl}_A))`} (Instead of as ${tex`{\tt out} \triangleq {\tt mid}({\tt tl}_A, {\tt br}_A) - {\tt push}_A`}.) Computing a vector that is orthogonal to two others can be simply done with the cross product. ${tex.block`{\tt normal} \triangleq {\tt up} \times {\tt out}`} However, this is where we apply our angle, rotating the normal so that the plane is rotated. With an angle, we may tile our butterflies around in sphere-like structures :) ${tex.block`{\tt normal} \triangleq {\tt rotate}_{({\tt axis}={\tt up},\; {\tt angle},\; {\tt origin}={\tt tr}_A)}({\tt up} \times {\tt out})`} Finally, we can define B as a simple mirror (though making sure to rename the wing's outer points as well, to keep our frame of reference clear). ${tex.block`B \triangleq {\tt mirror}_{({\tt normal},\; {\tt origin}={\tt tr}_A)}(A)`} Putting all of this together, we get the following (in pseudocode):`36:T91b,viewof atop2 = def(md`**atop2** : butterfly × butterfly -> butterfly`, function atop2 (A, B) { const epsilon = 0.0001; // if (dist(A.tr, B.tl) > 0.001 || dist(A.br, B.bl) > 0.001) // throw `Butterflies are not aligned, off = ${Math.max(dist(A.tr, B.tl), dist(A.br, B.bl))}`; // Start with these three adjoined from below const bl = A.cd; const br = B.cd; const cu = A.tr; // Find push as an intersection of three spheres // TODO catch rounding error edge-cases const _push = intersect3spheres(bl, cu, br, Math.sqrt(2)*u, u, Math.sqrt(2)*u); if (_push.length == 0) throw '[atop2/push] Cannot find push as 3-sphere-intersection point'; const push = closest_to(_push, A.push); // Find tl as intersection of two spheres, and left bounding plane // TODO catch rounding error edge-cases const left_plane_normal = cross(sub(mid(A.bl, A.br), A.push), sub(mid(A.tl, A.tr), A.push)); const res1 = i_2spheres_plane(A.cd, 2*u, push, Math.sqrt(2)*u, A.push, left_plane_normal); if (res1.length == 0) throw '[atop2/tl] Cannot find tl as plane-sphere-sphere intersection'; const tl = closest_to(res1, cu); // Find tr as intersection of two spheres, and left bounding plane // TODO catch rounding error edge-cases const right_plane_normal = cross(sub(mid(B.bl, B.br), B.push), sub(mid(B.tl, B.tr), B.push)); const res2 = i_2spheres_plane(B.cd, 2*u, push, Math.sqrt(2)*u, B.push, right_plane_normal); if (res2.length == 0) throw '[atop2/tr] Cannot find tr as plane-sphere-sphere intersection'; const tr = closest_to(res2, cu); // Find cd as an intersection of three spheres var cd; if (dist(tr, tl) < epsilon) { // paper would have intersected, |tr-tl| ~= 0 const fold = measure_fold({ tl, tr, bl, br, push }); const alpha = asin(sqrt(2 - 1/pow(cos(fold), 2))/sqrt(2)); cd = rotate([1,0,0], PI/4-alpha)([0,0,-u]); } else if (abs(dist(tr, tl) - 200) < epsilon) { // paper would have been stretched, |tr-tl| ~= 200 cd = mid(A.tl, A.tr); } else { const _cd = intersect3spheres(tl, tr, push, u, u, u); if (_cd.length > 0) { cd = closest_to(_cd, bl); } else { throw `[atop2/cd] Butterfly construction error, |tr-tl| = ${dist(tr, tl)}`; } } return { bl, br, cu, push, tl, tr, cd, uv: [A.uv[0]+.5, A.uv[1]-1] }; })37:T5bb,function dispgrid (cells) { cells.forEach(c => c.params = _.defaults(c[2], { fontWeight: 'normal', color: '#000', fontSize: 12, fill: '#fff', stroke: '#111', strokeDashArray: 'none', })) const cellsize = 50 const xExtent = d3.extent(cells.map(c => c[0])) const yExtent = d3.extent(cells.map(c => c[1])) const W = (xExtent[1]-xExtent[0])*cellsize const H = (yExtent[1]-yExtent[0])*cellsize const xScale = d3.scaleLinear().domain(xExtent).range([0, W]) const yScale = d3.scaleLinear().domain(yExtent).range([0, H]) const svg = d3.select(DOM.svg(W+cellsize+20, H+cellsize+20)) const cell = svg.append('g').attr('transform', 'translate(10 10)') .selectAll('g.cell').data(cells).enter() .append('g').attr('class', 'cell') .attr('transform', c => `translate(${xScale(c[0])} ${yScale(c[1])})`) cell.append('rect') .attr('width', cellsize).attr('height', cellsize) .attr('stroke-width', 1.5) .attr('stroke', c => c.params.stroke) .attr('stroke-dasharray', c => c.params.strokeDasharray) .attr('fill', c => c.params.fill) cell.append('text') .attr('x', cellsize/2).attr('y', cellsize/2) .attr('text-anchor', 'middle') .attr('dominant-baseline', 'central') .attr('font-size', c => c.params.fontSize) .attr('font-weight', c => c.params.fontWeight) .attr('fill', c => c.params.color) .text(c => `(${c[0]},${c[1]})`) return svg.node() }38:T5cb,function tile_from (A, r, params) { if (_.isNumber(params)) { params = { left: params, right: params, up: params, down: params } } params = _.defaults(params, { left: 0, right: 0, up: 0, down: 0, mode: 'hexa', }); if (params.mode == 'rect') { const v = Math.max(params.up, params.down); params._right = params.right; params._left = params.left; params.right = Math.max(v, params.right+Math.floor(v/2)) params.left = Math.max(v, params.left +Math.floor((v+1)/2)) } var grid = [[A]]; // add left for (var x = 0; x < params.left; x++) { grid[0].unshift(prev(grid[0][0], r)); } // add right for (var x = 0; x < params.right; x++) { grid[0].push(next(grid[0][grid[0].length-1], r)); } // add up for (var y = 0; y < params.up; y++) { const row = []; for (var x = 0; x < grid[0].length - 1; x++) { row.push(atop2(grid[0][x], grid[0][x+1])); } grid.unshift(row); } // add down for (var y = 0; y < params.down; y++) { const row = []; const currrow = grid[grid.length-1]; for (var x = 0; x < currrow.length - 1; x++) { row.push(below2(currrow[x], currrow[x+1])); } grid.push(row); } if (params.mode == 'rect') { grid = grid.map(row => row.filter(B => { if (B.uv[0] < A.uv[0] - params._left - .5) return false; if (B.uv[0] > A.uv[0] + params._right) return false; return true; })); } return grid; }39:T508,{ if (!b2) return var data = scale(1.2)(tiled); const { griddata, W, H } = tiling_to_triangle_grid(data); //data = scale(1.2)(data); const interpolator = d3.interpolate(data, griddata); // draw const dline = d3.line(); const svg = d3.select(DOM.svg(W+10, H+10)); const g = svg.append('g').attr('transform', `translate(${5+W/2}, ${5+H/2})`) const frame = svg.append('rect').attr('x', 1).attr('y', 1).attr('width', W+8).attr('height', H+8) .attr('fill', 'none').attr('stroke', '#000').attr('stroke-width', 1.2); function redraw (t) { const paths = g.selectAll('path.line') .data(interpolator(t).sort(z_mean_comp)); paths.exit().remove(); const all = paths.enter().append('path').attr('class', 'line') .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .merge(paths) .attr('d', line => dline(line) + 'z') .attr('stroke-width', poly => (poly._w || '1.2')) .attr('fill', poly => poly._fill || '#fff') .attr('stroke', poly => poly._stroke || '#000'); } var t = .1; svg.call(d3.drag().on('start drag', () => { t += d3.event.dx / W; t = Math.min(Math.max(t, 0), 1); redraw(t); })); redraw(t); return wrap_svg_downloadable(svg.node()); }3a:T719,{ if (!mk_gif) { yield md`Switch the toggle above to start making a GIF`; return } // parameters used const v = { fold: 0.41887902047, skew: 0.19482195, r: 0.084321 }; const H = 350; const W = 900; const ag = new Animated_GIF(); ag.setSize(W, H); ag.setDelay(.001); const N = 16; const butterflies = [[ butterfly(v.fold, v.skew) ]]; var fno = 0; var ry = d3.interpolate(0, 1.2); function data () { const trs = _.flatten(_.flatten(butterflies).map(triangles)); return rotate([1,0,0], ry(fno / (5*16)))(scale(.3)(translate([0,200,0])(trs))); } function saveframe (resolve) { const svgnode = drawp(data(), { W, H, rotx: 0, roty: 30, download: false }); const context = DOM.context2d(W, H); const image = new Image; image.onerror = () => { throw 'Err' }; image.onload = () => { console.log('add image'); ag.addFrame(image); resolve(html`Added frame ${++fno}...
${image}`); }; image.src = URL.createObjectURL(serialize(svgnode)); } yield new Promise(resolve => { saveframe(resolve); }); for (var i = 0; i < N; i++) { yield new Promise(resolve => { butterflies[0].unshift(next(butterflies[0][0], v.r)); saveframe(resolve); }); } butterflies[0].reverse(); for (var y = 0; y < 5; y++) { // 7 butterflies.unshift([]); for (var A, B, x = 0; A = butterflies[1][x], B = butterflies[1][x+1]; x++) { yield new Promise(resolve => { butterflies[0].unshift(atop2(A, B)); saveframe(resolve); }); } butterflies[0].reverse(); } yield 'Processing ...'; const animatedImage = new Image; yield new Promise(resolve => { ag.getBase64GIF(function(image) { animatedImage.src = image; resolve(animatedImage); }); }); }3b:T43a,sphere_butterflies = { // parameters used const v = { fold: 0.41887902047, skew: 0.19482195, r: 0.084321 }; const H = 350; const W = 900; const X = 16; const Y = 7; // make tiling var Bs = [[ butterfly(v.fold, v.skew) ]]; for (var x = 0; x < X+Y-2; x++) { Bs[0].unshift(next(Bs[0][0], v.r)); } Bs[0].reverse(); for (var y = 0; y < Y-1; y++) { Bs.unshift([]); for (var A, B, x = 0; A = Bs[1][x], B = Bs[1][x+1]; x++) { Bs[0].unshift(atop2(A, B)); } Bs[0].reverse(); } // now grid[y][x] has y going down and x going right // trim down to a rectangle of the right size for (var y = 1; y < Y; y++) { Bs[y] = Bs[y].slice(Math.floor(y/2), -Math.floor((y+1)/2)); } Bs = _.flatten(Bs); const pushes = Bs.map(A => A.push); const center = [d3.mean(pushes.map(p => p[0])), d3.mean(pushes.map(p => p[1])), d3.mean(pushes.map(p => p[2]))]; // center Bs = translate(sub([0,0,0], center))(Bs); // rotate // (TODO) // scale Bs = scale(.35)(Bs); return Bs; }3c: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}

`; }3d:T558,// Brute-force ..., because I'm too lazy to figure out how to solve // acos(sqrt(2 - 1 / (cos^2 f))) = (f0+s0) - f function closest_permissible (fx0, sy0, maychange = { fold: true, skew: true }) { if (permissible(fx0*PI, sy0*PI)) return [fx0,sy0]; var sy0_sign = sy0 < 0 ? -1 : 1; sy0 = abs(sy0); /* TODO if (!maychange.fold) { const sy = (bound[fx0 < 1/6 ? 'le' : 'ri'](fx0*Math.PI))/Math.PI; return [fx0, (sy-0.000001)*sy0_sign]; } else if (!maychange.skew) { return [fx0, sy0]; } */ var closest = false; var dmin = Infinity; if (fx0 < 1/6) { for (var fx = fx0; fx < 1/6; fx += .0005) { var sy = bound.le(fx*PI)/PI; var dfx = fx0 - fx; var dsy = sy0 - sy; var d = sqrt(dfx*dfx + dsy*dsy); if (d < dmin) { // (epsilon offset no longer necessary because of check in butterfly construction) closest = [fx,(sy /*- 0.000001*/)*sy0_sign]; dmin = d; } } } else { for (var fx = 1/6; fx < .5; fx += .0005) { var sy = bound.ri(fx*PI)/PI; var dfx = fx0 - fx; var dsy = sy0 - sy; var d = sqrt(dfx*dfx + dsy*dsy); if (d < dmin) { // (epsilon offset no longer necessary because of check in butterfly construction) closest = [fx,(sy /*- 0.000001*/)*sy0_sign]; dmin = d; } } } return closest; }3e:T167a,viewof foldskew = def(md`**foldskew** : params -> *viewof* { fold ∈ [0 ... π/2], skew ∈ [-π/4 ... π/4] }`, md`Creates a 2D input to select a pair of { *fold*, *skew* } parameters. Parameters: { *W* (width of input element), *H* (height of input element), *fold* (initial value), *skew* (intial value), *r* (intial value) } (* **TODO**: Add a switch that enables/disables the fold/skew/r constructibility constraint. It it both cool and user-friendly to enforce the constraint, otherwise the feedback is juttery and you can't reliably get to the edge-cases. On the other hand, disabling the constraint allows you to explore the funkyness of non-constructible stuff, this is not something you'd want to entirely leave out. *)`, function foldskew (params = {}) { _.defaults(params, { fold: .25, skew: 0, r: 0, H: 300, showr: false }); const H = params.H; const W = params.H; const pad = { top: 50, ri: 0, bot: 10, le: 60 }; const svg = d3.select(DOM.svg(W + 120, H)); const el = svg.node();/* svg.append('style').node().innerHTML = `.dot:hover { fill: #eee; }`;*/ 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_dot (dot, radius) { dot .attr('class', 'dot') .attr('r', radius) .attr('fill', '#fff') .attr('stroke', '#000') .attr('stroke-width', 1.5) .style('cursor', 'pointer') } function decorate_label (label) { label .style('text-anchor', 'middle') .style('font-weight', 'bold') .style('font-family', 'sans-serif') .attr('font-size', 14) } svg.append('text').text('fold').call(decorate_label) .attr('transform', `translate(${pad.le + (W-pad.ri-pad.le)/2} 15)`) svg.append('text').text('skew').call(decorate_label) .attr('transform', `translate(25 ${pad.top + (H-pad.top-pad.bot)/2}) rotate(-90)`) if (params.showr) { svg.append('text').text('rotate').call(decorate_label) .attr('transform', `translate(${40+W} ${pad.top + (H-pad.top-pad.bot)/2}) rotate(-90)`) } // current value const val = { fold: params.fold, skew: params.skew, r: params.r }; // scales const fold = d3.scaleLinear().domain([0, .5]).range([0, W - pad.ri - pad.le]).clamp(true); const skew = d3.scaleLinear().domain([-.25, .25]).range([0, H - pad.top - pad.bot]).clamp(true); const r = d3.scaleLinear().domain([-.125, .125]).range([0, H - pad.top - pad.bot]).clamp(true); // axes const skewAxis = decorate_axis(d3.axisLeft(skew)).tickValues([-.25, -.125, 0, .125, .25]) const foldAxis = decorate_axis(d3.axisTop(fold)).tickValues([0, .125, .25, .375, .5]) const rAxis = decorate_axis(d3.axisRight(r)).tickValues([-.125, -.0625, 0, .0625, .125]) const g = svg.append('g').attr('transform', `translate(${pad.le} ${pad.top})`); // (fold,skew) square g.append('g').call(skewAxis); g.append('g').call(foldAxis); // draw permissible values boundary (TODO - mathematize) g.selectAll('circle').data(permissible_dots).enter() .append('circle').attr('cx', d => fold(d[0])).attr('cy', d => skew(d[1])).attr('r', 1) .attr('fill', '#ccc'); const bg = g.append('rect').attr('width', fold(.5)).attr('height', skew(.25)) .attr('stroke', 'none').attr('fill', 'transparent') const fg = g.append('g'); // fold line const sg = g.append('g'); // skew line const rg = !params.showr || svg.append('g').attr('transform', `translate(${pad.le + W} ${pad.top})`); // r line if (params.showr) rg.append('g').call(rAxis); // dots const dot = g.append('circle').call(decorate_dot, 8).attr('cx', fold(val.fold)).attr('cy', skew(val.skew)) const fdot = fg.append('circle').call(decorate_dot, 6).attr('cx', fold(val.fold)) const sdot = fg.append('circle').call(decorate_dot, 6).attr('cy', skew(val.skew)) const rdot = !params.showr || rg.append('circle').call(decorate_dot, 8).attr('cy', r(val.r)) // update logic const set = (o, maychange) => { const proposed = Object.assign({}, val); if (o.x != undefined) { proposed.fold = fold.invert(o.x); } if (o.y != undefined) { proposed.skew = skew.invert(o.y); } if (params.showr && o.z != undefined) { proposed.r = r.invert(o.z); } if (!permissible(proposed.fold*Math.PI, proposed.skew*Math.PI)) { if (maychange.fold && maychange.skew) { const c = closest_permissible(proposed.fold, proposed.skew, maychange); proposed.fold = c[0]; proposed.skew = c[1]; } else { return; } } // if (proposed.fold != undefined) { val.fold = proposed.fold; dot.attr('cx', fold(val.fold)); fdot.attr('cx', fold(val.fold)); // } //if (proposed.skew != undefined) { val.skew = proposed.skew; dot.attr('cy', skew(val.skew)); sdot.attr('cy', skew(val.skew)); // } if (params.showr /*&& proposed.r != undefined*/) { val.r = proposed.r; rdot.attr('cy', r(val.r)); } el.value = _.mapValues(val, v => v*Math.PI); el.dispatchEvent(new CustomEvent('input')); }; // initialize drag & clock behavior dot.call(d3.drag().on('drag', () => set({ x: d3.event.x, y: d3.event.y }, { fold: true, skew: true }))); fdot.call(d3.drag().on('drag', () => set({ x: d3.event.x }, { skew: true, fold: false }))); sdot.call(d3.drag().on('drag', () => set({ y: d3.event.y }, { fold: true, skew: false }))); if (params.showr) rdot.call(d3.drag().on('drag', () => set({ z: d3.event.y }, { r: true }))); el.value = _.mapValues(val, v => v*Math.PI); return el; })3f:T417,linesegs_intersection = { const eps = 0.0000001; const between = (a, b, c) => (a-eps <= b && b <= c+eps) return function linesegs_intersection ([x1,y1],[x2,y2], [x3,y3],[x4,y4]) { const x = ((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4)) / ((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4)); const y = ((x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4)) / ((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4)); if (isNaN(x) || isNaN(y)) { return false; } else { if (x1 >= x2) { if (!between(x2, x, x1)) {return false;} } else { if (!between(x1, x, x2)) {return false;} } if (y1 >= y2) { if (!between(y2, y, y1)) {return false;} } else { if (!between(y1, y, y2)) {return false;} } if (x3 >= x4) { if (!between(x4, x, x3)) {return false;} } else { if (!between(x3, x, x4)) {return false;} } if (y3 >= y4) { if (!between(y4, y, y3)) {return false;} } else { if (!between(y3, y, y4)) {return false;} } } return [x, y]; } }40:Tc7b,viewof drawp = def(md`**drawp** : Array( polygon ) × params -> SVGSVGElement`, md`Projects & draws a list of 3D polygons to SVG. Tilts the drawing forward, and allows for interactive x rotation. Assumes the polygons to lie approximately between [-100,-100,-100] and [100,100,100]. Parameters: - S = 450, the size of the SVG element - rot = 30, the initial x rotation`, // Assumes the drawing to be somewhat contained in // the area between [-100,-100,-100] and [100,100,100]. function drawp (polygons, params) { var { rotx, roty, W, H, inline, download, oninteract, z_comp } = _.defaults(params, { rotx: 30, // initial rotation around up axis roty: 10, // initial rotation around right axis inline: false, download: 'butterfly_tiling.svg', oninteract: () => {}, z_comp: z_mean_comp, }); // 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 || 450; H = H || 450; 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}) scale(${(S*1.2) / 400})`); 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") .merge(paths) .attr('d', line => dline(line) + 'z') .attr('stroke-width', poly => (poly._w || '1.2')) .attr('fill', poly => poly._fill || '#fff') .attr('stroke', poly => poly._stroke || '#000'); } var root = svg.node(); if (!inline) { // mouse interactivity svg.call(d3.drag().on('drag', () => { rotr((d3.event.dx / 2.4)*PI/180, (d3.event.dy / 2.4)*PI/180); redraw(); oninteract(polygons); })); if (download !== false) { root = wrap_svg_downloadable(root); } } // initial draw redraw(); setTimeout(() => oninteract(polygons), 100); return root; })41:T9f6,viewof i_2spheres_plane = def(md`**i_2spheres_plane**_{([a,b,c], r, [d,e,f], s, pt, normal)} : Array( point )`, md`Computes the 0, 1 or 2 points of intersection between the 2 spheres given by: ${tex.block`\begin{aligned} (x-a)^2 + (y-b)^2 + (z-c)^2 &= r^2 \\ (x-d)^2 + (y-e)^2 + (z-f)^2 &= s^2 \end{aligned}`} …and the plane passing through ${tex`{\tt pt}`}, having normal ${tex`{\tt normal}`}.`, function i_2spheres_plane ([a,b,c], r, [d,e,f], s, pt, normal) { const ε = 0.0001; if (dist([a,b,c],[d,e,f]) > r+s) return []; // ? // Writing this was .. terse. // With thanks to [http://mathforum.org/library/drmath/view/63138.html] // and [http://mathforum.org/library/drmath/view/64311.html], though :) // the plane on which the circular intersection between [2] and [1] lies is described by: // a1*x + b1*y + c1*z = k1 const a1 = 2*(d-a); const b1 = 2*(e-b); const c1 = 2*(f-c); const k1 = d*d-a*a + e*e-b*b + f*f-c*c - s*s + r*r; // the plane is described by // a2*x + b2*y + c2*z = k2 const a2 = normal[0]; const b2 = normal[1]; const c2 = normal[2]; const k2 = a2*pt[0] + b2*pt[1] + c2*pt[2]; // 0 = a2 (x-pt[0]) + b2 (y-pt[1]) + c2 (z-pt[0]) // = a2*x - a2*pt[0] + b2*y - b2*pt[1] + c2*z - c2*pt[2] // = a2*x + b2*y + c2*z - a2*pt[0] - b2*pt[1] - c2*pt[2] // x = n + m*z var n, m; if (Math.abs(b1) < ε) { n = k1/a1; m = -c1/a1; } else if (Math.abs(b2) < ε) { n = k2/a2; m = -c2/a2; } else { // (b1*a2 - b2*a1)x = (b1*k2 - b2*k1) + (b2*c1 - b1*c2)z n = (b1*k2 - b2*k1)/(b1*a2 - b2*a1); m = (b2*c1 - b1*c2)/(b1*a2 - b2*a1); } // y = o + p*z var o, p; if (Math.abs(a1) < ε) { o = k1/b1; p = -c1/b1; } else if (Math.abs(a2) < ε) { o = k2/b2; p = -c2/b2; } else { // (a1*b2 - a2*b1)y = (a1*k2 - a2*k1) + (a2*c1 - a1*c2)z o = (a1*k2 - a2*k1)/(a1*b2 - a2*b1); p = (a2*c1 - a1*c2)/(a1*b2 - a2*b1); } // Az^2 + Bz + C = 0 const A = m*m + p*p + 1; const B = 2*(m*n + o*p - m*a - p*b - c); const C = n*n + a*a + o*o + b*b + c*c - 2*a*n - 2*o*b - r*r; const z = []; if (Math.abs(A) < ε) { z.push(-C/B); } else { const root = Math.sqrt(B*B - 4*A*C); if (root >= 0) { z.push((-B + root) / (2*A)); if (Math.abs(root) > ε) { z.push((-B - root) / (2*A)); } } else { return []; //throw 'This should not occur (because we already know the three spheres intersect).'; } } return z.map(z => [n + m*z, o + p*z, z]); })42:T9ae,viewof intersect3spheres = def(md`**intersect3spheres**_{([a,b,c], [d,e,f], [g,h,i], r, s, t)} : Array( point )`, md`Computes the 0, 1 or 2 points of intersection between the 3 spheres given by: ${tex.block`\begin{aligned} (x-a)^2 + (y-b)^2 + (z-c)^2 &= r^2 \\ (x-d)^2 + (y-e)^2 + (z-f)^2 &= s^2 \\ (x-g)^2 + (y-h)^2 + (z-i)^2 &= t^2 \end{aligned}`}`, function intersect3spheres ([a,b,c], [d,e,f], [g,h,i], r, s, t) { const ε = 0.0001; if (dist([a,b,c],[d,e,f]) > r+s) return []; if (dist([a,b,c],[g,h,i]) > r+t) return []; if (dist([d,e,f],[g,h,i]) > s+t) return []; // Writing this was .. terse. // With thanks to [http://mathforum.org/library/drmath/view/63138.html] // and [http://mathforum.org/library/drmath/view/64311.html], though :) // the plane on which the circular intersection between [2] and [1] lies is described by: // a1*x + b1*y + c1*z = k1 const a1 = 2*(d-a); const b1 = 2*(e-b); const c1 = 2*(f-c); const k1 = d*d-a*a + e*e-b*b + f*f-c*c - s*s + r*r; // the plane on which the circular intersection between [1] and [3] lies is described by // a2*x + b2*y + c2*z = k2 const a2 = 2*(g-a); const b2 = 2*(h-b); const c2 = 2*(i-c); const k2 = g*g-a*a + h*h-b*b + i*i-c*c - t*t + r*r; // x = n + m*z var n, m; if (Math.abs(b1) < ε) { n = k1/a1; m = -c1/a1; } else if (Math.abs(b2) < ε) { n = k2/a2; m = -c2/a2; } else { // (b1*a2 - b2*a1)x = (b1*k2 - b2*k1) + (b2*c1 - b1*c2)z n = (b1*k2 - b2*k1)/(b1*a2 - b2*a1); m = (b2*c1 - b1*c2)/(b1*a2 - b2*a1); } // y = o + p*z var o, p; if (Math.abs(a1) < ε) { o = k1/b1; p = -c1/b1; } else if (Math.abs(a2) < ε) { o = k2/b2; p = -c2/b2; } else { // (a1*b2 - a2*b1)y = (a1*k2 - a2*k1) + (a2*c1 - a1*c2)z o = (a1*k2 - a2*k1)/(a1*b2 - a2*b1); p = (a2*c1 - a1*c2)/(a1*b2 - a2*b1); } // Az^2 + Bz + C = 0 const A = m*m + p*p + 1; const B = 2*(m*n + o*p - m*a - p*b - c); const C = n*n + a*a + o*o + b*b + c*c - 2*a*n - 2*o*b - r*r; const z = []; if (Math.abs(A) < ε) { z.push(-C/B); } else { const root = Math.sqrt(B*B - 4*A*C); if (root >= 0) { z.push((-B + root) / (2*A)); if (Math.abs(root) > ε) { z.push((-B - root) / (2*A)); } } else { return []; //throw 'This should not occur (because we already know the three spheres intersect).'; } } return z.map(z => [n + m*z, o + p*z, z]); })43:[] 30:{"title":"Tiling butterflies to get a Dragon's Egg origami model","cells":[{"id":0,"value":"md`# Tiling butterflies to get a Dragon's Egg origami model`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3163,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2080,"value":"md`## 1) A single butterfly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3178,"value":"md`A single ${drawp(triangles(butterfly(.7, .25)), { inline: true })} is parametrized by a variable *fold* ∈ [0 ... π/2], determining its degree of horizontal (un)foldedness, and a variale *skew* ∈ [-π/4 ... π/4], determining the amount of symmetric horizontal skew that is applied to its wings. The paper model allows for more variation, of course, but we're only considering horizontally symmetric butterflies, because we're interested in tiling them (like so: ${(() => {\n const B = butterfly(v3.fold, -.1);\n const A = prev(B, v3.r);\n const C = next(B, v3.r);\n const D = next(C, v3.r);\n const N = atop2(A, B);\n const M = atop2(B, C);\n const O = atop2(C, D);\n const data = scale(.8)(_.flatten([\n triangles(A),\n triangles(B),\n triangles(C),\n triangles(D),\n triangles(N),\n triangles(M),\n triangles(O),\n ]));\n \n return drawp(data, { inline: true, H: 60 });\n})()}).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2788,"value":"u=100","pinned":false,"hidden":false,"mode":"ojs"},{"id":5446,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7989,"value":"butterfly(0.9424777960769, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5450,"value":"md`A \\`butterfly\\` object is comprised of 7 points. Four wing tips: \\`tl\\` (top left), \\`tr\\` (top right), \\`bl\\` (bottom left), and \\`br\\` (bottom right), two folds pushed 'inwards': \\`cu\\` (center up, with 'up' read as 'up from the bottom'—I admit the naming is a bit weird), and \\`cd\\` (center down)—and finally the origin/back point \\`push\\` ('pushed-in' to the back).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7622,"value":"viewof uvs = def(md`**uvs**_coord : [u,v] -> [u,v]`,\n {\n tl: ([u,v]) => [u, v+ 1],\n ml: ([u,v]) => [u, v+.5],\n bl: ([u,v]) => [u, v ],\n cd: ([u,v]) => [u+.5,v+ 1],\n push: ([u,v]) => [u+.5,v+.5],\n cu: ([u,v]) => [u+.5,v ],\n tr: ([u,v]) => [u+ 1,v+ 1],\n mr: ([u,v]) => [u+ 1,v+.5],\n br: ([u,v]) => [u+ 1,v ],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5465,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":5469,"value":"md`In order to draw a ${drawp(triangles(butterfly(.7, .25)), { inline: true })}, we must be able to turn it into a set of triangles.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7100,"value":"viewof v8 = foldskew({ fold: .22, skew: .07, W: 250, H:250 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5458,"value":"drawp(triangles(butterfly(v8.fold, v8.skew)), { H: 350 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5672,"value":"viewof measure_fold = def(md`**measure_fold** : butterfly -> angle`, function measure_fold (A) {\n return glm.vec3.angle(sub(mid(A.tl, A.bl), A.push), sub(mid(A.tr, A.br), A.push)) / 2;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5675,"value":"viewof measure_skew = def(md`**measure_skew** : butterfly -> angle`, function measure_skew (A) {\n const ml = mid(A.tl, A.bl);\n const mr = mid(A.tr, A.br);\n const up = cross(sub(mid(ml, mr), A.push), sub(mr, ml));\n const sign = dist(A.tr, A.tl) > dist(A.br, A.bl) ? 1 : -1;\n return sign*glm.vec3.angle(up, sub(A.tr, A.br));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5441,"value":"md`### 1.1) Boundaries of permissible (fold,skew) tuples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5462,"value":"md`Note that the ranges of permissible values of *fold* and *skew* depend on each other's taken values. For example, when *skew* = 0, *fold* can take any value between 0 and π/2, but when *skew* = π/4, *fold* may only range between (?) and π/4. One constraint has to do with a paper-intersection, and enforcing it is really only an aesthetic choice—the other has to do with the fact that the \\`cd\\` and \\`cu\\` points are found by intersecting spheres, and this fails in the case that the paper is stretched. Enforcing this constraint, then, has to do with being able to even construct the butterfly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4719,"value":"md`In order to have the paper not intersect itself, we must have:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4568,"value":"tex.block`|\\,\\textit{skew}\\,| \\,\\le\\, \\cos^{-1}\\left(\\sqrt{2 - \\frac{1}{\\cos^2 \\textit{fold}}}\\right)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4915,"value":"md`To figure these constraints out, I made small models of the boundary cases in Geogebra :) See the [Geogebra sketch](https://ggbm.at/PYNwmd8W) for this constraint.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4721,"value":"md`And in order to have the paper not stretched (i.e. we can't find the cu/cd points because the wing tips are too far away), we must have:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4707,"value":"tex.block`|\\,\\textit{skew}\\,| \\,\\le\\, \\sin^{-1}\\left(\\tan\\left(\\frac{1}{4}\\pi - \\frac{1}{2}\\textit{fold}\\right)\\right)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4911,"value":"md`([Geogebra sketch](https://ggbm.at/JwwZF4A7))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4767,"value":"md`The intersections between these two boundary lines:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4759,"value":"tex.block`(\\textit{fold}, \\textit{skew}) = \\left(\\frac{\\pi}{6}, \\pm \\sin^{-1}\\left(\\frac{1}{\\sqrt{3}}\\right)\\right)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5061,"value":"md`A plot of these boundaries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4908,"value":"plot([\n { fn: boundaries.bl, stroke: '#cc0', desc: tex`s = \\cos^{-1}\\left(\\sqrt{2 - \\frac{1}{\\cos^2(f)}}\\right)` },\n { fn: boundaries.tl, stroke: '#0c0', desc: tex`s = -\\cos^{-1}\\left(\\sqrt{2 - \\frac{1}{\\cos^2(f)}}\\right)` },\n { fn: boundaries.br, stroke: '#09c', desc: tex`s = \\sin^{-1}\\left(\\tan\\left(\\frac{1}{4}\\pi - \\frac{1}{2}f\\right)\\right)` },\n { fn: boundaries.tr, stroke: '#00c', desc: tex`s = -\\sin^{-1}\\left(\\tan\\left(\\frac{1}{4}\\pi - \\frac{1}{2}f\\right)\\right)` },\n], [0, .5], [-.25, .25], {\n xLabel: 'fold (π)',\n yLabel: 'skew (π)',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5433,"value":"// Computed in terms of radians / PI, because I can then 'read' the data more easily\nboundaries = ({\n bl: fx => acos(sqrt(2 - 1/pow(cos(fx * PI), 2))) / PI,\n tl: fx => -acos(sqrt(2 - 1/pow(cos(fx * PI), 2))) / PI,\n br: fx => asin(tan(PI/4 - fx*PI/2)) / PI,\n tr: fx => -asin(tan(PI/4 - fx*PI/2)) / PI,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5503,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2648,"value":"md`## 2) Tiling butterflies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5487,"value":"md`### 2.1) Horizontal tiling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6045,"value":"md`#### Description of the construction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3234,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":6113,"value":"pseudocode(html`butterfly next (butterfly A, angle r = 0) {\n vector up := tr${tex`_A`} - br${tex`_A`}\n vector out := up × (mid(tr${tex`_A`}, br${tex`_A`}) - mid(tl${tex`_A`}, bl${tex`_A`}))\n vector normal := rotate_{(up, r, tr${tex`_A`})}(up × out)\n butterfly B := mirror_{(normal, tr${tex`_A`})}(A)\n\n swap tr${tex`_B`} and tl${tex`_B`}\n swap br${tex`_B`} and bl${tex`_B`}\n\n return B\n}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2305,"value":"viewof next = def(md`**next** : butterfly × (r = 0) -> butterfly`,\nfunction next (A, r = 0) {\n const up = sub(A.tr, A.br);\n const out = cross(up, sub(mid(A.tr, A.br), mid(A.tl, A.bl)));\n const normal = cross(up, out);\n const rotated_normal = rotate(up, r, A.tr)(normal);\n const B = mirror(rotated_normal, A.tr)(A);\n Object.assign(B, {\n tl: B.tr, tr: B.tl,\n bl: B.br, br: B.bl,\n });\n \n B.uv = [A.uv[0]+1, A.uv[1]];\n return B;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7731,"value":"md`We can create a 'previous' butterfly, i.e. to the left instead of the right of an already existing one, by reusing the code, but just flipping the orientations.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7376,"value":"flip_h = A => ({\n tl: A.tr, tr: A.tl,\n bl: A.br, br: A.bl,\n cu: A.cu, cd: A.cd,\n push: A.push,\n uv: A.uv,\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2487,"value":"viewof prev = def(md`**prev** : butterfly × (r = 0) -> butterfly`,\n (A, r) => {\n const B = flip_h(next(flip_h(A), -r));\n B.uv = [A.uv[0]-1, A.uv[1]];\n return B;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6065,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6051,"value":"md`#### Example 1) Horizontal tiling with next and prev`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2766,"value":"viewof v2 = foldskew({ fold: .125, skew: .018, r: -0.04, showr: true, H:250 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2481,"value":"{\n const A = butterfly(v2.fold, v2.skew);\n const rr = v2.r;\n const data = scale(.8)(_.flatten([\n triangles(prev(prev(A, rr), rr)),\n triangles(prev(A, rr)),\n triangles(A, rr),\n triangles(next(A, rr)),\n triangles(next(next(A, rr), rr)),\n ]));\n return drawp(data, {H:300, W: 600});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6007,"value":"md`#### Example 2) Circular row of butterflies (without *skew*)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6017,"value":"viewof N = slider({ min: 2, max: 20, step: 1, value: 16, description: 'Number of butterflies in circle' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6001,"value":"viewof f = slider({ min: 0, max: 1/2, value: .17, description: `Fold, in terms of π — values lower than 1/N will be disregarded`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6080,"value":"{\n const fmt = d3.format('.5');\n const r = PI/N; // rotate each next butterfly\n const fold = Math.max(r, f*PI); // permissible fold value\n return tex.block`\\begin{aligned}\n r &= \\frac{\\pi}{${N}} =\\pm ${fmt(r)} \\\\\n \\textit{fold} &= \\max(r, f\\pi) =\\pm ${fmt(fold)} \\\\\n \\textit{skew} &= 0\n \\end{aligned}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5890,"value":"{\n const r = PI/N; // rotate each next butterfly\n const fold = Math.max(r, f*PI); // permissible fold value\n const t = u*( sin(fold)/tan(r) - cos(fold) ); // distance of first butterfly's push to center of ring\n var A = translate([0,0,-t])(butterfly(fold, 0)); // translate first butterfly to ring position\n // make ring\n const row = [ A ];\n for (var i = 1; i < N; i++) {\n row.unshift(A = next(A, r));\n }\n // scale & draw\n const data = scale(.4)(_.flatten(row.map(triangles)));\n return drawp(data, { H: 350, W: 600, roty: 30 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6060,"value":"md`#### Example 3) Circular row of butterflies (with *skew*)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7735,"value":"md`(This is actually quite complicated.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6063,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5489,"value":"md`### 2.2) Vertical tiling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3248,"value":"md`Now for the hard part. If we have two adjacent butterflies, we want to place a new butterfly 'atop' of these. Note that the new butterfly's push point is uniquely determined already. However, its top wing points are not necessarily. They are only fixed by our condition that we want to have it 'tile nicely', which means that if we assume that a row of adjacent butterflies are created with equal *fold* and *skew* values, we want the a row of adjacent 'atop' butterflies to align nicely (touching wings). This means that we have to determine the top wing points accordingly.\n\nLet us place a butterfly ${tex`C`} atop adjacent ${tex`A`} and ${tex`B = {\\tt next}(A)`}. Note that we can start with\n${tex.block`\\begin{aligned}\n{\\tt bl}_C &\\triangleq {\\tt cd}_A \\\\\n{\\tt br}_C &\\triangleq {\\tt cd}_B \\\\\n{\\tt cu}_C &\\triangleq {\\tt tr}_A = {\\tt tl}_B\n\\end{aligned}`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7750,"value":"tex.block`|p - {\\tt cd}_A| = \\sqrt{2},\\quad |p - {\\tt cd}_B| = 1,\\quad |p - {\\tt tr}_A| = \\sqrt{2}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7763,"value":"md`For the rest of the construction, I best way I could think of figuring out the locations of the points than by their being the almost uniquely determined intersection points of certain spheres and planes. This is conceptually the easiest, for sure, but algorithmically not so good, for a few reasons (one of them being my having had a hard time figuring out the code for 3-spheres intersection :)). But, let's get to it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7741,"value":"md`First, for ${tex`{\\tt push}_C`}. Note that it is (almost) uniquely fixed in place by the three points ${tex`\\{ {\\tt bl}_C, {\\tt cu}_C, {\\tt br}_C \\}`}, by lying √2 units away from ${tex`{\\tt bl}_C`} and ${tex`{\\tt br}_C`}, and 1 unit away from ${tex`{\\tt cu}_C`}. That is to say, it is one of two points intersecting all three spheres. Hence, we can set`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7797,"value":"tex.block`\\begin{aligned}\n {\\tt push}_C &\\triangleq \\text{the }p \\in {\\tt intersect3spheres}\\left(\\begin{aligned}\n |p - {\\tt bl}_C| &= \\sqrt{2} \\\\ |p - {\\tt cu}_C| &= 1 \\\\ |p - {\\tt br}_C| &= \\sqrt{2}\n \\end{aligned}\\right) \\\\ &\\text{with }|p - {\\tt push}_A| \\text{ minimized}\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7851,"value":"md`For ${tex`{\\tt tl}_C`} and ${tex`{\\tt tr}_C`}, note that they are now (almost) uniquely fixed in place by our tiling condition, in that they have to lie on the plane on which subsequent horizontally tiled butterflies could be mirrored by our previous algorithm.\n\nThe way I wrote my 2-spheres-and-a-plane intersection function, we'll be representing the planes by a normal an a point on the plane. Then:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7858,"value":"tex.block`\\begin{aligned}\n {\\tt tl}_C &\\triangleq \\text{the } p \\in {\\tt i\\_2spheres\\_plane}\\left(\\begin{aligned}\n |p - {\\tt cd}_A| &= 2 \\\\ |p - {\\tt push}_C| &= \\sqrt{2} \\\\ (p-{\\tt push}_A)\\cdot n &= 0\n \\end{aligned}\\right) \\\\ &\\text{with }|p - {\\tt push}_A| \\text{ minimized}\n \\\\ &\\text{where } n = (\\text{mid}({\\tt bl}_A, {\\tt br}_A) - {\\tt push}_A) \\times\n (\\text{mid}({\\tt tl}_A, {\\tt tr}_A) - {\\tt push}_A)\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7887,"value":"md`Here, we've found the normal of the plane by taking the cross product of two orthogonal vectors lying on the plane, namely the vectors from the push of A to the center of the top resp. bottom wing tips.\n\nWe can find ${tex`{\\tt tr}_C`} by the exact same method, swapping orientation. Finally, we can find ${tex`{\\tt cd}_C`}, again by 3-spheres intersection, as:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7893,"value":"tex.block`\\begin{aligned}\n {\\tt cd}_C &\\triangleq \\text{the }p \\in {\\tt intersect3spheres}\\left(\\begin{aligned}\n |p - {\\tt tl}_C| &= 1 \\\\ |p - {\\tt push}_C| &= 1 \\\\ |p - {\\tt tr}_C| &= 1\n \\end{aligned}\\right) \\\\ &\\text{with }|p - {\\tt bl}_C| \\text{ minimized}\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6220,"value":"true || pseudocode(html`butterfly atop (butterfly A, butterfly B) {\n butterfly B\n bl${tex`_B`} := cd${tex`_A`}\n br${tex`_B`} := cd${tex`_B`}\n cu${tex`_B`} := tr${tex`_A`}\n\n intersections := intersect({\n sphere with center bl${tex`_B`} and radius ${tex`\\sqrt{2}\\cdot u`},\n sphere with center cu${tex`_B`} and radius ${tex`u`},\n sphere with center br${tex`_B`} and radius ${tex`\\sqrt{2}\\cdot u`},\n })\n push${tex`_B`} := p ${tex`\\in`} intersections, closest to cu${tex`_B`}\n\n return B\n}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5755,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":7737,"value":"md`Again, we can define the reverse operations, creating a new butterfly below two others, by flipping orientations.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7186,"value":"flip_v = A => ({\n tl: A.bl, tr: A.br,\n bl: A.tl, br: A.tr,\n cu: A.cd, cd: A.cu,\n push: A.push,\n uv: A.uv,\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7172,"value":"viewof below2 = def(md`**below2** : butterfly × butterfly -> butterfly`,\n (A, B) => {\n const C = flip_v(atop2(flip_v(A), flip_v(B)));\n C.uv = [A.uv[0]+.5, A.uv[1]+1];\n return C;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3705,"value":"viewof v3 = foldskew({ fold: 0.5/PI, skew: -0.1/PI, r: 0.2/PI, showr: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5766,"value":"{\n const B = butterfly(v3.fold, v3.skew);\n const A = prev(B, v3.r);\n const C = next(B, v3.r);\n const N = atop2(A, B);\n const M = atop2(B, C);\n const O = below2(A, B);\n const P = below2(B, C);\n const data = scale(.8)(_.flatten([\n triangles(A),\n triangles(B),\n triangles(C),\n triangles(N),\n triangles(M),\n triangles(O),\n triangles(P),\n ]));\n \n return drawp(data, {H:380, W: 600});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7383,"value":"md`### 2.3) Grid tilings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7900,"value":"md`In our conceptual, yet computationally definitely not the most desirable, approach, our next problem is to actually make a tiling. However, to construct an ${tex`N\\times M`} grid of butterflies with our horizontal and vertical tiling functions, we need to compute a number of extra butterflies to 'scaffold' our tiling, due to the fact that we can only go up or down above or below *two* butterflies.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6458,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":7593,"value":"md`As you can see in the example below, the grey-filled cells are necessary as scaffolding to construct the white grid.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7496,"value":"md`tile_from(...) with params = { left: 0, right: 3, up: 3, down: 1 }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7389,"value":"{\n return dispgrid([\n [-.5,-3],\n [.5,-3],\n [1.5,-3],\n [2.5,-3],\n [-1,-2, { stroke: '#999', fill: '#f5f5f5', strokeDasharray: '2 2' }],\n [0,-2],\n [1,-2],\n [2,-2],\n [3,-2],\n [-1.5,-1, { stroke: '#999', fill: '#f5f5f5', strokeDasharray: '2 2' }],\n [-.5,-1],\n [.5,-1],\n [1.5,-1],\n [2.5,-1],\n [3.5,-1, { stroke: '#999', fill: '#f5f5f5', strokeDasharray: '2 2' }],\n [-2,0, { stroke: '#999', fill: '#f5f5f5', strokeDasharray: '2 2' }],\n [-1,0, { stroke: '#999', fill: '#f5f5f5', strokeDasharray: '2 2' }],\n [0,0, { fill: '#333', color: 'white', fontWeight: 'bold', fontSize: 14 }],\n [1,0],\n [2,0],\n [3,0],\n [4,0, { stroke: '#999', fill: '#f5f5f5', strokeDasharray: '2 2' }],\n [-1.5,1, { stroke: '#999', fill: '#f5f5f5', strokeDasharray: '2 2' }],\n [-.5,1],\n [.5,1],\n [1.5,1],\n [2.5,1],\n [3.5,1, { stroke: '#999', fill: '#f5f5f5', strokeDasharray: '2 2' }],\n ])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6464,"value":"md`The render will construct a sheet of tiled butterflies with the given dimensions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6460,"value":"md`Play around with the parameters, and get to feel the way the paper wants to fold, it's really fun :) For a wide array of parameter combinations, the render will fail with a number of construction errors. But it's really hard to figure out the mathematics of the parameters after tiling, so it'll have to stay like this.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7908,"value":"viewof b = toggle({ title: 'Toggle to run/view tests' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7532,"value":"!b || dispgrid(_.flatten(tile_from(butterfly(), 0, { left: 0, right: 3, up: 3, down: 1, mode: 'rect' }).map(row => row.map(A => A.uv.concat(A.uv[0]==0&&A.uv[1]==0 ? {fill:'#222',color:'#fff',fontWeight:'bold',fontSize:14} : {})))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":7595,"value":"!b || dispgrid(_.flatten(tile_from(butterfly(), 0, { left: 5, right: 6, up: 3, down: 3, mode: 'rect' }).map(row => row.map(A => A.uv.concat(A.uv[0]==0&&A.uv[1]==0 ? {fill:'#222',color:'#fff',fontWeight:'bold',fontSize:14} : {})))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":7250,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":6765,"value":"function compute_tiling (v, X, Y) {\n // parameters used\n const fmt = d3.format('.3');\n \n // make tiling\n const butterflies = [[butterfly(v.fold, v.skew)]];\n for (var x = 0; x < X+Y-2; x++) {\n butterflies[0].unshift(next(butterflies[0][0], v.r));\n }\n butterflies[0].reverse();\n for (var y = 0; y < Y-1; y++) {\n butterflies.unshift([]);\n for (var A, B, x = 0; A = butterflies[1][x], B = butterflies[1][x+1]; x++) {\n butterflies[0].unshift(atop2(A, B));\n }\n butterflies[0].reverse();\n }\n \n // trim down to a rectangle of the right size\n for (var y = 1; y < Y; y++) {\n butterflies[y] = butterflies[y].slice(Math.floor(y/2), -Math.floor((y+1)/2));\n }\n \n var data = _.flatten(_.flatten(_.flatten(butterflies)).map(triangles));\n \n // center\n data = center_around_origin(data);\n \n // rotate\n // (TODO)\n \n // scale\n data = scale(.35)(data);\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7959,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7956,"value":"md`### 2.4) Final result: Dragon's Egg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5851,"value":"viewof v6 = foldskew({ fold: .3, skew: 0, r: 1/ncols, showr: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7979,"value":"v6","pinned":false,"hidden":false,"mode":"ojs"},{"id":6410,"value":"viewof ncols = slider({ min: 1, max: 20, step: 1, value: 12, description: 'Number of columns' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6413,"value":"viewof nrows = slider({ min: 1, max: 20, step: 1, value: 5, description: 'Number of rows' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5803,"value":"viewof tiled = {\n // parameters used\n const v = v6;\n const fmt = d3.format('.3');\n \n var data = tile_from(butterfly(v.fold, v.skew), v.r, {\n mode: 'rect',\n left: Math.floor((ncols-1)/2),\n right: Math.ceil((ncols-1)/2),\n up: Math.floor((nrows-1)/2),\n down: Math.ceil((nrows-1)/2),\n })\n data = _.flatten(_.flatten(data).map(triangles))\n data = center_around_origin(data)\n data = scale(.35)(data)\n //var data = compute_tiling(v6, ncols, nrows);\n \n const svgnode = drawp(data, {\n H: 400,\n W: 700,\n download: `tiling_fold_${fmt(v.fold)}_skew_${fmt(v.skew)}_r_${fmt(v.r)}_nrows_${nrows}_ncols_${ncols}.svg`,\n oninteract: d => {\n svgnode.value = data = d;\n svgnode.dispatchEvent(new CustomEvent('input'));\n },\n });\n \n svgnode.value = data;\n return svgnode;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6567,"value":"md`### Weird stuff`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7953,"value":"md`Instead of restricting ourselves to the logical 3D things, we can also do crazy stuff with the data we have :) Try panning left & right in the image below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6773,"value":"function tiling_to_triangle_grid (data) { \n const targetW = 900;\n const yExtent = d3.extent(_.flatten(data).map(p => p[1]));\n const minH = yExtent[1] - yExtent[0];\n \n const cellsize = Math.floor(sqrt((targetW*minH)/data.length));\n const ngridcols = Math.floor(targetW / cellsize);\n const ngridrows = Math.ceil(data.length / ngridcols);\n const W = ngridcols * cellsize;\n const H = ngridrows * cellsize;\n \n data = translate([0,-minH/2-yExtent[0],0])(data);\n \n const s = cellsize / 50;\n \n // grid positioning\n var griddata = data.map((tr, i) => {\n const [ a, b, c ] = tr;\n const tr_center = [\n (a[0] + b[0] + c[0]) / 3,\n (a[1] + b[1] + c[1]) / 3,\n ];\n const grid_center = [\n i % ngridcols * cellsize + cellsize/2 - W/2,\n Math.floor(i/ngridcols) * cellsize + cellsize/2 - H/2,\n ];\n return tr.map(p => [\n (p[0] - tr_center[0]) * s + grid_center[0],\n (p[1] - tr_center[1]) * s + grid_center[1],\n p[2],\n ]);\n });\n \n return { griddata, W, H };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7945,"value":"viewof b2 = toggle({ title: 'Ok, show me this' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6775,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":6762,"value":"md`### Making a GIF`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6945,"value":"md`TODO make this better`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6881,"value":"viewof mk_gif = toggle({ title: 'Start/stop GIF making' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6780,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":7962,"value":"md`### Draw an egg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6950,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":7133,"value":"viewof sphere_butterflies_f = mapinputdata(bgrid(16, 7, { value: false, offset_even_rows: .5 }), grid => {\n const butterflies = [];\n for (var x = 0; x < 16; x++) {\n for (var y = 0; y < 7; y++) {\n if (grid[y][x]) {\n butterflies.push(sphere_butterflies[y*16 + x]);\n }\n }\n }\n return butterflies;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7139,"value":"{\n return drawp(_.flatten(sphere_butterflies_f.map(triangles)), {\n H: 400,\n W: 700,\n rotx: 0,\n roty: 100,\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5505,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4009,"value":"md`## 3) 'The real problem'`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4012,"value":"md`So far so good, I've been able to draw butterflies, horizontally tile them, and interpolate the push of an atop. But in the end, what I really need is a good understanding of the interrelationships between *fold*, *skew*, and *r*:\n\n1. **For a single butterfly, what is the boundary of permissible values of (*fold*, *skew*)?** The answer to this problem is necessary to properly enforce the constraint on the *fold*/*skew* input tool, but not of the greatest importance.\n2. **Figure out the atop mapping (*fold*_n, *skew*_n, *r*_n) ↦ (*fold*_n+1, *skew*_n+1, *r*_n+1)**, which is just a huge amount of 3D trigonometry. Although I can do without by making a large enough tiling, there's no direct way to create butterfly (m,n). If I find this mapping though (or something equivalent), a surface mapping for a butterfly grid becomes viable, which would be really cool.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5073,"value":"md`### Direct?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5075,"value":"viewof v4 = foldskew({ fold: .22, skew: .07, W: 250, H:250 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5081,"value":"{\n const f = v4.fold;\n const s = v4.skew;\n const rot = 10;\n \n const O = [0,0,0];\n const B = [sin(f), 0, -cos(f)]; // mid(tr, br) = mr\n const C = add(B, [ cos(f)*sin(s), -cos(s), sin(f)*sin(s) ]); // tr\n \n const bu = butterfly(f, s);\n //return mid(bu.tl, bu.bl)[0] - u*C[0];\n //return drawp(triangles(bu), { rot });\n \n return ((2*cos(f) - cos(2*f - s) + cos(2*f + s) + 3)*sin(f)*sin(s)/2 - sqrt(-32*sin(f)**4*cos(2*s) + 32*sin(f)**4 - 48*cos(f) + 4*cos(2*f) + 20*cos(2*s) + 8*cos(f - s) - 6*cos(2*(f - s)) - 8*cos(f + s) - 6*cos(2*(f + s)) + 24*cos(2*f - s) - 24*cos(2*f + s) + 8*cos(3*f - s) - 8*cos(3*f + s) - 48)*cos(s)/4)/(sin(f)**2*sin(s)**2 + cos(s)**2);\n \n return drawp(scale(100)([\n [O, B, [0, 0, -cos(f)]],\n [O, B, C],\n ]), { rot })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5507,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2030,"value":"md`## A) Implementation details`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4928,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":3852,"value":"permissible_dots = {\n var data = [];\n for (var fx = 0; fx < .5; fx += .01) {\n for (var sy = -.25; sy < .25; sy += .01) {\n \n if (permissible(fx*PI, sy*PI)) {\n data.push([fx,sy]);\n }\n }\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4615,"value":"bound = ({\n le: f => acos(sqrt(2 - 1/pow(cos(f), 2))),\n ri: f => asin(tan(PI/4 - f/2)),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4617,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":4595,"value":"function permissible (f, s) {\n const s_bound_le = acos(sqrt(2 - 1/pow(cos(f), 2)));\n const s_bound_ri = asin(tan(PI/4 - f/2));\n \n // (>= instead of > no longer necessary because of updated butterfly construction code)\n if (abs(s) >/*=*/ s_bound_le) return false;\n if (abs(s) >/*=*/ s_bound_ri) return false;\n \n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4537,"value":"md`^ This is just a quick hack—because I haven't figured out the mathematical relation yet between *fold* and *skew*, I'm just hard-coding a set of permissible values, so that the fold/skew-input tool can draw a nice little area of permissible values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4791,"value":"permissible((3/8)*Math.PI, Math.PI/8)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4074,"value":"viewof w = foldskew({ fold: .125, skew: .018, H: 250, showr: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3709,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1586,"value":"viewof cube = def(md`**cube** : Array( square )`, md`Cube from [-20,-20,-20] to [20,20,20].`,\n(() => {\n const btl = [-1,-1, 1];\n const btr = [ 1,-1, 1];\n const bbl = [-1, 1, 1];\n const bbr = [ 1, 1, 1];\n const ftl = [-1,-1,-1];\n const ftr = [ 1,-1,-1];\n const fbl = [-1, 1,-1];\n const fbr = [ 1, 1,-1];\n \n return scale(20)([\n [btl, btr, ftr, ftl], // top\n [bbl, bbr, fbr, fbl], // bottom\n [btl, bbl, fbl, ftl], // left\n [btr, bbr, fbr, ftr], // right\n [ftl, ftr, fbr, fbl], // front\n [btl, btr, bbr, bbl], // back\n ]);\n})())","pinned":false,"hidden":false,"mode":"ojs"},{"id":5396,"value":"md`### A.1) Orthographic projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5399,"value":"md`By the way, you might have noticed, we've been using a really simple orthographic projection. This just means that we \"forget\" the depth axis. In our model, the x and y axes follow standard screen coordinates (x goes right, and y goes down), and z goes \"into\" the screen. So then, the orthographic projection of a 3D model just forgets the z axis information, and draws solely with the x and y axis information.\n\nThere's just one catch: we have to draw polygons (usually triangles) in the right order, according to their z-axis \"depth\". A really simple method, that works OK in most cases, is just to compare the average z of the polygons, and sort them accordingly, where it is important, though, to have all polygons have approximately the same size. This is what is currently used here.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7645,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":7660,"value":"viewof z_mean_comp = def(md`**z_mean_comp** : polygon × polygon -> (-1 or 1)`, md`A polygon z-axis sorter.`,\nfunction 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":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":5295,"value":"true || drawp([\n [ [-100,0,-100], [100,0,-100], [100,0,100], [-100,0,100] ], // flat plane\n [ [0,-50,0], [50,-50,0] ], // y axis\n [ [0,0,0], [0,-50,0] ], [ [0,50,0], [0,0,0] ], // y axis\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":5358,"value":"true || drawp(triangles(butterfly()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"md`### A.2) Vector / Matrix helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4242,"value":"viewof closest_to = def(md`**closest_to** : Array( point ) × point -> point`, md`${tex.block`\\forall_i \\big[ |{\\tt closest\\_to}([v_0, v_1, \\dots v_n],w) - w| \\le |v_i - w| \\big]`}`,\n\nfunction closest_to (vs, w) {\n return _.minBy(vs, v => dist(v, w));\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5706,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":2922,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":1311,"value":"viewof clone = def(md`**clone** : data -> data`,\n function clone (d) {\n if (_.isPlainObject(d)) return _.mapValues(d, clone);\n if (_.isArray(d)) return _.map(d, clone);\n return d;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"viewof dist = def(md`**dist**(v^vector, w^vector) = |v - w|`,\n glm.vec3.dist)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5679,"value":"viewof cross = def(md`**cross**(v^vector, w^vector) = v × w`,\n (a, b) => glm.vec3.cross([0,0,0], a, b))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"viewof mid = def(md`**mid**(v^vector, w^vector) = v + (w-v)/2`,\n (a, b) => add(a, scale(.5)(sub(b,a))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"viewof sub = def(md`**sub**(v^vector, w^vector) = v - w`,\n (a,b) => add(a, scale(-1)(b)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"viewof add = def(md`**add**(v^vector, w^vector) = v + w`,\n (a,b) => translate(b)(a))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"viewof mirror = def(md`**mirror**_{(_normal_=[1,0,0], _origin_=[0,0,0])} : data -> data`,\n function mirror (normal = [1,0,0], origin = [0,0,0]) {\n glm.vec3.normalize(normal, normal);\n return function mirror_inner (data, k) {\n if (k == 'uv') return data;\n if (_.isPlainObject(data)) return _.mapValues(data, mirror_inner);\n if (typeof data[0] != 'number') return _.map(data, mirror_inner);\n return sub(data, scale(2*glm.vec3.dot(sub(data, origin), normal))(normal));\n };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2051,"value":"viewof rotate_polygon = def(md`**rotate_polygon**_{(_polygon_, _side_=0, _angle_=0)} : polygon`,\n function rotate_polygon (poly, side = 0, angle = Math.PI/4) {\n const v0 = poly[side];\n const v1 = poly[(side+1)%poly.length];\n return rotate(sub(v1, v0), angle, v0)(poly);\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"viewof rotate = def(md`**rotate**_{(_axis_=[1,0,0], _angle_=0, _origin_=[0,0,0])} : data -> data`,\n 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, k) {\n if (k == 'uv') return data;\n if (_.isPlainObject(data)) return _.mapValues(data, rotate_inner);\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":7346,"value":"viewof center_around_origin = def(md`**center_around_origin** : data -> data`,\nfunction center_around_origin (d) {\n return translate(sub([0,0,0], center(d)))(d);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7332,"value":"viewof center = def(md`**center** : data -> vector`,\nfunction center (d) {\n const sum = [0,0,0];\n var N = 0;\n function accum_points (d, k) {\n if (k == 'uv') return;\n if (_.isPlainObject(d)) return _.mapValues(d, accum_points);\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":325,"value":"viewof translate = def(md`**translate**_{(_by_=[0,0,0])} : data -> data`,\n function translate (by = [0,0,0]) {\n return function translate_inner (d, k) {\n if (k == 'uv') return d;\n if (_.isPlainObject(d)) return _.mapValues(d, translate_inner);\n if (typeof d[0] != 'number') return _.map(d, translate_inner);\n return glm.vec3.add([0,0,0], d, by);\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"viewof scale = def(md`**scale**_{(_by_=1)} : data -> data`,\n function scale (by = 1) {\n return function scale_inner (d, k) {\n if (k == 'uv') return d;\n if (_.isPlainObject(d)) return _.mapValues(d, scale_inner);\n if (typeof d[0] != 'number') return _.map(d, scale_inner);\n return glm.vec3.scale([0,0,0], d, by);\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"viewof rad = def(md`**rad**(r deg) = r × π/180`,\n deg => deg * Math.PI/180)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1888,"value":"viewof deg = def(md`**deg**(r rad) = r × 180/π`,\n rad => rad * 180/Math.PI)","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"function project (p, ...Ms) {\n const r = glm.vec3.fromValues(p[0], p[1], p[2]);\n for (var i = 0; i < Ms.length; i++) {\n glm.vec3.transformMat4(r, r, Ms[i]);\n }\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"// This is just a small wrapper, so that the code above looks\n// a bit more intelligible. I just hate quaternions D:\nfunction quaternion (rx = 0, ry = 0, rz = 0) {\n const rotation = glm.quat.fromEuler(glm.quat.create(), rx, ry, rz);\n \n rotation.rx = function (rx) {\n glm.quat.rotateX(rotation, rotation, rx * Math.PI/180);\n return rotation;\n };\n \n rotation.ry = function (ry) {\n glm.quat.rotateY(rotation, rotation, ry * Math.PI/180);\n return rotation;\n };\n \n rotation.rz = function (rz) {\n glm.quat.rotateZ(rotation, rotation, rz * Math.PI/180);\n return rotation;\n };\n \n rotation.asMatrix = function () {\n return glm.mat4.fromQuat(glm.mat4.create(), rotation);\n };\n \n return rotation;\n}","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":1535,"value":"md`## B) Dependencies`","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":2680,"value":"function myslider (params) {\n  const a = slider(params);\n  \n  a.remember = function () {\n    return myslider(params);\n  }\n  \n  return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2151,"value":"function def (sig, desc, v) {\n  if (v === undefined) {\n    v = desc;\n    desc = '';\n  }\n  const root = html`${sig}
 ${desc}`;\n  root.value = v;\n  return root;\n}","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":6862,"value":"Animated_GIF = require('https://unpkg.com/animated_gif@1.0.2/dist/Animated_GIF.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W43","stdlib":"1","titling":"auto"}