2d:null 2e:["$","title",null,{"children":"Inverse Kinematics (Ongoing...) | John C | Observable"}] 33:T47d,RobotArm.prototype.fabrik = function(target, reset = false, allowedError = 1, maxTries = 999) { if (reset) this.reset(); // starting from the default positions let tries = 0; while (vecMag(vecFromSub(target, this.joints[this.joints.length - 1])) > allowedError && tries < maxTries) { // forward this.joints[this.joints.length - 1] = vecCopy(target); for (let i = this.joints.length - 2; i > -1; --i) { const tar = this.joints[i], anchor = this.joints[i+1]; distanceConstrain(anchor, tar, this.distances[i]) } // backward this.joints[0] = vecCopy(this.fixedPoint); for (let i = 1; i < this.joints.length; i++) { const tar = this.joints[i], anchor = this.joints[i-1]; distanceConstrain(anchor, tar, this.distances[i-1]); } tries++; } //update angles this.angles[0] = vecHeading(vecFromSub(this.joints[1], this.joints[0])); let lastG = this.angles[0]; for (let i = 1; i < this.joints.length; ++i) { let a = vecHeading(vecFromSub(this.joints[i + 1] || target, this.joints[i])); // angle in global coordinate this.angles[i] = modAngle2(a - lastG); lastG = a; } }34:T5f3,p5(s => { let arm; s.setup = function(){ s.createCanvas(400,400); s.background(255); arm = new RobotArm({x: s.width/2, y:s.height/2, z:0}, [50,40,30,20]); drawArm(); } s.draw = function(){ if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { s.background(255); arm.fabrik({x: s.mouseX, y: s.mouseY, z:0}); drawMouse(); drawArm(); } } const drawMouse = () => { s.noFill(); s.stroke(100); s.strokeWeight(3); s.push(); s.translate(s.mouseX, s.mouseY); s.rotate(Math.PI/4); s.line(-5,0, 5,0); s.line(0,-5,0,5); s.pop(); } const drawArm = () => { const radianToDegree = (r) => { return Math.round(r * 180 / Math.PI); } s.textAlign(s.CENTER, s.CENTER); s.textSize(15); for (let i = 0; i < arm.joints.length; ++i) { s.fill(255); s.stroke(0); s.strokeWeight(3); if (i !== arm.joints.length - 1) { const p1 = arm.joints[i], p2 = arm.joints[i + 1]; s.line(p1.x, p1.y, p2.x, p2.y); s.circle(p1.x, p1.y, 10); } else { const p = arm.joints[i]; s.push(); s.translate(p.x, p.y); s.rotate(vecHeading(vecFromSub({x:s.mouseX, y:s.mouseY, z:0}, arm.joints[arm.joints.length - 1]))); s.arc(0,0,10,10,3*Math.PI/8, 13*Math.PI/8, s.PIE); s.pop(); } s.fill(0); s.noStroke(); s.text(radianToDegree(arm.angles[i]), arm.joints[i].x, arm.joints[i].y + 13) } } })35:T8bb,RobotArm.prototype.fabrik2 = function (target, angleConstraints = null, reset = false, allowedError = 1, maxTries = 1) { const ac = angleConstraints || this.angleConstraints; // [[joint0CCW(left),joint0CW(right)]] if (ac === undefined) return this.fabrik(target, reset, allowedError, maxTries); if (reset) this.reset(); let tries = 0; while (vecMag(vecFromSub(target, this.joints[this.joints.length - 1])) > allowedError && tries < maxTries) { const lastJointIdx = this.joints.length - 1; //forward this.globalAngles[lastJointIdx] = modAngle(vecHeading(vecFromSub(target, this.joints[lastJointIdx]))); this.joints[lastJointIdx] = vecCopy(target); for (let i = lastJointIdx - 1; i > -1; --i) { let vec = vecFromSub(this.joints[i], this.joints[i+1]); const currAng = modAngle(vecHeading(vec)); // 0 - 2PI const ref = modAngle(this.globalAngles[i + 1] + Math.PI); const finalAng = constrainAngle(currAng, ref, ac[i+1]); vec = vecFromAngle(finalAng); vecSetMag(vec, this.distances[i]); this.joints[i].x = this.joints[i+1].x + vec.x; this.joints[i].y = this.joints[i+1].y + vec.y; this.joints[i].z = this.joints[i+1].z + vec.z; this.globalAngles[i] = modAngle(finalAng + Math.PI); } //backward this.joints[0] = vecCopy(this.fixedPoint); for (let i = 1; i < this.joints.length; ++i) { let vec = vecFromSub(this.joints[i], this.joints[i-1]); const currAng = modAngle(vecHeading(vec)); // 0 - 2PI const ref = this.globalAngles[i-2] || 0; const finalAng = constrainAngle(currAng, ref, ac[i-1]); vec = vecFromAngle(finalAng); vecSetMag(vec, this.distances[i-1]); this.joints[i].x = this.joints[i-1].x + vec.x; this.joints[i].y = this.joints[i-1].y + vec.y; this.joints[i].z = this.joints[i-1].z + vec.z; this.globalAngles[i-1] = modAngle(finalAng); } this.globalAngles[lastJointIdx] = modAngle(vecHeading(vecFromSub(target, this.joints[lastJointIdx]))); tries++; } //update angles this.angles[0] = this.globalAngles[0]; for (let i = 1; i < this.joints.length; ++i) { this.angles[i] = modAngle2(this.globalAngles[i]-this.globalAngles[i-1]); } }36:T6b1,p5(s => { let arm; s.setup = function(){ s.createCanvas(400,400); s.background(255); arm = new RobotArm({x: s.width/2, y:s.height/2, z:0}, [50,40,30,20]); arm.angleConstraints = [[-1,-1], [Math.PI/4,Math.PI/2], [Math.PI/4,Math.PI/2], [Math.PI/4,Math.PI/2], [-1,-1]]; drawArm(); } s.draw = function(){ if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height && (Math.abs(s.mouseX-s.pmouseX) >0 || Math.abs(s.mouseY-s.pmouseY) > 0)) { s.background(255); arm.fabrik2({x: s.mouseX, y: s.mouseY, z:0}); drawMouse(); drawArm(); } } const drawMouse = () => { s.noFill(); s.stroke(100); s.strokeWeight(3); s.push(); s.translate(s.mouseX, s.mouseY); s.rotate(Math.PI/4); s.line(-5,0, 5,0); s.line(0,-5,0,5); s.pop(); } const drawArm = () => { const radianToDegree = (r) => { return Math.round(r * 180 / Math.PI); } s.textAlign(s.CENTER, s.CENTER); s.textSize(15); for (let i = 0; i < arm.joints.length; ++i) { s.fill(255); s.stroke(0); s.strokeWeight(3); if (i !== arm.joints.length - 1) { const p1 = arm.joints[i], p2 = arm.joints[i + 1]; s.line(p1.x, p1.y, p2.x, p2.y); s.circle(p1.x, p1.y, 10); } else { const p = arm.joints[i]; s.push(); s.translate(p.x, p.y); s.rotate(vecHeading(vecFromSub({x:s.mouseX, y:s.mouseY, z:0}, arm.joints[arm.joints.length - 1]))); s.arc(0,0,10,10,3*Math.PI/8, 13*Math.PI/8, s.PIE); s.pop(); } s.fill(0); s.noStroke(); s.text(radianToDegree(arm.angles[i]), arm.joints[i].x, arm.joints[i].y + 13) } } })37:T421,class RobotArm3D { constructor(ThreeEnv, fixedPoint, segmentLengths, limits){ this.fixedPoint = fixedPoint || new THREE.Vector3(); // should be a Three.js Vector3 object this.ball = new THREE.SphereGeometry(5, 16, 16); this.sphere = new THREE.MeshLambertMaterial("0x999999"); this.joints = []; this.env = ThreeEnv; this.addJoint(ThreeEnv.scene, {x:0,y:0,z:0}, limits[0]); for (let i = 0; i < segmentLengths.length; ++i) { this.addJoint(this.joints[i], {x:0, y:segmentLengths[i], z:0}, limits[i+1]); } } /** @param {Three Object} base @param {Vector3} position: {x, y, z} @param {Array} limits [[]] **/ addJoint(base, position, limits){ let joint = new THREE.Group(); joint.base = base; joint.position.set(position.x, position.y, position.z); joint.ori = new THREE.Vector3(0,1,0); //pointing up joint.limits = limits; this.joints.push(joint); let ball = new THREE.Mesh(this.sphere, this.color); joint.add(ball); ball.position.set(0,0,0); } display(){ } }38:Tb29,class CCDRobotArm{ /** @param {ThreeEnv} ThreeEnv @param {Vector3} fixedPoint @parem {Object[]} segments For each segment, {pos(Vector3), axis(Vector3), limits(Array), boxSize(Vector3), boxPos(Vector3)} **/ constructor(ThreeEnv, fixedPoint, segments) { this.env = ThreeEnv; this.boxGeometry = new THREE.BoxBufferGeometry(1, 1, 1); this.color = new THREE.MeshLambertMaterial({ color: 0x888888 }); this.fixedPoint = fixedPoint; this.joints = []; for (let i = 0; i < segments.length; ++i) { const base = this.joints.length > 0 ? this.joints[this.joints.length - 1]: this.env.scene; this.addJoint(base, segments[i].pos, segments[i].axis, segments[i].limits, segments[i].boxSize, segments[i].boxPos); } this.endEffector = new THREE.Group(); this.joints[this.joints.length - 1].add(this.endEffector); this.endEffector.position.set(0,1,0); } addJoint(base, pos, axis, limits, sizes, boxPos){ let joint = new THREE.Group(); this.base.add(joint); joint.position.set(pos.x, pos.y, pos.z); // the rotation point position joint.axis = new THREE.Vector3(axis.x, axis.y, axis.z); // the rotation axis joint.minLimit = -1 * limits[0]; // CCW joint.maxLimit = limits[1]; // CW this.joints.push(joint); let box = new THREE.Mesh(this.boxGeometry, this.color); box.scale.set(sizes.x, sizes.y, sizes.z); box.position.set(boxPos.x, boxPos.y, boxPos.z); box.castShadow = true; joint.add(box); return joint; } CCDIK(targetPos){ let tipPos = new THREE.Vector3(); let rotation = new THREE.Quaternion(); let quaternionDiff = new THREE.Quaternion(); for (let i = this.joints.length - 1; i > -1; --i) { this.joints[i].updateMatrixWorld(); this.endEffector.getWorldPosition(tipPos); // Rotate toward target let direction = this.joints[i].worldToLocal(tipPos.clone()).normalize(); let targetDirection = this.joints[i].worldToLocal(targetPos.clone()).normalize(); quaternionDiff.setFromUnitVectors(direction, targetDirection); this.joints[i].quaternion.multiply(quaternionDiff); // Find the rotation from here to the parent, and rotate the axis by it... // This ensures that were always rotating with the hinge let inversedQuaternion = this.joints[i].quaternion.inverse(); let parentAxis = this.joints[i].axis.clone.applyQuaternion(inversedQuaternion); quaternionDiff.setFromUnitVectors(this.joints[i].axis, parentAxis); this.joints[i].quaternion.multiply(quaternionDiff); // Clamp the rotation with limitation let clampedRotation = this.joints[i].rotation.toVector3().clampScalar(this.joints[i].minLimit, this.joints[i].maxLimit); this.joints[i].rotation.setFromVector3(clampedRotation); this.joints[i].updateMatrixWorld(); } } }39:Tf0b,class ThreeEnv{ //https://github.com/zalo/zalo.github.io/blob/master/assets/js/IK/Environment.js constructor(w, h){ this.time = new THREE.Clock(); this.lastTimeRendered = 0.0; this.camera = new THREE.PerspectiveCamera(45, 1, 1, 2000); //new THREE.OrthographicCamera(300 / - 2, 300 / 2, 300 / 2, 300 / - 2, 1, 1000); this.scene = new THREE.Scene(); this.isVisible = true; this.orbit = true; this.square = false; this.viewDirty = true; this.initEnv(w, h); } intersecting(entry){ if (entry.isIntersecting) { this.isVisible = true; console.log("Intersecting!"); } else { this.isVisible = false; console.log("Not Intersecting!"); } } initEnv(w, h){ this.camera.position.set(50, 100, 150); this.camera.lookAt(0, 45, 0); this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0xffffff);//0xa0a0a0 this.scene.fog = new THREE.Fog(0xffffff, 200, 600);//0xa0a0a0 var light = new THREE.HemisphereLight(0xffffff, 0x444444); light.position.set(0, 200, 0); this.light2 = new THREE.DirectionalLight(0xbbbbbb); this.light2.position.set(0, 200, 100); this.light2.castShadow = true; this.light2.shadow.camera.top = 180; this.light2.shadow.camera.bottom = - 100; this.light2.shadow.camera.left = - 120; this.light2.shadow.camera.right = 120; this.scene.add(light); this.scene.add(this.light2); //scene.add(new THREE.CameraHelper(light.shadow.camera)); var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })); mesh.rotation.x = - Math.PI / 2; mesh.receiveShadow = true; this.scene.add(mesh); var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000); grid.material.opacity = 0.3; grid.material.transparent = true; this.scene.add(grid); this.ludic = new THREE.Mesh(new THREE.BoxBufferGeometry(10, 10, 10), new THREE.MeshPhongMaterial({ color: 0x3399dd })); this.ludic.position.set(0, 100, 0); this.ludic.castShadow = true; this.scene.add(this.ludic); this.renderer = new THREE.WebGLRenderer({antialias: true }); this.renderer.setPixelRatio(2); var width = w, height = h if (this.square) { width = h; } this.renderer.setSize(width, height); this.renderer.shadowMap.enabled = true; this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); this.draggableObjects = [this.ludic]; this.dragControls = new THREE.DragControls(this.draggableObjects, this.camera, this.renderer.domElement); if (this.orbit) { this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); this.controls.target.set(0, 45, 0); this.controls.panSpeed = 2; this.controls.zoomSpeed = 1; this.controls.screenSpacePanning = true; this.controls.update(); this.controls.addEventListener('change', () => this.viewDirty = true); this.dragControls.addEventListener('dragstart', (data) => { this.controls.enabled = false; data.object._isDragging = true; //if(data.object === this.ludic) { window.location.href = '/yrtemoegcidulbus' } }); this.dragControls.addEventListener('dragend', (data) => { this.controls.enabled = true; data.object._isDragging = false; }); } this.dragControls.addEventListener('drag', () => this.viewDirty = true); //If not on iOS, use the Intersection Observer to see if this is visible this.iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); if (!this.iOS) { this.observer = new IntersectionObserver((entries) => entries.forEach((entry) => this.intersecting(entry))); this.observer.observe(this.renderer.domElement); } } }3a:[] 31:{"id":"d6e4786d0ee9223a","slug":"inverse-kinematics","title":"Inverse Kinematics (Ongoing...)","thumbnail":null,"access_level":"public","create_time":"$D2024-07-22T15:55:52.501Z","update_time":"$D2025-03-18T14:29:19.409Z","view_time":null,"first_public_time":"$D2025-03-18T14:29:28.833Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024"},"version":263,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}],"members":[{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"8a91769c6d3b75ab","slug":"algorithms","title":"Algorithms","owner":{"id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C"}},"type":"notebook","body":{"title":"Inverse Kinematics (Ongoing...)","cells":[{"id":0,"value":"# Inverse Kinematics (Ongoing...)\n\nIn [Procedural Animation 1](../@real-john-cheung/procedural-animation-1) we discussed how can we animate a snake with a chain of distance constraints. That mechanic is also widely use to solve inverse kinematics problems in robotic.\n\nLet's start with a 2D scenario: Imagine we have a robot arm with a few freely rotatable segments, the robot arm is fixed to a point, and we have a target point that the robot arm should reach to. How can we compute the rotation for each joints? The first thing we need to do is to make a mathematical model of the robot arm, in which the chained distance constraints comes in handy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"class RobotArm{\n constructor(fixedPoint, segmentLengths){\n this.fixedPoint = fixedPoint;\n this.joints = [vecCopy(fixedPoint)];\n this.distances = [];\n this.angles = [];\n this.globalAngles = [];\n for (let i = 0; i < segmentLengths.length; ++i) {\n this.distances.push(segmentLengths[i]);\n this.joints.push(vecFromAdd(this.joints[i], {x:segmentLengths[i], y:0, z:0}));\n this.angles.push(0);\n this.globalAngles.push(0);\n }\n this.angles.push(0);\n this.globalAngles.push(0);\n }\n\n reset(){\n for (let i = 1; i < this.joints.length; ++i) {\n this.joints[i] = vecFromAdd(this.joints[i-1], {x:this.distances[i-1], y:0, z:0})\n }\n this.angles.fill(0);\n this.globalAngles.fill(0);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"To solve the inverse kinematics problem with our chained distance constraint, we can use a technique called FABRIK(forward and backward reaching inverse kinematics). The idea is very simple, we will free the arm from the fixed position temporarily and do the following:\n\n1. We pull the robot arm (chain) to the target point by dragging its hand (the loose end), that might move the root of the arm (fixed end) out of its position.\n2. We pull the robot arm back toward the fixed point by dragging its root (the fixed end).\n3. Repeat 1 and 2 until we have a good enough appoximation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"The algorithm works in 3D as well which makes it potentially useful for robotic application in real world. However, most of the robot arms in real world, unlike our ideal mathematical model, do not have the joint that can be freely rotatable in any direction by any angles. To make the code practical, we need to be able to deal with those limitations.\n\nThe first thing we can add is the angle constraint, similar to what we did for out snake animation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"It will be a bit more tricky in 3D as the math for vector heading and relative angle is more complicated, especially for joints that have asymmetrical angle constraints. Luckily, most of 3D libraries like Three.js have those mathematic functions implemented already.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"t1 = new ThreeEnv(600,300)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"{\n while(true){\n t1.renderer.render(t1.scene, t1.camera);\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"t1.renderer.domElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"This looks good, but another common limitation in robotic is in real world most of the robot arms don't have ball joints that have 3 DoFs(Degrees of Freedom). The most common design is the combination of joints that can rotate around one axis. For this kind of model, FABRIK is not efficent at dealing with the strict rotation constrain. Thus, another IK solver, CCDIK (Cyclic Coordinate Descent Inverse Kinematic), is usually used.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"t2 = new ThreeEnv(600,300)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"vecFromAdd = function(v1, v2){\n return {x:v1.x+v2.x, y:v1.y+v2.y, z:v1.z+v2.z}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"vecFromSub = function (v1, v2) {\n return {x:v1.x - v2.x, y:v1.y-v2.y, z:v1.z-v2.z};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"vecCopy = function(v){\n return {x:v.x, y:v.y, z:v.z}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"import {vecMag, vecHeading, distanceConstrain, p5, vecFromAngle, vecSetMag} from \"@real-john-cheung/procedural-animation-1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":" modAngle = (a) => {\n let angle = a;\n while(angle >= Math.PI * 2){\n angle -= Math.PI * 2;\n }\n while(angle < 0){\n angle += Math.PI * 2;\n }\n return angle;\n }\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"modAngle2 = function(ang){\n let a = ang\n while (a < - Math.PI) {\n a += Math.PI * 2;\n }\n while (a >= Math.PI) {\n a -= Math.PI * 2;\n }\n return a\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":" angleDiff = (a1, a2) => {\n const a = modAngle(a1-a2+Math.PI);\n return Math.PI - a;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"constrainAngle = function(ang, ref, cons){\n let a = ang, r = ref, c = cons, d = angleDiff(a,r)\n if (d === 0) return a;\n if (d > 0) {\n if (c[0] < 0 || d < c[0]) return a;\n return modAngle(r - c[0]);\n }\n if (c[1] < 0 || -d < c[1]) return a;\n return modAngle(r+c[1]);\n // if (cons < 0 || Math.abs(d) < cons) return a \n // if (d > cons) return modAngle(r-c);\n // return modAngle(r+c);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n await require(\"three@0.130.0/examples/js/controls/DragControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 32:"$31:body"