added a synthwave landscape effect

2024-12-11 12:57:34 +01:00
parent 9e0f98477d
commit 5b8bc2242d
6 changed files with 175 additions and 11 deletions
@@ -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)
+}
@@ -12,6 +12,8 @@
 </head>

 <body style="background-color: #323232; color: #ffffff;">
+<canvas id="synthwave" style="position: absolute; bottom: 0%; left: 0%;"></canvas>
+
  <ul class="navBar">
    <li>
      <!-- discord URL -->
@@ -45,8 +47,10 @@
    </li>
  </ul>

+  <script src="/globalScript.js"></script>
  <script src="/pxDensity.js"></script>
  <script src="/loadingScreen.js"></script>
+  <script src="/synthwaveEffect.js"></script>
 </body>

 </html>
@@ -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 }

@@ -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;
@@ -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)
@@ -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)