brulijam/Interactive_Computer_Graphic_Stuff
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented looking around horizontally; Randomized colors for Objects

Browse Source
This commit is contained in:
Julian Brammer 2023-11-28 01:40:26 +01:00
parent 318d6a503e
commit 2b735340ca
3 changed files with 74 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Abgabe_3/common/objects3D.js
View File

@ -17,6 +17,10 @@ class Object3D
this.SetModelMatrix(); this.SetModelMatrix();
} }
getRandomFloat(min, max) {
return Math.random() * (max-min) + min;
}
initBuffers() initBuffers()
{ {
// Create VBO for positions and activate it // Create VBO for positions and activate it
@ -356,7 +360,11 @@ class Insel extends Object3D
this.colors = []; this.colors = [];
for(var i = 0; i < this.positions.length; i += 3) for(var i = 0; i < this.positions.length; i += 3)
{ {
this.colors.push(0.5, 0.5, 0.5, 1); let r = this.getRandomFloat(0.4, 0.7);
let g = this.getRandomFloat(0.4, 0.6);
let b = this.getRandomFloat(0.4, 0.45);
this.colors.push(r, g, b, 1);
} }
this.initBuffers(); this.initBuffers();
@ -415,7 +423,11 @@ class River extends Object3D
this.colors = []; this.colors = [];
for(var i = 0; i < this.positions.length; i += 3) { for(var i = 0; i < this.positions.length; i += 3) {
this.colors.push(0.2, 0.2, 0.8, 1); let r = this.getRandomFloat(0.1, 0.2);
let g = this.getRandomFloat(0.2, 0.6);
let b = this.getRandomFloat(0.6, 0.7);
this.colors.push(r, g, b, 1);
} }
this.initBuffers(); this.initBuffers();
@ -716,7 +728,11 @@ class Tree extends Object3D
this.colors = []; this.colors = [];
for(var i = 0; i < this.positions.length; i += 3) { for(var i = 0; i < this.positions.length; i += 3) {
this.colors.push(0.2, 0.5, 0.0, 1.0); let r = this.getRandomFloat(0.3, 0.4);
let g = this.getRandomFloat(0.4, 0.6);
let b = this.getRandomFloat(0.1, 0.2);
this.colors.push(r, g, b, 1);
} }
this.initBuffers(); this.initBuffers();
@ -860,7 +876,9 @@ class Cloud extends Object3D
this.colors = []; this.colors = [];
for(var i = 0; i < this.positions.length; i += 3) { for(var i = 0; i < this.positions.length; i += 3) {
this.colors.push(0.9, 0.9, 0.9, 1); let gray = this.getRandomFloat(0.8, 0.9);
this.colors.push(gray, gray, gray, 1);
} }
this.initBuffers(); this.initBuffers();

4
Abgabe_3/index.html
View File

@ -19,10 +19,8 @@
0, 0, -1.0100502967834473, -1, 0, 0, -1.0100502967834473, -1,
0, 0, -1.0050251483917236, 0); 0, 0, -1.0050251483917236, 0);
vfColor = vColor; vfColor = vColor;
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vPosition; //projectionMatrix eig auch gl_Position = projectionMatrix * viewMatrix * modelMatrix * vPosition; //projectionMatrix eig auch
} }
</script> </script>
@ -44,7 +42,7 @@
<body> <body>
<h1>Lorem Ipsum</h1> <h1>Lorem Ipsum</h1>
<canvas id="gl-canvas" width="512" height="512"> <canvas id="gl-canvas" width="1024" height="1024">
If you see this, your browser doesn't support WebGL. If you see this, your browser doesn't support WebGL.
</canvas> </canvas>

48
Abgabe_3/main.js
View File

@ -6,11 +6,14 @@ let objects = [];
let lastTimestamp; let lastTimestamp;
let viewMatrix; let viewMatrix;
const {mat4, mat3, vec3} = glMatrix; const {mat4, mat3, vec3} = glMatrix;
let mouseButtonDown = false;
let horizontalVal = 0;
let verticalVal = 0;
function main() { function main() {
// Get canvas and setup WebGL context // Get canvas and setup WebGL context
const canvas = document.getElementById("gl-canvas"); const canvas = document.getElementById("gl-canvas");
gl = canvas.getContext('webgl2'); gl = canvas.getContext('webgl2');
// Configure viewport // Configure viewport
@ -72,6 +75,9 @@ function main() {
objects.push(cloud); objects.push(cloud);
document.body.addEventListener("keydown", move); document.body.addEventListener("keydown", move);
document.body.addEventListener("mousemove", mouseMoveEvent);
document.body.addEventListener("mousedown", mouseDownEvent);
document.body.addEventListener("mouseup", mouseUpEvent);
window.requestAnimationFrame(render); window.requestAnimationFrame(render);
}; };
@ -102,6 +108,46 @@ function move(e)
gl.uniformMatrix4fv(viewLoc, false, viewMatrix); gl.uniformMatrix4fv(viewLoc, false, viewMatrix);
} }
function mouseDownEvent(e) {
if (e.button == 0) {
mouseButtonDown = true;
}
}
function mouseUpEvent(e) {
if (e.button == 0) {
mouseButtonDown = false;
}
}
function mouseMoveEvent(e) {
if (mouseButtonDown) {
let changeHorizontal = e.movementX * 0.01;
let changeVertical = -(e.movementY * 0.01);
let distanceEyeTarget = Math.sqrt((target[0]-eye[0])**2 + (target[1]-eye[1])**2 + (target[2]-eye[2])**2);
//changeHorizontal = 0.00;
//changeVertical = 0.01;
horizontalVal = (horizontalVal + changeHorizontal) % 360;
verticalVal = (verticalVal + changeHorizontal) % 360;
let sinX = (Math.round(((Math.sin(horizontalVal))*100)))/100;
let negCosZ = -(Math.round(((Math.cos(horizontalVal))*100)))/100;
target[0] = sinX*distanceEyeTarget;
target[1] = target[1] + changeVertical*distanceEyeTarget;
target[2] = negCosZ*distanceEyeTarget;
//set the viewMatrix
const viewLoc = gl.getUniformLocation(program, "viewMatrix");
mat4.lookAt(viewMatrix, eye, target, up);
gl.uniformMatrix4fv(viewLoc, false, viewMatrix);
}
//console.log(changeX);
}
function changeView(e) function changeView(e)
{ {
//TODO: in Übungen //TODO: in Übungen