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

28
Abgabe_3/common/objects3D.js
View File

@ -17,6 +17,10 @@ class Object3D
this.SetModelMatrix();
}
getRandomFloat(min, max) {
return Math.random() * (max-min) + min;
}
initBuffers()
{
// Create VBO for positions and activate it
@ -356,7 +360,11 @@ class Insel extends Object3D
this.colors = [];
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();
@ -415,7 +423,11 @@ class River extends Object3D
this.colors = [];
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();
@ -716,7 +728,11 @@ class Tree extends Object3D
this.colors = [];
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();
@ -860,9 +876,11 @@ class Cloud extends Object3D
this.colors = [];
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();
}
}
}

6
Abgabe_3/index.html
View File

@ -19,16 +19,14 @@
0, 0, -1.0100502967834473, -1,
0, 0, -1.0050251483917236, 0);
vfColor = vColor;
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vPosition; //projectionMatrix eig auch
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">#version 300 es
precision mediump float;
in vec4 vfColor;
out vec4 fColor;
@ -44,7 +42,7 @@
<body>
<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.
</canvas>

52
Abgabe_3/main.js
View File

@ -6,11 +6,14 @@ let objects = [];
let lastTimestamp;
let viewMatrix;
const {mat4, mat3, vec3} = glMatrix;
let mouseButtonDown = false;
let horizontalVal = 0;
let verticalVal = 0;
function main() {
// Get canvas and setup WebGL context
const canvas = document.getElementById("gl-canvas");
const canvas = document.getElementById("gl-canvas");
gl = canvas.getContext('webgl2');
// Configure viewport
@ -72,11 +75,14 @@ function main() {
objects.push(cloud);
document.body.addEventListener("keydown", move);
document.body.addEventListener("mousemove", mouseMoveEvent);
document.body.addEventListener("mousedown", mouseDownEvent);
document.body.addEventListener("mouseup", mouseUpEvent);
window.requestAnimationFrame(render);
};
function move(e)
function move(e)
{
if (e.keyCode == '87') //w
{
@ -102,6 +108,46 @@ function move(e)
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)
{
//TODO: in Übungen
@ -113,7 +159,7 @@ function render(timestamp)
{
lastTimestamp = timestamp;
}
const elapsed = timestamp - lastTimestamp;
for (var i = 0; i < objects.length; i++)