diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/24_03_Animation_Interaction_Shading_Materials.pdf b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/24_03_Animation_Interaction_Shading_Materials.pdf
new file mode 100644
index 00000000..d72d0148
Binary files /dev/null and b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/24_03_Animation_Interaction_Shading_Materials.pdf differ
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-22-lights-examples.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-22-lights-examples.html
new file mode 100644
index 00000000..35dda3b4
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-22-lights-examples.html	
@@ -0,0 +1,141 @@
+<html>
+ <head>
+  
+  <script src="three.js"></script>
+  <script src="OrbitControls.js"></script>
+  <script>
+    'use strict'
+
+    var renderer, scene, camera, orbitcontrols;
+    var pointLight, pointLightVisible = false;
+    var ambientLight, ambientLightVisible = false;
+    var hemisphereLight, hemisphereLightVisible = false;
+    var directionalLight, directionalLightVisible = false;
+
+    function draw() {
+      // create renderer attached to HTML Canvas object
+      var c = document.getElementById("canvas");
+      renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
+
+      // create the scenegraph 
+      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 );
+      camera.position.set(0, 0, 40);
+
+      orbitcontrols = new THREE.OrbitControls (camera, c);
+      orbitcontrols.enableDamping = true;
+      orbitcontrols.dampingFactor = 0.25;
+      orbitcontrols.enableZoom = true;
+      orbitcontrols.autoRotate = false;
+
+      // point light and wireframe marker to indicate position
+      pointLight = new THREE.PointLight(0xFFFFFF);
+      var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
+      var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5,10,10));
+      var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial); 
+      pointLight.add(pointlightmarker);
+      pointLight.position.set(-10, 20, 0);
+
+      // ambient light and wireframe marker 
+      ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
+      var ambientlightmarker = pointlightmarker.clone();
+      ambientLight.add(ambientlightmarker);
+      ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
+
+      // hemisphere light and wireframe marker 
+      hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
+      var hemispherelightmarker = pointlightmarker.clone();
+      hemisphereLight.add(hemispherelightmarker);
+      hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
+
+      // directional light and wireframe marker
+      directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
+      var directionallightmarker = pointlightmarker.clone();
+      directionalLight.add(directionallightmarker);
+      directionalLight.position.set(-10, 15, 0);
+      directionalLight.target.position.set(10, 20, 0);
+      scene.add(directionalLight.target); // the target object must be in the scene
+
+      // args: radius, widthSegments, heightSegments
+      // FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
+      var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true});
+	    var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1); 
+      sphere1.position.set(-20,0,0);
+      scene.add(sphere1);
+
+      // SMOOTH SHADING is the default setting for MeshLambertMaterial
+	    var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshLambertMaterial({color: 0xffff00}));  
+      sphere2.position.set(0,0,0);
+      scene.add(sphere2);
+
+      // NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
+	    var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshPhongMaterial({color: 0x0000ff}));  
+      sphere3.position.set(20,0,0);
+      scene.add(sphere3);
+
+      // the "ground"
+      var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
+      scene.add(box);
+      box.position.set(0,-15,0);
+
+      animate(); 
+    }
+
+    function animate() {
+      setTimeout(animate, 1000/60);
+
+      orbitcontrols.update();
+
+      renderer.render(scene, camera);
+    }
+
+    function togglePointLight() {
+      pointLightVisible = !pointLightVisible;
+      if (pointLightVisible)
+        scene.add(pointLight);
+      else
+        scene.remove(pointLight);
+    }
+
+    function toggleAmbientLight() {
+      ambientLightVisible = !ambientLightVisible;
+      if (ambientLightVisible)
+        scene.add(ambientLight);
+      else
+        scene.remove(ambientLight);
+    }
+
+    function toggleHemisphereLight() {
+      hemisphereLightVisible = !hemisphereLightVisible;
+      if (hemisphereLightVisible)
+        scene.add(hemisphereLight);
+      else
+        scene.remove(hemisphereLight);
+    }
+
+    function toggleDirectionalLight() {
+      directionalLightVisible = !directionalLightVisible;
+      if (directionalLightVisible) 
+        scene.add(directionalLight);
+      else
+        scene.remove(directionalLight);
+    }
+  </script>
+ </head>
+
+ <body onload="draw();">
+   <canvas id="canvas" width="600" height="600"></canvas>
+   <div style="position:absolute; left:20px; top:20px;">
+    <button onclick="togglePointLight();">PointLight</button>
+    <button onclick="toggleAmbientLight();">AmbientLight</button>
+    <button onclick="toggleHemisphereLight();">HemisphereLight</button>
+    <button onclick="toggleDirectionalLight();">DirectionalLight</button>
+   </div>
+ </body>
+</html>
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-23-materials-examples.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-23-materials-examples.html
new file mode 100644
index 00000000..42e45ca1
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-23-materials-examples.html	
@@ -0,0 +1,115 @@
+<html>
+ <head>
+  
+  <script src="three.js"></script>
+  <script src="OrbitControls.js"></script>
+  <script>
+    'use strict'
+
+    var renderer, scene, camera, orbitcontrols;
+    var sphere2material, sphere3material;
+    var pointLight, directionalLight;
+
+    // values that we're animating
+    var mat2hue = 1;
+    var mat3green = 0;
+    // animation controller values
+    var mat2dir = -0.001;
+    var mat3dir = 0.001;
+
+    function draw() {
+      // create renderer attached to HTML Canvas object
+      var c = document.getElementById("canvas");
+      renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
+
+      // create the scenegraph 
+      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 );
+      camera.position.set(0, 0, 40);
+
+      orbitcontrols = new THREE.OrbitControls (camera, c);
+      orbitcontrols.enableDamping = true;
+      orbitcontrols.dampingFactor = 0.25;
+      orbitcontrols.enableZoom = true;
+      orbitcontrols.autoRotate = false;
+
+      // lights
+      pointLight = new THREE.PointLight(0xFFFFFF);
+      pointLight.position.set(-10, 20, 0);
+      scene.add(pointLight);
+      directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
+      directionalLight.position.set(-10, 15, 0);
+      scene.add(directionalLight);
+      scene.add(directionalLight.target); // the target object must be in the scene
+
+      // args: radius, widthSegments, heightSegments
+      // FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
+      var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true, emissive: 0x003300});
+	    var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1); 
+      sphere1.position.set(-20,0,0);
+      scene.add(sphere1);
+
+      // SMOOTH SHADING is the default setting for MeshLambertMaterial
+      sphere2material = new THREE.MeshLambertMaterial({color: 0xffff00});
+	    var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), sphere2material);  
+      sphere2.position.set(0,0,0);
+      scene.add(sphere2);
+
+      // NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
+      sphere3material = new THREE.MeshPhongMaterial({color: 0x0000ff, specular: 0x00ff00, shininess: 100});
+	    var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), sphere3material);  
+      sphere3.position.set(20,0,0);
+      scene.add(sphere3);
+
+      // the "ground"
+      var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
+      scene.add(box);
+      box.position.set(0,-15,0);
+
+      animate(); 
+    }
+
+    function animate() {
+      setTimeout(animate, 1000/60);
+
+      orbitcontrols.update();
+
+      // animate sphere2material between red and yellow using HSL
+      mat2hue += mat2dir;
+      if (mat2hue<=0) {
+        mat2hue = 0;
+        mat2dir = Math.abs(mat2dir);
+      }
+      else if (mat2hue>=0.2) {
+        mat2hue = 0.2;
+        mat2dir = -Math.abs(mat2dir);
+      }
+      sphere2material.color.setHSL(mat2hue, 1, 0.5);
+
+      // animate sphere3material between red and yellow using RGB
+      mat3green += mat3dir;
+      if (mat3green<=0) {
+        mat3green = 0;
+        mat3dir = Math.abs(mat3dir);
+      }
+      else if (mat3green>=1) {
+        mat3green = 1;
+        mat3dir = -Math.abs(mat3dir);
+      }
+      sphere3material.color.setRGB(1, mat3green, 0);
+
+      renderer.render(scene, camera);
+    }
+  </script>
+ </head>
+
+ <body onload="draw();">
+   <canvas id="canvas" width="600" height="600"></canvas>
+ </body>
+</html>
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-25-lights-and-shadows.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-25-lights-and-shadows.html
new file mode 100644
index 00000000..0dba7c88
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-25-lights-and-shadows.html	
@@ -0,0 +1,153 @@
+<html>
+ <head>
+  
+  <script src="three.js"></script>
+  <script src="OrbitControls.js"></script>
+  <script>
+    'use strict'
+
+    var renderer, scene, camera, orbitcontrols;
+    var pointLight, pointLightVisible = false;
+    var ambientLight, ambientLightVisible = false;
+    var hemisphereLight, hemisphereLightVisible = false;
+    var directionalLight, directionalLightVisible = false;
+
+    function draw() {
+      // create renderer attached to HTML Canvas object
+      var c = document.getElementById("canvas");
+      renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
+
+      // SHADOW CODE ADDED HERE
+      renderer.shadowMap.enabled = true;
+
+      // create the scenegraph 
+      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 );
+      camera.position.set(0, 0, 40);
+
+      orbitcontrols = new THREE.OrbitControls (camera, c);
+      orbitcontrols.enableDamping = true;
+      orbitcontrols.dampingFactor = 0.25;
+      orbitcontrols.enableZoom = true;
+      orbitcontrols.autoRotate = false;
+
+      // point light and wireframe marker to indicate position
+      pointLight = new THREE.PointLight(0xFFFFFF);
+      var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
+      var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5,10,10));
+      var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial); 
+      pointLight.add(pointlightmarker);
+      pointLight.position.set(-10, 20, 0);
+      pointLight.castShadow = true; // SHADOW CODE ADDED HERE
+
+      // ambient light and wireframe marker 
+      ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
+      var ambientlightmarker = pointlightmarker.clone();
+      ambientLight.add(ambientlightmarker);
+      ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
+
+      // hemisphere light and wireframe marker 
+      hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
+      var hemispherelightmarker = pointlightmarker.clone();
+      hemisphereLight.add(hemispherelightmarker);
+      hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
+
+      // directional light and wireframe marker
+      directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
+      var directionallightmarker = pointlightmarker.clone();
+      directionalLight.add(directionallightmarker);
+      directionalLight.position.set(-10, 15, 0);
+      directionalLight.target.position.set(0, 5, 0);
+      scene.add(directionalLight.target); // the target object must be in the scene
+      directionalLight.castShadow = true; // SHADOW CODE ADDED HERE
+
+      // args: radius, widthSegments, heightSegments
+      // FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
+      var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true});
+	    var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1); 
+      sphere1.position.set(-20,0,0);
+      scene.add(sphere1);
+      sphere1.castShadow = true; // SHADOW CODE ADDED HERE
+      sphere1.receiveShadow = true; // SHADOW CODE ADDED HERE
+
+      // SMOOTH SHADING is the default setting for MeshLambertMaterial
+	    var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshLambertMaterial({color: 0xffff00}));  
+      sphere2.position.set(0,0,0);
+      scene.add(sphere2);
+      sphere2.castShadow = true; // SHADOW CODE ADDED HERE
+      sphere2.receiveShadow = true; // SHADOW CODE ADDED HERE
+
+      // NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
+	    var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshPhongMaterial({color: 0x0000ff}));  
+      sphere3.position.set(20,0,0);
+      scene.add(sphere3);
+      sphere3.castShadow = true; // SHADOW CODE ADDED HERE
+      sphere3.receiveShadow = true; // SHADOW CODE ADDED HERE
+
+      // the "ground"
+      var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00}));
+      scene.add(box);
+      box.position.set(0,-15,0);
+      box.receiveShadow = true; // SHADOW CODE ADDED HERE
+
+      animate(); 
+    }
+
+    function animate() {
+      setTimeout(animate, 1000/60);
+
+      orbitcontrols.update();
+
+      renderer.render(scene, camera);
+    }
+
+    function togglePointLight() {
+      pointLightVisible = !pointLightVisible;
+      if (pointLightVisible)
+        scene.add(pointLight);
+      else
+        scene.remove(pointLight);
+    }
+
+    function toggleAmbientLight() {
+      ambientLightVisible = !ambientLightVisible;
+      if (ambientLightVisible)
+        scene.add(ambientLight);
+      else
+        scene.remove(ambientLight);
+    }
+
+    function toggleHemisphereLight() {
+      hemisphereLightVisible = !hemisphereLightVisible;
+      if (hemisphereLightVisible)
+        scene.add(hemisphereLight);
+      else
+        scene.remove(hemisphereLight);
+    }
+
+    function toggleDirectionalLight() {
+      directionalLightVisible = !directionalLightVisible;
+      if (directionalLightVisible) 
+        scene.add(directionalLight);
+      else
+        scene.remove(directionalLight);
+    }
+  </script>
+ </head>
+
+ <body onload="draw();">
+   <canvas id="canvas" width="600" height="600"></canvas>
+   <div style="position:absolute; left:20px; top:20px;">
+    <button onclick="togglePointLight();">PointLight</button>
+    <button onclick="toggleAmbientLight();">AmbientLight</button>
+    <button onclick="toggleHemisphereLight();">HemisphereLight</button>
+    <button onclick="toggleDirectionalLight();">DirectionalLight</button>
+   </div>
+ </body>
+</html>
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1.html
new file mode 100644
index 00000000..1150cd66
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1.html	
@@ -0,0 +1,44 @@
+<html>
+ <head>
+  <script>
+
+var x=0, y=0;
+var dx=4, dy=5;
+  
+function draw() {
+
+  var canvas = document.getElementById("canvas");
+  var context = canvas.getContext('2d');
+  
+    // remove previous translation if any
+  context.save();
+	// over-write previous content, with a grey rectangle
+  context.fillStyle="#DDDDDD";
+  context.fillRect(0,0,600,600);
+    // perform movement, and translate to position
+  x+=dx;
+  y+=dy;
+  if (x<=0)
+	dx=4;
+  else if (x>=550)
+    dx=-4;
+  if (y<=0)
+    dy=5;
+  else if (y>=550)
+    dy=-5;
+  context.translate(x,y);
+    // purple rectangle
+  context.fillStyle="#CC00FF";
+  context.fillRect(0,0,50,50); 
+  context.restore();
+
+    // do it all again in 1/30th of a second
+  window.setTimeout("draw();",1000/30);
+}
+  </script>
+ </head>
+
+ <body onload="draw();">
+   <canvas id="canvas" width="600" height="600"></canvas>
+ </body>
+</html>
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html
new file mode 100644
index 00000000..310190c1
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html	
@@ -0,0 +1,47 @@
+<html>
+ <head>
+  <script>
+
+var x=0, y=0;
+var dx=4, dy=5;
+var now = Date.now();
+  
+function draw() {
+  // do it all again in 1/60th of a second
+  window.requestAnimationFrame(draw);
+
+  var elapsedMs = Date.now() - now;
+  now = Date.now();
+
+  var canvas = document.getElementById("canvas");
+  var context = canvas.getContext('2d');
+  
+    // remove previous translation if any
+  context.save();
+	// over-write previous content, with a grey rectangle
+  context.fillStyle="#DDDDDD";
+  context.fillRect(0,0,600,600);
+    // perform movement, and translate to position
+  x+=dx*elapsedMs/16.7;
+  y+=dy*elapsedMs/16.7;
+  if (x<=0)
+	 dx=4;
+  else if (x>=550)
+    dx=-4;
+  if (y<=0)
+    dy=5;
+  else if (y>=550)
+    dy=-5;
+  context.translate(x,y);
+    // purple rectangle
+  context.fillStyle="#CC00FF";
+  context.fillRect(0,0,50,50); 
+  context.restore();
+}
+  </script>
+ </head>
+
+ <body onload="draw();">
+   <canvas id="canvas" width="600" height="600"></canvas>
+ </body>
+</html>
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample2.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample2.html
new file mode 100644
index 00000000..f680348f
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample2.html	
@@ -0,0 +1,59 @@
+<html>
+ <head>
+  <script>
+var boxes = [];
+
+function attachEvents() {
+	document.onmousedown = function(event) {
+		// adds a new box at the mouse position
+		// step 1: find a spare index in the sparse array
+		var idx=Math.floor(Math.random()*1000);
+		while (typeof boxes[idx]!="undefined")
+			idx=Math.floor(Math.random()*1000);
+		// step 2: create a new box object and add to the array
+		// setting up its data properties
+		boxes[idx]=new Object();
+		boxes[idx].x = event.clientX;
+		boxes[idx].y = event.clientY;
+		var r = Math.floor(Math.random()*256);
+		var g = Math.floor(Math.random()*256);
+		var b = Math.floor(Math.random()*256);
+		boxes[idx].colr = "rgb("+r+","+g+","+b+")";
+		boxes[idx].dy = Math.floor(1+Math.random()*8);
+	}
+}
+
+function draw() {
+  var canvas = document.getElementById("canvas");
+  var context = canvas.getContext('2d');
+ 
+	// over-write previous content, with a grey rectangle
+  context.fillStyle="#DDDDDD";
+  context.fillRect(0,0,600,600);
+
+    // iterate thru the objects in our sparse array
+	// the for..in construct obtains *indices* rather than *data values*
+  for (var idx in boxes) {   
+	var y=boxes[idx].y+boxes[idx].dy; // animate box downwards
+	if (y<600) {
+		context.save();
+		boxes[idx].y=y;
+		context.translate(boxes[idx].x,y);
+		context.fillStyle=boxes[idx].colr;
+		context.fillRect(0,0,20,20);
+		context.restore();
+	}
+	else
+		delete boxes[idx]; // box has passed offscreen so delete it from array
+  }
+
+    // do it all again in 1/30th of a second
+  window.setTimeout("draw();",1000/30);
+}
+  </script>
+ </head>
+
+ <body onload="attachEvents(); draw();">
+   <canvas id="canvas" width="600" height="600"></canvas>
+ </body>
+</html>
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithKeyboardExample.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithKeyboardExample.html
new file mode 100644
index 00000000..bf508024
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithKeyboardExample.html	
@@ -0,0 +1,34 @@
+<html>
+ <head>
+  <script>
+function attachEvents() {
+	document.onkeypress = function(event) {
+		var xoffset=10*parseInt(String.fromCharCode(event.keyCode || event.charCode));
+		draw(xoffset);
+	}
+}
+function draw(xoffset) {
+
+  var canvas = document.getElementById("canvas");
+  var context = canvas.getContext('2d');
+  
+    // remove previous translation if any
+  context.save();
+	// over-write previous content, with a white rectangle
+  context.fillStyle="#FFFFFF";
+  context.fillRect(0,0,300,300);
+    // translate based on numerical keypress
+  context.translate(xoffset,0);
+    // purple rectangle
+  context.fillStyle="#CC00FF";
+  context.fillRect(0,0,50,50);
+  context.restore();
+
+}
+  </script>
+ </head>
+
+ <body onload="attachEvents();">
+   <canvas id="canvas" width="300" height="300"></canvas>
+ </body>
+</html>
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithMouseExample.html b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithMouseExample.html
new file mode 100644
index 00000000..5bc1aa3b
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithMouseExample.html	
@@ -0,0 +1,45 @@
+<html>
+ <head>
+  <script>
+var isMouseDown=false;
+function attachEvents() {
+	document.onmousedown = function(event) {
+		isMouseDown=true;
+		draw(event.clientX, event.clientY);
+	}
+	document.onmouseup = function(event) {
+		isMouseDown=false;
+	}
+	document.onmousemove = function(event) {
+		if ( isMouseDown ) {
+			draw(event.clientX, event.clientY);
+		}
+	}
+}
+function draw(xoffset,yoffset) {
+
+  var canvas = document.getElementById("canvas");
+  var context = canvas.getContext('2d');
+  
+    // remove previous translation if any
+  context.save();
+	// over-write previous content, with a grey rectangle
+  context.fillStyle="#DDDDDD";
+  context.fillRect(0,0,600,600);
+    // translate based on position of mouseclick
+  context.translate(xoffset,yoffset);
+    // purple rectangle
+  context.fillStyle="#CC00FF";
+  context.fillRect(-25,-25,50,50); // centred on coord system
+  context.restore();
+
+}
+  </script>
+ </head>
+
+ <body onload="attachEvents(); draw(0,0);">
+  hello<br>
+   <div id='canvasdiv' style='position:absolute; left:0px; top:0px;'><canvas id="canvas" width="600" height="600"></canvas></div>
+ </body>
+</html>
+
diff --git a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/orientation-interpolator.js b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/orientation-interpolator.js
new file mode 100644
index 00000000..7eaee433
--- /dev/null
+++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/orientation-interpolator.js	
@@ -0,0 +1,41 @@
+
+'use strict'
+
+// class constructor
+function orientationInterpolator(data) {
+    this.startTime = Date.now(); // milliseconds since Jan 1st 1970
+    this.data = data;
+    this.keyframe1 = 0;
+    this.keyframe2 = 1;
+}
+
+orientationInterpolator.prototype.getEulerAngles = function() {
+    var now = Date.now();
+    var elapsed = now-this.startTime;
+    while (elapsed>=this.data.times[this.keyframe2]) {
+        this.keyframe1++;
+        this.keyframe2++;
+        if (this.keyframe2>=this.data.times.length) { // loop back to keyframe 0
+            var timeSinceLastFrame = elapsed - this.data.times[this.keyframe1];
+            this.startTime = now - timeSinceLastFrame;
+            this.keyframe1 = 0;
+            this.keyframe2 = 1;   
+            elapsed = now-this.startTime;        
+        }
+    }
+
+    var timeBetweenKeyFrames = this.data.times[this.keyframe2] - this.data.times[this.keyframe1];
+    var timeSinceKeyframe1 = elapsed - this.data.times[this.keyframe1];
+    var fractionBetweenFrames = timeSinceKeyframe1/timeBetweenKeyFrames;
+    var frame1rot = this.data.angles[this.keyframe1];
+    var frame2rot = this.data.angles[this.keyframe2];
+
+    var rot = {
+        x: frame1rot.x*(1-fractionBetweenFrames) + frame2rot.x*fractionBetweenFrames,
+        y: frame1rot.y*(1-fractionBetweenFrames) + frame2rot.y*fractionBetweenFrames,
+        z: frame1rot.z*(1-fractionBetweenFrames) + frame2rot.z*fractionBetweenFrames
+    };
+
+    return rot;
+};
+
