Merge branch 'pr/127'

sk66641 · Jun 2, 2024 · a784d41 · a784d41
2 parents b9d691d + f0edcda
commit a784d41
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -90,6 +90,7 @@ <h1 id="changingHeading" style="font-family: Arial, sans-serif; font-size: 39px;
           <option value="conic">Conic</option>
           <option value="linear">Linear</option>
           <option value="radial">Radial</option>
+          <option value="custom">Custom Pattern</option>
         </select>
       </div>
       <div>

diff --git a/script.js b/script.js
@@ -131,7 +131,32 @@ document.addEventListener('DOMContentLoaded', () => {
             return colors;
         }
 
-        if (n == 1) {
+        function createRandomGradientPattern(n) {
+            let gradientPattern = `background-color: ${getRandomColorBetween(rgbColor1, rgbColor2)}; background-image: `;
+
+            for (let i = 0; i < n; i++) {
+                const randomPositionX = Math.floor(Math.random() * 100);
+                const randomPositionY = Math.floor(Math.random() * 100);
+                gradientPattern += `radial-gradient(circle at ${randomPositionX}% ${randomPositionY}%, ${getRandomColorBetween(rgbColor1, rgbColor2)} 0%, transparent 50%), `;
+            }
+
+            // Remove the last comma and space
+            gradientPattern = gradientPattern.slice(0, -2);
+            gradientPattern += '; background-blend-mode: normal;';
+
+            return gradientPattern;
+        }
+
+        function applyRandomGradientPattern() {
+            document.body.style.cssText = createRandomGradientPattern(n);
+        }        
+
+        if (view === "custom") {
+            applyRandomGradientPattern();
+            setInterval(() => {
+                applyRandomGradientPattern();
+            }, set_time);
+        } else if (n == 1) {
             document.body.style.backgroundColor = getRandomColorBetween(rgbColor1, rgbColor2);
             setInterval(() => {
                 document.body.style.backgroundColor = getRandomColorBetween(rgbColor1, rgbColor2);