From ad441b9b5cd4cc5597b25fbaff2c020dace613a7 Mon Sep 17 00:00:00 2001
From: Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
Date: Sat, 14 Dec 2024 23:52:08 +0700
Subject: [PATCH] initialization

---
 index.html | 418 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 418 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e9c810a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+
+  <title>womb3</title>
+  <link rel="stylesheet" type="text/css" href="css/main.css" />
+  <link rel="stylesheet" type="text/css" href="css/fira.css" />
+  <link rel="stylesheet" type="text/css" href="css/hack.css" />
+</head>
+
+<body>
+  <header>
+    <h1 id="text">УТРОБА 3</h1>
+  </header>
+  <canvas class="shell"></canvas>
+
+  <svg style="position: absolute">
+    <defs>
+      <filter id="blob">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"></feGaussianBlur>
+        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="blob">
+        </feColorMatrix>
+      </filter>
+    </defs>
+  </svg>
+
+  <script src="js/womb3-simplex.js" type="module"></script>
+  <script>
+    document.addEventListener('womb.loaded', function (e) {
+      for (const shell of document.getElementsByClassName('shell')) {
+        // Перебор оболочек
+        const layer = new e.detail.womb(shell);
+        if (layer instanceof e.detail.womb) {
+          // Удалось инициализировать слой
+
+          layer.init();
+
+          layer.generate();
+          // Инициализация сдвига
+
+          const text = document.getElementById('text');
+          const filter = document.getElementById('blob');
+          const blur = filter.getElementsByTagName('feGaussianBlur')[0];
+          const matrix = filter.getElementsByTagName('feColorMatrix')[0];
+          const html = document.getElementsByTagName('html')[0];
+          let render = 30;
+          let zoom = 1;
+          let speed = 0.01;
+          let offset = 0;
+          let color = 'red';
+          let drawing_diameter = 40;
+          let drawing_delay = 20;
+          let drawing_render = 50;
+          let flashlight_diameter = 300;
+          let flashlight_delay = 555;
+          let flashlight_render = 20;
+          let mask = 'unset';
+          let mask_target_name = "noise_text";
+          let mask_target = document.body;
+          let mask_blur = 'unset';
+          let mask_contrast = 'unset';
+          let mask_circle = 30;
+          let mask_custom = 'circle(30% at 50% 50%)';
+          let text_border_x, text_border_y, text_border_blur, text_border_color, text_border_depth;
+          let matrix_1 = '1 0 0 0 0';
+          let matrix_2 = '0 1 0 0 0';
+          let matrix_3 = '0 0 1 0 0';
+          let matrix_4 = '0 0 0 19 -9';
+
+          let x = Math.floor(Math.random() * (window.outerWidth + 1));
+          let y = Math.floor(Math.random() * (window.outerHeight + 1));
+          window.addEventListener("mousemove", (e) => (x = e.clientX, y = e.clientY));
+
+          // Инициализация инстанции выполнения
+          let instance;
+
+          // Инициализация инстанции выполнения рисования
+          let drawing_instance;
+          let drawing_timeouts = new Set;
+          function drawing() {
+            clearInterval(drawing_instance);
+            for (const drawing_timeout of drawing_timeouts) clearTimeout(drawing_timeout);
+            drawing_instance = setInterval(function () {
+              const __x = (x - mask_target.offsetLeft) / zoom;
+              const __y = (y - mask_target.offsetTop) / zoom;
+              drawing_timeouts.add(
+                setTimeout(() => {
+                  for (let _y = 0; _y < layer.shell.height; _y += layer.block.height) {
+                    // Перебор колонок
+                    if (_y - drawing_diameter < __y && _y + drawing_diameter > __y) {
+                      // Входит в диапазон по вертикали
+                      for (let _x = 0; _x < layer.shell.width; _x += layer.block.width) {
+                        // Перебор строк
+                        if (_x - drawing_diameter < __x && _x + drawing_diameter > __x) {
+                          // Входит в диапазон по горизонтали
+                          layer.clean(_x, _y, offset, 0, 0.3, drawing_decay);
+                        }
+                      }
+                    }
+                  }
+                }, drawing_delay));
+            }, drawing_render);
+          }
+
+          // Инициализация инстанции выполнения фонаря
+          let flashlight_instance;
+          let flashlight_timeouts = new Set;
+          function flashlight() {
+            clearInterval(flashlight_instance);
+            for (const flashlight_timeout of flashlight_timeouts) clearTimeout(flashlight_timeout);
+            flashlight_instance = setInterval(() => {
+              const _x = (x - mask_target.offsetLeft) / zoom;
+              const _y = (y - mask_target.offsetTop) / zoom;
+              flashlight_timeouts.add(
+                setTimeout(() => mask_target.style.clipPath = `circle(${flashlight_diameter}px at ${_x}px ${_y}px)`, flashlight_delay)
+              );
+            }, flashlight_render);
+          }
+
+          function text_border() {
+            shadow = '';
+            for (let i = 0; i < text_border_depth; ++i) shadow += `${text_border_x}px ${text_border_y}px ${text_border_blur}px ${text_border_color}, `;
+            shadow = shadow.slice(0, -2);
+
+            if (text_border_x !== 0 || text_border_y !== 0 || text_border_blur !== 0) text.style.setProperty('--text-shadow', shadow);
+            else text.style.setProperty('--text-shadow', 'unset');
+          }
+
+          function matrix_value() {
+            matrix.setAttribute('values', matrix_1.length > 0 && matrix_2.length > 0 && matrix_3.length > 0 && matrix_4.length > 0
+              ? `${matrix_1} ${matrix_2} ${matrix_3} ${matrix_4}`
+              : ''
+            );
+          }
+
+          function init() {
+            clearInterval(instance);
+            instance = setInterval(function () {
+              layer.dump();
+              drawing ? layer.interactive(offset += speed, color) : layer.generate(offset += speed, color);
+            }, render);
+          }
+
+          // Первичная инициализация
+          init();
+
+          window.addEventListener('resize', function (e) {
+            layer.init();
+            init()
+          }, true);
+
+          // Wallpaper Engine настройки
+          window.wallpaperPropertyListener = {
+            applyUserProperties: function (properties) {
+              // Text
+              if (properties.text) text.innerText = properties.text.value;
+
+              // Font
+              if (properties.font) text.style.setProperty('--font', properties.font.value);
+
+              // Font weight
+              if (properties.font_weight) text.style.setProperty('--font-weight', properties.font_weight.value * 100);
+
+              // Text color
+              if (properties.text_color) text.style.color = 'rgb(' + properties.text_color.value.split(' ').map(function (c) {
+                return Math.ceil(c * 255);
+              }) + ')';
+
+              // Text size
+              if (properties.text_size) text.style.fontSize = properties.text_size.value + 'rem';
+
+              // Text left offset (%)
+              if (properties.text_left) text.style.setProperty('--left', properties.text_left.value + '%');
+
+              // Text top offset (%)
+              if (properties.text_top) text.style.setProperty('--top', properties.text_top.value + '%');
+
+              // Text opacity (%)
+              if (properties.text_opacity) text.style.setProperty('--opacity', properties.text_opacity.value / 100);
+
+              // Text border X (px)
+              if (properties.text_border_x) {
+                text_border_x = properties.text_border_x.value;
+                text_border();
+              }
+
+              // Text border Y (px)
+              if (properties.text_border_y) {
+                text_border_y = properties.text_border_y.value;
+                text_border();
+              }
+
+              // Text border blur (px)
+              if (properties.text_border_blur) {
+                text_border_blur = properties.text_border_blur.value;
+                text_border();
+              }
+
+              // Text border depth
+              if (properties.text_border_depth) {
+                text_border_depth = properties.text_border_depth.value;
+                text_border();
+              }
+
+              // Text border color
+              if (properties.text_border_color) {
+                text_border_color = 'rgb(' + properties.text_border_color.value.split(' ').map(function (c) {
+                  return Math.ceil(c * 255);
+                }) + ')';
+                text_border();
+              }
+
+              // Background color
+              if (properties.background) document.body.style.backgroundColor = 'rgb(' + properties.background.value.split(' ').map(function (c) {
+                return Math.ceil(c * 255);
+              }) + ')';
+
+              // Blocks width
+              if (properties.blocks_width) layer.block.width = properties.blocks_width.value;
+
+              // Blocks height
+              if (properties.blocks_height) layer.block.height = properties.blocks_height.value;
+
+              // Left offset (%)
+              if (properties.left) document.body.style.setProperty('--left', properties.left.value + '%');
+
+              // Top offset (%)
+              if (properties.top) document.body.style.setProperty('--top', properties.top.value + '%');
+
+              // Zoom
+              if (properties.zoom) {
+                zoom = properties.zoom.value;
+                document.body.style.setProperty('--zoom', zoom);
+                layer.init();
+                init()
+              }
+
+              // Render frequency (ms)
+              if (properties.render) {
+                render = properties.render.value;
+                init();
+              }
+
+              // Stick to edges
+              if (properties.stick) {
+                shell.style.setProperty('--scale', properties.stick.value);
+              };
+
+              // Blur
+              if (properties.blur) document.body.style.setProperty('--blur', properties.blur.value + 'px');
+
+              // Contrast
+              if (properties.contrast) document.body.style.setProperty('--contrast', properties.contrast.value);
+
+              // Noise blur
+              if (properties.noise_blur) blur.setAttribute('stdDeviation', properties.noise_blur.value);
+
+              // Speed
+              if (properties.speed) speed = properties.speed.value / 10000;
+
+              // Background color
+              if (properties.schemecolor) color = 'rgb(' + properties.schemecolor.value.split(' ').map(function (c) {
+                return Math.ceil(c * 255);
+              }) + ')';
+
+              // Drawing brush diameter
+              if (properties.drawing_diameter) {
+                drawing_diameter = properties.drawing_diameter.value / zoom;
+                drawing();
+              }
+
+              // Drawing decay
+              if (properties.drawing_decay) {
+                drawing_decay = properties.drawing_decay.value;
+                drawing();
+              }
+
+              // Drawing delay
+              if (properties.drawing_delay) {
+                drawing_delay = properties.drawing_delay.value;
+                drawing();
+              }
+
+              // Drawing render frequency
+              if (properties.drawing_render) {
+                drawing_render = properties.drawing_render.value;
+                drawing();
+              }
+
+              // Drawing
+              if (properties.drawing) {
+                if (properties.drawing.value) drawing();
+                else {
+                  clearInterval(drawing_instance);
+                  for (const drawing_timeout of drawing_timeouts) clearTimeout(drawing_timeout);
+                }
+              }
+
+              // Flashlight diameter
+              if (properties.flashlight_diameter) {
+                flashlight_diameter = properties.flashlight_diameter.value / zoom;
+                flashlight();
+              }
+
+              // Flashlight delay
+              if (properties.flashlight_delay) {
+                flashlight_delay = properties.flashlight_delay.value;
+                flashlight();
+              }
+
+              // Flashlight render frequency
+              if (properties.flashlight_render) {
+                flashlight_render = properties.flashlight_render.value;
+                flashlight();
+              }
+
+              // Mask: circle
+              if (properties.mask_circle) {
+                mask_circle = properties.mask_circle.value;
+                if (mask === 'circle') mask_target.style.clipPath = `circle(${mask_circle}% at 50% 50%)`;
+              }
+
+              // Mask: custom
+              if (properties.mask_custom) {
+                mask_custom = properties.mask_custom.value;
+                if (mask === 'custom') mask_target.style.clipPath = mask_custom;
+              }
+
+              // Mask target
+              if (properties.mask_target) {
+                mask_target_name = properties.mask_target.value;
+
+                shell.style.clipPath = text.style.clipPath = document.body.style.clipPath = 'unset';
+
+                if (mask_target_name === 'noise') {
+                  html.style.setProperty('--blur', 'unset');
+                  html.style.setProperty('--contrast', 'unset');
+                  mask_target = shell;
+                }
+                else if (mask_target_name === 'text') {
+                  html.style.setProperty('--blur', 'unset');
+                  html.style.setProperty('--contrast', 'unset');
+                  mask_target = text;
+                }
+                else if (mask_target_name === 'noise_text') {
+                  html.style.setProperty('--blur', mask_blur + 'px');
+                  html.style.setProperty('--contrast', mask_contrast);
+                  mask_target = document.body;
+                }
+
+                if (mask === 'flashlight') flashlight();
+              }
+
+              // Mask blur
+              if (properties.mask_blur) {
+                html.style.setProperty('--contrast', mask_blur = mask !== 'unset' ? mask_blur + 'px' : 'unset');
+              }
+
+              // Mask blur
+              if (properties.mask_blur) {
+                html.style.setProperty('--contrast', mask_blur = mask !== 'unset' ? mask_blur + 'px' : 'unset');
+              }
+
+              // Mask contrast
+              if (properties.mask_contrast) {
+                html.style.setProperty('--contrast', mask_contrast = mask !== 'unset' ? properties.mask_contrast.value : 'unset');
+              }
+
+              // Mask
+              if (properties.mask) {
+                mask = properties.mask.value;
+
+                shell.style.clipPath = text.style.clipPath = document.body.style.clipPath = 'unset';
+
+                clearInterval(flashlight_instance);
+                for (const flashlight_timeout of flashlight_timeouts) clearTimeout(flashlight_timeout);
+
+                if (mask === 'flashlight') flashlight();
+                else if (mask === 'circle') shell.style.clipPath = `circle(${mask_circle}% at 50% 50%)`;
+                else if (mask === 'custom') shell.style.clipPath = mask_custom;
+              }
+
+              // Matrix 1 [r-g-b-a-w]
+              if (properties.matrix_1) {
+                matrix_1 = properties.matrix_1.value;
+                matrix_value();
+              }
+
+              // Matrix 2 [r-g-b-a-w]
+              if (properties.matrix_2) {
+                matrix_2 = properties.matrix_2.value;
+                matrix_value();
+              }
+
+              // Matrix 3 [r-g-b-a-w]
+              if (properties.matrix_3) {
+                matrix_3 = properties.matrix_3.value;
+                matrix_value();
+              }
+
+              // Matrix 4 [r-g-b-a-w]
+              if (properties.matrix_4) {
+                matrix_4 = properties.matrix_4.value;
+                matrix_value();
+              }
+            },
+          }
+        }
+      };
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
