mirzaev/womb3-simplex.mjs
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

refreshed 2025

Browse Source
This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich
2025-11-22 16:29:02 +07:00
parent c86be37622
commit a4e0c992a6
2 changed files with 217 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
README.md Normal file
View File

@@ -0,0 +1,47 @@
# womb3-simplex.mjs
The library for creating creepy sticky background
## Example
```html
<canvas class="wrap"></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>
```
```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)
<br>
![Demonstration gid](assets/1.gif)

298
womb3-simplex.js
View File

@@ -1,192 +1,210 @@
import * as noise from "https://cdn.skypack.dev/perlin.js@1.0.0"; 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 <arsen@mirzaev.sexy> * @author Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
*/ */
class womb { export default class womb {
constructor(shell) { constructor(shell) {
if (typeof shell === "object") { 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.width = document.body.offsetWidth;
this.shell.height = document.body.offsetHeight; this.shell.height = document.body.offsetHeight;
return this; return this;
} }
return null; return null;
} }
block = { block = {
width: 28, width: 28,
height: 28 height: 28,
}; };
draw(x, y, color = "red", alpha) { draw(x, y, color = "red", alpha) {
// Запись цвета // Запись цвета
this.canvas.fillStyle = color; 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) { clean(x, y, offset, to = 0, smooth = 0.3, ticks = 3) {
// Инициализация актуального значения альфа-канала // Инициализация актуального значения альфа-канала
const alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2; const alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2;
// Запись в реестр // Запись в реестр
this.restricted.push({ this.restricted.push({
x, x,
y, y,
alpha, alpha,
from: alpha, from: alpha,
to, to,
smooth, smooth,
limit: ticks, limit: ticks,
ticks: 0 ticks: 0,
}); });
} }
dump() { dump() {
// Очистка полотна // Очистка полотна
this.canvas.clearRect(0, 0, this.shell.width, this.shell.height); this.canvas.clearRect(0, 0, this.shell.width, this.shell.height);
} }
init() { init() {
// Запись размеров полотна // Запись размеров полотна
this.shell.width = document.body.offsetWidth; this.shell.width = document.body.offsetWidth;
this.shell.height = document.body.offsetHeight; this.shell.height = document.body.offsetHeight;
// Генерация шума // Генерация шума
// noise.seed(Math.random()); // noise.seed(Math.random());
} }
generate(offset = 0, color = 'red') { generate(offset = 0, color = "red") {
for (let y = 0; y < this.shell.height; y += this.block.height) { for (let y = 0; y < this.shell.height; y += this.block.height) {
// Перебор колонок // Перебор колонок
for (let x = 0; x < this.shell.width; x += this.block.width) { for (let x = 0; x < this.shell.width; x += this.block.width) {
// Перебор строк // Перебор строк
// Рисование на полотне // Рисование на полотне
this.draw( this.draw(
x, x,
y, y,
color, color,
0.5 + noise.simplex2(x + offset, y + offset) / 2 0.5 + noise.simplex2(x + offset, y + offset) / 2
); );
} }
} }
} }
interactive(offset = 0, color = 'red') { interactive(offset = 0, color = "red") {
for (let y = 0; y < this.shell.height; y += this.block.height) { for (let y = 0; y < this.shell.height; y += this.block.height) {
// Перебор колонок // Перебор колонок
for (let x = 0; x < this.shell.width; x += this.block.width) { for (let x = 0; x < this.shell.width; x += this.block.width) {
// Перебор строк // Перебор строк
// Инициализация альфа-канала // Инициализация альфа-канала
let alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2; let alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2;
for (const i in this.restricted) { for (const i in this.restricted) {
// Перебор запрещённых блоков // Перебор запрещённых блоков
// Инициализация блока // Инициализация блока
const block = this.restricted[i]; const block = this.restricted[i];
if (x === block.x && y === block.y) { if (x === block.x && y === block.y) {
// Блок найден // Блок найден
if (block.smooth === 0) { if (block.smooth === 0) {
// Резкий переход // Резкий переход
if (block.ticks <= block.limit) { if (block.ticks <= block.limit) {
// Процесс "затухание" // Процесс "затухание"
// Запись альфа-канала для рисования // Запись альфа-канала для рисования
alpha = block.to; alpha = block.to;
// Инкрементация значения тиков // Инкрементация значения тиков
++block.ticks; ++block.ticks;
} else { } else {
// Процесс "появление" // Процесс "появление"
// Запись альфа-канала для рисования // Запись альфа-канала для рисования
alpha = block.from; alpha = block.from;
// Удаление из массива запрещённых для рисования блоков // Удаление из массива запрещённых для рисования блоков
delete this.restricted[i]; delete this.restricted[i];
} }
} else { } else {
// Плавный переход // Плавный переход
if (block.ticks < block.limit && block.alpha - block.smooth > block.to) { if (
// Процесс "затухание" block.ticks < block.limit &&
block.alpha - block.smooth > block.to
) {
// Процесс "затухание"
// Запись нового значения альфа-канала // Запись нового значения альфа-канала
block.alpha -= block.smooth; block.alpha -= block.smooth;
// Запись альфа-канала для рисования // Запись альфа-канала для рисования
alpha = block.alpha; alpha = block.alpha;
} else { } else {
// Завершён процесс "затухание" // Завершён процесс "затухание"
if (block.ticks < block.limit) { if (block.ticks < block.limit) {
// Процесс "ожидание" // Процесс "ожидание"
// Инкрементация значения тиков // Инкрементация значения тиков
++block.ticks; ++block.ticks;
// Запись альфа-канала для рисования // Запись альфа-канала для рисования
alpha = block.to; alpha = block.to;
} else { } else {
// Завершён процесс "ожидание" // Завершён процесс "ожидание"
if (block.ticks >= block.limit && block.alpha + block.smooth < block.from) { if (
// Процесс "появление" block.ticks >= block.limit &&
block.alpha + block.smooth < block.from
) {
// Процесс "появление"
// Запись нового значения альфа-канала // Запись нового значения альфа-канала
block.alpha += block.smooth; block.alpha += block.smooth;
// Запись альфа-канала для рисования // Запись альфа-канала для рисования
alpha = block.alpha; alpha = block.alpha;
} else { } else {
// Завершён процесс "появление" // Завершён процесс "появление"
// Запись альфа-канала для рисования // Запись альфа-канала для рисования
alpha = block.from; alpha = block.from;
// Удаление из массива запрещённых для рисования блоков // Удаление из массива запрещённых для рисования блоков
delete this.restricted[i]; delete this.restricted[i];
} }
} }
} }
} }
} }
} }
this.draw(x, y, color, alpha); this.draw(x, y, color, alpha);
} }
} }
} }
} }
document.dispatchEvent( document.dispatchEvent(
new CustomEvent("womb.loaded", { new CustomEvent("womb.loaded", {
detail: { womb } detail: { womb },
}) })
); );