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)
+
+
+
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 },
+ })
);