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

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

@ -1,4 +1,5 @@
<html>
<head>
<script src="three.js"></script>
@ -138,4 +139,5 @@
<button onclick="toggleDirectionalLight();">DirectionalLight</button>
</div>
</body>
</html>

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

@ -1,4 +1,5 @@
<html>
<head>
<script src="three.js"></script>
@ -13,6 +14,7 @@
// values that we're animating
var mat2hue = 1;
var mat3green = 0;
// animation controller values
var mat2dir = -0.001;
var mat3dir = 0.001;
@ -112,4 +114,5 @@
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

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

@ -1,4 +1,5 @@
<html>
<head>
<script src="three.js"></script>
@ -150,4 +151,5 @@
<button onclick="toggleDirectionalLight();">DirectionalLight</button>
</div>
</body>
</html>

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

@ -1,4 +1,5 @@
<html>
<head>
<script>
@ -41,4 +42,5 @@ function draw() {
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

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

@ -1,7 +1,7 @@
<html>
<head>
<script>
var x = 0, y = 0;
var dx = 4, dy = 5;
var now = Date.now();
@ -18,12 +18,15 @@ function draw() {
// 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)
@ -32,7 +35,9 @@ function draw() {
dy = 5;
else if (y >= 550)
dy = -5;
context.translate(x, y);
// purple rectangle
context.fillStyle = "#CC00FF";
context.fillRect(0, 0, 50, 50);
@ -44,4 +49,5 @@ function draw() {
<body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

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

@ -1,4 +1,5 @@
<html>
<head>
<script>
var boxes = [];
@ -56,4 +57,5 @@ function draw() {
<body onload="attachEvents(); draw();">
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

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

@ -1,4 +1,5 @@
<html>
<head>
<script>
function attachEvents() {
@ -7,23 +8,25 @@ function attachEvents() {
draw(xoffset);
}
}
function 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>
@ -31,4 +34,5 @@ function draw(xoffset) {
<body onload="attachEvents();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

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

@ -1,4 +1,5 @@
<html>
<head>
<script>
var isMouseDown = false;
@ -39,7 +40,8 @@ function draw(xoffset,yoffset) {
<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>
<div id='canvasdiv' style='position:absolute; left:0px; top:0px;'><canvas id="canvas" width="600"
height="600"></canvas></div>
</body>
</html>
</html>