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) {
return Math.random() * (max - min) + min;
}
@@ -53,4 +55,27 @@ function showGrid() {
}
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="/loadingScreen.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
</head>
<body style="background-color: #323232; color: #ffffff;">
<div id="mainDiv">
<img src="/assets/bgGradient_256x164.png" class="bgGradient">
<img src="/assets/starNoise_512x512.png" draggable="false" id="starNoise">
<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>
@@ -45,6 +49,12 @@
<img class="navBtnIcon" draggable="false" src="/assets/powerplates_8x8.png">
</button>
</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>
</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!",
"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.\"",
"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?",
"Did you know that... uh... hold on let me think... I don't know, I forgot.",
"This tip is very helpful.",
script.js
+1
View File
@@ -9,6 +9,7 @@ document.addEventListener("DOMContentLoaded", function() {
setLoadingProgress("Animating synthwave background...")
startSynthAnimation()
pauseAnimBtn(localStorage["isAnimating"] || "true")
if (showLoading != "true") {
removeLoadingScreen()
style.css
+15 -7
View File
@@ -13,10 +13,11 @@ body {
top: round(60%, var(--pxDensityPx));
left: round(50%, var(--pxDensityPx));
transform: translate(-50%, -50%);
filter: drop-shadow(0px 0px 100px #C1AB00)
}
#starNoise {
position: fixed;
position: absolute;
top: 0%;
left: 0%;
width: calc(512px * var(--pxDensity));
height: auto;
aspect-ratio: 1 / 1;
@@ -24,10 +25,17 @@ body {
transform: translate(-50%, -50%);
}
#mainDiv {
background-position: 0% 10vh;
background-image: radial-gradient(
circle at center 50%,
#62007f 0%,
#0d0035 100%);
top: 0%;
left: 0%;
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 ctx = canvas.getContext("2d")
let hills = []
let isAnimating = true
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) {
if (Math.abs(toY - fromY) < Math.abs(toX - fromX)) {
if (fromX > toX) {
@@ -135,24 +160,22 @@ class Hill {
draw(debug) {
ctx.lineWidth = pxDensity
let startX = ((this.points[0][0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x) / pxDensity
let startY = ((this.points[0][1] * this.widthMul) + this.y) / pxDensity
let start = xyWidthOffset(this, this.points[0][0], this.points[0][1])
let previousX = startX
let previousY = startY
let previousX = start.x
let previousY = start.y
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) {
let x = ((point[0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x) / pxDensity
let y = ((point[1] * this.widthMul) + this.y) / pxDensity
let pos = xyWidthOffset(this, point[0], point[1])
if (debug) { ctx.lineTo(x * pxDensity, y * pxDensity) }
else { drawPixelLine(previousX, previousY, x, y) }
if (debug) { ctx.lineTo(pos.x * pxDensity, pos.y * pxDensity) }
else { drawPixelLine(previousX, previousY, pos.x, pos.y) }
previousX = x
previousY = y
previousX = pos.x
previousY = pos.y
}
if (debug) {
ctx.strokeStyle = "#ff0000"
@@ -183,18 +206,15 @@ class Hill {
}
function connectHills(hill, previousHill, idx, debug) {
function connectHills(hill, previousHill, hillIdx, debug) {
let pHill = previousHill
if (pHill && idx != 0) {
for (idx in pHill.points) {
let startX = ((pHill.points[idx][0] * pHill.widthMul) + ((-pHill.width * pHill.widthMul) / 2) + pHill.x) / pxDensity
let startY = ((pHill.points[idx][1] * pHill.widthMul) + pHill.y) / pxDensity
if (pHill && hillIdx != 0) {
for (let idx in pHill.points) {
let start = idxWidthOffset(pHill, idx)
let end = idxWidthOffset(hill, idx)
let endX = ((hill.points[idx][0] * hill.widthMul) + ((-hill.width * hill.widthMul) / 2) + hill.x) / pxDensity
let endY = ((hill.points[idx][1] * hill.widthMul) + hill.y) / pxDensity
let grad = ctx.createLinearGradient(startX, startY, endX, endY)
let grad = ctx.createLinearGradient(start.x, start.y, end.x, end.y)
let col = hill.color
let pCol = pHill.color
@@ -206,14 +226,14 @@ function connectHills(hill, previousHill, idx, debug) {
if (debug) {
ctx.strokeStyle = grad
ctx.moveTo(startX * pxDensity, startY * pxDensity)
ctx.lineTo(endX * pxDensity, endY * pxDensity)
ctx.moveTo(start.x * pxDensity, start.y * pxDensity)
ctx.lineTo(end.x * pxDensity, end.y * pxDensity)
ctx.stroke()
}
else {
ctx.fillStyle = grad
drawPixelLine(startX, startY, endX, endY)
drawPixelLine(start.x, start.y, end.x, end.y)
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
let iters = 0
let previousHill = undefined
@@ -231,17 +278,30 @@ 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, 180, 240], canvas.width, 350)
hillInstance.generate(25, canvas.height / 24, 100, 15)
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, 2 * pxDensity)
hills.unshift(hillInstance)
iters = 0
}
let prevHillPolygons = undefined
for (let idx in hills) {
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, false)
hill.stepSize = -0.005
hill.widthMul *= 1.01
@@ -259,5 +319,5 @@ function startSynthAnimation() {
animateSynthWave()
}
setInterval( animateSynthWave, 1000 / 24)
setInterval( animateSynthWave, 1000 / 12)
}