55 lines
2.6 KiB
JavaScript
55 lines
2.6 KiB
JavaScript
|
const grid = document.querySelector('#grid');
|
||
|
|
const body = document.body;
|
||
|
|
let index = -1;
|
||
|
|
let toggle = true;
|
||
|
|
const scaleFilter = document.querySelector('#scale');
|
||
|
|
const frequencyFilterX = document.querySelector('#frequencyX');
|
||
|
|
const frequencyFilterY = document.querySelector('#frequencyY');
|
||
|
|
const displacement = document.querySelectorAll('fedisplacementmap');
|
||
|
|
const frequency = document.querySelectorAll('feturbulence');
|
||
|
|
let totalVal = [];
|
||
|
|
|
||
|
|
|
||
|
|
document.addEventListener("DOMContentLoaded", function(){
|
||
|
|
updateCell();
|
||
|
|
grid.querySelectorAll(".cell").forEach(cell => {
|
||
|
|
index += 1;
|
||
|
|
var displaceVal = displacement[index];
|
||
|
|
var freqVal = frequency[index];
|
||
|
|
var totalX = Math.min(0.05, Math.max(Math.random() * 90)/915000);
|
||
|
|
var totalY = Math.min(0.05, Math.max(Math.random() * 90)/915000);
|
||
|
|
var scaleVal = Math.min(40, ((Math.random() * 80)/30));
|
||
|
|
|
||
|
|
displaceVal.setAttribute("scale", (scaleFilter.value * scaleVal));
|
||
|
|
freqVal.setAttribute("baseFrequency", (frequencyFilterX.value * totalX) + ' ' + (frequencyFilterY.value * totalY));
|
||
|
|
body.querySelectorAll(".slider").forEach(slider => {
|
||
|
|
|
||
|
|
slider.addEventListener('input', e => {
|
||
|
|
displaceVal.setAttribute("scale", (scaleFilter.value * scaleVal));
|
||
|
|
freqVal.setAttribute("baseFrequency", (frequencyFilterX.value * totalX) + ' ' + (frequencyFilterY.value * totalY));
|
||
|
|
updateCell();
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
function updateCell(){
|
||
|
|
grid.querySelectorAll(".cell").forEach(cell => {
|
||
|
|
cell.style.setProperty("--angle", Math.floor(Math.random() * 360) + "deg");
|
||
|
|
cell.style.setProperty("--angle1", Math.floor(Math.random() * 100));
|
||
|
|
cell.style.setProperty("--angle2", Math.floor(Math.random() * 100));
|
||
|
|
cell.style.setProperty("--scale", (Math.floor(Math.random() * 100) * 0.01) + 0.35);
|
||
|
|
cell.style.setProperty("--scale2", (Math.floor(Math.random() * 100) * 0.01) + 0.35);
|
||
|
|
cell.style.setProperty("--radius1", Math.max(100, Math.random() * 200));
|
||
|
|
cell.style.setProperty("--radius2", Math.max(100, Math.random() * 200));
|
||
|
|
cell.style.setProperty("--radius3", Math.max(100, Math.random() * 200));
|
||
|
|
cell.style.setProperty("--radius4", Math.max(100, Math.random() * 200));
|
||
|
|
cell.style.setProperty("--depth", Math.max(10, (Math.random() * 50)));
|
||
|
|
cell.style.setProperty("--colorA","var(--color" + Math.floor(Math.random() * 4) + ")");
|
||
|
|
cell.style.setProperty("--colorB","var(--color" + Math.floor(Math.random() * 4) + ")");
|
||
|
|
cell.style.setProperty("--colorC","var(--color" + Math.floor(Math.random() * 4) + ")");
|
||
|
|
cell.style.setProperty("--colorD","var(--color" + Math.floor(Math.random() * 4) + ")");
|
||
|
|
});
|
||
|
|
}
|