From a4e0c992a60f62f4baf804dfb2c5b3ea9d80d7c3 Mon Sep 17 00:00:00 2001 From: mirzaev Date: Sat, 22 Nov 2025 16:29:02 +0700 Subject: [PATCH] refreshed 2025 --- README.md | 47 +++++++ womb3-simplex.js | 322 +++++++++++++++++++++++++---------------------- 2 files changed, 217 insertions(+), 152 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..fab5877 --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# womb3-simplex.mjs +The library for creating creepy sticky background + +## Example +```html + + + + + + + + + + +``` +```js +import("/js/modules/gallery.mjs").then((module) => { + // Initializing the instance + const womb = new module.womb(document.getElementById("wrap")); + womb.init(); + womb.generate(); + + // Initializing the process registers + let offset = 0; + let speed = 0.01; + + // Starting the process + setInterval(function() { + womb.dump(); + womb.generate(offset += speed); + }, 30); + + // Initializing the resizing event processor + window.addEventListener('resize', function(e) { + womb.init(); + womb.dump(); + womb.generate(offset += speed); + }, true); +}); +``` + +## Demonstration +### [CodePen](https://codepen.io/mirzaev-sexy/pen/BaxQjYo) +
+ +![Demonstration gid](assets/1.gif) diff --git a/womb3-simplex.js b/womb3-simplex.js index 1c203d6..4b3166b 100644 --- a/womb3-simplex.js +++ b/womb3-simplex.js @@ -1,192 +1,210 @@ import * as noise from "https://cdn.skypack.dev/perlin.js@1.0.0"; -"use strict"; +("use strict"); /** + * @name womb3-simplex.mjs + * + * @description + * The library for creating creepy sticky background + * + * @class + * @public + * + * {@link https://git.svoboda.works/mirzaev/womb3-simplex.mjs} + * {@link https://codepen.io/mirzaev-sexy/pen/BaxQjYo} + * + * @license http://www.wtfpl.net/ Do What The Fuck You Want To Public License * @author Arsen Mirzaev Tatyano-Muradovich */ -class womb { - constructor(shell) { - if (typeof shell === "object") { - // Получены входные параметры +export default class womb { + constructor(shell) { + if (typeof shell === "object") { + // Получены входные параметры - // Элемент для отрисовки - this.shell = shell; + // Элемент для отрисовки + this.shell = shell; - // Поле отрисовки - this.canvas = this.shell.getContext("2d"); + // Поле отрисовки + this.canvas = this.shell.getContext("2d"); - this.shell.width = document.body.offsetWidth; - this.shell.height = document.body.offsetHeight; + this.shell.width = document.body.offsetWidth; + this.shell.height = document.body.offsetHeight; - return this; - } + return this; + } - return null; - } + return null; + } - block = { - width: 28, - height: 28 - }; + block = { + width: 28, + height: 28, + }; - draw(x, y, color = "red", alpha) { - // Запись цвета - this.canvas.fillStyle = color; + draw(x, y, color = "red", alpha) { + // Запись цвета + this.canvas.fillStyle = color; - // Запись прозрачности - this.canvas.globalAlpha = alpha; + // Запись прозрачности + this.canvas.globalAlpha = alpha; - // Рисование на полотне - this.canvas.fillRect(x, y, this.block.width, this.block.height); - } + // Рисование на полотне + this.canvas.fillRect(x, y, this.block.width, this.block.height); + } - restricted = []; + restricted = []; - clean(x, y, offset, to = 0, smooth = 0.3, ticks = 3) { - // Инициализация актуального значения альфа-канала - const alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2; - - // Запись в реестр - this.restricted.push({ - x, - y, - alpha, - from: alpha, - to, - smooth, - limit: ticks, - ticks: 0 - }); - } + clean(x, y, offset, to = 0, smooth = 0.3, ticks = 3) { + // Инициализация актуального значения альфа-канала + const alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2; - dump() { - // Очистка полотна - this.canvas.clearRect(0, 0, this.shell.width, this.shell.height); - } + // Запись в реестр + this.restricted.push({ + x, + y, + alpha, + from: alpha, + to, + smooth, + limit: ticks, + ticks: 0, + }); + } - init() { - // Запись размеров полотна - this.shell.width = document.body.offsetWidth; - this.shell.height = document.body.offsetHeight; + dump() { + // Очистка полотна + this.canvas.clearRect(0, 0, this.shell.width, this.shell.height); + } - // Генерация шума - // noise.seed(Math.random()); - } + init() { + // Запись размеров полотна + this.shell.width = document.body.offsetWidth; + this.shell.height = document.body.offsetHeight; - generate(offset = 0, color = 'red') { - for (let y = 0; y < this.shell.height; y += this.block.height) { - // Перебор колонок + // Генерация шума + // noise.seed(Math.random()); + } - for (let x = 0; x < this.shell.width; x += this.block.width) { - // Перебор строк + generate(offset = 0, color = "red") { + for (let y = 0; y < this.shell.height; y += this.block.height) { + // Перебор колонок - // Рисование на полотне - this.draw( - x, - y, - color, - 0.5 + noise.simplex2(x + offset, y + offset) / 2 - ); - } - } - } + for (let x = 0; x < this.shell.width; x += this.block.width) { + // Перебор строк - interactive(offset = 0, color = 'red') { - for (let y = 0; y < this.shell.height; y += this.block.height) { - // Перебор колонок + // Рисование на полотне + this.draw( + x, + y, + color, + 0.5 + noise.simplex2(x + offset, y + offset) / 2 + ); + } + } + } - for (let x = 0; x < this.shell.width; x += this.block.width) { - // Перебор строк + interactive(offset = 0, color = "red") { + for (let y = 0; y < this.shell.height; y += this.block.height) { + // Перебор колонок - // Инициализация альфа-канала - let alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2; + for (let x = 0; x < this.shell.width; x += this.block.width) { + // Перебор строк - for (const i in this.restricted) { - // Перебор запрещённых блоков - - // Инициализация блока - const block = this.restricted[i]; - - if (x === block.x && y === block.y) { - // Блок найден - - if (block.smooth === 0) { - // Резкий переход - - if (block.ticks <= block.limit) { - // Процесс "затухание" - - // Запись альфа-канала для рисования - alpha = block.to; - - // Инкрементация значения тиков - ++block.ticks; - } else { - // Процесс "появление" - - // Запись альфа-канала для рисования - alpha = block.from; - - // Удаление из массива запрещённых для рисования блоков - delete this.restricted[i]; - } - } else { - // Плавный переход + // Инициализация альфа-канала + let alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2; - if (block.ticks < block.limit && block.alpha - block.smooth > block.to) { - // Процесс "затухание" + for (const i in this.restricted) { + // Перебор запрещённых блоков - // Запись нового значения альфа-канала - block.alpha -= block.smooth; + // Инициализация блока + const block = this.restricted[i]; - // Запись альфа-канала для рисования - alpha = block.alpha; - } else { - // Завершён процесс "затухание" - - if (block.ticks < block.limit) { - // Процесс "ожидание" - - // Инкрементация значения тиков - ++block.ticks; + if (x === block.x && y === block.y) { + // Блок найден - // Запись альфа-канала для рисования - alpha = block.to; - } else { - // Завершён процесс "ожидание" - - if (block.ticks >= block.limit && block.alpha + block.smooth < block.from) { - // Процесс "появление" + if (block.smooth === 0) { + // Резкий переход - // Запись нового значения альфа-канала - block.alpha += block.smooth; + if (block.ticks <= block.limit) { + // Процесс "затухание" - // Запись альфа-канала для рисования - alpha = block.alpha; - } else { - // Завершён процесс "появление" + // Запись альфа-канала для рисования + alpha = block.to; - // Запись альфа-канала для рисования - alpha = block.from; + // Инкрементация значения тиков + ++block.ticks; + } else { + // Процесс "появление" - // Удаление из массива запрещённых для рисования блоков - delete this.restricted[i]; - } - } - } - } - } - } + // Запись альфа-канала для рисования + alpha = block.from; - this.draw(x, y, color, alpha); - } - } - } + // Удаление из массива запрещённых для рисования блоков + delete this.restricted[i]; + } + } else { + // Плавный переход + + if ( + block.ticks < block.limit && + block.alpha - block.smooth > block.to + ) { + // Процесс "затухание" + + // Запись нового значения альфа-канала + block.alpha -= block.smooth; + + // Запись альфа-канала для рисования + alpha = block.alpha; + } else { + // Завершён процесс "затухание" + + if (block.ticks < block.limit) { + // Процесс "ожидание" + + // Инкрементация значения тиков + ++block.ticks; + + // Запись альфа-канала для рисования + alpha = block.to; + } else { + // Завершён процесс "ожидание" + + if ( + block.ticks >= block.limit && + block.alpha + block.smooth < block.from + ) { + // Процесс "появление" + + // Запись нового значения альфа-канала + block.alpha += block.smooth; + + // Запись альфа-канала для рисования + alpha = block.alpha; + } else { + // Завершён процесс "появление" + + // Запись альфа-канала для рисования + alpha = block.from; + + // Удаление из массива запрещённых для рисования блоков + delete this.restricted[i]; + } + } + } + } + } + } + + this.draw(x, y, color, alpha); + } + } + } } document.dispatchEvent( - new CustomEvent("womb.loaded", { - detail: { womb } - }) + new CustomEvent("womb.loaded", { + detail: { womb }, + }) );