ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

added a synthwave landscape effect

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-11 12:57:34 +01:00
parent 9e0f98477d
commit 5b8bc2242d
6 changed files with 175 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
globalScript.js
+11
View File
@@ -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)
}
index.html
+4
View File
@@ -12,6 +12,8 @@
</head> </head>
<body style="background-color: #323232; color: #ffffff;"> <body style="background-color: #323232; color: #ffffff;">
<canvas id="synthwave" style="position: absolute; bottom: 0%; left: 0%;"></canvas>
<ul class="navBar"> <ul class="navBar">
<li> <li>
<!-- discord URL --> <!-- discord URL -->
@@ -45,8 +47,10 @@
</li> </li>
</ul> </ul>
<script src="/globalScript.js"></script>
<script src="/pxDensity.js"></script> <script src="/pxDensity.js"></script>
<script src="/loadingScreen.js"></script> <script src="/loadingScreen.js"></script>
<script src="/synthwaveEffect.js"></script>
</body> </body>
</html> </html>
loadingScreen.js
-10
View File
@@ -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() { document.addEventListener("DOMContentLoaded", function() {
if (showLoading != "true") { return } if (showLoading != "true") { return }
navBar.css
+6
View File
@@ -15,6 +15,12 @@ li {
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
padding: 0%; padding: 0%;
display: inline-block; display: inline-block;
position: relative;
margin-bottom: calc(4px * var(--pxDensity));
position: absolute;
bottom: 0%;
left: 50%;
transform: translateX(-50%);
} }
.navBtn { .navBtn {
background-color: transparent; background-color: transparent;
pxDensity.js
+7 -1
View File
@@ -1,8 +1,14 @@
let pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity")
let pxDensityDefined = false
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
let densityWidth = document.documentElement.clientWidth / 256 let densityWidth = document.documentElement.clientWidth / 256
let densityHeight = document.documentElement.clientHeight / 164 let densityHeight = document.documentElement.clientHeight / 164
document.documentElement.style.setProperty("--pxDensity", Math.max(densityWidth, densityHeight)) 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) }, false)
synthwaveEffect.js
+147
View File
@@ -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)