diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/images/hobbit.jpg b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/images/hobbit.jpg
new file mode 100644
index 00000000..399f99fc
Binary files /dev/null and b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/images/hobbit.jpg differ
diff --git a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html
index 9ef4d260..8983f7be 100644
--- a/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html	
+++ b/year4/semester1/CT404: Graphics & Image Processing/assignments/assignment1/code/task2/index.html	
@@ -1,84 +1,102 @@
+<!DOCTYPE html>
 <html>
 <head>
+    <!-- This code builds on the template availble on Canvas: 'Threejs-20-controllable-desk-lamp.html' -->
     <script src="./three.js"></script>
     <script src="./OrbitControls.js"></script>
     <script>
         'use strict'
 
-        var raycaster, renderer, scene, camera, orbitControls, lightbulb, lampshade;
+        // global variables
+        var renderer, scene, camera, orbitControls;
+        var lightbulb, lampshade, table, movingCube;
+        var cubeSpeed = 0.5;
+        var cubeDirection = new THREE.Vector3(1, 0, 0);
+
         var selectedObject = null;
         var selectableObjects = [];
         var lastMousePos = {x: 0, y: 0};
 
         function draw() {
-            // create renderer attached to HTML Canvas object
+            setUpScene();
+
+            addDeskLamp();
+            addTable();
+
+            addBook();
+            addGlass();
+            addGoldBar();
+
+            addMovingCube();
+
+            animate();
+        }
+
+        function animate() {
+            setTimeout(animate, 1000 / 60);
+            orbitControls.update();
+            moveCube();
+            renderer.render(scene, camera);
+        }
+
+        function setUpScene() {
+            // set up scene
             const canvas = document.getElementById("canvas");
             renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
-
-            // create the scenegraph
+            renderer.shadowMap.enabled = true;
             scene = new THREE.Scene();
 
-            // create a camera
-            var fov = 75;
-            var aspect = 600 / 600;
-            var near = 0.1;
-            var far = 1000;
-            camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+            // add mouse event handlers
+            canvas.onmousedown = handleMouseDown;
+            canvas.onmousemove = handleMouseMove;
+            canvas.onmouseup   = handleMouseUp;
+
+            // add camera
+            camera = new THREE.PerspectiveCamera(75, 600 / 600, 0.1, 1000);
             camera.position.set(-10, 5, -2);
 
+            // add orbit controls
             orbitControls = new THREE.OrbitControls(camera, canvas);
             orbitControls.enableDamping = true;
             orbitControls.dampingFactor = 0.25;
             orbitControls.enableZoom = true;
             orbitControls.autoRotate = false;
 
+            // add ambient light
             const light = new THREE.AmbientLight(0xFFFFFF);
             scene.add(light);
+        }
 
+        // function to add the lamp to the scene
+        function addDeskLamp() {
             // desk lamp base
-            // args: radiusTop, radiusBottom, height, radialSegments
-            var base = new THREE.Mesh(
-                new THREE.CylinderBufferGeometry(1, 1, 0.1, 12),
-                new THREE.MeshLambertMaterial({color: 0xff84a3}));
+            const base = new THREE.Mesh(new THREE.CylinderBufferGeometry(1, 1, 0.1, 12), new THREE.MeshLambertMaterial({color: 0xff84a3}));
             scene.add(base);
-            base.position.set(-5, -2, 0);
+            base.position.set(-5, 0.05, 0);
             base.canTranslate = false; // make base unmovable
 
             // desk lamp first arm piece
-            var arm = new THREE.Mesh(
-                new THREE.CylinderBufferGeometry(0.1, 0.1, 3, 12),
-                new THREE.MeshLambertMaterial({color: 0x84ffa3}));
+            const arm = new THREE.Mesh( new THREE.CylinderBufferGeometry(0.1, 0.1, 3, 12), new THREE.MeshLambertMaterial({color: 0x84ffa3}));
 
-            // since we want to rotate around a point other than the arm's centre,
-            // we can create a pivot point as the parent of the arm, position the
-            // arm relative to that pivot point, and apply rotation on the pivot point
-            var pivot = new THREE.Object3D();
-            pivot.position.set(0, 0, 0); // centre of rotation we want
-            pivot.add(arm); // pivot is parent of arm
-            base.add(pivot); // base is parent of pivot
+            // since we want to rotate around a point other than the arm's centre, we can create a pivot point as the parent of the arm, position the arm relative to that pivot point, and apply rotation on the pivot point
+            const pivot = new THREE.Object3D();
+            pivot.position.set(0, 0, 0);
+            pivot.add(arm);
+            base.add(pivot);
             arm.canRotate = false;
-
-            //    translate arm relative to pivot point
             arm.position.set(0, 1.5, 0);
-            //    rotate pivot point relative to the world
             pivot.rotateOnAxis(new THREE.Vector3(0, 0, 1), -Math.PI / 6);
 
             // second arm piece (consisting of a pivot with a cylinder as its child)
-            var pivot2 = pivot.clone();
+            const pivot2 = pivot.clone();
             pivot.add(pivot2);
-            // rotate the 2nd pivot relative to the 1st pivot (since it's nested)
             pivot2.rotation.z = Math.PI / 3;
-            // translate the 2nd pivot relative to the 1st pivot
             pivot2.position.set(0, 3, 0);
-            var arm2 = pivot2.children[0];
+            const arm2 = pivot2.children[0];
             arm2.canRotate = false;
 
-            // args: radius, height, segments
-            lampshade = new THREE.Mesh(
-                new THREE.ConeBufferGeometry(1, 0.7, 24),
-                new THREE.MeshLambertMaterial({color: 0xff84a3})
-            );
-            var shadePivot = new THREE.Object3D();
+            lampshade = new THREE.Mesh( new THREE.ConeBufferGeometry(1, 0.7, 24), new THREE.MeshLambertMaterial({color: 0xff84a3}) );
+            const shadePivot = new THREE.Object3D();
             pivot2.add(shadePivot); // lampshade pivot is a child of the 2nd arm pivot
             shadePivot.add(lampshade);
             shadePivot.position.set(0, 3, 0);
@@ -86,30 +104,73 @@
             selectableObjects.push(lampshade);
             lampshade.canRotate = true;
 
-            lightbulb = new THREE.PointLight(0xffffff, 1, 70);
+            // add lightbulb
+            lightbulb = new THREE.PointLight(0xffffff, 1, 70);  // point light is the light source type most like a lightbulb: single point, emits light in all directions
             lightbulb.position.set(0, -0.7, 0);
+            lightbulb.castShadow = true;
             shadePivot.add(lightbulb);
-
-            raycaster = new THREE.Raycaster();
-
-            canvas.onmousedown = handleMouseDown;
-            canvas.onmousemove = handleMouseMove;
-            canvas.onmouseup   = handleMouseUp;
-
-            var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x644117}));
-            scene.add(box);
-            box.position.set(0, -5, 0);
-
-            animate();
         }
 
-        function animate() {
-            setTimeout(animate, 1000 / 60);
+        // function to add a table to the scene
+        function addTable() {
+            table = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x644117}));
+            scene.add(table);
+            table.position.set(0, -2.5, 0);
+        }
 
-            orbitControls.update();
+        // function to add a book to the scene
+        function addBook() {
+            const coverGeometry = new THREE.BoxGeometry(6, 1.5, 8);
+            const coverTexture = new THREE.TextureLoader().load('./images/hobbit.jpg');
+            const coverMaterial = new THREE.MeshStandardMaterial({ map: coverTexture });
+            const book = new THREE.Mesh(coverGeometry, coverMaterial);
+            book.position.set(0, 0.75, 5);
+            scene.add(book);
+        }
 
-            // render the scene as seen by the camera
-            renderer.render(scene, camera);
+        // function to add a tapered, transparent glass to the scene
+        function addGlass() {
+            const glassMaterial = new THREE.MeshPhysicalMaterial({
+                color: 0xffffff,
+                opacity: 0.3,
+                transparent: true,
+                reflectivity: 0.8,
+                clearcoat: 1.0,
+                clearcoatRoughness: 0.1
+            });
+
+            const glass = new THREE.Mesh(new THREE.CylinderGeometry(1, 0.7, 3, 32), glassMaterial);
+            glass.position.set(-8, 1.5, 5);
+            scene.add(glass);
+        }
+
+        // function to add a gold bar to the scene
+        function addGoldBar() {
+            const goldMaterial = new THREE.MeshPhongMaterial({
+                color: 0xffd700,
+                specular: 0xaaaaaa,
+                shininess: 30
+            });
+
+            const goldBar = new THREE.Mesh(new THREE.BoxGeometry(2, 1, 1), goldMaterial);
+            goldBar.position.set(-15, 0.5, 3);
+            scene.add(goldBar);
+        }
+
+        // function to add the cube that will be animated moving across the table
+        function addMovingCube() {
+            movingCube = new THREE.Mesh(new THREE.BoxGeometry(4, 4, 4), new THREE.MeshLambertMaterial({color: 0x00ff00}));
+            scene.add(movingCube);
+            movingCube.position.set(0, 2, -5);
+        }
+
+        // function to handle the animation and movement of the cube
+        function moveCube() {
+            movingCube.position.add(cubeDirection.clone().multiplyScalar(cubeSpeed));
+
+            if (movingCube.position.x > 28 || movingCube.position.x < -28) {
+                cubeDirection.x *= -1;
+            }
         }
 
         // handle mouse up events
@@ -119,13 +180,14 @@
             orbitControls.enabled = true;
 
             // find the position of the click
-            let mouseUpX = 2 * (e.clientX - 300) / 600;
-            let mouseUpY = -2 * ((e.clientY - 300) / 600);
+            const mouseUpX = 2 * (e.clientX - 300) / 600;
+            const mouseUpY = -2 * ((e.clientY - 300) / 600);
 
             // send a raycast from the clicked position and check if it intersects with the lampshade
-            let lightswitchRaycaster = new THREE.Raycaster();
+            // while it is technically more memory-efficient to re-use raycasters rather than create new ones, i have chosen to prioritise simplicity as this program is small enough that efficiency does not really matter
+            const lightswitchRaycaster = new THREE.Raycaster();
             lightswitchRaycaster.setFromCamera({x: mouseUpX, y: mouseUpY}, camera);
-            let intersects = lightswitchRaycaster.intersectObject(lampshade);
+            const intersects = lightswitchRaycaster.intersectObject(lampshade);
 
             // if the lampshade was clicked, toggle the lightbulb
             if (intersects.length > 0) {
@@ -134,68 +196,56 @@
         }
 
         function handleMouseDown(e) {
-            // handle mouse-clicks on the canvas
-            // did the user click a mesh?
-            /* note that 0,0 is the centre of the canvas according to WebGL,
-                and the canvas extends from (-1,-1) to (1,1)
-                but 0,0 is the top-left of the canvas according to e.clientX,e.clientY,
-                and the canvas extends from (0,0) to (599,599)
-            */
-
-            var x = 2 * (e.clientX - 300) / 600;
-            var y = -2 * ((e.clientY - 300) / 600);
+            // get coordinates of click
+            const x =  2 * (e.clientX - 300) / 600;
+            const y = -2 * ((e.clientY - 300) / 600);
 
             lastMousePos.x = x;
             lastMousePos.y = y;
 
-            // set up and apply the raycaster (we are returned an array of intersection objects)
-            raycaster.setFromCamera({x: x, y: y}, camera);
-            var intersects = raycaster.intersectObjects(selectableObjects);
+            // find what objects were clicked using a raycaster
+            const mouseDownRaycaster = new THREE.Raycaster();
+            mouseDownRaycaster.setFromCamera({x: x, y: y}, camera);
+            const intersects = mouseDownRaycaster.intersectObjects(selectableObjects);
+
+            // if the raycast intersected with any selectable objects, select the one nearest to the camera (the one visible)
             if (intersects.length > 0) {
                 // disable orbit controls if an object is clicked (so it can be manipulated)
                 orbitControls.enabled = false;
 
-
-                var closestObj, closestDist;
-
-                for (var i = 0; i < intersects.length; i++) {
-                    /*
-                            An intersection has the following properties :
-                                    - object : intersected object (THREE.Mesh)
-                                    - distance : distance from ray start to intersection (number)
-                                    - face : intersected face (THREE.Face3)
-                                    - faceIndex : intersected face index (number)
-                                    - point : intersection point (THREE.Vector3)
-                                    - uv : intersection point in the object's UV coordinates (THREE.Vector2)
-                    */
-
+                // loop through each intersect to find the closest object (the selected one)
+                let closestObj, closestDist;
+                for (let i = 0; i < intersects.length; i++) {
                     if (i == 0 || intersects[i].distance < closestDist) {
                         closestObj = intersects[i].object;
                         closestDist = intersects[i].distance;
                     }
                 }
-
                 selectedObject = closestObj;
             }
-            else
+            else {
                 selectedObject = null;
+            }
         }
 
         function handleMouseMove(e) {
+            // if an object is selected
             if (selectedObject != null) {
-                var x = 2 * (e.clientX - 300) / 600;
-                var y = -2 * ((e.clientY - 300) / 600);
-                // dx,dy is the amount the mouse just moved by in pixels
-                var dx = x - lastMousePos.x;
-                var dy = y - lastMousePos.y;
+                const x = 2 * (e.clientX - 300) / 600;
+                const y = -2 * ((e.clientY - 300) / 600);
 
+                // dx,dy is the amount the mouse just moved by in pixels
+                const dx = x - lastMousePos.x;
+                const dy = y - lastMousePos.y;
+
+                // if the selected object can rotate, rotate it
                 if (selectedObject.canRotate) {
                     // rotate the parent ('pivot') that the object is a child of
                     selectedObject.parent.rotation.x += dx;
                     selectedObject.parent.rotation.z += dy;
                 }
+                // otherwise, if the object can be translated, translate the object
                 else if (selectedObject.canTranslate) {
-                    // translate the object
                     selectedObject.position.x += dx * 4;
                     selectedObject.position.z -= dy * 4;
                 }
@@ -207,8 +257,7 @@
     </script>
 </head>
 <body onload="draw();">
-    <!-- Note that the canvas has been positioned precisely at 0,0 so that mouse positions on the browser
-    are the same as mouse positions on the canvas -->
+    <!-- Note that the canvas has been positioned precisely at 0,0 so that mouse positions on the browser are the same as mouse positions on the canvas -->
     <canvas id="canvas" width="600" height="600" style="position:absolute; left:0px; top:0px"></canvas>
 </body>
 </html>
