From dc61e02c6057a39f6d393a13ef6939475a64a32a Mon Sep 17 00:00:00 2001 From: 8BitBiscotti Date: Wed, 11 Dec 2024 14:51:08 +0100 Subject: [PATCH] added sun and stars --- assets/starNoise_512x512.png | Bin 0 -> 1907 bytes assets/synthwaveSun_40x40.png | Bin 0 -> 885 bytes index.html | 10 +++++++--- script.js | 8 ++++++++ style.css | 29 +++++++++++++++++++++++++++++ synthwaveEffect.js | 12 ++++++------ 6 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 assets/starNoise_512x512.png create mode 100644 assets/synthwaveSun_40x40.png create mode 100644 script.js create mode 100644 style.css diff --git a/assets/starNoise_512x512.png b/assets/starNoise_512x512.png new file mode 100644 index 0000000000000000000000000000000000000000..9b8d26e14a27347d696cb8211225292c9927a7a0 GIT binary patch literal 1907 zcmV-(2aNcMP)z$zYqD5xf92*C_aWn=l}I|u+XSODJhN+iEKyMjX^a4XRYgJu=%#H4XA*k0Sv=( z2Ux(*j~NOChQaTjWdNE4wf{(wD9d5iq^y0rj|#CMMOGODH4@K2$N|#HR2dg{^@0Mx zCwij0YE@|BjaQ5U_}EE1tv(}%;(-A+ahY*a zFMq=R`Io}LB?o}FSX%+?t0;$J*QB)2?j0F0b>snHD2rANHa!Fe%O&^3wmKOv^HLGq zJm$&elnwdzdu@7rua#;^>sVa{CbjcD;VmLj0Vr(VM^FKL8>?vfhGp4y zWdj?Sz3O8S4D-oZU#1K^3xN?pF#}HY3Q`6Dg5;+G)#!5|)?=C!m63={yMeTv@VWN>2S0LH1RX&^zTV>~?*36L2d1sr!UDdIlV zl~2MT0Pj&FgB-|dgEQV`03a6qz4P{3$2eH7NW^z72LAc^wu31FupXXrlq_hr zH=;VzK@21#=K#j0r;QCP{YwB41d7&3wcjf90;mokR2xi%y8+bPBIyngW;hW5SzEZ& z1}{xoF@VZs62Pz~vnFg_1%A4j|8tfD6>LDO%c+v(oT^@ME$rQNG{yjU(6wUF0YEHc z1pvl4$ry38JaLp4*kCO~x)@QM^+SN&+IVQqpQxyUwP``Rwi%O#4eCIT3Q-w((O?Q{ z_y|DnJo2=eGZ5z{1i&Z)z!t$uvOfUG_yvN?r9!j{?Exre@Y4g(`RMs%;(SCEG)bbf zBZFvAtpjZ#!!F9&88{&Za3hd2MCFF5hlfp;@lN9Fss003B( zCkpR`f&Fk%1n~BqEagNKNj6~URO{YR0CA3e|4r*$D=<)ol>$(Dq$)(vj$C`i2#}j~ zB42ICpfDsx{cbXY5*b*Qy zH5!yF0I_OqXW$eQ0F~b<0MkK+Mk*L;{~W-WRHkTN;P)W@ z>pxT04?uYC%#wy1Al$clYAUFycG4WDAxwqOVqh@dtS`Y8~||`s^kU; z2ZNCSlv(b=u5EMD4&c7!+Q=XoxeaeuHWV2C`^`lLnS`F(=LGEx2FA@}#CWa5@WG9G zJj{iBAc=IFs!=Kd6g&=|uDl#I2SmshEszLN%PV-f&xO0P0Ij|#9G4(|hpQ(Esga-f%mvQ2t t^gvU#yaO**k7EN~=uMK54z}GN;6I7IyLcaTZ>{N9drk+{3V#@vkO2_%#=$VtadOfbCYm3B8QWIhGhl;&tHR1w2#@ zHC)kdoA3pvJ8()InIk|K$H5$Jlkx$pTd)cqogqwD$H5$Fo$(gKJs1MVriu@U<6w@o z%6^IBCKilz@ds0g+%k+B`cPbZyjOleLl5R5%i@P{cflDaI+X{7<6w@oD8CDK8$3Q4 z{|>IGg*g=L%9BmngDUi3jx(>j$_NfN#zB@bkTchycOc`La`QnMy|7SZVf@2PjpB-C zX0R{};`9eDW(IQxfjDrGmVY!$Gt@Si@j`9mU|r!WEz7 zLFq`HEpv(Lbq;8n0=w{ydyt}u2HS>Fpv1bBbX2GN=>JWBbA?J zj;1?Ok`+m6Ne Byte Dice - + + - - + + + +
  • @@ -51,6 +54,7 @@ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..41cfb42 --- /dev/null +++ b/script.js @@ -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) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6afd7b8 --- /dev/null +++ b/style.css @@ -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%); +} \ No newline at end of file diff --git a/synthwaveEffect.js b/synthwaveEffect.js index 4b2b3ee..07d09c0 100644 --- a/synthwaveEffect.js +++ b/synthwaveEffect.js @@ -52,12 +52,12 @@ class Hill { draw() { 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