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

(Created page with "/* Prerequisites: * Have an animWave div with an svg with a animWavePath path inside * (<div id="animWave><svg width="100%" height="100%" version="1.1" xmlns=...")
 
Line 6: Line 6:
 
var wave;
 
var wave;
 
var waveParams;
 
var waveParams;
 +
 
function initializeWaveAnimation(el) {
 
function initializeWaveAnimation(el) {
−
    waveParams = setWaveParams();
+
waveParams = setWaveParams();
−
    el.style.backgroundImage = "unset";
+
el.style.backgroundImage = "unset";
  
−
    wave = document.getElementById("animWavePath");
+
//    wave = document.getElementById("animWavePath");
 +
wave = document.querySelectorAll('.animWavePath');
  
−
    function calculateWavePoints(factor) {
+
function calculateWavePoints(factor) {
−
        let points = [];
+
let points = [];
−
       
+
−
        for (let i = 0, n = waveParams.wavePoints; i <= n; i++) {
+
−
            let x = i/n * waveParams.waveWidth;
+
−
            let sinSeed = (factor + (i + i % n)) * waveParams.speed * 100;
+
−
            let sinHeight = Math.sin(sinSeed / 100) * waveParams.waveDelta;
+
−
            let yPos = Math.sin(sinSeed / 100) * sinHeight  + waveParams.waveHeight;
+
−
            points.push({x: x, y: yPos});
+
−
        }
+
  
−
        return points;
+
for (let i = 0, n = waveParams.wavePoints; i <= n; i++) {
−
    }
+
let x = i / n * waveParams.waveWidth;
 +
let sinSeed = (factor + (i + i % n)) * waveParams.speed * 100;
 +
let sinHeight = Math.sin(sinSeed / 100) * waveParams.waveDelta;
 +
let yPos = Math.sin(sinSeed / 100) * sinHeight + waveParams.waveHeight;
 +
points.push({
 +
x: x,
 +
y: yPos
 +
});
 +
}
  
−
    function buildPath(points) {
+
return points;
−
        let SVGString = "M " + points[0].x + " " + points[0].y;
+
}
  
−
        let cp0 = {
+
function buildPath(points) {
−
            x: (points[1].x - points[0].x) / 2,
+
let SVGString = "M " + points[0].x + " " + points[0].y;
−
            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 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)
 +
};
  
−
        let prevCp = cp0;
+
SVGString += " C " + cp0.x + " " + cp0.y + " " + cp0.x + " " + cp0.y + " " + points[1].x + " " + points[1].y;
−
        let inverted = -1;
+
  
−
        for (let i = 1; i < points.length-1; i++) {
+
let prevCp = cp0;
−
            // let cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
+
let inverted = -1;
−
            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;
+
for (let i = 1; i < points.length - 1; i++) {
−
            prevCp = cp1;
+
// let cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
−
            inverted = -inverted;
+
let cp1 = {
−
        };
+
x: (points[i].x - prevCp.x) + points[i].x,
 +
y: (points[i].y - prevCp.y) + points[i].y
 +
};
  
−
        SVGString += " L " + waveParams.width + " " + waveParams.height;
+
SVGString += " C " + cp1.x + " " + cp1.y + " " + cp1.x + " " + cp1.y + " " + points[i + 1].x + " " + points[i + 1].y;
−
        SVGString += " L 0 " + waveParams.height + " Z";
+
prevCp = cp1;
−
        return SVGString;
+
inverted = -inverted;
−
    }
+
};
  
−
    let lastUpdate = window.Date.now();
+
SVGString += " L " + waveParams.width + " " + waveParams.height;
−
    let totalTime = 0;
+
SVGString += " L 0 " + waveParams.height + " Z";
 +
return SVGString;
 +
}
  
−
    function tick(timeElapsed) {
+
let lastUpdate = window.Date.now();
−
        totalTime += (timeElapsed-lastUpdate) / 1000;
+
let totalTime = 0;
−
        lastUpdate = timeElapsed;
+
 
−
       
+
function tick(timeElapsed) {
−
        let factor = totalTime*Math.PI;
+
totalTime += (timeElapsed - lastUpdate) / 1000;
−
        wave.setAttribute("d", buildPath(calculateWavePoints(factor)));
+
lastUpdate = timeElapsed;
−
       
+
 
−
        window.requestAnimationFrame(tick);
+
let factor = totalTime * Math.PI;
−
    };
+
wave.forEach(function (e) {
−
    tick(performance.now());
+
e.setAttribute("d", buildPath(calculateWavePoints(factor)));
 +
})
 +
 
 +
 
 +
window.requestAnimationFrame(tick);
 +
};
 +
tick(performance.now());
 
}
 
}
−
function setWaveParams_default(){
+
 
−
    let container = document.body;
+
function setWaveParams_default() {
−
    return {
+
let container = document.body;
−
        width: container.offsetWidth,
+
return {
−
        height: container.offsetHeight,
+
width: container.offsetWidth,
−
        waveWidth: container.offsetWidth,
+
height: container.offsetHeight,
−
        waveHeight: window.innerHeight,
+
waveWidth: container.offsetWidth,
−
        waveDelta: 15,
+
waveHeight: window.innerHeight,
−
        speed: 0.15,
+
waveDelta: 15,
−
        wavePoints: 6,
+
speed: 0.15,
−
    };
+
wavePoints: 6,
 +
};
 
}
 
}
  
Line 86: Line 95:
 
let animElement = document.getElementById("animWave");
 
let animElement = document.getElementById("animWave");
 
if (animElement != null) {
 
if (animElement != null) {
−
    if (window.setWaveParams == null){
+
if (window.setWaveParams == null) {
−
        var setWaveParams = setWaveParams_default;
+
var setWaveParams = setWaveParams_default;
−
    }
+
}
−
    initializeWaveAnimation(animElement);
+
initializeWaveAnimation(animElement);
−
    window.addEventListener("resize", ()=>{
+
window.addEventListener("resize", () => {
−
        waveParams = setWaveParams();
+
waveParams = setWaveParams();
−
    });
+
});
 
}
 
}

Revision as of 16:13, 4 October 2020

/* Prerequisites: 

*      Have an animWave div with an svg with a animWavePath path inside
* (
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><path id="animWavePath" d="" fill="#fafafc"/></svg>
) 
*      Have a setWaveParams function which returns a waveParams object (width, height, waveWidth, waveHeight, waveDelta, speed, wavePoints)
*/

var wave; var waveParams;

function initializeWaveAnimation(el) { waveParams = setWaveParams(); el.style.backgroundImage = "unset";

// wave = document.getElementById("animWavePath"); wave = document.querySelectorAll('.animWavePath');

function calculateWavePoints(factor) { let points = [];

for (let i = 0, n = waveParams.wavePoints; i <= n; i++) { let x = i / n * waveParams.waveWidth; let sinSeed = (factor + (i + i % n)) * waveParams.speed * 100; let sinHeight = Math.sin(sinSeed / 100) * waveParams.waveDelta; let yPos = Math.sin(sinSeed / 100) * sinHeight + waveParams.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 " + waveParams.width + " " + waveParams.height; SVGString += " L 0 " + waveParams.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.forEach(function (e) { e.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, }; }


let animElement = document.getElementById("animWave"); if (animElement != null) { if (window.setWaveParams == null) { var setWaveParams = setWaveParams_default; } initializeWaveAnimation(animElement); window.addEventListener("resize", () => { waveParams = setWaveParams(); }); }