aindreas/uni
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[CT404]: Lint Week 3 lecture examples

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2024-09-27 21:27:30 +01:00
parent 65eb318882
commit 38b9e2f2b2
9 changed files with 572 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-22-lights-examples.html
View File

@ -1,141 +1,143 @@
<html> <html>
<head>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script>
'use strict'
var renderer, scene, camera, orbitcontrols; <head>
var pointLight, pointLightVisible = false;
var ambientLight, ambientLightVisible = false;
var hemisphereLight, hemisphereLightVisible = false;
var directionalLight, directionalLightVisible = false;
function draw() { <script src="three.js"></script>
// create renderer attached to HTML Canvas object <script src="OrbitControls.js"></script>
var c = document.getElementById("canvas"); <script>
renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true }); 'use strict'
// create the scenegraph var renderer, scene, camera, orbitcontrols;
scene = new THREE.Scene(); var pointLight, pointLightVisible = false;
var ambientLight, ambientLightVisible = false;
var hemisphereLight, hemisphereLightVisible = false;
var directionalLight, directionalLightVisible = false;
// create a camera function draw() {
var fov = 75; // create renderer attached to HTML Canvas object
var aspect = 600/600; var c = document.getElementById("canvas");
var near = 0.1; renderer = new THREE.WebGLRenderer({canvas: c, antialias: true});
var far = 1000;
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set(0, 0, 40);
orbitcontrols = new THREE.OrbitControls (camera, c); // create the scenegraph
orbitcontrols.enableDamping = true; scene = new THREE.Scene();
orbitcontrols.dampingFactor = 0.25;
orbitcontrols.enableZoom = true;
orbitcontrols.autoRotate = false;
// point light and wireframe marker to indicate position // create a camera
pointLight = new THREE.PointLight(0xFFFFFF); var fov = 75;
var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2}); var aspect = 600 / 600;
var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5,10,10)); var near = 0.1;
var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial); var far = 1000;
pointLight.add(pointlightmarker); camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
pointLight.position.set(-10, 20, 0); camera.position.set(0, 0, 40);
// ambient light and wireframe marker orbitcontrols = new THREE.OrbitControls(camera, c);
ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity orbitcontrols.enableDamping = true;
var ambientlightmarker = pointlightmarker.clone(); orbitcontrols.dampingFactor = 0.25;
ambientLight.add(ambientlightmarker); orbitcontrols.enableZoom = true;
ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker orbitcontrols.autoRotate = false;
// hemisphere light and wireframe marker // point light and wireframe marker to indicate position
hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity pointLight = new THREE.PointLight(0xFFFFFF);
var hemispherelightmarker = pointlightmarker.clone(); var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
hemisphereLight.add(hemispherelightmarker); var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5, 10, 10));
hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial);
pointLight.add(pointlightmarker);
pointLight.position.set(-10, 20, 0);
// directional light and wireframe marker // ambient light and wireframe marker
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
var directionallightmarker = pointlightmarker.clone(); var ambientlightmarker = pointlightmarker.clone();
directionalLight.add(directionallightmarker); ambientLight.add(ambientlightmarker);
directionalLight.position.set(-10, 15, 0); ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
directionalLight.target.position.set(10, 20, 0);
scene.add(directionalLight.target); // the target object must be in the scene
// args: radius, widthSegments, heightSegments // hemisphere light and wireframe marker
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true}); var hemispherelightmarker = pointlightmarker.clone();
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1); hemisphereLight.add(hemispherelightmarker);
sphere1.position.set(-20,0,0); hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
scene.add(sphere1);
// SMOOTH SHADING is the default setting for MeshLambertMaterial // directional light and wireframe marker
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshLambertMaterial({color: 0xffff00})); directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
sphere2.position.set(0,0,0); var directionallightmarker = pointlightmarker.clone();
scene.add(sphere2); 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
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial // args: radius, widthSegments, heightSegments
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshPhongMaterial({color: 0x0000ff})); // FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
sphere3.position.set(20,0,0); var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading: true});
scene.add(sphere3); var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), material1);
sphere1.position.set(-20, 0, 0);
scene.add(sphere1);
// the "ground" // SMOOTH SHADING is the default setting for MeshLambertMaterial
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00})); var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), new THREE.MeshLambertMaterial({color: 0xffff00}));
scene.add(box); sphere2.position.set(0, 0, 0);
box.position.set(0,-15,0); scene.add(sphere2);
animate(); // 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);
function animate() { // the "ground"
setTimeout(animate, 1000/60); 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);
orbitcontrols.update(); animate();
}
renderer.render(scene, camera); function animate() {
} setTimeout(animate, 1000 / 60);
function togglePointLight() { orbitcontrols.update();
pointLightVisible = !pointLightVisible;
if (pointLightVisible)
scene.add(pointLight);
else
scene.remove(pointLight);
}
function toggleAmbientLight() { renderer.render(scene, camera);
ambientLightVisible = !ambientLightVisible; }
if (ambientLightVisible)
scene.add(ambientLight);
else
scene.remove(ambientLight);
}
function toggleHemisphereLight() { function togglePointLight() {
hemisphereLightVisible = !hemisphereLightVisible; pointLightVisible = !pointLightVisible;
if (hemisphereLightVisible) if (pointLightVisible)
scene.add(hemisphereLight); scene.add(pointLight);
else else
scene.remove(hemisphereLight); scene.remove(pointLight);
} }
function toggleDirectionalLight() { function toggleAmbientLight() {
directionalLightVisible = !directionalLightVisible; ambientLightVisible = !ambientLightVisible;
if (directionalLightVisible) if (ambientLightVisible)
scene.add(directionalLight); scene.add(ambientLight);
else else
scene.remove(directionalLight); scene.remove(ambientLight);
} }
</script>
</head> 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>
<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> </html>

193
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-23-materials-examples.html
View File

@ -1,115 +1,118 @@
<html> <html>
<head>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script>
'use strict'
var renderer, scene, camera, orbitcontrols; <head>
var sphere2material, sphere3material;
var pointLight, directionalLight;
// values that we're animating <script src="three.js"></script>
var mat2hue = 1; <script src="OrbitControls.js"></script>
var mat3green = 0; <script>
// animation controller values 'use strict'
var mat2dir = -0.001;
var mat3dir = 0.001;
function draw() { var renderer, scene, camera, orbitcontrols;
// create renderer attached to HTML Canvas object var sphere2material, sphere3material;
var c = document.getElementById("canvas"); var pointLight, directionalLight;
renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true });
// create the scenegraph // values that we're animating
scene = new THREE.Scene(); var mat2hue = 1;
var mat3green = 0;
// create a camera // animation controller values
var fov = 75; var mat2dir = -0.001;
var aspect = 600/600; var mat3dir = 0.001;
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); function draw() {
orbitcontrols.enableDamping = true; // create renderer attached to HTML Canvas object
orbitcontrols.dampingFactor = 0.25; var c = document.getElementById("canvas");
orbitcontrols.enableZoom = true; renderer = new THREE.WebGLRenderer({canvas: c, antialias: true});
orbitcontrols.autoRotate = false;
// lights // create the scenegraph
pointLight = new THREE.PointLight(0xFFFFFF); scene = new THREE.Scene();
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 // create a camera
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true var fov = 75;
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true, emissive: 0x003300}); var aspect = 600 / 600;
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1); var near = 0.1;
sphere1.position.set(-20,0,0); var far = 1000;
scene.add(sphere1); camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 40);
// SMOOTH SHADING is the default setting for MeshLambertMaterial orbitcontrols = new THREE.OrbitControls(camera, c);
sphere2material = new THREE.MeshLambertMaterial({color: 0xffff00}); orbitcontrols.enableDamping = true;
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), sphere2material); orbitcontrols.dampingFactor = 0.25;
sphere2.position.set(0,0,0); orbitcontrols.enableZoom = true;
scene.add(sphere2); orbitcontrols.autoRotate = false;
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial // lights
sphere3material = new THREE.MeshPhongMaterial({color: 0x0000ff, specular: 0x00ff00, shininess: 100}); pointLight = new THREE.PointLight(0xFFFFFF);
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), sphere3material); pointLight.position.set(-10, 20, 0);
sphere3.position.set(20,0,0); scene.add(pointLight);
scene.add(sphere3); 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
// the "ground" // args: radius, widthSegments, heightSegments
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00})); // FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
scene.add(box); var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading: true, emissive: 0x003300});
box.position.set(0,-15,0); var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), material1);
sphere1.position.set(-20, 0, 0);
scene.add(sphere1);
animate(); // 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);
function animate() { // NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial
setTimeout(animate, 1000/60); 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);
orbitcontrols.update(); // 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 sphere2material between red and yellow using HSL animate();
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 function animate() {
mat3green += mat3dir; setTimeout(animate, 1000 / 60);
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); orbitcontrols.update();
}
</script> // animate sphere2material between red and yellow using HSL
</head> 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>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html> </html>

258
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/Threejs-25-lights-and-shadows.html
View File

@ -1,153 +1,155 @@
<html> <html>
<head>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script>
'use strict'
var renderer, scene, camera, orbitcontrols; <head>
var pointLight, pointLightVisible = false;
var ambientLight, ambientLightVisible = false;
var hemisphereLight, hemisphereLightVisible = false;
var directionalLight, directionalLightVisible = false;
function draw() { <script src="three.js"></script>
// create renderer attached to HTML Canvas object <script src="OrbitControls.js"></script>
var c = document.getElementById("canvas"); <script>
renderer = new THREE.WebGLRenderer({ canvas: c, antialias: true }); 'use strict'
// SHADOW CODE ADDED HERE var renderer, scene, camera, orbitcontrols;
renderer.shadowMap.enabled = true; var pointLight, pointLightVisible = false;
var ambientLight, ambientLightVisible = false;
var hemisphereLight, hemisphereLightVisible = false;
var directionalLight, directionalLightVisible = false;
// create the scenegraph function draw() {
scene = new THREE.Scene(); // create renderer attached to HTML Canvas object
var c = document.getElementById("canvas");
renderer = new THREE.WebGLRenderer({canvas: c, antialias: true});
// create a camera // SHADOW CODE ADDED HERE
var fov = 75; renderer.shadowMap.enabled = true;
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); // create the scenegraph
orbitcontrols.enableDamping = true; scene = new THREE.Scene();
orbitcontrols.dampingFactor = 0.25;
orbitcontrols.enableZoom = true;
orbitcontrols.autoRotate = false;
// point light and wireframe marker to indicate position // create a camera
pointLight = new THREE.PointLight(0xFFFFFF); var fov = 75;
var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2}); var aspect = 600 / 600;
var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5,10,10)); var near = 0.1;
var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial); var far = 1000;
pointLight.add(pointlightmarker); camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
pointLight.position.set(-10, 20, 0); camera.position.set(0, 0, 40);
pointLight.castShadow = true; // SHADOW CODE ADDED HERE
// ambient light and wireframe marker orbitcontrols = new THREE.OrbitControls(camera, c);
ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity orbitcontrols.enableDamping = true;
var ambientlightmarker = pointlightmarker.clone(); orbitcontrols.dampingFactor = 0.25;
ambientLight.add(ambientlightmarker); orbitcontrols.enableZoom = true;
ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker orbitcontrols.autoRotate = false;
// hemisphere light and wireframe marker // point light and wireframe marker to indicate position
hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity pointLight = new THREE.PointLight(0xFFFFFF);
var hemispherelightmarker = pointlightmarker.clone(); var wfMaterial = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2});
hemisphereLight.add(hemispherelightmarker); var markergeometry = new THREE.EdgesGeometry(new THREE.SphereGeometry(0.5, 10, 10));
hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker var pointlightmarker = new THREE.LineSegments(markergeometry, wfMaterial);
pointLight.add(pointlightmarker);
pointLight.position.set(-10, 20, 0);
pointLight.castShadow = true; // SHADOW CODE ADDED HERE
// directional light and wireframe marker // ambient light and wireframe marker
directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.2); // args: color, intensity
var directionallightmarker = pointlightmarker.clone(); var ambientlightmarker = pointlightmarker.clone();
directionalLight.add(directionallightmarker); ambientLight.add(ambientlightmarker);
directionalLight.position.set(-10, 15, 0); ambientLight.position.set(0, 20, 0); // position of ambientLight has no lighting effect, but does affect ambientlightmarker
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 // hemisphere light and wireframe marker
// FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true hemisphereLight = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 0.3); // args: skyColor, groundColor, intensity
var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading:true}); var hemispherelightmarker = pointlightmarker.clone();
var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), material1); hemisphereLight.add(hemispherelightmarker);
sphere1.position.set(-20,0,0); hemisphereLight.position.set(10, 20, 0); // position of hemisphereLight has no lighting effect, but does affect hemispherelightmarker
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 // directional light and wireframe marker
var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshLambertMaterial({color: 0xffff00})); directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // args: color, intensity
sphere2.position.set(0,0,0); var directionallightmarker = pointlightmarker.clone();
scene.add(sphere2); directionalLight.add(directionallightmarker);
sphere2.castShadow = true; // SHADOW CODE ADDED HERE directionalLight.position.set(-10, 15, 0);
sphere2.receiveShadow = true; // SHADOW CODE ADDED HERE 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
// NORMAL-INTERPOLATING SHADING is the default for MeshPhongMaterial // args: radius, widthSegments, heightSegments
var sphere3 = new THREE.Mesh(new THREE.SphereBufferGeometry(7,10,10), new THREE.MeshPhongMaterial({color: 0x0000ff})); // FLAT SHADING is achieved in Threejs using MeshPhongMaterial with flatShading set to true
sphere3.position.set(20,0,0); var material1 = new THREE.MeshPhongMaterial({color: 0xff0000, flatShading: true});
scene.add(sphere3); var sphere1 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), material1);
sphere3.castShadow = true; // SHADOW CODE ADDED HERE sphere1.position.set(-20, 0, 0);
sphere3.receiveShadow = true; // SHADOW CODE ADDED HERE scene.add(sphere1);
sphere1.castShadow = true; // SHADOW CODE ADDED HERE
sphere1.receiveShadow = true; // SHADOW CODE ADDED HERE
// the "ground" // SMOOTH SHADING is the default setting for MeshLambertMaterial
var box = new THREE.Mesh(new THREE.BoxGeometry(60, 5, 60), new THREE.MeshLambertMaterial({color: 0x00ff00})); var sphere2 = new THREE.Mesh(new THREE.SphereBufferGeometry(7, 10, 10), new THREE.MeshLambertMaterial({color: 0xffff00}));
scene.add(box); sphere2.position.set(0, 0, 0);
box.position.set(0,-15,0); scene.add(sphere2);
box.receiveShadow = true; // SHADOW CODE ADDED HERE sphere2.castShadow = true; // SHADOW CODE ADDED HERE
sphere2.receiveShadow = true; // SHADOW CODE ADDED HERE
animate(); // 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
function animate() { // the "ground"
setTimeout(animate, 1000/60); 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
orbitcontrols.update(); animate();
}
renderer.render(scene, camera); function animate() {
} setTimeout(animate, 1000 / 60);
function togglePointLight() { orbitcontrols.update();
pointLightVisible = !pointLightVisible;
if (pointLightVisible)
scene.add(pointLight);
else
scene.remove(pointLight);
}
function toggleAmbientLight() { renderer.render(scene, camera);
ambientLightVisible = !ambientLightVisible; }
if (ambientLightVisible)
scene.add(ambientLight);
else
scene.remove(ambientLight);
}
function toggleHemisphereLight() { function togglePointLight() {
hemisphereLightVisible = !hemisphereLightVisible; pointLightVisible = !pointLightVisible;
if (hemisphereLightVisible) if (pointLightVisible)
scene.add(hemisphereLight); scene.add(pointLight);
else else
scene.remove(hemisphereLight); scene.remove(pointLight);
} }
function toggleDirectionalLight() { function toggleAmbientLight() {
directionalLightVisible = !directionalLightVisible; ambientLightVisible = !ambientLightVisible;
if (directionalLightVisible) if (ambientLightVisible)
scene.add(directionalLight); scene.add(ambientLight);
else else
scene.remove(directionalLight); scene.remove(ambientLight);
} }
</script>
</head> 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>
<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> </html>

78
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1.html
View File

@ -1,44 +1,46 @@
<html> <html>
<head>
<script>
var x=0, y=0; <head>
var dx=4, dy=5; <script>
function draw() {
var canvas = document.getElementById("canvas"); var x = 0, y = 0;
var context = canvas.getContext('2d'); var dx = 4, dy = 5;
// 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 function draw() {
window.setTimeout("draw();",1000/30);
} var canvas = document.getElementById("canvas");
</script> var context = canvas.getContext('2d');
</head>
// 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>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html> </html>

88
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample1_withSmootherAnimation.html
View File

@ -1,47 +1,53 @@
<html> <html>
<head>
<script>
var x=0, y=0; <head>
var dx=4, dy=5; <script>
var now = Date.now(); var x = 0, y = 0;
var dx = 4, dy = 5;
function draw() { var now = Date.now();
// do it all again in 1/60th of a second
window.requestAnimationFrame(draw);
var elapsedMs = Date.now() - now; function draw() {
now = Date.now(); // do it all again in 1/60th of a second
window.requestAnimationFrame(draw);
var canvas = document.getElementById("canvas"); var elapsedMs = Date.now() - now;
var context = canvas.getContext('2d'); now = Date.now();
// remove previous translation if any var canvas = document.getElementById("canvas");
context.save(); var context = canvas.getContext('2d');
// over-write previous content, with a grey rectangle
context.fillStyle="#DDDDDD"; // remove previous translation if any
context.fillRect(0,0,600,600); context.save();
// perform movement, and translate to position
x+=dx*elapsedMs/16.7; // over-write previous content, with a grey rectangle
y+=dy*elapsedMs/16.7; context.fillStyle = "#DDDDDD";
if (x<=0) context.fillRect(0, 0, 600, 600);
dx=4;
else if (x>=550) // perform movement, and translate to position
dx=-4; x += dx * elapsedMs / 16.7;
if (y<=0) y += dy * elapsedMs / 16.7;
dy=5;
else if (y>=550) if (x <= 0)
dy=-5; dx = 4;
context.translate(x,y); else if (x >= 550)
// purple rectangle dx = -4;
context.fillStyle="#CC00FF"; if (y <= 0)
context.fillRect(0,0,50,50); dy = 5;
context.restore(); else if (y >= 550)
} dy = -5;
</script>
</head> 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>
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html> </html>

106
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasAnimationExample2.html
View File

@ -1,59 +1,61 @@
<html> <html>
<head>
<script>
var boxes = [];
function attachEvents() { <head>
document.onmousedown = function(event) { <script>
// adds a new box at the mouse position var boxes = [];
// 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() { function attachEvents() {
var canvas = document.getElementById("canvas"); document.onmousedown = function (event) {
var context = canvas.getContext('2d'); // adds a new box at the mouse position
// step 1: find a spare index in the sparse array
// over-write previous content, with a grey rectangle var idx = Math.floor(Math.random() * 1000);
context.fillStyle="#DDDDDD"; while (typeof boxes[idx] != "undefined")
context.fillRect(0,0,600,600); 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);
}
}
// iterate thru the objects in our sparse array function draw() {
// the for..in construct obtains *indices* rather than *data values* var canvas = document.getElementById("canvas");
for (var idx in boxes) { var context = canvas.getContext('2d');
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 // over-write previous content, with a grey rectangle
window.setTimeout("draw();",1000/30); context.fillStyle = "#DDDDDD";
} context.fillRect(0, 0, 600, 600);
</script>
</head> // 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>
<body onload="attachEvents(); draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html> </html>

62
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithKeyboardExample.html
View File

@ -1,34 +1,38 @@
<html> <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"); <head>
var context = canvas.getContext('2d'); <script>
function attachEvents() {
// remove previous translation if any document.onkeypress = function (event) {
context.save(); var xoffset = 10 * parseInt(String.fromCharCode(event.keyCode || event.charCode));
// over-write previous content, with a white rectangle draw(xoffset);
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();
} function draw(xoffset) {
</script> var canvas = document.getElementById("canvas");
</head> 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>
<body onload="attachEvents();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html> </html>

82
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/canvasWithMouseExample.html
View File

@ -1,45 +1,47 @@
<html> <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"); <head>
var context = canvas.getContext('2d'); <script>
var isMouseDown = false;
// remove previous translation if any function attachEvents() {
context.save(); document.onmousedown = function (event) {
// over-write previous content, with a grey rectangle isMouseDown = true;
context.fillStyle="#DDDDDD"; draw(event.clientX, event.clientY);
context.fillRect(0,0,600,600); }
// translate based on position of mouseclick document.onmouseup = function (event) {
context.translate(xoffset,yoffset); isMouseDown = false;
// purple rectangle }
context.fillStyle="#CC00FF"; document.onmousemove = function (event) {
context.fillRect(-25,-25,50,50); // centred on coord system if (isMouseDown) {
context.restore(); draw(event.clientX, event.clientY);
}
}
}
function draw(xoffset, yoffset) {
} var canvas = document.getElementById("canvas");
</script> var context = canvas.getContext('2d');
</head>
// 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>
<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> </html>

18
year4/semester1/CT404: Graphics & Image Processing/materials/week3/examples/orientation-interpolator.js
View File

@ -11,29 +11,29 @@ function orientationInterpolator(data) {
orientationInterpolator.prototype.getEulerAngles = function() { orientationInterpolator.prototype.getEulerAngles = function() {
var now = Date.now(); var now = Date.now();
var elapsed = now-this.startTime; var elapsed = now - this.startTime;
while (elapsed>=this.data.times[this.keyframe2]) { while (elapsed >= this.data.times[this.keyframe2]) {
this.keyframe1++; this.keyframe1++;
this.keyframe2++; 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]; var timeSinceLastFrame = elapsed - this.data.times[this.keyframe1];
this.startTime = now - timeSinceLastFrame; this.startTime = now - timeSinceLastFrame;
this.keyframe1 = 0; this.keyframe1 = 0;
this.keyframe2 = 1; this.keyframe2 = 1;
elapsed = now-this.startTime; elapsed = now - this.startTime;
} }
} }
var timeBetweenKeyFrames = this.data.times[this.keyframe2] - this.data.times[this.keyframe1]; var timeBetweenKeyFrames = this.data.times[this.keyframe2] - this.data.times[this.keyframe1];
var timeSinceKeyframe1 = elapsed - 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 frame1rot = this.data.angles[this.keyframe1];
var frame2rot = this.data.angles[this.keyframe2]; var frame2rot = this.data.angles[this.keyframe2];
var rot = { var rot = {
x: frame1rot.x*(1-fractionBetweenFrames) + frame2rot.x*fractionBetweenFrames, x: frame1rot.x * (1 - fractionBetweenFrames) + frame2rot.x * fractionBetweenFrames,
y: frame1rot.y*(1-fractionBetweenFrames) + frame2rot.y*fractionBetweenFrames, y: frame1rot.y * (1 - fractionBetweenFrames) + frame2rot.y * fractionBetweenFrames,
z: frame1rot.z*(1-fractionBetweenFrames) + frame2rot.z*fractionBetweenFrames z: frame1rot.z * (1 - fractionBetweenFrames) + frame2rot.z * fractionBetweenFrames
}; };
return rot; return rot;