initialization
This commit is contained in:
418
index.html
Normal file
418
index.html
Normal file
@@ -0,0 +1,418 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
|
||||||
|
<title>womb3</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/fira.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/hack.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1 id="text">УТРОБА 3</h1>
|
||||||
|
</header>
|
||||||
|
<canvas class="shell"></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>
|
||||||
|
|
||||||
|
<script src="js/womb3-simplex.js" type="module"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('womb.loaded', function (e) {
|
||||||
|
for (const shell of document.getElementsByClassName('shell')) {
|
||||||
|
// Перебор оболочек
|
||||||
|
const layer = new e.detail.womb(shell);
|
||||||
|
if (layer instanceof e.detail.womb) {
|
||||||
|
// Удалось инициализировать слой
|
||||||
|
|
||||||
|
layer.init();
|
||||||
|
|
||||||
|
layer.generate();
|
||||||
|
// Инициализация сдвига
|
||||||
|
|
||||||
|
const text = document.getElementById('text');
|
||||||
|
const filter = document.getElementById('blob');
|
||||||
|
const blur = filter.getElementsByTagName('feGaussianBlur')[0];
|
||||||
|
const matrix = filter.getElementsByTagName('feColorMatrix')[0];
|
||||||
|
const html = document.getElementsByTagName('html')[0];
|
||||||
|
let render = 30;
|
||||||
|
let zoom = 1;
|
||||||
|
let speed = 0.01;
|
||||||
|
let offset = 0;
|
||||||
|
let color = 'red';
|
||||||
|
let drawing_diameter = 40;
|
||||||
|
let drawing_delay = 20;
|
||||||
|
let drawing_render = 50;
|
||||||
|
let flashlight_diameter = 300;
|
||||||
|
let flashlight_delay = 555;
|
||||||
|
let flashlight_render = 20;
|
||||||
|
let mask = 'unset';
|
||||||
|
let mask_target_name = "noise_text";
|
||||||
|
let mask_target = document.body;
|
||||||
|
let mask_blur = 'unset';
|
||||||
|
let mask_contrast = 'unset';
|
||||||
|
let mask_circle = 30;
|
||||||
|
let mask_custom = 'circle(30% at 50% 50%)';
|
||||||
|
let text_border_x, text_border_y, text_border_blur, text_border_color, text_border_depth;
|
||||||
|
let matrix_1 = '1 0 0 0 0';
|
||||||
|
let matrix_2 = '0 1 0 0 0';
|
||||||
|
let matrix_3 = '0 0 1 0 0';
|
||||||
|
let matrix_4 = '0 0 0 19 -9';
|
||||||
|
|
||||||
|
let x = Math.floor(Math.random() * (window.outerWidth + 1));
|
||||||
|
let y = Math.floor(Math.random() * (window.outerHeight + 1));
|
||||||
|
window.addEventListener("mousemove", (e) => (x = e.clientX, y = e.clientY));
|
||||||
|
|
||||||
|
// Инициализация инстанции выполнения
|
||||||
|
let instance;
|
||||||
|
|
||||||
|
// Инициализация инстанции выполнения рисования
|
||||||
|
let drawing_instance;
|
||||||
|
let drawing_timeouts = new Set;
|
||||||
|
function drawing() {
|
||||||
|
clearInterval(drawing_instance);
|
||||||
|
for (const drawing_timeout of drawing_timeouts) clearTimeout(drawing_timeout);
|
||||||
|
drawing_instance = setInterval(function () {
|
||||||
|
const __x = (x - mask_target.offsetLeft) / zoom;
|
||||||
|
const __y = (y - mask_target.offsetTop) / zoom;
|
||||||
|
drawing_timeouts.add(
|
||||||
|
setTimeout(() => {
|
||||||
|
for (let _y = 0; _y < layer.shell.height; _y += layer.block.height) {
|
||||||
|
// Перебор колонок
|
||||||
|
if (_y - drawing_diameter < __y && _y + drawing_diameter > __y) {
|
||||||
|
// Входит в диапазон по вертикали
|
||||||
|
for (let _x = 0; _x < layer.shell.width; _x += layer.block.width) {
|
||||||
|
// Перебор строк
|
||||||
|
if (_x - drawing_diameter < __x && _x + drawing_diameter > __x) {
|
||||||
|
// Входит в диапазон по горизонтали
|
||||||
|
layer.clean(_x, _y, offset, 0, 0.3, drawing_decay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, drawing_delay));
|
||||||
|
}, drawing_render);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Инициализация инстанции выполнения фонаря
|
||||||
|
let flashlight_instance;
|
||||||
|
let flashlight_timeouts = new Set;
|
||||||
|
function flashlight() {
|
||||||
|
clearInterval(flashlight_instance);
|
||||||
|
for (const flashlight_timeout of flashlight_timeouts) clearTimeout(flashlight_timeout);
|
||||||
|
flashlight_instance = setInterval(() => {
|
||||||
|
const _x = (x - mask_target.offsetLeft) / zoom;
|
||||||
|
const _y = (y - mask_target.offsetTop) / zoom;
|
||||||
|
flashlight_timeouts.add(
|
||||||
|
setTimeout(() => mask_target.style.clipPath = `circle(${flashlight_diameter}px at ${_x}px ${_y}px)`, flashlight_delay)
|
||||||
|
);
|
||||||
|
}, flashlight_render);
|
||||||
|
}
|
||||||
|
|
||||||
|
function text_border() {
|
||||||
|
shadow = '';
|
||||||
|
for (let i = 0; i < text_border_depth; ++i) shadow += `${text_border_x}px ${text_border_y}px ${text_border_blur}px ${text_border_color}, `;
|
||||||
|
shadow = shadow.slice(0, -2);
|
||||||
|
|
||||||
|
if (text_border_x !== 0 || text_border_y !== 0 || text_border_blur !== 0) text.style.setProperty('--text-shadow', shadow);
|
||||||
|
else text.style.setProperty('--text-shadow', 'unset');
|
||||||
|
}
|
||||||
|
|
||||||
|
function matrix_value() {
|
||||||
|
matrix.setAttribute('values', matrix_1.length > 0 && matrix_2.length > 0 && matrix_3.length > 0 && matrix_4.length > 0
|
||||||
|
? `${matrix_1} ${matrix_2} ${matrix_3} ${matrix_4}`
|
||||||
|
: ''
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
clearInterval(instance);
|
||||||
|
instance = setInterval(function () {
|
||||||
|
layer.dump();
|
||||||
|
drawing ? layer.interactive(offset += speed, color) : layer.generate(offset += speed, color);
|
||||||
|
}, render);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Первичная инициализация
|
||||||
|
init();
|
||||||
|
|
||||||
|
window.addEventListener('resize', function (e) {
|
||||||
|
layer.init();
|
||||||
|
init()
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
// Wallpaper Engine настройки
|
||||||
|
window.wallpaperPropertyListener = {
|
||||||
|
applyUserProperties: function (properties) {
|
||||||
|
// Text
|
||||||
|
if (properties.text) text.innerText = properties.text.value;
|
||||||
|
|
||||||
|
// Font
|
||||||
|
if (properties.font) text.style.setProperty('--font', properties.font.value);
|
||||||
|
|
||||||
|
// Font weight
|
||||||
|
if (properties.font_weight) text.style.setProperty('--font-weight', properties.font_weight.value * 100);
|
||||||
|
|
||||||
|
// Text color
|
||||||
|
if (properties.text_color) text.style.color = 'rgb(' + properties.text_color.value.split(' ').map(function (c) {
|
||||||
|
return Math.ceil(c * 255);
|
||||||
|
}) + ')';
|
||||||
|
|
||||||
|
// Text size
|
||||||
|
if (properties.text_size) text.style.fontSize = properties.text_size.value + 'rem';
|
||||||
|
|
||||||
|
// Text left offset (%)
|
||||||
|
if (properties.text_left) text.style.setProperty('--left', properties.text_left.value + '%');
|
||||||
|
|
||||||
|
// Text top offset (%)
|
||||||
|
if (properties.text_top) text.style.setProperty('--top', properties.text_top.value + '%');
|
||||||
|
|
||||||
|
// Text opacity (%)
|
||||||
|
if (properties.text_opacity) text.style.setProperty('--opacity', properties.text_opacity.value / 100);
|
||||||
|
|
||||||
|
// Text border X (px)
|
||||||
|
if (properties.text_border_x) {
|
||||||
|
text_border_x = properties.text_border_x.value;
|
||||||
|
text_border();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Text border Y (px)
|
||||||
|
if (properties.text_border_y) {
|
||||||
|
text_border_y = properties.text_border_y.value;
|
||||||
|
text_border();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Text border blur (px)
|
||||||
|
if (properties.text_border_blur) {
|
||||||
|
text_border_blur = properties.text_border_blur.value;
|
||||||
|
text_border();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Text border depth
|
||||||
|
if (properties.text_border_depth) {
|
||||||
|
text_border_depth = properties.text_border_depth.value;
|
||||||
|
text_border();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Text border color
|
||||||
|
if (properties.text_border_color) {
|
||||||
|
text_border_color = 'rgb(' + properties.text_border_color.value.split(' ').map(function (c) {
|
||||||
|
return Math.ceil(c * 255);
|
||||||
|
}) + ')';
|
||||||
|
text_border();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Background color
|
||||||
|
if (properties.background) document.body.style.backgroundColor = 'rgb(' + properties.background.value.split(' ').map(function (c) {
|
||||||
|
return Math.ceil(c * 255);
|
||||||
|
}) + ')';
|
||||||
|
|
||||||
|
// Blocks width
|
||||||
|
if (properties.blocks_width) layer.block.width = properties.blocks_width.value;
|
||||||
|
|
||||||
|
// Blocks height
|
||||||
|
if (properties.blocks_height) layer.block.height = properties.blocks_height.value;
|
||||||
|
|
||||||
|
// Left offset (%)
|
||||||
|
if (properties.left) document.body.style.setProperty('--left', properties.left.value + '%');
|
||||||
|
|
||||||
|
// Top offset (%)
|
||||||
|
if (properties.top) document.body.style.setProperty('--top', properties.top.value + '%');
|
||||||
|
|
||||||
|
// Zoom
|
||||||
|
if (properties.zoom) {
|
||||||
|
zoom = properties.zoom.value;
|
||||||
|
document.body.style.setProperty('--zoom', zoom);
|
||||||
|
layer.init();
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render frequency (ms)
|
||||||
|
if (properties.render) {
|
||||||
|
render = properties.render.value;
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stick to edges
|
||||||
|
if (properties.stick) {
|
||||||
|
shell.style.setProperty('--scale', properties.stick.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Blur
|
||||||
|
if (properties.blur) document.body.style.setProperty('--blur', properties.blur.value + 'px');
|
||||||
|
|
||||||
|
// Contrast
|
||||||
|
if (properties.contrast) document.body.style.setProperty('--contrast', properties.contrast.value);
|
||||||
|
|
||||||
|
// Noise blur
|
||||||
|
if (properties.noise_blur) blur.setAttribute('stdDeviation', properties.noise_blur.value);
|
||||||
|
|
||||||
|
// Speed
|
||||||
|
if (properties.speed) speed = properties.speed.value / 10000;
|
||||||
|
|
||||||
|
// Background color
|
||||||
|
if (properties.schemecolor) color = 'rgb(' + properties.schemecolor.value.split(' ').map(function (c) {
|
||||||
|
return Math.ceil(c * 255);
|
||||||
|
}) + ')';
|
||||||
|
|
||||||
|
// Drawing brush diameter
|
||||||
|
if (properties.drawing_diameter) {
|
||||||
|
drawing_diameter = properties.drawing_diameter.value / zoom;
|
||||||
|
drawing();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Drawing decay
|
||||||
|
if (properties.drawing_decay) {
|
||||||
|
drawing_decay = properties.drawing_decay.value;
|
||||||
|
drawing();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Drawing delay
|
||||||
|
if (properties.drawing_delay) {
|
||||||
|
drawing_delay = properties.drawing_delay.value;
|
||||||
|
drawing();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Drawing render frequency
|
||||||
|
if (properties.drawing_render) {
|
||||||
|
drawing_render = properties.drawing_render.value;
|
||||||
|
drawing();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Drawing
|
||||||
|
if (properties.drawing) {
|
||||||
|
if (properties.drawing.value) drawing();
|
||||||
|
else {
|
||||||
|
clearInterval(drawing_instance);
|
||||||
|
for (const drawing_timeout of drawing_timeouts) clearTimeout(drawing_timeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flashlight diameter
|
||||||
|
if (properties.flashlight_diameter) {
|
||||||
|
flashlight_diameter = properties.flashlight_diameter.value / zoom;
|
||||||
|
flashlight();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flashlight delay
|
||||||
|
if (properties.flashlight_delay) {
|
||||||
|
flashlight_delay = properties.flashlight_delay.value;
|
||||||
|
flashlight();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Flashlight render frequency
|
||||||
|
if (properties.flashlight_render) {
|
||||||
|
flashlight_render = properties.flashlight_render.value;
|
||||||
|
flashlight();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mask: circle
|
||||||
|
if (properties.mask_circle) {
|
||||||
|
mask_circle = properties.mask_circle.value;
|
||||||
|
if (mask === 'circle') mask_target.style.clipPath = `circle(${mask_circle}% at 50% 50%)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mask: custom
|
||||||
|
if (properties.mask_custom) {
|
||||||
|
mask_custom = properties.mask_custom.value;
|
||||||
|
if (mask === 'custom') mask_target.style.clipPath = mask_custom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mask target
|
||||||
|
if (properties.mask_target) {
|
||||||
|
mask_target_name = properties.mask_target.value;
|
||||||
|
|
||||||
|
shell.style.clipPath = text.style.clipPath = document.body.style.clipPath = 'unset';
|
||||||
|
|
||||||
|
if (mask_target_name === 'noise') {
|
||||||
|
html.style.setProperty('--blur', 'unset');
|
||||||
|
html.style.setProperty('--contrast', 'unset');
|
||||||
|
mask_target = shell;
|
||||||
|
}
|
||||||
|
else if (mask_target_name === 'text') {
|
||||||
|
html.style.setProperty('--blur', 'unset');
|
||||||
|
html.style.setProperty('--contrast', 'unset');
|
||||||
|
mask_target = text;
|
||||||
|
}
|
||||||
|
else if (mask_target_name === 'noise_text') {
|
||||||
|
html.style.setProperty('--blur', mask_blur + 'px');
|
||||||
|
html.style.setProperty('--contrast', mask_contrast);
|
||||||
|
mask_target = document.body;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mask === 'flashlight') flashlight();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mask blur
|
||||||
|
if (properties.mask_blur) {
|
||||||
|
html.style.setProperty('--contrast', mask_blur = mask !== 'unset' ? mask_blur + 'px' : 'unset');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mask blur
|
||||||
|
if (properties.mask_blur) {
|
||||||
|
html.style.setProperty('--contrast', mask_blur = mask !== 'unset' ? mask_blur + 'px' : 'unset');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mask contrast
|
||||||
|
if (properties.mask_contrast) {
|
||||||
|
html.style.setProperty('--contrast', mask_contrast = mask !== 'unset' ? properties.mask_contrast.value : 'unset');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mask
|
||||||
|
if (properties.mask) {
|
||||||
|
mask = properties.mask.value;
|
||||||
|
|
||||||
|
shell.style.clipPath = text.style.clipPath = document.body.style.clipPath = 'unset';
|
||||||
|
|
||||||
|
clearInterval(flashlight_instance);
|
||||||
|
for (const flashlight_timeout of flashlight_timeouts) clearTimeout(flashlight_timeout);
|
||||||
|
|
||||||
|
if (mask === 'flashlight') flashlight();
|
||||||
|
else if (mask === 'circle') shell.style.clipPath = `circle(${mask_circle}% at 50% 50%)`;
|
||||||
|
else if (mask === 'custom') shell.style.clipPath = mask_custom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Matrix 1 [r-g-b-a-w]
|
||||||
|
if (properties.matrix_1) {
|
||||||
|
matrix_1 = properties.matrix_1.value;
|
||||||
|
matrix_value();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Matrix 2 [r-g-b-a-w]
|
||||||
|
if (properties.matrix_2) {
|
||||||
|
matrix_2 = properties.matrix_2.value;
|
||||||
|
matrix_value();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Matrix 3 [r-g-b-a-w]
|
||||||
|
if (properties.matrix_3) {
|
||||||
|
matrix_3 = properties.matrix_3.value;
|
||||||
|
matrix_value();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Matrix 4 [r-g-b-a-w]
|
||||||
|
if (properties.matrix_4) {
|
||||||
|
matrix_4 = properties.matrix_4.value;
|
||||||
|
matrix_value();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user