HSH
/
cg1-visualisations
mirror of https://gitlab.gwdg.de/lernanwendungen/cg1/cg1_tut_mdi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Animation class

This commit is contained in:
Dennis Allerkamp 2025-05-10 11:21:12 +02:00
parent 04c1a3f5f0
commit 420c0fe1c8
1 changed files with 53 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/script.js
View File

@ -1,5 +1,34 @@
"use strict"; "use strict";
class Animation {
constructor() {
this.time = 0.0;
}
interpolation(i) {
if (i > this.time) {
return 0.0;
}
if (i+1 > this.time) {
return this.time - Math.floor(this.time);
}
return 1.0;
}
isZAxisInverted() {
return (this.time <= 5.0);
}
isCameraDrawn() {
return (this.time <= 2.0);
}
isOriginCubeDrawn() {
return (this.time != 0.0 && this.time < 5.0);
}
}
let cv, gl; let cv, gl;
let program; let program;
@ -25,14 +54,11 @@ let cameraVertexBuffer;
let lastFrame = Date.now(); let lastFrame = Date.now();
let t = 0.0; let animation = new Animation();
let interpolate = [0, 0, 0, 0, 0, 0];
let displayMatricesVirtually = true; let displayMatricesVirtually = true;
let virtualRealInterpolation = 1; let virtualRealInterpolation = 1;
let invertZAxis = true;
let cameraPitch = 0.565; let cameraPitch = 0.565;
let cameraYaw = 0.375; let cameraYaw = 0.375;
let cameraDistance = 4; let cameraDistance = 4;
@ -65,29 +91,9 @@ async function init() {
// input handling // input handling
document.getElementById("interpolate").addEventListener("input", (e) => { document.getElementById("interpolate").addEventListener("input", (e) => {
t = 6.0 - e.target.value; animation.time = 6.0 - e.target.value;
if (t <= 2.0) {
invertZAxis = false;
}
else if (t <= 5.0) {
invertZAxis = false;
}
else {
invertZAxis = true;
}
for (let i = 0; i < 6; ++i) { for (let i = 0; i < 6; ++i) {
let v; document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (animation.interpolation(i) * 100) + "%");
if (i > t) {
v = 0.0;
}
else if (i+1 > t) {
v = t - Math.floor(t);
}
else {
v = 1.0;
}
interpolate[i] = v;
document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (v * 100) + "%");
} }
}); });
document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => { document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {
@ -455,16 +461,11 @@ function updateStats(deltaTime) {
frameCount = 0; frameCount = 0;
} }
let hue = 0;
async function draw() { async function draw() {
let now = Date.now(); let now = Date.now();
let deltaTime = (now - lastFrame) / 1000; let deltaTime = (now - lastFrame) / 1000;
let frameStart = performance.now(); let frameStart = performance.now();
hue += deltaTime / 5;
if (hue > 1) hue = 0;
if (displayMatricesVirtually) { if (displayMatricesVirtually) {
virtualRealInterpolation = Math.min(virtualRealInterpolation + deltaTime * 2, 1); virtualRealInterpolation = Math.min(virtualRealInterpolation + deltaTime * 2, 1);
} else { } else {
@ -512,7 +513,7 @@ async function draw() {
let virtualProjectionMatrix = []; let virtualProjectionMatrix = [];
mat4BuildPerspective(virtualProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4BuildPerspective(virtualProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
if (!invertZAxis) { if (animation.isZAxisInverted()) {
let zAxisFlipMatrix = []; let zAxisFlipMatrix = [];
mat4Identity(zAxisFlipMatrix); mat4Identity(zAxisFlipMatrix);
zAxisFlipMatrix[10] = -1; zAxisFlipMatrix[10] = -1;
@ -535,11 +536,11 @@ async function draw() {
// interpolated view matrix // interpolated view matrix
let virtualViewMatrix1 = []; let virtualViewMatrix1 = [];
mat4BuildLookAt1(virtualViewMatrix1, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp); mat4BuildLookAt1(virtualViewMatrix1, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp);
mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, interpolate[0]); mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, animation.interpolation(0));
let virtualViewMatrix2 = []; let virtualViewMatrix2 = [];
mat4BuildLookAt2(virtualViewMatrix2, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp); mat4BuildLookAt2(virtualViewMatrix2, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp);
mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, interpolate[1]); mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, animation.interpolation(1));
mat4Multiply(virtualViewMatrix, virtualViewMatrix2, virtualViewMatrix1); mat4Multiply(virtualViewMatrix, virtualViewMatrix2, virtualViewMatrix1);
@ -548,23 +549,23 @@ async function draw() {
let virtualProjectionMatrix1 = []; let virtualProjectionMatrix1 = [];
mat4BuildPerspective1(virtualProjectionMatrix1, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4BuildPerspective1(virtualProjectionMatrix1, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, interpolate[2]); mat4Interpolate(virtualProjectionMatrix1, identity, virtualProjectionMatrix1, animation.interpolation(2));
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix1, virtualProjectionMatrix); mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix1, virtualProjectionMatrix);
let virtualProjectionMatrix2 = []; let virtualProjectionMatrix2 = [];
mat4BuildPerspective2(virtualProjectionMatrix2, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4BuildPerspective2(virtualProjectionMatrix2, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(virtualProjectionMatrix2, identity, virtualProjectionMatrix2, interpolate[3]); mat4Interpolate(virtualProjectionMatrix2, identity, virtualProjectionMatrix2, animation.interpolation(3));
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix2, virtualProjectionMatrix); mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix2, virtualProjectionMatrix);
let virtualProjectionMatrix3 = []; let virtualProjectionMatrix3 = [];
mat4BuildPerspective3(virtualProjectionMatrix3, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4BuildPerspective3(virtualProjectionMatrix3, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(virtualProjectionMatrix3, identity, virtualProjectionMatrix3, interpolate[4]); mat4Interpolate(virtualProjectionMatrix3, identity, virtualProjectionMatrix3, animation.interpolation(4));
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix3, virtualProjectionMatrix); mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix3, virtualProjectionMatrix);
if (!displayMatricesVirtually) { if (!displayMatricesVirtually) {
let virtualProjectionMatrix4 = []; let virtualProjectionMatrix4 = [];
mat4BuildPerspective4(virtualProjectionMatrix4, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4BuildPerspective4(virtualProjectionMatrix4, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(virtualProjectionMatrix4, identity, virtualProjectionMatrix4, interpolate[5]); mat4Interpolate(virtualProjectionMatrix4, identity, virtualProjectionMatrix4, animation.interpolation(5));
mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix4, virtualProjectionMatrix); mat4Multiply(virtualProjectionMatrix, virtualProjectionMatrix4, virtualProjectionMatrix);
} }
@ -623,19 +624,20 @@ async function draw() {
gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6); gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6);
// draw virtual camera // draw virtual camera
let virtualCameraModelView = []; if (displayMatricesVirtually && animation.isCameraDrawn()) {
mat4Identity(virtualCameraModelView); let virtualCameraModelView = [];
mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]); mat4Identity(virtualCameraModelView);
mat4Translate(virtualCameraModelView, virtualCameraModelView, [0, 0, 0.16]); mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]);
mat4Translate(virtualCameraModelView, virtualCameraModelView, [0, 0, 0.16]);
mat4Multiply(virtualCameraModelView, inverseVirtualViewMatrix, virtualCameraModelView); mat4Multiply(virtualCameraModelView, inverseVirtualViewMatrix, virtualCameraModelView);
mat4Multiply(virtualCameraModelView, virtualViewMatrix, virtualCameraModelView); mat4Multiply(virtualCameraModelView, virtualViewMatrix, virtualCameraModelView);
gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(virtualCameraModelView));
gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer);
setAttribPointers();
gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(virtualCameraModelView));
gl.bindBuffer(gl.ARRAY_BUFFER, cameraVertexBuffer);
setAttribPointers();
if (displayMatricesVirtually && t <= 2.0) {
gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6); gl.drawArrays(gl.TRIANGLES, 0, cameraVertices.length / 6);
} }
@ -656,7 +658,7 @@ async function draw() {
// draw origin // draw origin
let originMatrix = []; let originMatrix = [];
mat4BuildPerspective4(originMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); mat4BuildPerspective4(originMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5);
mat4Interpolate(originMatrix, identity, originMatrix, interpolate[5]); mat4Interpolate(originMatrix, identity, originMatrix, animation.interpolation(5));
gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(originMatrix)); gl.uniformMatrix4fv(virtualModelViewLocation, gl.FALSE, new Float32Array(originMatrix));
gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(identity)); gl.uniformMatrix4fv(virtualProjectionLocation, gl.FALSE, new Float32Array(identity));
@ -667,7 +669,7 @@ async function draw() {
// draw origin cube // draw origin cube
if (t != 0.0 && t < 5.0) { if (animation.isOriginCubeDrawn()) {
gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
setAttribPointers(); setAttribPointers();
gl.uniform3fv(colorOverrideLocation, [1, 0, 0]); gl.uniform3fv(colorOverrideLocation, [1, 0, 0]);
@ -703,30 +705,5 @@ function hexToRgb(hex) {
return [r, g, b]; return [r, g, b];
} }
function hslToRgb(h, s, l) {
let r, g, b;
if (s == 0) {
r = g = b = l;
} else {
let hue2rgb = function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
let p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return [r, g, b];
}
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);