From c5a87e8a53b96bafde7fab9e99abc1cde9912688 Mon Sep 17 00:00:00 2001 From: 8BitBiscotti Date: Fri, 13 Dec 2024 13:25:16 +0100 Subject: [PATCH] made background gradient pixelated & added pasue animation button --- assets/bgGradient_256x164.png | Bin 0 -> 3625 bytes assets/bgGradient_256x164.png~ | Bin 0 -> 3694 bytes assets/favicon_32x32.png | Bin 0 -> 913 bytes assets/pauseAnimation_8x8.png | Bin 0 -> 488 bytes assets/playAnimation_8x8.png | Bin 0 -> 524 bytes globalScript.js | 25 ++++++++ index.html | 10 +++ loadingScreen.js | 2 +- script.js | 1 + style.css | 22 +++++-- synthwaveEffect.js | 114 +++++++++++++++++++++++++-------- 11 files changed, 139 insertions(+), 35 deletions(-) create mode 100644 assets/bgGradient_256x164.png create mode 100644 assets/bgGradient_256x164.png~ create mode 100644 assets/favicon_32x32.png create mode 100644 assets/pauseAnimation_8x8.png create mode 100644 assets/playAnimation_8x8.png diff --git a/assets/bgGradient_256x164.png b/assets/bgGradient_256x164.png new file mode 100644 index 0000000000000000000000000000000000000000..7bcf1c31030ea663f318ea7e51aff38691e8510c GIT binary patch literal 3625 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 TjcyMA{RB-7EeuNaaMAw(Zq<9I literal 0 HcmV?d00001 diff --git a/assets/bgGradient_256x164.png~ b/assets/bgGradient_256x164.png~ new file mode 100644 index 0000000000000000000000000000000000000000..02254c2cedf2118d3e9a86972b2c67a051d9fec1 GIT binary patch literal 3694 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 Bs2>0T literal 0 HcmV?d00001 diff --git a/assets/favicon_32x32.png b/assets/favicon_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..6f75e91fd0a209c050f30a2bdb59410ce1eb2871 GIT binary patch literal 913 zcmV;C18)3@P)@btUB*;A<8hHEbs@JT4qx&)bT(g*%L_ zwjz8a9ChS?!q-aIEBvB3Q{fNAPBJk8e$_LQsbjs4jjWRs9uV%$nFXVI9(9vo%9@*% z+9k6amjqM9h@ewo6_Y%JQZ32sZ{JYaH^Z8E4Efs>am0}!E8eK61?ifSnif4JpGi^W z{yR@MJu+PB9*jZbv**3{LDMdjc0BL<*z-y!5O{)1tL9&moW?#y->GT6hY;R`^Q)Ss z@4>|ubUxaeqm`wAOn*8JZ)Xr%fc9HxS*m1JUFY-xk{j|wH?V&I{jxv2`~%@hXZ+Zq zR0{wA010qNS#tmY3ljhU3ljkVnw%H_00GHKL_t(oM`M(im;cW&fPgV<&b9w1n>`u! z?#;pK3}@#l3=ej^W>D}DMWI28!;hXJ=yZ_TyIqSGZ8d_ z#tIk*Itm6n1Xw^JY+kz^C7?m^#_7b2HSoXh`^%8K_dbT)WM@STv9)X0g2mF`KS7au zladeT4|oXROau5rfST!Yz(arqlrND1ERPc7OZ2pZO%HlG0MZk0bP23<;W@q0a)1Gx z4M6}~)&hxxvKMkuiZ5!2i4vH8Sk%BBKq$^Zc{(^a7;pJN$P8@q1D*>=t_!GLKH!W3 zSbT!w3b_g;HJH)U4|+PmCPH|PEAa%%9DJ*TkigQ9ygNs%Mj95+RX@H!34=d_HX^7`RIC00000NkvXXu0mjfi%pTf literal 0 HcmV?d00001 diff --git a/assets/pauseAnimation_8x8.png b/assets/pauseAnimation_8x8.png new file mode 100644 index 0000000000000000000000000000000000000000..0ed54ddd9ee1ace63d1e41e9c13f27ed83a46b1c GIT binary patch literal 488 zcmVP)Aww017OH|cN(H-Ahqi)Mm*kqXLXw6{iWFDD#i8IJ zy7)EtALuH$DhPrih&Vd?wMdEYHH8*wFWkL9p4{_t_Z;BQ=*+PDl7L}4Jey8QtA#Zw z_>M3_h|oGEGuv9qE#}d4{5--Z>O(^G>bZ(%JNLT68Q4_iU z&(qdsroHar6wv?bx}W1fa35&YUHA9YbsJ|u;03rg+x`mWH1|z;at^YWG0`lARM0dd95imjfqZ@z!d1wl) z3@Ls9000SaNLh0L04^f{04^f|c%?sf0000VNklrS)CH?reNK=70000Aww017OH|cN(H-Ahqi)Mm*kqXLXw6{iWFDD#i8IJ zy7)EtALuH$DhPrih&Vd?wMdEYHH8*wFWkL9p4{_t_Z;BQ=*+PDl7L}4Jey8QtA#Zw z_>M3_h|oGEGuv9qE#}d4{5--Z>O(^G>bZ(%JNLT68Q4_iU z&(qdsroHar6wv?bx}W1fa35&YUHA9YbsJ|u;03rg+x`mWH1|z;at^YWG0`lARM0dd95imjfqZ@z!d1wl) z3@Ls9000SaNLh0L04^f{04^f|c%?sf0000(Nkl1?(Fwc& O0000 + +
+ + @@ -45,6 +49,12 @@ +
  • + +
    • diff --git a/loadingScreen.js b/loadingScreen.js index a49984d..d60450b 100644 --- a/loadingScreen.js +++ b/loadingScreen.js @@ -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.", diff --git a/script.js b/script.js index 8c9f9db..36b746f 100644 --- a/script.js +++ b/script.js @@ -9,6 +9,7 @@ document.addEventListener("DOMContentLoaded", function() { setLoadingProgress("Animating synthwave background...") startSynthAnimation() + pauseAnimBtn(localStorage["isAnimating"] || "true") if (showLoading != "true") { removeLoadingScreen() diff --git a/style.css b/style.css index c8863d2..a80d6a4 100644 --- a/style.css +++ b/style.css @@ -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%); } \ No newline at end of file diff --git a/synthwaveEffect.js b/synthwaveEffect.js index 82cc3aa..af77d56 100644 --- a/synthwaveEffect.js +++ b/synthwaveEffect.js @@ -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) } \ No newline at end of file