add rothko generator

2025-05-09 00:12:04 -04:00 · 2025-05-09 00:12:04 -04:00 · 942b1764c5
commit 942b1764c5
parent e5f29ff84b
1 changed files with 121 additions and 0 deletions
--- a/assets/art/rothko/index.html
+++ b/assets/art/rothko/index.html
@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rothko Generator</title>
+  <style>
+    body { background: black; }
+    svg {
+      position: absolute;
+      inset: 0;
+      margin: auto;
+    }
+  </style>
+  </head>
+  <body>
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 300 400"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <filter id="paint" x="0" y="0">
+          <feTurbulence
+            id="turbSpread"
+            result="turbulenceFine"
+            type="fractalNoise"
+            baseFrequency="4"
+            numOctaves="1"
+          />
+          <feTurbulence
+            id="turbDistortion"
+            seed="0"
+            result="turbulenceFat"
+            type="fractalNoise"
+            baseFrequency="0.005"
+            numOctaves="5"
+          />
+          <feDisplacementMap
+            in="SourceGraphic"
+            in2="turbulenceFat"
+            result="sloppy"
+            scale="4"
+          />
+          <feGaussianBlur in="sloppy" result="blurred" stdDeviation="3" />
+          <feDisplacementMap
+            in="blurred"
+            in2="turbulenceFine"
+            result="final"
+            scale="5"
+          />
+        </filter>
+      </defs>
+      <svg
+        viewBox="0 0 300 400"
+        x="0"
+        y="0"
+        width="300"
+        height="400"
+        id="rects"
+        filter="url(#paint)"
+      ></svg>
+      <script type="text/javascript">
+        <![CDATA[
+          function randomHsl() {
+            return 'hsl(' + (Math.random() * 360) + ', ' + (Math.pow(Math.random(), 4) * 90 + 10) + '%, '+ (Math.random() * 85 + 5) +'%)';
+          }
+          let stripes = Math.max(1, Math.floor(Math.random() * 4 + 1.7));
+          let gap = Math.pow(Math.random(), 1.5) * 8 + 4;
+          let mainWidth = 300 - gap + Math.random() * 60 - 60;
+          let mainHeight = 400 - gap + Math.random() * 60 - 60;
+          let shapes = Array(stripes);
+          let seed = Math.floor(Math.random() * 100000);
+          document.getElementById('turbSpread').setAttributeNS(null, 'seed', seed);
+          document.getElementById('turbDistortion').setAttributeNS(null, 'seed', seed);
+          for (let i=0; i < stripes; i++) {
+            shapes[i] = {
+              color: randomHsl(),
+              height: Math.random(),
+              width: mainWidth + (Math.random() < 0.2 ? Math.random() * 100 - 50 : 0),
+              opacity: 1 - Math.pow(Math.random(), 5),
+              x: null,
+              y: null
+            };
+          }
+          let totalHeight = 0;
+          for (let i=0; i < stripes; i++) { totalHeight += shapes[i].height; }
+          let heightScale = (mainHeight - (gap * (stripes - 1))) / totalHeight;
+          let cumY = (400 - mainHeight) / 2;
+          for (let i=0; i < stripes; i++) {
+            shapes[i].x = 150 - shapes[i].width / 2;
+            shapes[i].y = cumY;
+            shapes[i].height *= heightScale;
+            cumY += shapes[i].height + gap;
+          }
+          shapes.unshift({
+            color: randomHsl(),
+            height: 500,
+            width: 400,
+            x: -50,
+            y: -50
+          });
+          let domRects = document.getElementById('rects');
+          let xmlns = "http://www.w3.org/2000/svg";
+          for (let i=0; i < shapes.length; i++) {
+            let newRect = document.createElementNS(xmlns, 'rect');
+            newRect.setAttributeNS(null, 'x', shapes[i].x);
+            newRect.setAttributeNS(null, 'y', shapes[i].y);
+            newRect.setAttributeNS(null, 'height', shapes[i].height);
+            newRect.setAttributeNS(null, 'width', shapes[i].width);
+            newRect.setAttributeNS(null, 'fill', shapes[i].color);
+            newRect.setAttributeNS(null, 'opacity', shapes[i].opacity);
+            domRects.appendChild(newRect);
+          }
+        ]]>
+      </script>
+    </svg>
+  </body>
+</html>