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

made background gradient pixelated & added pasue animation button

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-13 13:25:16 +01:00
parent 41268fba3c
commit c5a87e8a53
11 changed files with 139 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/bgGradient_256x164.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

assets/bgGradient_256x164.png~
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

assets/favicon_32x32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 913 B

assets/pauseAnimation_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 488 B

assets/playAnimation_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 B

globalScript.js
+25
View File
@@ -1,3 +1,5 @@
let isAnimating = true
function randomFloat(min, max) { function randomFloat(min, max) {
return Math.random() * (max - min) + min; return Math.random() * (max - min) + min;
} }
@@ -53,4 +55,27 @@ function showGrid() {
} }
ctx.stroke() ctx.stroke()
}
function pauseAnimBtn(state) {
if (state == "auto") {
if (localStorage["isAnimating"] == "true") { localStorage["isAnimating"] = "false" }
else { localStorage["isAnimating"] = "true" }
state = localStorage["isAnimating"]
}
let pauseBtn = document.getElementById("animationToggle")
if (state == "true") {
isAnimating = true
pauseBtn.src = "/assets/pauseAnimation_8x8.png"
}
else {
isAnimating = false
pauseBtn.src = "/assets/playAnimation_8x8.png"
}
localStorage["isAnimating"] = state
} }
index.html
+10
View File
@@ -10,10 +10,14 @@
<link rel="stylesheet" href="/globalStyle.css"> <link rel="stylesheet" href="/globalStyle.css">
<link rel="stylesheet" href="/loadingScreen.css"> <link rel="stylesheet" href="/loadingScreen.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
</head> </head>
<body style="background-color: #323232; color: #ffffff;"> <body style="background-color: #323232; color: #ffffff;">
<div id="mainDiv"> <div id="mainDiv">
<img src="/assets/bgGradient_256x164.png" class="bgGradient">
<img src="/assets/starNoise_512x512.png" draggable="false" id="starNoise"> <img src="/assets/starNoise_512x512.png" draggable="false" id="starNoise">
<img src="/assets/synthwaveSun_40x40.png" draggable="false" class="synthSun"> <img src="/assets/synthwaveSun_40x40.png" draggable="false" class="synthSun">
<canvas id="synthwave" style="position: absolute; bottom: round(0%, var(--pxDensityPx)); left: round(0%, var(--pxDensityPx));"></canvas> <canvas id="synthwave" style="position: absolute; bottom: round(0%, var(--pxDensityPx)); left: round(0%, var(--pxDensityPx));"></canvas>
@@ -45,6 +49,12 @@
<img class="navBtnIcon" draggable="false" src="/assets/powerplates_8x8.png"> <img class="navBtnIcon" draggable="false" src="/assets/powerplates_8x8.png">
</button> </button>
</li> </li>
<li>
<button onClick="pauseAnimBtn('auto')" class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="" id="animationToggle">
</button>
</li>
</ul> </ul>
</div> </div>
loadingScreen.js
+1 -1
View File
@@ -11,7 +11,7 @@ let tips = [
"Bad at a game? Just press the \"get good at games\" button!", "Bad at a game? Just press the \"get good at games\" button!",
"I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)", "I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)",
"You should listen to that song that goes \"do do do do do do do do do.\"", "You should listen to that song that goes \"do do do do do do do do do.\"",
"Every pixel in this website's pixel art is positioned pixel perfect.", "(Almost) Every pixel in this website's pixel art is positioned pixel perfect.",
"Shouldn't I be talking about tips?", "Shouldn't I be talking about tips?",
"Did you know that... uh... hold on let me think... I don't know, I forgot.", "Did you know that... uh... hold on let me think... I don't know, I forgot.",
"This tip is very helpful.", "This tip is very helpful.",
script.js
+1
View File
@@ -9,6 +9,7 @@ document.addEventListener("DOMContentLoaded", function() {
setLoadingProgress("Animating synthwave background...") setLoadingProgress("Animating synthwave background...")
startSynthAnimation() startSynthAnimation()
pauseAnimBtn(localStorage["isAnimating"] || "true")
if (showLoading != "true") { if (showLoading != "true") {
removeLoadingScreen() removeLoadingScreen()
style.css
+15 -7
View File
@@ -13,10 +13,11 @@ body {
top: round(60%, var(--pxDensityPx)); top: round(60%, var(--pxDensityPx));
left: round(50%, var(--pxDensityPx)); left: round(50%, var(--pxDensityPx));
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
filter: drop-shadow(0px 0px 100px #C1AB00)
} }
#starNoise { #starNoise {
position: fixed; position: absolute;
top: 0%;
left: 0%;
width: calc(512px * var(--pxDensity)); width: calc(512px * var(--pxDensity));
height: auto; height: auto;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
@@ -24,10 +25,17 @@ body {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
#mainDiv { #mainDiv {
background-position: 0% 10vh; top: 0%;
background-image: radial-gradient( left: 0%;
circle at center 50%,
#62007f 0%,
#0d0035 100%);
height: 100vh; height: 100vh;
}
.bgGradient {
image-rendering: pixelated;
min-width: 100vw;
min-height: 100vh;
aspect-ratio: auto;
position: absolute;
top: round(50%, var(--pxDensityPx));
left: round(50%, var(--pxDensityPx));
transform: translate(-50%, -50%);
} }
synthwaveEffect.js
+87 -27
View File
@@ -1,7 +1,8 @@
// TODO: dont render lines behind the fill (fillHillPolygons())
let canvas = document.getElementById("synthwave") let canvas = document.getElementById("synthwave")
let ctx = canvas.getContext("2d") let ctx = canvas.getContext("2d")
let hills = [] let hills = []
let isAnimating = true
let pxInflate = 0.5 let pxInflate = 0.5
@@ -80,6 +81,30 @@ function drawPixelLineHigh(fromX, fromY, toX, toY) {
} }
function idxWidthOffset(hill, idx) {
let x = ((hill.points[idx][0] * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x) / pxDensity
let y = ((hill.points[idx][1] * hill.widthMul) + hill.y) / pxDensity
return { x: x, y: y }
}
function idxWidthOffsetNoPx(hill, idx) {
let x = ((hill.points[idx][0] * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x)
let y = ((hill.points[idx][1] * hill.widthMul) + hill.y)
return { x: x, y: y }
}
function xyWidthOffset(hill, x, y) {
let x1 = ((x * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x) / pxDensity
let y1 = ((y * hill.widthMul) + hill.y) / pxDensity
return { x: x1, y: y1 }
}
function drawPixelLine(fromX, fromY, toX, toY) { function drawPixelLine(fromX, fromY, toX, toY) {
if (Math.abs(toY - fromY) < Math.abs(toX - fromX)) { if (Math.abs(toY - fromY) < Math.abs(toX - fromX)) {
if (fromX > toX) { if (fromX > toX) {
@@ -135,24 +160,22 @@ class Hill {
draw(debug) { draw(debug) {
ctx.lineWidth = pxDensity ctx.lineWidth = pxDensity
let startX = ((this.points[0][0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x) / pxDensity let start = xyWidthOffset(this, this.points[0][0], this.points[0][1])
let startY = ((this.points[0][1] * this.widthMul) + this.y) / pxDensity
let previousX = startX let previousX = start.x
let previousY = startY let previousY = start.y
ctx.beginPath() ctx.beginPath()
if (debug) { ctx.moveTo(startX * pxDensity, startY * pxDensity) } if (debug) { ctx.moveTo(start.x * pxDensity, start.y * pxDensity) }
for (let point of this.points) { for (let point of this.points) {
let x = ((point[0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x) / pxDensity let pos = xyWidthOffset(this, point[0], point[1])
let y = ((point[1] * this.widthMul) + this.y) / pxDensity
if (debug) { ctx.lineTo(x * pxDensity, y * pxDensity) } if (debug) { ctx.lineTo(pos.x * pxDensity, pos.y * pxDensity) }
else { drawPixelLine(previousX, previousY, x, y) } else { drawPixelLine(previousX, previousY, pos.x, pos.y) }
previousX = x previousX = pos.x
previousY = y previousY = pos.y
} }
if (debug) { if (debug) {
ctx.strokeStyle = "#ff0000" ctx.strokeStyle = "#ff0000"
@@ -183,18 +206,15 @@ class Hill {
} }
function connectHills(hill, previousHill, idx, debug) { function connectHills(hill, previousHill, hillIdx, debug) {
let pHill = previousHill let pHill = previousHill
if (pHill && idx != 0) { if (pHill && hillIdx != 0) {
for (idx in pHill.points) { for (let idx in pHill.points) {
let startX = ((pHill.points[idx][0] * pHill.widthMul) + ((-pHill.width * pHill.widthMul) / 2) + pHill.x) / pxDensity let start = idxWidthOffset(pHill, idx)
let startY = ((pHill.points[idx][1] * pHill.widthMul) + pHill.y) / pxDensity let end = idxWidthOffset(hill, idx)
let endX = ((hill.points[idx][0] * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x) / pxDensity let grad = ctx.createLinearGradient(start.x, start.y, end.x, end.y)
let endY = ((hill.points[idx][1] * hill.widthMul) + hill.y) / pxDensity
let grad = ctx.createLinearGradient(startX, startY, endX, endY)
let col = hill.color let col = hill.color
let pCol = pHill.color let pCol = pHill.color
@@ -206,14 +226,14 @@ function connectHills(hill, previousHill, idx, debug) {
if (debug) { if (debug) {
ctx.strokeStyle = grad ctx.strokeStyle = grad
ctx.moveTo(startX * pxDensity, startY * pxDensity) ctx.moveTo(start.x * pxDensity, start.y * pxDensity)
ctx.lineTo(endX * pxDensity, endY * pxDensity) ctx.lineTo(end.x * pxDensity, end.y * pxDensity)
ctx.stroke() ctx.stroke()
} }
else { else {
ctx.fillStyle = grad ctx.fillStyle = grad
drawPixelLine(startX, startY, endX, endY) drawPixelLine(start.x, start.y, end.x, end.y)
ctx.fill() ctx.fill()
} }
} }
@@ -221,6 +241,33 @@ function connectHills(hill, previousHill, idx, debug) {
} }
function fillHillPolygons(hill, previousHill, hillIdx) {
let pHill = previousHill
if (pHill && hillIdx != 0) {
for (let idx in pHill.points) {
if (idx == 0) { continue }
let br = idxWidthOffsetNoPx(pHill, idx)
let bl = idxWidthOffsetNoPx(pHill, idx - 1)
let tr = idxWidthOffsetNoPx(hill, idx)
let tl = idxWidthOffsetNoPx(hill, idx - 1)
ctx.beginPath()
ctx.fillStyle = "#323232"
ctx.moveTo(clampNearest(tl.x, pxDensity), clampNearest(tl.y, pxDensity))
ctx.lineTo(clampNearest(tr.x, pxDensity), clampNearest(tr.y, pxDensity))
ctx.lineTo(clampNearest(br.x, pxDensity), clampNearest(br.y, pxDensity))
ctx.lineTo(clampNearest(bl.x, pxDensity), clampNearest(bl.y, pxDensity))
ctx.lineTo(clampNearest(tl.x, pxDensity), clampNearest(tl.y, pxDensity))
ctx.fill()
}
}
}
const iterToNewHill = 25 const iterToNewHill = 25
let iters = 0 let iters = 0
let previousHill = undefined let previousHill = undefined
@@ -231,17 +278,30 @@ function animateSynthWave() {
ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.clearRect(0, 0, canvas.width, canvas.height)
if (iters >= iterToNewHill) { if (iters >= iterToNewHill) {
let hillInstance = new Hill(canvas.width / 2, canvas.height / 3 * 2, [0, 180, 240], canvas.width, 350) let hillInstance = new Hill(canvas.width / 2 - (1 * pxDensity), canvas.height / 3 * 2, [0, 180, 240], canvas.width, 350)
hillInstance.generate(25, canvas.height / 24, 100, 15) hillInstance.generate(25, canvas.height / 24, 100, 2 * pxDensity)
hills.unshift(hillInstance) hills.unshift(hillInstance)
iters = 0 iters = 0
} }
let prevHillPolygons = undefined
for (let idx in hills) { for (let idx in hills) {
let hill = hills[idx] let hill = hills[idx]
hill.y += hill.stepSize
hill.widthMul *= 1.01
fillHillPolygons(hill, prevHillPolygons, idx)
prevHillPolygons = hill
}
for (let idx in hills) {
let hill = hills[idx]
//hill.animateStep(hill.stepSize, -0.2, true) //hill.animateStep(hill.stepSize, -0.2, true)
hill.animateStep(hill.stepSize, -0.2, false) hill.animateStep(hill.stepSize, -0.2, false)
hill.stepSize = -0.005 hill.stepSize = -0.005
hill.widthMul *= 1.01 hill.widthMul *= 1.01
@@ -259,5 +319,5 @@ function startSynthAnimation() {
animateSynthWave() animateSynthWave()
} }
setInterval( animateSynthWave, 1000 / 24) setInterval( animateSynthWave, 1000 / 12)
} }