Difference between revisions of "Template:Vilnius-Lithuania/JS/WaveScript"

Latest revision as of 18:42, 20 October 2020

/* Prerequisites:

*      Have an animWave div with an svg with a animWavePath path inside

*      call the makeWave function with element and function which returns waveParams object (width, height, waveWidth, waveHeight, waveDelta, speed, wavePoints)
*/

//var wave; var waveParams = {};

function initializeWaveAnimation(el) {

   el.style.backgroundImage = "unset";
   var wave = el.querySelector('.animWavePath');

   let myWaveParams = waveParams[el.id];

   function calculateWavePoints(factor) {
       myWaveParams = waveParams[el.id];
       let points = [];

       for (let i = 0, n = myWaveParams.wavePoints; i <= n; i++) {
           let x = i / n * myWaveParams.waveWidth;
           let sinSeed = (factor + (i + i % n)) * myWaveParams.speed * 100;
           let sinHeight = Math.sin(sinSeed / 100) * myWaveParams.waveDelta;
           let yPos = Math.sin(sinSeed / 100) * sinHeight + myWaveParams.waveHeight;
           points.push({
               x: x,
               y: yPos
           });
       }

       return points;
   }

   function buildPath(points) {
       let SVGString = "M " + points[0].x + " " + points[0].y;

       let cp0 = {
           x: (points[1].x - points[0].x) / 2,
           y: (points[1].y - points[0].y) + points[0].y + (points[1].y - points[0].y)
       };

       SVGString += " C " + cp0.x + " " + cp0.y + " " + cp0.x + " " + cp0.y + " " + points[1].x + " " + points[1].y;

       let prevCp = cp0;
       let inverted = -1;

       for (let i = 1; i < points.length - 1; i++) {
           // let cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
           let cp1 = {
               x: (points[i].x - prevCp.x) + points[i].x,
               y: (points[i].y - prevCp.y) + points[i].y
           };

           SVGString += " C " + cp1.x + " " + cp1.y + " " + cp1.x + " " + cp1.y + " " + points[i + 1].x + " " + points[i + 1].y;
           prevCp = cp1;
           inverted = -inverted;
       };

       SVGString += " L " + myWaveParams.width + " " + myWaveParams.height;
       SVGString += " L 0 " + myWaveParams.height + " Z";
       return SVGString;
   }

   let lastUpdate = window.Date.now();
   let totalTime = 0;

   function tick(timeElapsed) {
       totalTime += (timeElapsed - lastUpdate) / 1000;
       lastUpdate = timeElapsed;

       let factor = totalTime * Math.PI;
       wave.setAttribute("d", buildPath(calculateWavePoints(factor)));

       window.requestAnimationFrame(tick);
   };
   tick(performance.now());

}

function setWaveParams_default() {

   let container = document.body;
   return {
       width: container.offsetWidth,
       height: container.offsetHeight,
       waveWidth: container.offsetWidth,
       waveHeight: window.innerHeight,
       waveDelta: 15,
       speed: 0.15,
       wavePoints: 6,
   };

}

function setRandomParams() {

   return {
       waveDelta: Math.floor(Math.random() * 20) + 10,
       speed: Math.random() + 0.05,
       wavePoints: Math.floor(Math.random() * 5) + 2,
   }

}

function makeWave(element, setWaveParamsFunction = setWaveParams_default){

   waveParams[element.id] = setWaveParamsFunction();
   initializeWaveAnimation(element);
   window.addEventListener("resize", () => {
       waveParams[element.id] = setWaveParamsFunction();
   });
   window.addEventListener('load', () => {
       waveParams[element.id] = setWaveParamsFunction();
   })

}