diff --git a/globalScript.js b/globalScript.js new file mode 100644 index 0000000..02d0ffe --- /dev/null +++ b/globalScript.js @@ -0,0 +1,11 @@ +function randomFloat(min, max) { + return Math.random() * (max - min) + min; +} + +function randomIntFrom0(max) { + return Math.floor(Math.random() * max) +} + +function randomInt(min, max) { + return Math.floor(Math.random() * (max - min) + min) +} \ No newline at end of file diff --git a/index.html b/index.html index 9e7cbf7..15bf0dc 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,8 @@ + + + + \ No newline at end of file diff --git a/loadingScreen.js b/loadingScreen.js index 2a9c2d1..0c5343d 100644 --- a/loadingScreen.js +++ b/loadingScreen.js @@ -1,13 +1,3 @@ -function randomFloat(min, max) { - return Math.random() * (max - min) + min; -} - - -function randomIntFrom0(max) { - return Math.floor(Math.random() * max) -} - - document.addEventListener("DOMContentLoaded", function() { if (showLoading != "true") { return } diff --git a/navBar.css b/navBar.css index 6319998..5b4ac0b 100644 --- a/navBar.css +++ b/navBar.css @@ -15,6 +15,12 @@ li { filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); padding: 0%; display: inline-block; + position: relative; + margin-bottom: calc(4px * var(--pxDensity)); + position: absolute; + bottom: 0%; + left: 50%; + transform: translateX(-50%); } .navBtn { background-color: transparent; diff --git a/pxDensity.js b/pxDensity.js index 7c88ebd..047c1fc 100644 --- a/pxDensity.js +++ b/pxDensity.js @@ -1,8 +1,14 @@ +let pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity") +let pxDensityDefined = false + document.addEventListener("DOMContentLoaded", function() { let densityWidth = document.documentElement.clientWidth / 256 let densityHeight = document.documentElement.clientHeight / 164 document.documentElement.style.setProperty("--pxDensity", Math.max(densityWidth, densityHeight)) - console.log(getComputedStyle(document.body).getPropertyValue("--pxDensity")) + pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity") + pxDensityDefined = true + + console.log("pxDensity: " + getComputedStyle(document.body).getPropertyValue("--pxDensity")) }, false) \ No newline at end of file diff --git a/synthwaveEffect.js b/synthwaveEffect.js new file mode 100644 index 0000000..ea1cdb5 --- /dev/null +++ b/synthwaveEffect.js @@ -0,0 +1,147 @@ +let canvas = document.getElementById("synthwave") +let ctx = canvas.getContext("2d") +let hills = [] + +canvas.width = window.innerWidth +canvas.height = window.innerHeight + + +function lerp(x, y, t) { + return x + t * (y - x) +} + + +function hillCurve(x, width) { + return (Math.sin(Math.PI * (x + 1)) + 1) ** width +} + + +class Hill { + constructor(x, y, color, xRandom, width, frameCount) { + this.color = color + this.i = 0 + this.points = [] + this.x = x + this.y = y + this.xRandom = xRandom + this.frameCount = frameCount + this.stepSize = 1 + this.width = width + this.widthMul = 0.2 + } + + generate(iterCount, maxHeight, heightOffset) { + let offset = 0 + let stepSize = this.width / iterCount + + for (let i = 0; i < iterCount + 1; i++) { + let offsetNorm = offset / this.width + let randomHeight = randomInt(0, maxHeight * -hillCurve(offsetNorm, 1.2) * 10) + heightOffset + let randomXOffset = undefined + + if (i == 0 || i == iterCount) { randomXOffset = 0 } + else { randomXOffset = randomInt(-this.xRandom, this.xRandom) } + + this.points.push([offset + randomXOffset, randomHeight]) + + offset += stepSize + } + } + + + draw() { + ctx.strokeStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})` + ctx.lineWidth = pxDensity + + ctx.beginPath() + ctx.moveTo( + (this.points[0][0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x, + (this.points[0][1] * this.widthMul) + this.y + ) + + for (let point of this.points) { + ctx.lineTo( + (point[0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x, + (point[1] * this.widthMul) + this.y + ) + } + ctx.stroke() + } + + + animateStep(stepSize, colorIncrement) { + if (this.i >= this.frameCount) { + hills.pop(this) + return + } + + this.y += stepSize + this.draw() + + this.i += 1 + + this.color[0] += colorIncrement + this.color[1] += colorIncrement + this.color[2] += colorIncrement + } +} + + +const iterToNewHill = 15 +let iters = 0 +let previousHill = undefined + +function animateSynthWave() { + ctx.clearRect(0, 0, canvas.width, canvas.height) + + if (iters >= iterToNewHill) { + let hillInstance = new Hill(canvas.width / 2, canvas.height / 3 * 2, [0, 0, 50], 25, canvas.width, 325) + hillInstance.generate(25, 50, 100) + hills.unshift(hillInstance) + iters = 0 + } + + + for (let idx in hills) { + let hill = hills[idx] + hill.animateStep(hill.stepSize, 1) + hill.stepSize = -0.005 + hill.widthMul *= 1.01 + + + continue + + if (previousHill && idx != 0) { + for (idx in previousHill.points) { + let startX = previousHill.points[idx][0] + previousHill.x + let startY = previousHill.points[idx][1] + previousHill.y + let endX = hill.points[idx][0] + hill.x + let endY = hill.points[idx][1] + hill.y + + let grad = ctx.createLinearGradient(startX, startY, endX, endY) + let col = hill.color + let pCol = previousHill.color + + grad.addColorStop(0, `rgb(${pCol[0]}, ${pCol[1]}, ${pCol[2]})`) + grad.addColorStop(1, `rgb(${col[0]}, ${col[1]}, ${col[2]})`) + + ctx.strokeStyle = grad + ctx.lineWidth = pxDensity + + ctx.beginPath() + ctx.moveTo(startX, startY) + ctx.lineTo(endX, endY) + ctx.stroke() + } + } + + previousHill = hill + } + + iters++ +} + + +document.addEventListener("DOMContentLoaded", function() { + setInterval( animateSynthWave, 1000 / 24) +}, false) \ No newline at end of file