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

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<script> <script>
var x = 0, y = 0; var x = 0, y = 0;
var dx = 4, dy = 5; var dx = 4, dy = 5;
var now = Date.now(); var now = Date.now();
@ -18,12 +18,15 @@ function draw() {
// remove previous translation if any // remove previous translation if any
context.save(); context.save();
// over-write previous content, with a grey rectangle // over-write previous content, with a grey rectangle
context.fillStyle = "#DDDDDD"; context.fillStyle = "#DDDDDD";
context.fillRect(0, 0, 600, 600); context.fillRect(0, 0, 600, 600);
// perform movement, and translate to position // perform movement, and translate to position
x += dx * elapsedMs / 16.7; x += dx * elapsedMs / 16.7;
y += dy * elapsedMs / 16.7; y += dy * elapsedMs / 16.7;
if (x <= 0) if (x <= 0)
dx = 4; dx = 4;
else if (x >= 550) else if (x >= 550)
@ -32,7 +35,9 @@ function draw() {
dy = 5; dy = 5;
else if (y >= 550) else if (y >= 550)
dy = -5; dy = -5;
context.translate(x, y); context.translate(x, y);
// purple rectangle // purple rectangle
context.fillStyle = "#CC00FF"; context.fillStyle = "#CC00FF";
context.fillRect(0, 0, 50, 50); context.fillRect(0, 0, 50, 50);
@ -44,4 +49,5 @@ function draw() {
<body onload="draw();"> <body onload="draw();">
<canvas id="canvas" width="600" height="600"></canvas> <canvas id="canvas" width="600" height="600"></canvas>
</body> </body>
</html> </html>

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

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

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

@ -1,4 +1,5 @@
<html> <html>
<head> <head>
<script> <script>
function attachEvents() { function attachEvents() {
@ -7,23 +8,25 @@ function attachEvents() {
draw(xoffset); draw(xoffset);
} }
} }
function draw(xoffset) {
function draw(xoffset) {
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
// remove previous translation if any // remove previous translation if any
context.save(); context.save();
// over-write previous content, with a white rectangle // over-write previous content, with a white rectangle
context.fillStyle = "#FFFFFF"; context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, 300, 300); context.fillRect(0, 0, 300, 300);
// translate based on numerical keypress // translate based on numerical keypress
context.translate(xoffset, 0); context.translate(xoffset, 0);
// purple rectangle // purple rectangle
context.fillStyle = "#CC00FF"; context.fillStyle = "#CC00FF";
context.fillRect(0, 0, 50, 50); context.fillRect(0, 0, 50, 50);
context.restore(); context.restore();
} }
</script> </script>
</head> </head>
@ -31,4 +34,5 @@ function draw(xoffset) {
<body onload="attachEvents();"> <body onload="attachEvents();">
<canvas id="canvas" width="300" height="300"></canvas> <canvas id="canvas" width="300" height="300"></canvas>
</body> </body>
</html> </html>

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

@ -1,4 +1,5 @@
<html> <html>
<head> <head>
<script> <script>
var isMouseDown = false; var isMouseDown = false;
@ -39,7 +40,8 @@ function draw(xoffset,yoffset) {
<body onload="attachEvents(); draw(0,0);"> <body onload="attachEvents(); draw(0,0);">
hello<br> 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> </body>
</html>
</html>