3 Commits
1.0.1 ... 2.0.1

5 changed files with 27 additions and 10 deletions

3
.gitmodules vendored Normal file
View File

@@ -0,0 +1,3 @@
[submodule "simplex-noise.js"]
path = simplex-noise.js
url = https://github.com/jwagner/simplex-noise.js

View File

@@ -3,7 +3,7 @@ The library for creating creepy sticky background
## Example
```html
<canvas class="wrap"></canvas>
<canvas id="wrap"></canvas>
<svg style="position: absolute">
<defs>
@@ -15,7 +15,7 @@ The library for creating creepy sticky background
</svg>
```
```js
import("/js/modules/gallery.mjs").then((module) => {
import("/js/modules/womb3-simplex.mjs").then((module) => {
// Initializing the instance
const womb = new module.womb(document.getElementById("wrap"));
womb.init();
@@ -39,6 +39,19 @@ import("/js/modules/gallery.mjs").then((module) => {
}, true);
});
```
```css
#wrap {
background-color: black; /* can be alpha 50% and etc */
filter: url("#blob") contrast(var(--contrast, 30));
/* mix-blend-mode: ... as you wish */
}
```
## Installation
```bash
cd simplex-noise.js
./build.sh
```
## Demonstration
### [CodePen](https://codepen.io/mirzaev-sexy/pen/BaxQjYo)

1
simplex-noise.js Submodule

Submodule simplex-noise.js added at 6bfff874f5

1
simplex-noise.mjs Symbolic link
View File

@@ -0,0 +1 @@
simplex-noise.js/dist/esm/simplex-noise.js

View File

@@ -1,4 +1,4 @@
import * as noise from "https://cdn.skypack.dev/perlin.js@1.0.0";
import * as noise from "./simplex-noise.mjs";
("use strict");
@@ -17,7 +17,9 @@ import * as noise from "https://cdn.skypack.dev/perlin.js@1.0.0";
* @license http://www.wtfpl.net/ Do What The Fuck You Want To Public License
* @author Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
*/
export default class womb {
export class womb {
noise = new noise.createNoise2D();
constructor(shell) {
if (typeof shell === "object") {
// Получены входные параметры
@@ -57,7 +59,7 @@ export default class womb {
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 + this.noise(x + offset, y + offset) / 2;
// Запись в реестр
this.restricted.push({
@@ -81,9 +83,6 @@ export default class womb {
// Запись размеров полотна
this.shell.width = document.body.offsetWidth;
this.shell.height = document.body.offsetHeight;
// Генерация шума
// noise.seed(Math.random());
}
generate(offset = 0, color = "red") {
@@ -98,7 +97,7 @@ export default class womb {
x,
y,
color,
0.5 + noise.simplex2(x + offset, y + offset) / 2
0.5 + this.noise(x + offset, y + offset) / 2
);
}
}
@@ -112,7 +111,7 @@ export default class womb {
// Перебор строк
// Инициализация альфа-канала
let alpha = 0.5 + noise.simplex2(x + offset, y + offset) / 2;
let alpha = 0.5 + this.noise(x + offset, y + offset) / 2;
for (const i in this.restricted) {
// Перебор запрещённых блоков