i

i1li · Nov 24, 2024 · 57a35d9 · 57a35d9
1 parent ea8b2cf
commit 57a35d9
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 121 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 package.json
 package-lock.json
 .env
+/.vscode
diff --git a/dist/bundle.css b/dist/bundle.css
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/index.html b/dist/index.html
diff --git a/serv.js b/serv.js
@@ -4,13 +4,15 @@ const express = require('express');
 const path = require('path');
 const serv = express();
 const { exec } = require('child_process');
-serv.use(express.static(path.join(__dirname, 'dist')));
+const isDev = process.argv.includes('dev');
+const staticDir = isDev ? 'src' : 'dist';
+serv.use(express.static(path.join(__dirname, staticDir)));
 serv.get('*', (req, res) => {
-    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
+    res.sendFile(path.join(__dirname, staticDir, 'index.html'));
     new URL(req.url, `http://${req.headers.host}`);
 });
 serv.listen(PORT, () => {
-    console.log(`Server is running on port ${PORT} - \x1b[34mhttp://localhost:${PORT}/\x1b[0m`);
+    console.log(`Server is running on port ${PORT} in ${isDev ? 'development' : 'production'} mode - \x1b[34mhttp://localhost:${PORT}/\x1b[0m`);
     openBrowser(`http://localhost:${PORT}/`);
 });
 function openBrowser(url) {

diff --git a/src/css/background.css b/src/css/background.css
@@ -52,18 +52,18 @@
     border-radius:0;
     mix-blend-mode: color;
 }
-#box, #overlay {
+#shift-layer1, #shift-layer2 {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
 }
-#box {
+#shift-layer1 {
     mix-blend-mode: difference;
     z-index:3;
 }
-#overlay {
+#shift-layer2 {
     mix-blend-mode: overlay;
     z-index:2;
 }
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,7 @@
 <link rel="stylesheet" type="text/css" href="/yt/youtube-embed.css">
 </head><body>
 <div id="bg-wrapper"><div id="bg-wrapper2"><div id="bg-wrapper3"></div></div></div>
-<div id="bg"><div id="box"></div><div id="overlay"></div></div>
+<div id="bg"><div id="shift-layer1"></div><div id="shift-layer2"></div></div>
 <span id="toTop" onclick="goToTop()" title="Go to top"><img alt="Go to top" class="to-top" decoding="async" src="/img/top.png"></span>
 <div id="fullScreenOverlay" onclick="closeOverlay()"><span class="close-button" onclick="closeOverlay()">&times;</span><img id="overlayImage"></div>
 <div id="searchOverlay" class="search-overlay">
@@ -1484,7 +1484,7 @@ <h4>Profitability Has Never Excused Criminality: A Message To Facebook, Google,
 <td style="text-align:center; width:60%; vertical-align:middle; padding-top:1em; font-size:1em; opacity:.7;"><a href="https://connect4more.netlify.app" class="no-bg" title="Connect for more.">Connect</a></td>
 <td style="text-align:right; width:20%; padding-right:2.5%; padding-top:.6em;"><a class="no-bg" title="Home" href="/"><img class="img-footer img-opaq" decoding="async" alt="Home" src="/img/yinyang.png"></a></td></tr></table></footer>
 
-<script src="/js/detect-mobile.js"></script>
+<script src="/js/utils.js"></script>
 <script src="/js/background.js"></script>
 <script src="/js/github-pages.js"></script>
 <script src="/yt/shuffle.js"></script>

diff --git a/src/js/background.js b/src/js/background.js
@@ -1,94 +1,70 @@
-let isWindowActive = !document.hidden;
 if (!isMobile) {
-function easeInOutCubic(t) {
-  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-}
-const permutation = [...Array(256)].map(() => Math.floor(Math.random() * 256));
-const p = [...permutation, ...permutation];
-function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
-function lerp(t, a, b) { return a + t * (b - a); }
-function grad(hash, x) {
-    const h = hash & 15;
-    const grad = 1 + (h & 7);
-    return (h & 8 ? -grad : grad) * x;
-}
-function noise(x) {
-    const X = Math.floor(x) & 255;
-    x -= Math.floor(x);
-    const u = fade(x);
-    return lerp(u, grad(p[X], x), grad(p[X+1], x-1));
-}
-function easeWithNoise(t, noiseScale = 0.1, noiseAmplitude = 0.05) {
-    const easedT = easeInOutCubic(t);
-    const noiseValue = noise(t * noiseScale) * noiseAmplitude;
-    return Math.max(0, Math.min(1, easedT + noiseValue));
-}
-const box = document.getElementById("box");
-const overlay = document.getElementById("overlay");
 let lastUpdateTime = performance.now();
 let accumulatedTime = 0;
 const intervalDuration = 300;
 window.addEventListener('focus', throttle(() => isWindowActive = true, 500));
 window.addEventListener('blur', throttle(() => isWindowActive = false, 500));
 document.addEventListener('visibilitychange', throttle(() => {
-    isWindowActive = !document.hidden;
-    if (!document.hidden) {
-      lastUpdateTime = performance.now();
-      accumulatedTime = 0;
-    }
-  }, 500));  
+  isWindowActive = !document.hidden;
+  if (!document.hidden) {
+    lastUpdateTime = performance.now();
+    accumulatedTime = 0;
+  }
+}, 500));  
+const shiftLayer1 = document.getElementById("shift-layer1");
+const shiftLayer2 = document.getElementById("shift-layer2");
+let shiftLayer1State = createLayerState(false);
+let shiftLayer2State = createLayerState(true);
 function randomlyModifyValue(value, minFactor = 0.85, maxFactor = 1.15) {
   if (Math.random() < 0.333) {
     const factor = Math.random() * (maxFactor - minFactor) + minFactor;
     return Math.round(value * factor);
   }
   return Math.round(value);
 }
-function getRandomInRange(isOverlay, min, max, modifier = 1) {
-  return isOverlay ? randomlyModifyValue(Math.random() * (max - min) + min) * modifier : randomlyModifyValue(Math.random() * (max - min) + min) * modifier;
+function getRandomInRange(isShiftLayer2, min, max, modifier = 1) {
+  return isShiftLayer2 ? randomlyModifyValue(Math.random() * (max - min) + min) * modifier : randomlyModifyValue(Math.random() * (max - min) + min) * modifier;
 }
-function getRandomHueIncrement(isOverlay) {
-  return getRandomInRange(isOverlay, -3, 3);
+function getRandomHueIncrement(isShiftLayer2) {
+  return getRandomInRange(isShiftLayer2, -3, 3);
 }
-function getIntervalsTillNextChange(isOverlay) {
-  return getRandomInRange(isOverlay, 10, 20);
+function getIntervalsTillNextChange(isShiftLayer2) {
+  return getRandomInRange(isShiftLayer2, 10, 20);
 }
-function getRandomFilterValue(isOverlay) {
-  return getRandomInRange(isOverlay, 87, 185);
+function getRandomFilterValue(isShiftLayer2) {
+  return getRandomInRange(isShiftLayer2, 87, 185);
 }
-function getRandomOpacityValue(isOverlay) {
-  return getRandomInRange(isOverlay, 0.6, 1);
+function getRandomOpacityValue(isShiftLayer2) {
+  return getRandomInRange(isShiftLayer2, 0.6, 1);
 }
-function getRandomHueStep(isOverlay) {
-  return isOverlay ? 7 * Math.ceil(Math.random() * 3) : randomlyModifyValue(Math.ceil(Math.random() * 5) + 2);
+function getRandomHueStep(isShiftLayer2) {
+  return isShiftLayer2 ? 7 * Math.ceil(Math.random() * 3) : randomlyModifyValue(Math.ceil(Math.random() * 5) + 2);
 }
-function createLayerState(isOverlay) {
-  const intervalsTillNextChange = getIntervalsTillNextChange(isOverlay);
+function createLayerState(isShiftLayer2) {
+  const intervalsTillNextChange = getIntervalsTillNextChange(isShiftLayer2);
   return {
-    hueIncrement: getRandomHueIncrement(isOverlay),
+    hueIncrement: getRandomHueIncrement(isShiftLayer2),
     intervalCount: 0,
-    intervalsTillNextChange: intervalsTillNextChange,
+    intervalsTillNextChange: isShiftLayer2 ? intervalsTillNextChange : Math.round(intervalsTillNextChange * Math.random()),
     transitionProgress: 0,
-    transitionDuration: isOverlay ? intervalsTillNextChange * intervalDuration : 0,
-    currentHueStep: getRandomHueStep(isOverlay),
+    transitionDuration: intervalsTillNextChange * intervalDuration,
+    currentHueStep: getRandomHueStep(isShiftLayer2),
     currentContrast: 100,
     currentBrightness: 100,
     currentSaturation: 100,
     currentOpacity: 0.75,
-    targetHueStep: getRandomHueStep(isOverlay),
-    targetContrast: getRandomFilterValue(isOverlay),
-    targetBrightness: getRandomFilterValue(isOverlay),
-    targetSaturation: getRandomFilterValue(isOverlay),
-    targetOpacity: getRandomOpacityValue(isOverlay),
+    targetHueStep: getRandomHueStep(isShiftLayer2),
+    targetContrast: getRandomFilterValue(isShiftLayer2),
+    targetBrightness: getRandomFilterValue(isShiftLayer2),
+    targetSaturation: getRandomFilterValue(isShiftLayer2),
+    targetOpacity: getRandomOpacityValue(isShiftLayer2),
     hueShift: 0
   };
 }
-let boxState = createLayerState(false);
-let overlayState = createLayerState(true);
-function setGradient(element, state, isOverlay = false) {
+function setGradient(element, state, isShiftLayer2 = false) {
   function getAdjustedHue(currentStep, hueAngle) {
-      return (currentStep * hueAngle);
-      }
+    return (currentStep * hueAngle);
+    }
   const width = element.offsetWidth || element.clientWidth; 
   const height = element.offsetHeight || element.clientHeight;
   const diagonal = Math.sqrt(width * width + height * height);
@@ -100,19 +76,19 @@ function setGradient(element, state, isOverlay = false) {
     const angle = i * hueAngle;
     const x = 50 + 50 * Math.cos(angle * Math.PI / 180);
     const y = 50 + 50 * Math.sin(angle * Math.PI / 180);
-    const currentStep = isOverlay ? i + state.currentHueStep : i;
+    const currentStep = isShiftLayer2 ? i + state.currentHueStep : i;
     gradients.push(`radial-gradient(ellipse farthest-corner at ${x}% ${y}%, hsl(${getAdjustedHue(currentStep, hueAngle)}, 100%, 50%), transparent ${percentage}%)`);
   }
   element.style.backgroundImage = gradients.join(', ');
   element.style.opacity = state.currentOpacity;    
   element.style.filter = `contrast(${state.currentContrast}%) brightness(${state.currentBrightness}%) saturate(${state.currentSaturation}%) hue-rotate(${state.hueShift}deg)`;
 }
-function updateLayerState(state, isOverlay, deltaTime) {
+function updateLayerState(state, isShiftLayer2, deltaTime) {
   state.intervalCount += deltaTime;
   state.transitionProgress += (deltaTime / state.transitionDuration) * (.2 + (Math.random() * .5));
   if (state.transitionProgress > 1) state.transitionProgress = 1;
   const t = easeWithNoise(state.transitionProgress);
-  if (isOverlay) {
+  if (isShiftLayer2) {
     state.currentHueStep += (state.targetHueStep - state.currentHueStep) * (t * 0.0005) * Math.random();
   } else {
     state.currentHueStep += (state.targetHueStep - state.currentHueStep) * (t * 0.005) * Math.random();
@@ -125,30 +101,30 @@ function updateLayerState(state, isOverlay, deltaTime) {
   if (state.intervalCount >= state.intervalsTillNextChange * intervalDuration) {
     state.intervalCount = 0;
     state.transitionProgress = 0;
-    state.hueIncrement = getRandomHueIncrement(isOverlay);
-    state.intervalsTillNextChange = getIntervalsTillNextChange(isOverlay);
+    state.hueIncrement = getRandomHueIncrement(isShiftLayer2);
+    state.intervalsTillNextChange = getIntervalsTillNextChange(isShiftLayer2);
     state.transitionDuration = state.intervalsTillNextChange * intervalDuration;
-    state.targetHueStep = getRandomHueStep(isOverlay);
-    state.targetContrast = getRandomFilterValue(isOverlay);
-    state.targetBrightness = getRandomFilterValue(isOverlay);
-    state.targetSaturation = getRandomFilterValue(isOverlay);
-    state.targetOpacity = getRandomOpacityValue(isOverlay);
+    state.targetHueStep = getRandomHueStep(isShiftLayer2);
+    state.targetContrast = getRandomFilterValue(isShiftLayer2);
+    state.targetBrightness = getRandomFilterValue(isShiftLayer2);
+    state.targetSaturation = getRandomFilterValue(isShiftLayer2);
+    state.targetOpacity = getRandomOpacityValue(isShiftLayer2);
   }
 }
 function updateColors(timestamp) {
     const deltaTime = timestamp - lastUpdateTime;
     accumulatedTime += deltaTime;
-    updateLayerState(boxState, false, deltaTime);
-    updateLayerState(overlayState, true, deltaTime);
-    setGradient(box, boxState);
-    setGradient(overlay, overlayState, true);
+    updateLayerState(shiftLayer1State, false, deltaTime);
+    updateLayerState(shiftLayer2State, true, deltaTime);
+    setGradient(shiftLayer1, shiftLayer1State);
+    setGradient(shiftLayer2, shiftLayer2State, true);
     lastUpdateTime = timestamp;
     throttledAnimationFrame(updateColors);
 }
 const throttledAnimationFrame = throttle((callback) => {
     requestAnimationFrame(callback);
-  }, 16);
-  if (isWindowActive) {
-    throttledAnimationFrame(updateColors);
-  }
+}, 16);
+if (isWindowActive) {
+  throttledAnimationFrame(updateColors);
+}
 }
diff --git a/src/js/color-change.js b/src/js/color-change.js
@@ -102,12 +102,3 @@ hoverShift.forEach(element => {
   }, 30));
 });
 }
-function debounce(func, delay) {
-  let timeoutId;
-  return function (...args) {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => {
-      func.apply(this, args);
-    }, delay);
-  };
-}
diff --git a/src/js/detect-mobile.js b/src/js/detect-mobile.js
diff --git a/src/js/utils.js b/src/js/utils.js
@@ -0,0 +1,55 @@
+let isWindowActive = !document.hidden;
+const isMobile = (window.matchMedia("(orientation: portrait)").matches) || (window.innerHeight > window.innerWidth) ||
+/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|windows phone|kindle|playbook|silk|mobile|tablet|samsung|lg|htc|nokia|motorola|symbian|fennec|maemo|tizen|blazer|series60|ucbrowser|bada|micromessenger|webview/.test(navigator.userAgent.toLowerCase());
+function debounce(func, delay) {
+  let timeoutId;
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}
+function throttle(func, limit) {
+  let lastFunc;
+  let lastRan;
+  return function() {
+    const context = this;
+    const args = arguments;
+    if (!lastRan) {
+      func.apply(context, args);
+      lastRan = Date.now();
+    } else {
+      clearTimeout(lastFunc);
+      lastFunc = setTimeout(function() {
+        if ((Date.now() - lastRan) >= limit) {
+          func.apply(context, args);
+          lastRan = Date.now();
+        }
+      }, Math.max(0, limit - (Date.now() - lastRan)));
+    }
+  }
+}
+function easeInOutCubic(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+const permutation = [...Array(256)].map(() => Math.floor(Math.random() * 256));
+const p = [...permutation, ...permutation];
+function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
+function lerp(t, a, b) { return a + t * (b - a); }
+function grad(hash, x) {
+  const h = hash & 15;
+  const grad = 1 + (h & 7);
+  return (h & 8 ? -grad : grad) * x;
+}
+function noise(x) {
+  const X = Math.floor(x) & 255;
+  x -= Math.floor(x);
+  const u = fade(x);
+  return lerp(u, grad(p[X], x), grad(p[X+1], x-1));
+}
+function easeWithNoise(t, noiseScale = Math.random(), noiseAmplitude = Math.random() / 3) {
+  const easedT = easeInOutCubic(t);
+  const noiseValue = noise(t * noiseScale) * noiseAmplitude;
+  return Math.max(0, Math.min(1, easedT + noiseValue));
+}
diff --git a/src/yt/youtube-embed.js b/src/yt/youtube-embed.js
@@ -264,23 +264,3 @@ class YTEmbed extends HTMLElement {
   }
 }
 customElements.define('y-t', YTEmbed);
-function throttle(func, limit) {
-  let lastFunc;
-  let lastRan;
-  return function() {
-    const context = this;
-    const args = arguments;
-    if (!lastRan) {
-      func.apply(context, args);
-      lastRan = Date.now();
-    } else {
-      clearTimeout(lastFunc);
-      lastFunc = setTimeout(function() {
-        if ((Date.now() - lastRan) >= limit) {
-          func.apply(context, args);
-          lastRan = Date.now();
-        }
-      }, Math.max(0, limit - (Date.now() - lastRan)));
-    }
-  }
-}