Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4aeb8c5661 | |||
| e00a579d03 | |||
| ab915108c3 | |||
| 55b42895ab |
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
[submodule "simplex-noise.js"]
|
||||
path = simplex-noise.js
|
||||
url = https://github.com/jwagner/simplex-noise.js
|
||||
17
README.md
17
README.md
@@ -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)
|
||||
|
||||
BIN
assets/1.gif
Normal file
BIN
assets/1.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 MiB |
1
simplex-noise.js
Submodule
1
simplex-noise.js
Submodule
Submodule simplex-noise.js added at 6bfff874f5
1
simplex-noise.mjs
Symbolic link
1
simplex-noise.mjs
Symbolic link
@@ -0,0 +1 @@
|
||||
simplex-noise.js/dist/esm/simplex-noise.js
|
||||
@@ -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) {
|
||||
// Перебор запрещённых блоков
|
||||
Reference in New Issue
Block a user