2b:null 2c:["$","title",null,{"children":"Waterbomb 2 | Kelley van Evert | Observable"}] 31:T84b,html``32:T408,pixels = { // first pixel var p0 = Pix({ a, b, c_ba, c_ab }); const p10 = addright(p0); const pm10 = addleft(p0); const p20 = addright(p10); const pm20 = addleft(pm10); const p01 = addabove(p0); const p0m1 = addbelow(p0); const meshes = [ trianglemesh(p0), trianglemesh(p10), trianglemesh(pm10), trianglemesh(p20), trianglemesh(pm20), trianglemesh(p01), trianglemesh(p0m1), ]; if (tesselate) { const p11 = addright(p01); meshes.push(trianglemesh(p11)); meshes.push(trianglemesh(addright(p11))); const pm11 = addleft(p01); meshes.push(trianglemesh(pm11)); meshes.push(trianglemesh(addleft(pm11))); const p1m1 = addright(p0m1); meshes.push(trianglemesh(p1m1)); meshes.push(trianglemesh(addright(p1m1))); const pm1m1 = addleft(p0m1); meshes.push(trianglemesh(pm1m1)); meshes.push(trianglemesh(addleft(pm1m1))); } else { //meshes.push(trianglemesh(add_tr(p0, p01, p10))); } return meshes; }33:Tb3a,Pix = { // `Pix` is simulaneously: // - A constructor for an initial pixel, in the format of // just a set of 3D triangles, for easy manipulation. // - A set of 'accessors' { f tl, f tr, f bll, ... } // that retrieves the applicable vertex of a given pixel. // The problem was that storing these data in a format // like the butterflies earlier (semantically in an object) // makes it less easy to manipulate, but storing the data // the current way makes it hard to access the 'most recent' // location of a vertex. Hence the accessors. const fn = angles => { /* pixel layout: tll--tl---tr--trr | / | | / | bll--bl---br--brr <-- this one will be on the top right though, when folded */ const tl = [-u/2, u/2, 0]; const tr = [u/2, u/2, 0]; const bl = [-u/2, -u/2, 0]; const br = [u/2, -u/2, 0]; const trr = add(tr, [u,0,0]); const flap_ri = rotate([0,1,0], angles.a, tr)([ [tr, trr, br], // upper left triangle rotate(sub(trr, br), -angles.c_ab, trr)([trr, add(br, [u,0,0]), br]), // lower right triangle ]); const flap_le = rotate([0,0,1], PI)(flap_ri); // I will need a separate 'a' angle for these, though, in order to tesselate const flap_ri_b = rotate([0,1,0], angles.b, tr)([ [tr, trr, br], // upper left triangle rotate(sub(trr, br), -angles.c_ba, trr)([trr, add(br, [u,0,0]), br]), // lower right triangle ]); const flap_top = rotate([0,0,1], PI/2)(flap_ri_b); const flap_bot = rotate([0,0,1], PI*3/2)(flap_ri_b); var pixel = [ [tl, tr, br], //0 [br, bl, tl], //1 flap_ri[0], //2 flap_ri[1], //3 flap_le[0], //4 flap_le[1], //5 flap_top[0], //6 flap_top[1], //7 flap_bot[0], //8 flap_bot[1], //9 ]; return pixel; }; // 'Accessors' fn.tl = pixel => pixel[0][0]; fn.tr = pixel => pixel[0][1]; fn.bl = pixel => pixel[1][1]; fn.br = pixel => pixel[0][2]; fn.trr = pixel => pixel[2][1]; fn.brr = pixel => pixel[3][1]; fn.tll = pixel => pixel[5][1]; fn.bll = pixel => pixel[4][1]; fn.tlu = pixel => pixel[6][1]; // I think fn.tru = pixel => pixel[7][1]; // I think fn.brd = pixel => pixel[8][1]; // I think fn.bld = pixel => pixel[9][1]; // I think fn.ct = pixel => mid(fn.tl(pixel), fn.br(pixel)); fn.up = pixel => glm.vec3.cross([0,0,0], sub(fn.tr(pixel), fn.br(pixel)), sub(fn.tr(pixel), fn.tl(pixel))); fn.make = ({ tl, tr, bl, br, trr, brr, tll, bll, ct, up, tru, tlu, brd, bld }) => [ [tl, tr, br], // 0 [br, bl, tl], // 1 [tr, trr, br], // 2 [trr, brr, br], // 3 [bl, bll, tl], // 4 [bll, tll, tl], // 5 [tl, tlu, tr], // 6 [tlu, tru, tr], // 7 [br, brd, bl], // 8 [brd, bld, bl], // 9 ]; return fn; }34:T680,html`

${md`\`\`\`maxima load(vect); /* the origin here is the bottom-right point of a pixel; making [upri] a unit vector so that angle computations are easier */ up:[0,1,0]; down:[0,-1,0]; left:[-1,0,0]; right:[1,0,0]; upri:[sqrt(2),sqrt(2),0]; \`\`\` \`\`\`maxima /* makes a rotation matrix for rotating by theta around v */ 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 /* folding the right flap of the pixel, by a */ upri_rot: rotv(down,a) . upri; right_rot_over_c: trigsimp(rotv(upri_rot, c) . rotv(down,a) . right); /* folding the bottom flap of the pixel, by b */ down_rot: rotv(left,b) . down; /* solving redundant angle c(a,b), that dissects the right flap into two triangles through [upri] */ eq:trigsimp(right_rot_over_c . down_rot)[1]; plot3d(ev(eq, [a=.68]), [b,-π/4,π/4], [c,-π/4,π/4]); sol_c: solve([eq = 0], c)[1]; /* solving redundant angle d(a,b), by which the connecting triangle between the two flaps, hinges on the right flap */ pre: trigsimp(rotv(right_rot_over_c, -d) . rotv(upri_rot, c) . down); down_rot_over_cd : [ pre[1][1][1][1],pre[2][1][1][1],pre[3][1][1][1] ]; eq_d:trigsimp(down_rot_over_cd . left); solve([eq_d = 0], d); \`\`\` `}

`35:T9eb,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 [false, 'radii']; if (dist([a,b,c],[g,h,i]) > r+t) return [false, 'radii']; if (dist([d,e,f],[g,h,i]) > s+t) return [false, 'radii']; // 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 [false, 'rounding']; //throw 'This should not occur (because we already know the three spheres intersect).'; } } return [z.map(z => [n + m*z, o + p*z, z])]; })36: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]); })37:Tb7b,function threedraw (objects, prev) { if (prev) { const lights = prev._lights; const controls = prev._controls; const scene = prev._scene; const camera = prev._camera; const renderer = prev._renderer; for (var i = scene.children.length - 1; i >= 0; i--) { scene.remove(scene.children[i]); } objects.forEach(o => scene.add(o)); renderer.render(scene, camera); return prev; } else { const W = 700; const H = 400; // RENDERER const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); renderer.setSize(W, H); renderer.setPixelRatio(3); // 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 = .4 camera.position.x = 500 * sin(a); camera.position.y = -100 camera.position.z = 500 * cos(a); // CONTROLS const controls = new THREE.OrbitControls(camera, renderer.domElement); 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(0xf9f9f9); //const geometry = new THREE.BoxGeometry(1, 1, 1); objects.forEach(o => scene.add(o)); //var axesHelper = new THREE.AxesHelper(50); //scene.add( axesHelper ); // 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(); renderer.domElement._lights = lights; renderer.domElement._controls = controls; renderer.domElement._scene = scene; renderer.domElement._camera = camera; renderer.domElement._renderer = renderer; return renderer.domElement; } }38:T7c8,function threedraw2 (objects, prev) { if (false && prev) { const { controls, scene, camera, renderer } = prev.remember; for (var i = scene.children.length - 1; i >= 0; i--) { scene.remove(scene.children[i]); } objects.forEach(o => scene.add(o)); renderer.render(scene, camera); return prev; } else { const W = 700; const H = 400; // RENDERER const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); renderer.setSize(W, H); renderer.setPixelRatio(3); // 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 = .4 camera.position.x = 500 * sin(a); camera.position.y = -100 camera.position.z = 500 * cos(a); // CONTROLS const controls = new THREE.OrbitControls(camera, renderer.domElement); 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(0xf9f9f9); //const geometry = new THREE.BoxGeometry(1, 1, 1); objects.forEach(g => { scene.add(new THREE.Mesh(g, new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, color: 0xffffff }))); const linemat = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 6 } ); const line = new THREE.LineSegments(new THREE.EdgesGeometry(g), linemat); scene.add( line ); }); //var axesHelper = new THREE.AxesHelper(50); //scene.add( axesHelper ); function render () { renderer.render(scene, camera); } controls.addEventListener('change', render); render(); renderer.domElement.remember = { controls, scene, camera, renderer }; return renderer.domElement; } }39:T5a34,OrbitControls = THREE.OrbitControls = (function () { /** * @author qiao / https://github.com/qiao * @author mrdoob / http://mrdoob.com * @author alteredq / http://alteredqualia.com/ * @author WestLangley / http://github.com/WestLangley * @author erich666 / http://erichaines.com */ // This set of controls performs orbiting, dollying (zooming), and panning. // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). // // Orbit - left mouse / touch: one finger move // Zoom - middle mouse, or mousewheel / touch: two finger spread or squish // Pan - right mouse, or arrow keys / touch: three finter swipe function OrbitControls( object, domElement ) { this.object = object; this.domElement = ( domElement !== undefined ) ? domElement : document; // Set to false to disable this control this.enabled = true; // "target" sets the location of focus, where the object orbits around this.target = new THREE.Vector3(); // How far you can dolly in and out ( PerspectiveCamera only ) this.minDistance = 0; this.maxDistance = Infinity; // How far you can zoom in and out ( OrthographicCamera only ) this.minZoom = 0; this.maxZoom = Infinity; // How far you can orbit vertically, upper and lower limits. // Range is 0 to Math.PI radians. this.minPolarAngle = 0; // radians this.maxPolarAngle = Math.PI; // radians // How far you can orbit horizontally, upper and lower limits. // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ]. this.minAzimuthAngle = - Infinity; // radians this.maxAzimuthAngle = Infinity; // radians // Set to true to enable damping (inertia) // If damping is enabled, you must call controls.update() in your animation loop this.enableDamping = false; this.dampingFactor = 0.25; // This option actually enables dollying in and out; left as "zoom" for backwards compatibility. // Set to false to disable zooming this.enableZoom = true; this.zoomSpeed = 1.0; // Set to false to disable rotating this.enableRotate = true; this.rotateSpeed = 1.0; // Set to false to disable panning this.enablePan = true; this.keyPanSpeed = 7.0; // pixels moved per arrow key push // Set to true to automatically rotate around the target // If auto-rotate is enabled, you must call controls.update() in your animation loop this.autoRotate = false; this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60 // Set to false to disable use of the keys this.enableKeys = true; // The four arrow keys this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; // Mouse buttons this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT }; // for reset this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.zoom0 = this.object.zoom; // // public methods // this.getPolarAngle = function () { return spherical.phi; }; this.getAzimuthalAngle = function () { return spherical.theta; }; this.reset = function () { scope.target.copy( scope.target0 ); scope.object.position.copy( scope.position0 ); scope.object.zoom = scope.zoom0; scope.object.updateProjectionMatrix(); scope.dispatchEvent( changeEvent ); scope.update(); state = STATE.NONE; }; // this method is exposed, but perhaps it would be better if we can make it private... this.update = function() { var offset = new THREE.Vector3(); // so camera.up is the orbit axis var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) ); var quatInverse = quat.clone().inverse(); var lastPosition = new THREE.Vector3(); var lastQuaternion = new THREE.Quaternion(); return function update () { var position = scope.object.position; offset.copy( position ).sub( scope.target ); // rotate offset to "y-axis-is-up" space offset.applyQuaternion( quat ); // angle from z-axis around y-axis spherical.setFromVector3( offset ); if ( scope.autoRotate && state === STATE.NONE ) { rotateLeft( getAutoRotationAngle() ); } spherical.theta += sphericalDelta.theta; spherical.phi += sphericalDelta.phi; // restrict theta to be between desired limits spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) ); // restrict phi to be between desired limits spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) ); spherical.makeSafe(); spherical.radius *= scale; // restrict radius to be between desired limits spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) ); // move target to panned location scope.target.add( panOffset ); offset.setFromSpherical( spherical ); // rotate offset back to "camera-up-vector-is-up" space offset.applyQuaternion( quatInverse ); position.copy( scope.target ).add( offset ); scope.object.lookAt( scope.target ); if ( scope.enableDamping === true ) { sphericalDelta.theta *= ( 1 - scope.dampingFactor ); sphericalDelta.phi *= ( 1 - scope.dampingFactor ); } else { sphericalDelta.set( 0, 0, 0 ); } scale = 1; panOffset.set( 0, 0, 0 ); // update condition is: // min(camera displacement, camera rotation in radians)^2 > 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; }())3a:[] 2f:{"id":"74eb0db96b9bc39a","slug":"waterbomb-2","title":"Waterbomb 2","thumbnail":"c059d2c9e810fee70047f0691471c41ef31bca6255a4a52f560921704d5c457a","access_level":"public","create_time":"$D2018-04-03T19:56:15.476Z","update_time":"$D2019-12-14T21:49:06.289Z","view_time":null,"first_public_time":"$D2018-04-03T22:11:17.786Z","fork":{"id":"73076f5b39ea66fb","slug":"folding-paper","title":"Folding paper symbolically","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"stars":9,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":11827,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"eb10ef0146cb05b4","slug":"origami","title":"Origami","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"type":"notebook","body":{"title":"Waterbomb 2","cells":[{"id":0,"value":"md`# Waterbomb 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11158,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10812,"value":"md`So here's my analog rendering of the \"Waterbomb 2\" origami tesselation. But let me see, maybe I can construct it digitally as well?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11504,"value":"md`As a tesselation, it is built from repeatable pieces, and in this case it is the \"pixel\", which has a crease pattern as shown below. _(My naming, which I prefer over viewing the \"waterbomb base\" as the repeating pattern, which technically isn't even the case, as you'd be missing the faces of the pixels.)_ Valley folds are dotted, and mountain folds are solid. Note that all vertical and horizontal folds are mountains, and all diagonals are valleys. Vertices are named, and some rotations are given, the rest follow from symmetry or are otherwise uniquely determined. The tesselation is created by tiling the crease pattern (either of two ways).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11255,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10986,"value":"md`For a single horizontally tiled strip of pixels, two angles (${tex`a`} and ${tex`b`}) specify the system (but the diagonals of the top and bottom flaps are disregarded). The remaining angles (${tex`c_{a,b}`} and ${tex`d_{a,b}`}) are computed as solutions for the equations below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10984,"value":"tex.block`\\begin{aligned}\n \\sin(c_{a,b}) &= \\frac{\\sin(a)\\sin(b) + \\cos(b)}{\\sqrt{2}\\cos(a)\\sin(b)} \\cos(c_{a,b}) + \\frac{\\sin(a)\\sin(b) - \\cos(b)}{\\sqrt{2}\\cos(a)\\sin(b)} \\\\[1.3em]\n \\sin(d_{a,b}) &= -\\frac{\\sqrt{2}\\sin(a)\\sin(c_{a,b})+\\cos(a)(\\cos(c_{a,b})-1)}{\\sqrt{2}\\cos(a)\\sin(c_{a,b})-2\\sin(a)\\cos(c_{a,b})} \\cos(d_{a,b})\n\\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11527,"value":"md`*[ Do these come falling from the sky? No, they come from Maxima, check the code out below. Because we have easy flat angles (of only 45 and 90 degrees), the equations are actually quite manageable :) ]*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11518,"value":"md`Symmetrically, to tile a vertical strip, keeping ${tex`a`} and ${tex`b`}, we just swap ${tex`a`} and ${tex`b`} to compute ${tex`c_{b,a}`} and ${tex`d_{b,a}`}. To tesselate, either (1) a uniform dependency between ${tex`a`} and ${tex`b`} must be introduced, but the paper would only be able to fold around into a horizontal or vertical pipe; or (2) if we give up on indefinite tesselation but just want to tile a small rectangle as in the photo above, we'd have to compute new variables for each subsequent pixel. Ugh! For now, I've gone without the dependency, and in the viewer below, you can try to manually align the tesselation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11003,"value":"a = a_pre + ab","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11005,"value":"b = b_pre + ab","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10664,"value":"viewof a_pre = slider({ min: 0, max: PI/2, value: .76, precision: 4, description: `Folds the pixel's left and right flaps` })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10683,"value":"viewof b_pre = slider({ min: 0, max: PI/2, value: .76, precision: 4, description: `Folds the pixel's top and bottom flaps` })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11012,"value":"viewof ab = slider({ min: -PI/4, max: PI/4, value: .5405, precision: 4, description: `Simultanously offsets both a and b` })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11491,"value":"viewof tesselate = toggle({ title: 'Tesselate (dependency between a and b not computed)' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10455,"value":"threedraw(pixels, this) // reuses the THREE rendering context","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11767,"value":"viewof u = slider({ min: 10, max: 120, value: 80 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11168,"value":"md`Don't you just love those THREE.js normal face colorings too? :D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10787,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11727,"value":"md`(add_tr is just a tester, and even if it works, it's not the best solution.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11650,"value":"function add_tr (p0, p_above, p_right, accessors = Pix) {\n const A = accessors;\n const tl = A.brr(p_above);\n const bl = A.tru(p_right);\n const tll = A.br(p_above);\n const bll = A.trr(p0);\n const tlu = A.trr(p_above);\n const brd = A.trr(p_right);\n const bld = A.tr(p_right);\n \n var br = intersect3spheres(bl, brd, tl, u, u, sqrt(2)*u);\n if (br[1]) {\n throw 'add_tr/br err: ' + br[1];\n } else {\n br = closest_to(br[0], add(A.tr(p_right), sub(A.tr(p_right), A.bl(p_right))));\n }\n \n const y = sub(tl, bl);\n const tr = add(br, y);\n \n const x = sub(br, bl);\n const a = PI-glm.vec3.angle(x, sub(bll, bl));\n \n const tru = add(tr, sub(tlu, tl)); // TODO\n \n return Pix.make({\n tl, bl, tll, bll, tlu, brd, bld,\n br, tr,\n \n tru,\n trr: add(tr, rotate(y, a)(x)),\n brr: add(br, rotate(y, a)(x)),\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11714,"value":"{\n var p0 = Pix({ a, b, c_ba, c_ab });\n \n const p10 = addright(p0);\n const p01 = addabove(p0);\n return add_tr(p0, p01, p10)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11596,"value":"function addabove (p0) {\n return addright(p0, {\n tl: Pix.bl, bl: Pix.br, br: Pix.tr, tr: Pix.tl,\n tll: Pix.bld, bld: Pix.brr, brr: Pix.tru, tru: Pix.tll,\n bll: Pix.brd, brd: Pix.trr, trr: Pix.tlu, tlr: Pix.bll,\n }, d_ba);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11598,"value":"function addbelow (p0) {\n var p1 = addabove(p0);\n p1 = rotate(Pix.up(p0), PI, Pix.ct(p0))(p1); // move to the left instead\n p1 = rotate(Pix.up(p1), -PI, Pix.ct(p1))(p1); // rotate itself, so its orientation is OK again\n return p1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11609,"value":"md`${code('addright')}(pixel, accessors) is the only actual direct-adjacent pixel-creating function; the rest are derived from symmetries by:\n\n- ${code('addleft')}(p₀): first add to p₀'s right, then rotate around p₀\n- ${code('addabove')}(p₀): delegate to addright, but swapping the accessors out for a 45-degree rotated set\n- ${code('addbelow')}(p₀): first add above p₀, then rotate around p₀`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11582,"value":"function addright (p0, accessors = Pix, _d_ab = d_ab) {\n const { tl, tr, bl, br, trr, brr, tll, bll, ct, up, tru, tlu, brd, bld } = accessors;\n \n const br_to_brr = sub(brr(p0), br(p0));\n var p1 = translate(sub(brr(p0), tl(p0)))(p0);\n p1 = rotate(\n glm.vec3.cross([0,0,0], br_to_brr, sub(tll(p1), br(p0))),\n glm.vec3.angle(br_to_brr, sub(brr(p0), tll(p1))),\n brr(p0)\n )(p1);\n const adjust = glm.vec3.angle(sub(trr(p0), brr(p0)), sub(bll(p1), br(p0)));\n p1 = rotate(br_to_brr, PI+adjust + _d_ab, br(p0))(p1);\n return p1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11585,"value":"function addleft (p0) {\n var p1 = addright(p0);\n p1 = rotate(Pix.up(p0), PI, Pix.ct(p0))(p1); // move to the left instead\n p1 = rotate(Pix.up(p1), -PI, Pix.ct(p1))(p1); // rotate itself, so its orientation is OK again\n return p1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11570,"value":"md`${code('Pix')} constructs an initial pixel from ${code('angles')} = { a, b, c_ab, c_ba }, as well as provides accessors ${code('Pix.tl')}, ${code('Pix.tr')}, etc., and a points-constructor ${code('Pix.make')} : Points → Pixel.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10773,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11618,"value":"code = s => `${s}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11471,"value":"c_ab = c(a,b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11473,"value":"c_ba = c(b,a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11476,"value":"d_ab = d(a,b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11479,"value":"d_ba = d(b,a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11446,"value":"c = (a,b) => {\n var c;\n if (a == 0 || b == 0) c = 0; else {\n const denom = (sqrt(2)*cos(a)*sin(b));\n const sol = solve_sincos(1, -(sin(a)*sin(b)+cos(b))/denom, -(sin(a)*sin(b)-cos(b))/denom);\n c = Math.max(sol[0], sol[1]); // <-- this gets ugly; but how to choose correctly?\n }\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11449,"value":"d = (a,b) => {\n const c_ab = c(a,b);\n var d;\n if (a == 0 || c == 0) d = 0; else {\n const denom = sqrt(2)*cos(a)*sin(c_ab)-2*sin(a)*cos(c_ab);\n const num = (sqrt(2)*sin(a)*sin(c_ab)+cos(a)*(cos(c_ab)-1));\n const sol = solve_sincos(1, num/denom, 0);\n d = Math.max(sol[0], sol[1]); // <-- this gets ugly; but how to choose correctly?\n }\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11069,"value":"md`### Maxima code used`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11068,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2030,"value":"md`## Implementation details`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11703,"value":"function furthest_away (vs, w) {\n return _.maxBy(vs, v => dist(v, w));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11693,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11691,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11686,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9436,"value":"fmt = d3.format('.3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8853,"value":"constrain = (x, min, max) => Math.max(Math.min(x, max), min)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10334,"value":"function angle_clockwise_dist (a, b) {\n return (b-a+4*PI) % (2*PI);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10712,"value":"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9381,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11822,"value":"md`It's actually quite hard to get THREE / WebGL to render a nice simple outlined-paper version of the origami model... (1) WebGL won't antialias lines; (2) It's hard to get the lines on the right side of the paper in the case of valley folds.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11775,"value":"threedraw2(pixels.map(o => o.geometry), this) // reuses the THREE rendering context","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11772,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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 \n const mesh = createMultiMaterialObject(geometry, [fmaterial, bmaterial]);\n */\n const mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }));\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10471,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8540,"value":"dot = (v,w) => v.map((_,i) => v[i]*w[i]).reduce((a,b) => a+b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10716,"value":"function mirror (normal = [1,0,0], origin = [0,0,0]) {\n normal = glm.vec3.normalize([0,0,0], normal);\n return function mirror_inner (data) {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9576,"value":"normalize = v => glm.vec3.normalize([0,0,0],v)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8219,"value":"len = v => Math.hypot(...v)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"dist = glm.vec3.dist","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11026,"value":"mid = (u, v) => add(u, scale(.5, sub(v, u)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10696,"value":"function translate (by = [0,0,0]) {\n return function translate_inner (d) {\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"sub = (v,w) => v.map((_,i) => v[i]-w[i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"add = (v,w) => v.map((_,i) => v[i]+w[i])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"rad = deg => deg * Math.PI/180","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1888,"value":"deg = rad => rad * 180/Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4452,"value":"function gcd (a, b) {\n return !b ? a : gcd(b, a % b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5108,"value":"cos = Math.cos","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5110,"value":"sin = Math.sin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5114,"value":"tan = Math.tan","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5112,"value":"acos = Math.acos","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5116,"value":"asin = Math.asin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10492,"value":"atan2v = ([u,v]) => Math.atan2(v,u)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10490,"value":"atan2 = Math.atan2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5118,"value":"atan = Math.atan","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5123,"value":"pow = Math.pow","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5176,"value":"sqrt = Math.sqrt","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5281,"value":"abs = Math.abs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5194,"value":"PI = Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7061,"value":"import { wrap_svg_downloadable, toggle, bgrid, mapinputdata } from '@kelleyvanevert/little-things'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3942,"value":"html`[KaTeX styling]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11689,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"glm = require('gl-matrix@2.4.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"import { slider, button, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"_ = require('lodash@4.17.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9335,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"