31:Tc40,container = html`

${renderer.domElement}

${viewof BKG_color} ${viewof Use_BKG_image}
${viewof Grid_color} ${viewof opacity} ${viewof Display_grid}
${viewof Metalness} ${viewof Roughness} ${viewof Environment_intensity}
${viewof Model_color} ${viewof Wireframe} ${viewof UniformColor} ${viewof DisplayCubes}

${viewof animation_loop}

${(disabled == "disabled") ? htl.html`${viewof n}` : htl.html`${viewof position}`}

`;32:T884,

The IRB 120 is a 6-degree-of-freedom (6-DOF) industrial robot developed by ABB. Its structure can be broken down into seven components: Six key blocks corresponding to the robot's joints, plus one end effector.

Base (Joint 1, angle θ₁)— The fixed part of the robot attached to a mounting surface (floor or ceiling). Joint 1 (J1) provides rotation around the vertical axis.
Lower Arm (Joint 2, angle θ₂)— Joint 2 (J2) allows the shoulder rotation of the lower arm, enabling forward and backward pitch movement.
Upper Arm (Joint 3, angle θ₃)— Joint 3 (J3) allows the elbow rotation of the upper arm, providing up and down pitch movement.
Wrist Base (Joint 4, angle θ₄)— This component connects the upper arm to the wrist. Joint 4 (J4) enables the roll movement of the wrist around the arm's axis (wrist pitch).
Wrist Middle (Joint 5, angle θ₅)— Joint 5 (J5) allows the wrist to bend up and down (wrist yaw).
Wrist End (Joint 6, angle θ₆)— Joint 6 (J6) allows the end effector to rotate around the wrist's axis (wrist roll).
End Effector — Attached to the wrist end, the end effector interacts with objects. It can be a gripper or any custom-specific tool.

The arm joints (J1-J3) are responsible for the positioning of the tool, while the wrist joints (J4-J6) control its orientation.

The 3D model embedeed in this notebook consists of seven separate files extracted from a CAD model downloaded from TraceParts. The glTF file format is used here as it is convenient for use with the 3D visualization library Three.js.

33:T411,tex` \qquad T_{01}(\theta_1) = \begin{bmatrix} \cos(\theta_1) & -sin(\theta_1) & 0 & 0 \\ \sin(\theta_1) & cos(\theta_1) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \qquad T_{12}(\theta_2) = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\theta_2) & -sin(\theta_2) & 0 \\ 0 & \sin(\theta_2) & cos(\theta_2) & L_{1} \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \qquad T_{23}(\theta_3) = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos(\theta_3) & -sin(\theta_3) & 0 \\ 0 & \sin(\theta_3) & cos(\theta_3) & L_{2} \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \\ \quad \\ \qquad \textrm{where } L_{1} = {\bf ${(pivotOffset_1/mm_to_inch).toFixed(0)}} \textrm{ mm is the vertical distance from the robot base to Joint 2 (J2).} \\ \qquad \textrm{and } \;\;\;\, L_{2} = {\bf ${((pivotOffset_2 - pivotOffset_1)/mm_to_inch).toFixed(0)}} \textrm{ mm is the distance between Joint 2 (J2) and Joint 3 (J3).} `34:T5af,

The 2D drawing provides useful dimensions (in mm) necessary for the proper animation of the IRB 120 using Three.js. The base part is positioned at the origin of our scene. In the 3D model, the IRB 120 is in its rest position with the components assembled as depicted in the drawing. Therefore, the following offsets of the rotation axes need to be accounted for:

Joint 2 (J2): Vertically offset by ${(pivotOffset_1/mm_to_inch).toFixed(0)} mm.
Joint 3 (J3): Vertically offset by ${(pivotOffset_2/mm_to_inch).toFixed(0)} mm (${(pivotOffset_1/mm_to_inch).toFixed(0)} mm + ${((pivotOffset_2-pivotOffset_1)/mm_to_inch).toFixed(0)} mm).
Joint 4 (J4): Vertically offset by ${(pivotOffset_3/mm_to_inch).toFixed(0)} mm (${(pivotOffset_1/mm_to_inch).toFixed(0)} mm + ${((pivotOffset_2-pivotOffset_1)/mm_to_inch).toFixed(0)} mm + ${((pivotOffset_3-pivotOffset_2)/mm_to_inch).toFixed(0)} mm).
For Joint 5 (J5), we must consider two offsets:
- A vertical offset of ${(pivotOffset_4/mm_to_inch).toFixed(0)} mm (same as J4).
- A horizontal offset of ${(Math.abs(pivotOffset_5)/mm_to_inch).toFixed(0)} mm.
To rotate the end effector, we need to account for the vertical offset of Joint 6 (J6), which is ${(pivotOffset_6/mm_to_inch).toFixed(0)} mm (same as J4).

35:T2ce9,scene = { // Initialize the scene const scene = new THREE.Scene(); scene.background = new THREE.Color(BKG_color); if (!renderer) { let renderer = new THREE.WebGLRenderer(); } // Initialize lights const point = new THREE.PointLight(0xcccccc); point.position.set(-50, 500, -100); scene.add(point); const ambient = new THREE.AmbientLight(0xffffff); scene.add(ambient); // Grid const gridHelper = new THREE.GridHelper(200, 50, Grid_color, Grid_color); if(Display_grid) { gridHelper.material.transparent = true; gridHelper.material.opacity = opacity; scene.add(gridHelper); // const axesHelper = new THREE.AxesHelper( 15 ); // scene.add( axesHelper ); } // load a backround image if(Use_BKG_image) { const textureBKG = new THREE.TextureLoader().load(await textureBackground); scene.background = textureBKG; } // Load the environment map const loadEnvironmentMap = (url) => { return new Promise((resolve, reject) => { mapLoader.load(url, (texture) => { texture.mapping = THREE.EquirectangularReflectionMapping; texture.wrapS = THREE.ClampToEdgeWrapping; texture.wrapT = THREE.ClampToEdgeWrapping; texture.minFilter = THREE.LinearFilter; texture.magFilter = THREE.LinearFilter; resolve(texture); }, undefined, reject); }); }; const mapLoader = new THREE.TextureLoader(); const envMap = await loadEnvironmentMap(await environmentMap); // Load the roughness texture for the 3D model const loadRoughnessTexture = (url) => { return new Promise((resolve, reject) => { textureLoader.load(url, (texture) => { // Scale and repeat the roughness texture texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(3, 3); // Adjust these values to control the repetition resolve(texture); }, undefined, reject); }); }; const textureLoader = new THREE.TextureLoader(); const roughnessTexture = await loadRoughnessTexture(await metaRoughnessTexture); // Loaders (glTF format) const loader = new THREE.GLTFLoader(); // Load model function async function loadModel(modelPath) { return new Promise((resolve, reject) => { loader.load( modelPath, (gltf) => { resolve(gltf.scene); }, undefined, (error) => { reject(error); } ); }); } function applyCubeTransformation(H, cube) { // Convert the 2D array to a 1D array in column-major order if (H && H.length === 4 && H[0].length === 4) { // Apply transformations based on the provided logic const matrixArray = [ H[0][0], H[1][0], H[2][0], H[3][0], H[0][1], H[1][1], H[2][1], H[3][1], H[0][2], H[1][2], H[2][2], H[3][2], H[0][3], H[1][3], H[2][3], H[3][3] ]; // Create a Matrix4 object and set its elements const originalMatrix = new THREE.Matrix4(); originalMatrix.fromArray(matrixArray); // Define the axis swap transformation matrix // This transformation is needed because the transformation matrix used a reference coordinate different from that used in three.js const axisSwapMatrixArray = [ 0, 0, -1, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1 ]; const axisSwapMatrix = new THREE.Matrix4(); axisSwapMatrix.fromArray(axisSwapMatrixArray); const transformedMatrix = new THREE.Matrix4(); transformedMatrix.multiplyMatrices(axisSwapMatrix, originalMatrix); cube.applyMatrix4(transformedMatrix); // Extract the translation components from the transformed matrix const translationX = transformedMatrix.elements[12]; // Translation along x-axis const translationY = transformedMatrix.elements[13]; // Translation along y-axis const translationZ = transformedMatrix.elements[14]; // Translation along z-axis // Apply the translation to the cube's position cube.position.set(translationX, translationY, translationZ); // Extract the rotation components and convert to Euler angles const rotationMatrix = new THREE.Matrix4(); rotationMatrix.extractRotation(transformedMatrix); const euler = new THREE.Euler(); euler.setFromRotationMatrix(rotationMatrix); // Apply the rotation to the cube's rotation cube.rotation.x = euler.x; cube.rotation.y = euler.y; cube.rotation.z = euler.z; } else { console.error('Transformation matrix H is invalid:', H); } } // Define variables to store loaded models and groups let baseModel, lowerArmGroup, lowerArmModel, upperArmGroup, upperArmModel, wristBaseGroup, wristBaseModel, wristMiddleGroup, wristMiddleModel, wristEndGroup, wristEndModel, endEffectorGroup, endEffectorModel; let cubeA, cubeB; let modelsLoaded = false; // Function to load all robot parts and set up hierarchy const loadRobotModels = async () => { try { // Load models if not already loaded if (!modelsLoaded) { // Load models const models = await Promise.all([ loadModel(paths.base), loadModel(paths.lowerArm), loadModel(paths.upperArm), loadModel(paths.wristBase), loadModel(paths.wristMiddle), loadModel(paths.wristEnd), loadModel(paths.endEffector), loadModel(cubes.cubeA), loadModel(cubes.cubeB) ]); // Destructure loaded models [baseModel, lowerArmModel, upperArmModel, wristBaseModel, wristMiddleModel, wristEndModel, endEffectorModel, cubeA, cubeB] = models; // Add cubes to the scene if(DisplayCubes) { scene.add(cubeA); scene.add(cubeB); } // Create groups for hierarchical pivoting lowerArmGroup = new THREE.Group(); lowerArmGroup.add(lowerArmModel); upperArmGroup = new THREE.Group(); wristBaseGroup = new THREE.Group(); wristMiddleGroup = new THREE.Group(); wristEndGroup = new THREE.Group(); endEffectorGroup = new THREE.Group(); // Set up hierarchy according to robot's structure baseModel.add(lowerArmGroup); lowerArmGroup.add(upperArmGroup); upperArmGroup.add(upperArmModel); upperArmModel.add(wristBaseGroup); wristBaseGroup.add(wristBaseModel); wristBaseModel.add(wristMiddleGroup); wristMiddleGroup.add(wristMiddleModel); wristMiddleModel.add(wristEndGroup); wristEndGroup.add(wristEndModel); wristEndModel.add(endEffectorGroup); endEffectorGroup.add(endEffectorModel); // Add base to the scene scene.add(baseModel); baseModel.traverse(function (child) { if (child.isMesh) { if(Wireframe){ if(UniformColor) { child.material.color.setStyle(Model_color); } child.material.wireframe = true; child.material.transparent = true; child.material.opacity = 0.1; } else { child.material.wireframe = false; child.material.opacity = 1; if(UniformColor) { child.material.color.setStyle(Model_color); } child.material.transparent = true; child.material.roughness = Roughness; child.material.metalness = Metalness; child.material.roughnessMap = roughnessTexture; // Apply the roughness texture if(Environment_intensity>0) { child.material.envMap = envMap; // Assign Equirectangular environment map child.material.envMapIntensity = Environment_intensity; // Intensity of environment map reflection child.material.reflectivity = 1 - Roughness; // Reflectivity (0 to 1) } } } }); // Set modelsLoaded to true to indicate that models have been loaded modelsLoaded = true; } } catch (error) { console.error('An error occurred while loading the robot models:', error); } }; // Function to apply transformations based on angles and pivot offsets const applyTransformations = () => { if (modelsLoaded) { // Apply the transformation to the cubes applyCubeTransformation(T06_A, cubeA); applyCubeTransformation(T06_B, cubeB); // Rotate lower arm group lowerArmGroup.rotation.y = THREE.MathUtils.degToRad(theta_1); // Rotate upper arm group upperArmGroup.position.y = pivotOffset_1; upperArmGroup.rotation.z = THREE.MathUtils.degToRad(theta_2); upperArmModel.position.y = -pivotOffset_1; // Rotate wrist base group wristBaseGroup.position.y = pivotOffset_2; wristBaseGroup.rotation.z = THREE.MathUtils.degToRad(theta_3); wristBaseModel.position.y = -pivotOffset_2; // Rotate wrist middle group wristMiddleGroup.position.y = pivotOffset_3; wristMiddleGroup.rotation.x = THREE.MathUtils.degToRad(theta_4); wristMiddleModel.position.y = -pivotOffset_3; // Rotate wrist end group wristEndGroup.position.y = pivotOffset_4; wristEndGroup.position.x = pivotOffset_5; wristEndGroup.rotation.z = THREE.MathUtils.degToRad(theta_5); wristEndModel.position.y = -pivotOffset_4; wristEndModel.position.x = -pivotOffset_5; // Rotate end effector group endEffectorGroup.position.y = pivotOffset_6; endEffectorGroup.rotation.x = THREE.MathUtils.degToRad(theta_6); endEffectorModel.position.y = -pivotOffset_6; } }; var theta_1 = position == "A"? theta_1_A: theta_1_B; var theta_2 = position == "A"? theta_2_A: theta_2_B; var theta_3 = position == "A"? theta_3_A: theta_3_B; var theta_4 = position == "A"? theta_4_A: theta_4_B; var theta_5 = position == "A"? theta_5_A: theta_5_B; var theta_6 = position == "A"? theta_6_A: theta_6_B; // Function to update theta with smooth behavior function updateTheta(theta_A, theta_B) { let progress = step / n; let phase = (progress < 0.5) ? 2 * progress : 2 * (1 - progress); let easingValue = 3 * Math.pow(phase,2) - 2 * Math.pow(phase,3); let theta = theta_A + (theta_B - theta_A) * easingValue; return theta; } // Animation let step = 0; // Initialize step const animate = () => { if(animation_loop) { requestAnimationFrame(animate); theta_1 = updateTheta(theta_1_A,theta_1_B); theta_2 = updateTheta(theta_2_A,theta_2_B); theta_3 = updateTheta(theta_3_A,theta_3_B); theta_4 = updateTheta(theta_4_A,theta_4_B); theta_5 = updateTheta(theta_5_A,theta_5_B); theta_6 = updateTheta(theta_6_A,theta_6_B); // Update step (step > n) ? step = 0 : step += 1; // Reset step after one complete cycle } applyTransformations(); }; // Load all models initially and start animation loop loadRobotModels().then(() => { animate(); renderer.render(scene, camera); }); // Return the scene object return scene; };36:[{"id":"9c02fd33c9204ae3fed4be7bc1040e45de6fe619795d22e713db516cae5e04ddaa2b2f4cf2e636763906706c0c05d2859c8e51d18c28f4b6187552a302723337","href":"https://static.observableusercontent.com/files/9c02fd33c9204ae3fed4be7bc1040e45de6fe619795d22e713db516cae5e04ddaa2b2f4cf2e636763906706c0c05d2859c8e51d18c28f4b6187552a302723337","name":"illustration_YouTube_IRB120.png","type":"image/png","lastModified":1719050129649.637,"size":891530},{"id":"23605acb5aadfcadec1fe4ce35eb552aed85d4002c7e96f3aa9b0d8259d6cce71d1756eaeca92cc85d9e6da1c5972d683a93f411e1f2d9f5b5aded286c412b86","href":"https://static.observableusercontent.com/files/23605acb5aadfcadec1fe4ce35eb552aed85d4002c7e96f3aa9b0d8259d6cce71d1756eaeca92cc85d9e6da1c5972d683a93f411e1f2d9f5b5aded286c412b86","name":"wristMiddle@1.glb","type":"model/gltf-binary","lastModified":1718225709341.525,"size":1081500},{"id":"42a8e3db81f4cf3bed2b6a71fadcf6502f19cb26fa094681c3d8fcbffa11409f81dc8a5faa00fdc0f15a9feb7a1176680ce378c25f456a339e9aaf5b036b1197","href":"https://static.observableusercontent.com/files/42a8e3db81f4cf3bed2b6a71fadcf6502f19cb26fa094681c3d8fcbffa11409f81dc8a5faa00fdc0f15a9feb7a1176680ce378c25f456a339e9aaf5b036b1197","name":"wristEnd@1.glb","type":"model/gltf-binary","lastModified":1718226930880.339,"size":812836},{"id":"45024c1e249d6e47af6320f2e7c51330ef78598f85859270a93ea4a86eb10d9aa25c97e6086c6e1b626849f5a85785526a43419b75b683972efc31dac538d4b6","href":"https://static.observableusercontent.com/files/45024c1e249d6e47af6320f2e7c51330ef78598f85859270a93ea4a86eb10d9aa25c97e6086c6e1b626849f5a85785526a43419b75b683972efc31dac538d4b6","name":"IRB_120_Dimensional_drawing.png","type":"image/png","lastModified":1718275539937.037,"size":69927},{"id":"d1ffb4dd0a168f80e08540a3a32e7ec842ee32d3410caa31ae07201a3d2b6e5392d0baa44fb83d6e109189216d61c7cc3aaa49ed4d3d9318dd406cb253c19e63","href":"https://static.observableusercontent.com/files/d1ffb4dd0a168f80e08540a3a32e7ec842ee32d3410caa31ae07201a3d2b6e5392d0baa44fb83d6e109189216d61c7cc3aaa49ed4d3d9318dd406cb253c19e63","name":"lowerArm@4.glb","type":"model/gltf-binary","lastModified":1718284392186.757,"size":511004},{"id":"bde1a4db831c3d9d3634cf5251d8e8969f05334716dfc92d0cb01edfdd5756bc78d019bfa9a7191ca8bc67ae43f064b24915e4dcdb83a80e819f7b84000edbc3","href":"https://static.observableusercontent.com/files/bde1a4db831c3d9d3634cf5251d8e8969f05334716dfc92d0cb01edfdd5756bc78d019bfa9a7191ca8bc67ae43f064b24915e4dcdb83a80e819f7b84000edbc3","name":"upperArm@2.glb","type":"model/gltf-binary","lastModified":1718284998549.296,"size":679524},{"id":"eba633db8ac909948c87147d97927720d606d39c9134fd08a48c72c5013e1eacc3664acba734ae39af6b9e4b4bfed13e34d75675ee285d6b9e5d618cba4aeda3","href":"https://static.observableusercontent.com/files/eba633db8ac909948c87147d97927720d606d39c9134fd08a48c72c5013e1eacc3664acba734ae39af6b9e4b4bfed13e34d75675ee285d6b9e5d618cba4aeda3","name":"wristBase@5.glb","type":"model/gltf-binary","lastModified":1718286198986.59,"size":808616},{"id":"25d7c9ab497faef4fe522e5d5f854c02187bf19a11e41cfb40a9d2d5d65e9cf1ab5a9668817f7598eab5981dedc6b7dd50177f35fbfa9b1d47f6f9ff1a0c1491","href":"https://static.observableusercontent.com/files/25d7c9ab497faef4fe522e5d5f854c02187bf19a11e41cfb40a9d2d5d65e9cf1ab5a9668817f7598eab5981dedc6b7dd50177f35fbfa9b1d47f6f9ff1a0c1491","name":"endEffector@3.glb","type":"model/gltf-binary","lastModified":1718289893344.169,"size":105388},{"id":"865626488e57366a0c69a869b855c197685a4f08764545e0ec2c90995f0be3c0e077f027a674c061c35b799df070d663995e1e2e4ea90b2310401e669958191f","href":"https://static.observableusercontent.com/files/865626488e57366a0c69a869b855c197685a4f08764545e0ec2c90995f0be3c0e077f027a674c061c35b799df070d663995e1e2e4ea90b2310401e669958191f","name":"a1e09630d937af8a4ad169486c4af5932b4653d5.jpg","type":"image/jpeg","lastModified":1718391333244.922,"size":46151},{"id":"186008db67169a760ef3422d4693ed4a4d53e9cad3f0f3ca93ad976e8f653cfe453f9112f9576ea93ecc24b529507d0a2748bb328421b1f6e0c9cb3c2c8bc438","href":"https://static.observableusercontent.com/files/186008db67169a760ef3422d4693ed4a4d53e9cad3f0f3ca93ad976e8f653cfe453f9112f9576ea93ecc24b529507d0a2748bb328421b1f6e0c9cb3c2c8bc438","name":"metal_roughness_texture.jpg","type":"image/jpeg","lastModified":1718403013529.46,"size":1884609},{"id":"6f726730eef77669dddb1b0a549ec5e8ee7e5f606a7b9a28ad5f43dc1c7939d57a1b47086e9db61bf476cf05022b26c8cb8d4231b84a3368e68c29aa6292ef14","href":"https://static.observableusercontent.com/files/6f726730eef77669dddb1b0a549ec5e8ee7e5f606a7b9a28ad5f43dc1c7939d57a1b47086e9db61bf476cf05022b26c8cb8d4231b84a3368e68c29aa6292ef14","name":"texture_background.PNG","type":"image/png","lastModified":1718409864185.989,"size":1129468},{"id":"85631abcf4ce350c2e0c27e47bc9104223ff14e56dfba12e4b03b4a7611b38ae7b001c440bf4d742928fd6485fa48875bed24223ef7e05943273215896a9ef95","href":"https://static.observableusercontent.com/files/85631abcf4ce350c2e0c27e47bc9104223ff14e56dfba12e4b03b4a7611b38ae7b001c440bf4d742928fd6485fa48875bed24223ef7e05943273215896a9ef95","name":"Cube_xyz@2.glb","type":"model/gltf-binary","lastModified":1718540333638.508,"size":486364},{"id":"e54fef054d4632a959c7b68877685d2fb005317970bddd9c5aa7e5ca429060313cf4eb6fdf47e57e46eed9bbdf07a91a1a8216bd40329d11d516a3d6da05024b","href":"https://static.observableusercontent.com/files/e54fef054d4632a959c7b68877685d2fb005317970bddd9c5aa7e5ca429060313cf4eb6fdf47e57e46eed9bbdf07a91a1a8216bd40329d11d516a3d6da05024b","name":"base@2.glb","type":"model/gltf-binary","lastModified":1718224100681.978,"size":1184364}] 2f:{"title":"ABB's Industrial Robot IRB 120","cells":[{"id":0,"value":"# ABB's Industrial Robot IRB 120\n","pinned":false,"hidden":false,"mode":"md"},{"id":8589,"value":"\n This Observable notebook demonstrates the control of a 3D model of the industrial robot IRB 120 . For those interested in CAD model integration using the JavaScript library Three.js, be sure to check out this other notebook. Here, we take it a step further by offering full control of the robot's 6 axes via a web interface.\n
\n
\n Additionally, a Framework version of this notebook\nis available.\n
","pinned":false,"hidden":false,"mode":"html"},{"id":2721,"value":"{\n // See also: https://observablehq.com/@mbostock/fullscreen-canvas\n return htl.html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4851,"value":"---\n## About the IRB 120","pinned":false,"hidden":false,"mode":"md"},{"id":2682,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":8248,"value":"---\n## Forward kinematics","pinned":false,"hidden":false,"mode":"md"},{"id":8251,"value":"

\n In robotics and computer animation, forward kinematics is used to determine the position and orientation of an end effector based on the joint angles of a mechanism. For this example, we calculate the positions and orientations of two reference cubes using six input angles (θ₁ to θ₆) for each cube. The dimensions of the robot, as provided by the manufacturer (see illustration below), are used in these calculations.\n

\n The transformation matrices for the first three joints are defined as follows:\n

","pinned":false,"hidden":false,"mode":"html"},{"id":8262,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":8298,"value":"

\n The transformation matrix ${tex`T_{01}`} represents the rotation around the vertical axis at Joint 1 (J1). \n
${tex`T_{12}`} represents the rotation around Joint 2 (J2) offset by ${tex`L_1`}.\n
${tex`T_{23}`} represents the rotation around Joint 3 (J3) offset by ${tex`L_2`}.\n

\n Given the IRB 120 robot's 6 degrees of freedom (DOF), the complete transformation matrix ${tex`T_{06}`} is computed from the product of six individual transformation matrices:\n
${tex`\\qquad T_{06} = T_{01}T_{12}T_{23}T_{34}T_{45}T_{56}`}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":8386,"value":"

\n Here are the results for the current positions A and B: \n

","pinned":false,"hidden":false,"mode":"html"},{"id":8360,"value":"tex`\n \\qquad \n T_{06}^{A} = \\begin{bmatrix}\n ${T06_A[0][0].toFixed(3)} & ${T06_A[0][1].toFixed(3)} & ${T06_A[0][2].toFixed(3)} & {\\bf ${(T06_A[0][3]/mm_to_inch).toFixed(1)} } \\\\\n ${T06_A[1][0].toFixed(3)} & ${T06_A[1][1].toFixed(3)} & ${T06_A[1][2].toFixed(3)} & {\\bf ${(T06_A[1][3]/mm_to_inch).toFixed(1)} } \\\\\n ${T06_A[2][0].toFixed(3)} & ${T06_A[2][1].toFixed(3)} & ${T06_A[2][2].toFixed(3)} & {\\bf ${(T06_A[2][3]/mm_to_inch).toFixed(1)} } \\\\\n ${T06_A[3][0].toFixed(0)} & ${T06_A[3][1].toFixed(0)} & ${T06_A[3][2].toFixed(0)} & ${T06_A[3][3].toFixed(0)} \\\\\n \\end{bmatrix} \\qquad \\Rightarrow \\quad x_A = {\\bf ${(T06_A[0][3]/mm_to_inch).toFixed(1)} } \\textrm{ mm, }\n y_A = {\\bf ${(T06_A[1][3]/mm_to_inch).toFixed(1)} } \\textrm{ mm, }\n z_A = {\\bf ${(T06_A[2][3]/mm_to_inch).toFixed(1)} } \\textrm{ mm, }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8410,"value":"tex`\n \\qquad \n T_{06}^{B} = \\begin{bmatrix}\n ${T06_B[0][0].toFixed(3)} & ${T06_B[0][1].toFixed(3)} & ${T06_B[0][2].toFixed(3)} & {\\bf ${(T06_B[0][3]/mm_to_inch).toFixed(1)} } \\\\\n ${T06_B[1][0].toFixed(3)} & ${T06_B[1][1].toFixed(3)} & ${T06_B[1][2].toFixed(3)} & {\\bf ${(T06_B[1][3]/mm_to_inch).toFixed(1)} } \\\\\n ${T06_B[2][0].toFixed(3)} & ${T06_B[2][1].toFixed(3)} & ${T06_B[2][2].toFixed(3)} & {\\bf ${(T06_B[2][3]/mm_to_inch).toFixed(1)} } \\\\\n ${T06_B[3][0].toFixed(0)} & ${T06_B[3][1].toFixed(0)} & ${T06_B[3][2].toFixed(0)} & ${T06_B[3][3].toFixed(0)} \\\\\n \\end{bmatrix} \\qquad \\Rightarrow \\quad x_B = {\\bf ${(T06_B[0][3]/mm_to_inch).toFixed(1)} } \\textrm{ mm, }\n y_B = {\\bf ${(T06_B[1][3]/mm_to_inch).toFixed(1)} } \\textrm{ mm, }\n z_B = {\\bf ${(T06_B[2][3]/mm_to_inch).toFixed(1)} } \\textrm{ mm, }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8414,"value":"

\n These coordinates are to be compared with the dimensional drawing. For example, at rest position (all angles set to 0°), you will find out that the cube is in the following position along the y axis:\n
${tex`\\qquad y_{0} = `} (${(Math.abs(pivotOffset_5)/mm_to_inch).toFixed(0)} \n + ${((Math.abs(pivotOffset_7) - Math.abs(pivotOffset_5))/mm_to_inch - cube_offset).toFixed(0)}) + ${cube_offset}\n = ${(Math.abs(pivotOffset_7)/mm_to_inch - cube_offset).toFixed(0)} + ${cube_offset}\n = ${(Math.abs(pivotOffset_7) /mm_to_inch).toFixed(1)} mm, \n
i.e., the position of the end effector, plus an offset of ${cube_offset} mm.\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2740,"value":"dimensions = md`\n---\n## Dimensional drawing\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2766,"value":"$34","pinned":false,"hidden":false,"mode":"html"},{"id":2742,"value":"

Dimensional drawing of the IRB 120. The values are given in millimeters (mm).

","pinned":false,"hidden":false,"mode":"html"},{"id":8649,"value":"framework = md`\n---\n## Observable Framework\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8653,"value":"

\nConverting this notebook into a framework presented a few subtleties that needed to be overcome, but the final result is quite similar. As a teaser, the following thumbnail links to a video demonstrating the deployment of this computer graphics animation using the Observable Framework.\n

Link to the Framework (Observablehq.cloud)
Link to the video (YouTube.com)

","pinned":false,"hidden":false,"mode":"html"},{"id":8754,"value":"

**Observable Framework** – IRB 120 Industrial Robot: Animation using Three.js and Observable Framework

","pinned":false,"hidden":false,"mode":"html"},{"id":888,"value":"---\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":2812,"value":"### Scene in *Three.js*","pinned":false,"hidden":false,"mode":"md"},{"id":4527,"value":"aspect_ratio = 1.42","pinned":false,"hidden":false,"mode":"ojs"},{"id":4896,"value":"environmentMap = FileAttachment(\"a1e09630d937af8a4ad169486c4af5932b4653d5.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5017,"value":"metaRoughnessTexture = FileAttachment(\"metal_roughness_texture.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5051,"value":"textureBackground = FileAttachment(\"texture_background.PNG\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"THREE = {\n // Import threejs\n const three = await require(\"three@0.139.2\");\n window.THREE = three;\n\n // Import plugins\n await require(\"three@0.139.2/examples/js/controls/OrbitControls.js\").catch((e) => { console.warn(e) });\n await require(\"three@0.139.2/examples/js/loaders/GLTFLoader\").catch((e) => { console.warn(e) });\n\n console.log(three);\n return three;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1929,"value":"// Define paths object: 7 sub-assemblies for the industrial robot IRB 120 \npaths = (async () => {\n const base = await FileAttachment(\"base@2.glb\").url();\n const lowerArm = await (FileAttachment(\"lowerArm@4.glb\").url());\n const upperArm = await (FileAttachment(\"upperArm@2.glb\").url());\n const wristBase = await FileAttachment(\"wristBase@5.glb\").url();\n const wristMiddle = await FileAttachment(\"wristMiddle@1.glb\").url();\n const wristEnd = await FileAttachment(\"wristEnd@1.glb\").url();\n const endEffector = await FileAttachment(\"endEffector@3.glb\").url();\n\n return {\n base,\n lowerArm,\n upperArm,\n wristBase,\n wristMiddle,\n wristEnd,\n endEffector\n };\n})();\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":5161,"value":"// Define two cubes\ncubes = (async () => {\n const cubeA = await FileAttachment(\"Cube_xyz@2.glb\").url();\n const cubeB = await (FileAttachment(\"Cube_xyz@2.glb\").url());\n\n return {\n cubeA,\n cubeB\n };\n})();","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"// Create renderer\nrenderer = {\n \n const renderer = new THREE.WebGLRenderer({\n antialias: true,\n alpha: true,\n });\n renderer.setSize(width-450, (width-450)/aspect_ratio);\n renderer.setPixelRatio(devicePixelRatio);\n\n // Initial controls\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.target.set(0, 15, 0); // Adjust the target position for panning\n\n // Set the maximum zoom levels\n controls.minDistance = 10;\n controls.maxDistance = 100;\n\n // Manually trigger an update of OrbitControls\n controls.update();\n \n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"// Create camera\ncamera = {\n const fov = 30;\n const near = 1;\n const far = 500;\n const camera = new THREE.PerspectiveCamera(fov, aspect_ratio, near, far);\n\n camera.position.set(-70, 5, -10);\n\n return camera;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1777,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"{\n while (true) {\n renderer.render(scene, camera);\n yield null;\n } \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2814,"value":"### Model parameters","pinned":false,"hidden":false,"mode":"md"},{"id":1969,"value":"mm_to_inch = 0.0393701","pinned":false,"hidden":false,"mode":"ojs"},{"id":8226,"value":"cube_offset = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":1974,"value":"pivotOffset_1 = 290*mm_to_inch","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"pivotOffset_2 = pivotOffset_1 + 270*mm_to_inch","pinned":false,"hidden":false,"mode":"ojs"},{"id":2159,"value":"pivotOffset_3 = pivotOffset_2 + 70*mm_to_inch","pinned":false,"hidden":false,"mode":"ojs"},{"id":2232,"value":"pivotOffset_4 = pivotOffset_3","pinned":false,"hidden":false,"mode":"ojs"},{"id":2393,"value":"pivotOffset_5 = -302*mm_to_inch","pinned":false,"hidden":false,"mode":"ojs"},{"id":2799,"value":"pivotOffset_6 = pivotOffset_3","pinned":false,"hidden":false,"mode":"ojs"},{"id":5456,"value":"// Cube defined from its center. It must positioned with an offset\npivotOffset_7 = -(374 + cube_offset) * mm_to_inch","pinned":false,"hidden":false,"mode":"ojs"},{"id":2736,"value":"---\n### User interface","pinned":false,"hidden":false,"mode":"md"},{"id":4223,"value":"disabled = animation_loop ? \"disabled\":\"\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":3929,"value":"disabled_A= animation_loop || position == \"B\" ? \"disabled\":\"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4003,"value":"disabled_B= animation_loop || position == \"A\" ? \"disabled\":\"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":908,"value":"viewof BKG_color = Inputs.color({label: \"Background color\", value: \"#555b62\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5061,"value":"viewof Use_BKG_image = Inputs.toggle({label: \"Use a texture background\", value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4866,"value":"viewof Metalness = Inputs.range([0, 1], {value: 0.6, step: 0.1, label: \"Material metalness\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4872,"value":"viewof Roughness = Inputs.range([0, 1], {value: 0.9, step: 0.05, label: \"Material roughness\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4988,"value":"viewof Environment_intensity = Inputs.range([0, 1], {value: 0.5, step: 0.1, label: \"Environment intensity\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2834,"value":"viewof Model_color = Inputs.color({label: \"Wireframe color / uniform color\", value: \"#b9cdd4\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1454,"value":"viewof Wireframe = Inputs.toggle({label: \"3D model as wireframe\", value: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6417,"value":"viewof DisplayCubes = Inputs.toggle({label: htl.html`Display cubes
in A and B`, value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5032,"value":"viewof UniformColor = Inputs.toggle({label: \"Uniform color\", value: false})","pinned":true,"hidden":false,"mode":"ojs"},{"id":918,"value":"viewof Grid_color = Inputs.color({label: \"Grid color\", value: \"#d53040\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2578,"value":"viewof opacity = Inputs.range([0, 1], {value: 0.6, step: 0.1, label: \"Grid opacity\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"viewof Display_grid = Inputs.toggle({label: \"Grid display\", value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":4025,"value":"viewof n = Inputs.radio(new Map([[\"Very sow\", 1000], [\"Slow\", 500], [\"Medium\", 200], [\"Fast\", 100], [\"Very fast\", 40]]), {value: 100, label: \"Animation speed:\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3711,"value":"viewof animation_loop = Inputs.toggle({label: htl.html`Looped animation? (uncheck to modify values for A and B)`, value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3674,"value":"viewof position = Inputs.radio([\"A\", \"B\"], {label: \"Active position:\", value: \"A\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1815,"value":"viewof theta_1_A = Inputs.range([-165, 165], {value: -50, step: 5, label: htl.html`Rotation θ₁`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3236,"value":"viewof theta_1_B = Inputs.range([-165, 165], {value: 35, step: 5, label: htl.html`Rotation θ₁`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1954,"value":"viewof theta_2_A = Inputs.range([-110, 110], {value: 60, step: 5, label: htl.html`Rotation θ₂`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3238,"value":"viewof theta_2_B = Inputs.range([-110, 110], {value: 35, step: 5, label: htl.html`Rotation θ₂`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2129,"value":"viewof theta_3_A = Inputs.range([-110, 70], {value: -15, step: 5, label: htl.html`Rotation θ₃`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3240,"value":"viewof theta_3_B = Inputs.range([-110, 70], {value: 5, step: 5, label: htl.html`Rotation θ₃`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2148,"value":"viewof theta_4_A = Inputs.range([-160, 160], {value: 0, step: 5, label: htl.html`Rotation θ₄`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3242,"value":"viewof theta_4_B = Inputs.range([-160, 160], {value: -55, step: 5, label: htl.html`Rotation θ₄`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2150,"value":"viewof theta_5_A = Inputs.range([-120, 120], {value: 45, step: 5, label: htl.html`Rotation θ₅`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3244,"value":"viewof theta_5_B = Inputs.range([-120, 120], {value: 80, step: 5, label: htl.html`Rotation θ₅`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2152,"value":"viewof theta_6_A = Inputs.range([-400, 400], {value: 50, step: 5, label: htl.html`Rotation θ₆`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3246,"value":"viewof theta_6_B = Inputs.range([-400, 400], {value: 200, step: 5, label: htl.html`Rotation θ₆`})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5082,"value":"---\n### Forward kinematics \n#### (positioning the cubes in *A* and *B*)","pinned":false,"hidden":false,"mode":"md"},{"id":5090,"value":"// Function to multiply two 4x4 matrices\n// M = M1.M2\nfunction multiplyMatrices4x4(M1, M2) {\n // Initialize a 4x4 result matrix with zeros\n const M = Array.from({ length: 4 }, () => Array(4).fill(0));\n\n // Perform matrix multiplication\n for (let i = 0; i < 4; i++) {\n for (let j = 0; j < 4; j++) {\n for (let k = 0; k < 4; k++) {\n M[i][j] += M1[i][k] * M2[k][j];\n }\n }\n }\n\n return M;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5093,"value":"// Function to create the transformation matrix T01(theta)\nfunction T01(theta) {\n const thetaRadians = theta * (Math.PI / 180);\n const cosTheta = Math.cos(thetaRadians);\n const sinTheta = Math.sin(thetaRadians);\n\n // Define the transformation matrix T01(theta)\n const T = [\n [cosTheta, -sinTheta, 0, 0],\n [sinTheta, cosTheta, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ];\n\n return T;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":6282,"value":"// Function to create the transformation matrix T12(theta)\nT12 = function(theta, pivotOffset) {\n const thetaRadians = theta * (Math.PI / 180);\n const cosTheta = Math.cos(thetaRadians);\n const sinTheta = Math.sin(thetaRadians);\n\n // Define the transformation matrix T12(theta)\n const T = [\n [1, 0, 0, 0],\n [0, cosTheta, -sinTheta, 0],\n [0, sinTheta, cosTheta, pivotOffset],\n [0, 0, 0, 1]\n ];\n\n return T;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5131,"value":"// Function to create the transformation matrix T23(theta)\nfunction T23(theta, pivotOffset) {\n const thetaRadians = theta * (Math.PI / 180);\n const cosTheta = Math.cos(thetaRadians);\n const sinTheta = Math.sin(thetaRadians);\n\n // Define the transformation matrix T23(theta)\n const T = [\n [1, 0, 0, 0],\n [0, cosTheta, -sinTheta, 0],\n [0, sinTheta, cosTheta, pivotOffset],\n [0, 0, 0, 1]\n ];\n\n return T;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6311,"value":"// Function to create the transformation matrix T34(theta)\nT34 = function (theta, pivotOffset) {\n const thetaRadians = theta * (Math.PI / 180);\n const cosTheta = Math.cos(thetaRadians);\n const sinTheta = Math.sin(thetaRadians);\n\n // Define the transformation matrix T34(theta)\n const T = [\n [cosTheta, 0, sinTheta, 0],\n [0, 1, 0, 0],\n [-sinTheta, 0, cosTheta, pivotOffset],\n [0, 0, 0, 1]\n ];\n\n return T;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6316,"value":"// Function to create the transformation matrix T45(theta)\nT45 = function (theta, pivotOffset) {\n const thetaRadians = theta * (Math.PI / 180);\n const cosTheta = Math.cos(thetaRadians);\n const sinTheta = Math.sin(thetaRadians);\n\n // Define the transformation matrix T45(theta)\n const T = [\n [1, 0, 0, 0],\n [0, cosTheta, -sinTheta, pivotOffset],\n [0, sinTheta, cosTheta, 0],\n [0, 0, 0, 1]\n ];\n\n return T;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6321,"value":"// Function to create the transformation matrix T56(theta)\nT56 = function (theta, pivotOffset) {\n const thetaRadians = theta * (Math.PI / 180);\n const cosTheta = Math.cos(thetaRadians);\n const sinTheta = Math.sin(thetaRadians);\n\n // Define the transformation matrix T56(theta)\n const T = [\n [cosTheta, 0, sinTheta, 0],\n [0, 1, 0, pivotOffset],\n [-sinTheta, 0, cosTheta, 0],\n [0, 0, 0, 1]\n ];\n\n return T;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6279,"value":"T01_A = T01(theta_1_A)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6377,"value":"T01_B = T01(theta_1_B)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6284,"value":"T12_A = T12(-theta_2_A, pivotOffset_1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6379,"value":"T12_B = T12(-theta_2_B, pivotOffset_1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6292,"value":"T23_A = T23(-theta_3_A, pivotOffset_2 - pivotOffset_1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":6381,"value":"T23_B = T23(-theta_3_B, pivotOffset_2 - pivotOffset_1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":5138,"value":"T34_A = T34(-theta_4_A, pivotOffset_3 - pivotOffset_2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":6383,"value":"T34_B = T34(-theta_4_B, pivotOffset_3 - pivotOffset_2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":5143,"value":"T45_A = T45(-theta_5_A, -pivotOffset_5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":6385,"value":"T45_B = T45(-theta_5_B, -pivotOffset_5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":5148,"value":"T56_A = T56(-theta_6_A, -pivotOffset_7 + pivotOffset_5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":6387,"value":"T56_B = T56(-theta_6_B, -pivotOffset_7 + pivotOffset_5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":5127,"value":"T02_A = multiplyMatrices4x4(T01_A,T12_A)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6389,"value":"T02_B = multiplyMatrices4x4(T01_B,T12_B)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5135,"value":"T03_A = multiplyMatrices4x4(T02_A,T23_A)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6391,"value":"T03_B = multiplyMatrices4x4(T02_B,T23_B)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5141,"value":"T04_A = multiplyMatrices4x4(T03_A,T34_A)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6393,"value":"T04_B = multiplyMatrices4x4(T03_B,T34_B)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5146,"value":"T05_A = multiplyMatrices4x4(T04_A,T45_A)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6395,"value":"T05_B = multiplyMatrices4x4(T04_B,T45_B)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5150,"value":"T06_A = multiplyMatrices4x4(T05_A,T56_A)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6397,"value":"T06_B = multiplyMatrices4x4(T05_B,T56_B)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}