diff --git a/src/script.js b/src/script.js index 9d6ba41..6362917 100644 --- a/src/script.js +++ b/src/script.js @@ -1,5 +1,34 @@ "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 program; @@ -25,14 +54,11 @@ let cameraVertexBuffer; let lastFrame = Date.now(); -let t = 0.0; -let interpolate = [0, 0, 0, 0, 0, 0]; +let animation = new Animation(); let displayMatricesVirtually = true; let virtualRealInterpolation = 1; -let invertZAxis = true; - let cameraPitch = 0.565; let cameraYaw = 0.375; let cameraDistance = 4; @@ -65,29 +91,9 @@ async function init() { // input handling document.getElementById("interpolate").addEventListener("input", (e) => { - t = 6.0 - e.target.value; - if (t <= 2.0) { - invertZAxis = false; - } - else if (t <= 5.0) { - invertZAxis = false; - } - else { - invertZAxis = true; - } + animation.time = 6.0 - e.target.value; for (let i = 0; i < 6; ++i) { - let v; - 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("matrices").children[5-i].style.setProperty("--fill-percentage", (animation.interpolation(i) * 100) + "%"); } }); document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => { @@ -455,16 +461,11 @@ function updateStats(deltaTime) { frameCount = 0; } -let hue = 0; - async function draw() { let now = Date.now(); let deltaTime = (now - lastFrame) / 1000; let frameStart = performance.now(); - hue += deltaTime / 5; - if (hue > 1) hue = 0; - if (displayMatricesVirtually) { virtualRealInterpolation = Math.min(virtualRealInterpolation + deltaTime * 2, 1); } else { @@ -512,7 +513,7 @@ async function draw() { let virtualProjectionMatrix = []; mat4BuildPerspective(virtualProjectionMatrix, 60.0 / 180.0 * Math.PI, cv.width / cv.height, 0.9, 5); - if (!invertZAxis) { + if (animation.isZAxisInverted()) { let zAxisFlipMatrix = []; mat4Identity(zAxisFlipMatrix); zAxisFlipMatrix[10] = -1; @@ -535,11 +536,11 @@ async function draw() { // interpolated view matrix let virtualViewMatrix1 = []; mat4BuildLookAt1(virtualViewMatrix1, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp); - mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, interpolate[0]); + mat4Interpolate(virtualViewMatrix1, identity, virtualViewMatrix1, animation.interpolation(0)); let virtualViewMatrix2 = []; mat4BuildLookAt2(virtualViewMatrix2, virtualCameraPosition, virtualCameraLookAt, virtualCameraUp); - mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, interpolate[1]); + mat4Interpolate(virtualViewMatrix2, identity, virtualViewMatrix2, animation.interpolation(1)); mat4Multiply(virtualViewMatrix, virtualViewMatrix2, virtualViewMatrix1); @@ -548,23 +549,23 @@ async function draw() { let virtualProjectionMatrix1 = []; 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); let virtualProjectionMatrix2 = []; 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); let virtualProjectionMatrix3 = []; 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); if (!displayMatricesVirtually) { let virtualProjectionMatrix4 = []; 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); } @@ -623,19 +624,20 @@ async function draw() { gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6); // draw virtual camera - let virtualCameraModelView = []; - mat4Identity(virtualCameraModelView); - mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]); - mat4Translate(virtualCameraModelView, virtualCameraModelView, [0, 0, 0.16]); + if (displayMatricesVirtually && animation.isCameraDrawn()) { + let virtualCameraModelView = []; + mat4Identity(virtualCameraModelView); + mat4Scale(virtualCameraModelView, virtualCameraModelView, [0.1, 0.1, 0.1]); + mat4Translate(virtualCameraModelView, virtualCameraModelView, [0, 0, 0.16]); - mat4Multiply(virtualCameraModelView, inverseVirtualViewMatrix, virtualCameraModelView); - mat4Multiply(virtualCameraModelView, virtualViewMatrix, virtualCameraModelView); + mat4Multiply(virtualCameraModelView, inverseVirtualViewMatrix, 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); } @@ -656,7 +658,7 @@ async function draw() { // draw origin let originMatrix = []; 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(virtualProjectionLocation, gl.FALSE, new Float32Array(identity)); @@ -667,7 +669,7 @@ async function draw() { // draw origin cube - if (t != 0.0 && t < 5.0) { + if (animation.isOriginCubeDrawn()) { gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer); setAttribPointers(); gl.uniform3fv(colorOverrideLocation, [1, 0, 0]); @@ -703,30 +705,5 @@ function hexToRgb(hex) { 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); \ No newline at end of file