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) + ")");
   });
}