61 lines
1.4 KiB
Markdown
61 lines
1.4 KiB
Markdown
# womb3-simplex.mjs
|
|
The library for creating creepy sticky background
|
|
|
|
## Example
|
|
```html
|
|
<canvas id="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/womb3-simplex.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);
|
|
});
|
|
```
|
|
```css
|
|
#wrap {
|
|
background-color: black; /* can be alpha 50% and etc */
|
|
filter: url("#blob") contrast(var(--contrast, 30));
|
|
/* mix-blend-mode: ... cool effects with this */
|
|
}
|
|
```
|
|
|
|
## Installation
|
|
```bash
|
|
cd simplex-noise.js
|
|
./build.sh
|
|
```
|
|
|
|
## Demonstration
|
|
### [CodePen](https://codepen.io/mirzaev-sexy/pen/BaxQjYo)
|
|
<br>
|
|
|
|
|