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 index 35dda3b4..f5b52495 100644 --- 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 @@ -1,141 +1,143 @@ - - - - - + + - + 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); + } + + + + + +
+ + + + +
+ - - -
- - - - -
- 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 index 42e45ca1..d9022d42 100644 --- 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 @@ -1,115 +1,118 @@ - - - - - + + - + 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); + } + + + + + + - - - 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 index 0dba7c88..c282712b 100644 --- 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 @@ -1,153 +1,155 @@ - - - - - + + - + 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); + } + + + + + +
+ + + + +
+ - - -
- - - - -
- 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 index 1150cd66..b9ce7788 100644 --- a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1.html +++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1.html @@ -1,44 +1,46 @@ - - - + 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); + } + + + + + + - - - 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 index 310190c1..00e0a31a 100644 --- 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 @@ -1,47 +1,53 @@ - - - + 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(); + } + + + + + + - - - 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 index f680348f..c5be2ec8 100644 --- a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample2.html +++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample2.html @@ -1,59 +1,61 @@ - - - + // 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); + } + + + + + + - - - 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 index bf508024..2e2d7fe5 100644 --- a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithKeyboardExample.html +++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithKeyboardExample.html @@ -1,34 +1,38 @@ - - - + 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(); + } + + + + + + - - - 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 index 5bc1aa3b..79a81e59 100644 --- a/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithMouseExample.html +++ b/year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithMouseExample.html @@ -1,45 +1,47 @@ - - - + 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(); + + } + + + + + hello
+
+ - - hello
-
- - 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 index 7eaee433..2ff312f9 100644 --- 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 @@ -11,29 +11,29 @@ function orientationInterpolator(data) { orientationInterpolator.prototype.getEulerAngles = function() { var now = Date.now(); - var elapsed = now-this.startTime; - while (elapsed>=this.data.times[this.keyframe2]) { + 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 + 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; + 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 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 + 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;