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

added sun and stars

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-11 14:51:08 +01:00
parent d66ae0dd55
commit dc61e02c60
6 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/starNoise_512x512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

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

After

Width:  |  Height:  |  Size: 885 B

index.html
+5 -1
View File
@@ -6,12 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Byte Dice</title>
<link rel="stylesheet" href="navBar.css">
<link rel="stylesheet" href="/navBar.css">
<link rel="stylesheet" href="/globalStyle.css">
<link rel="stylesheet" href="/loadingScreen.css">
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #323232; color: #ffffff;">
<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: 0%; left: 0%;"></canvas>
<ul class="navBar">
@@ -51,6 +54,7 @@
<script src="/pxDensity.js"></script>
<script src="/loadingScreen.js"></script>
<script src="/synthwaveEffect.js"></script>
<script src="/script.js"></script>
</body>
</html>
script.js
+8
View File
@@ -0,0 +1,8 @@
document.addEventListener("DOMContentLoaded", function() {
let starNoise = document.getElementById("starNoise")
let randX = randomInt(0, 256)
let randY = randomInt(0, 256)
starNoise.style.top = `calc(${randX}px * var(--pxDensity))`
starNoise.style.left = `calc(${randY}px * var(--pxDensity))`
}, false)
style.css
+29
View File
@@ -0,0 +1,29 @@
body {
height: 100vh;
background-image: radial-gradient(
circle at center 50%,
#62007f 0%,
#0d0035 100%);
background-position: 0% 10vh;
overflow: hidden;
background-color: #dadada !important;
}
.synthSun {
width: calc(40px * var(--pxDensity));
height: auto;
aspect-ratio: 1 / 1;
image-rendering: pixelated;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(0px 0px 100px #C1AB00)
}
#starNoise {
position: fixed;
width: calc(512px * var(--pxDensity));
height: auto;
aspect-ratio: 1 / 1;
image-rendering: pixelated;
transform: translate(-50%, -50%);
}
synthwaveEffect.js
+6 -6
View File
@@ -53,11 +53,11 @@ class Hill {
ctx.strokeStyle = `rgb(${this.color[0]}, ${this.color[1]}, ${this.color[2]})`
ctx.lineWidth = pxDensity
let startX = (this.points[0][0] * this.widthMul) + ((-this.width * this.widthMul) / 2) + this.x
let startY = (this.points[0][1] * this.widthMul) + this.y
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
)
ctx.moveTo(startX, startY)
for (let point of this.points) {
ctx.lineTo(
@@ -95,7 +95,7 @@ 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)
let hillInstance = new Hill(canvas.width / 2, canvas.height / 3 * 2, [0, 180, 240], 25, canvas.width, 325)
hillInstance.generate(25, 50, 100)
hills.unshift(hillInstance)
iters = 0
@@ -104,7 +104,7 @@ function animateSynthWave() {
for (let idx in hills) {
let hill = hills[idx]
hill.animateStep(hill.stepSize, 1)
hill.animateStep(hill.stepSize, -0.2)
hill.stepSize = -0.005
hill.widthMul *= 1.01