Sinus mesh effect

js.js

/**
 *
 * @author Henryk Krasuski 
 * @date 2022-03-07
 *
 */


// ===================================================
// Animate interrupt
// ===================================================

var tick=0;

function render_text(x, y, str, scale, colorA, colorB) {
    var grad = dc.createLinearGradient(0,y,0,y+scale);
    grad.addColorStop(0, colorA);
    grad.addColorStop(1, colorB);
    dc.fillStyle = grad;
    dc.strokeStyle = "white";
    dc.lineWidth = 2.0;
    dc.font = scale + "px Bebas Neue";
    dc.fillText(str, x, y+scale);
    dc.strokeText(str, x, y+scale);
}

function animateloop() {
    dc.clearRect(0, 0, width, height);
    render_text((width-200)/2,10,"henryk.nu",98, "red", "yellow");

    dc.save();
    var scale = 1;//love.size * (1 + Math.sin(love.angle + angle));
    dc.strokeStyle = "#ffffff";
    dc.lineWidth = 5;
    dc.beginPath();
    var t=2*Math.PI*Math.sin(tick/160);
    var x=0;
    for (;x<width;){
        x += 20+9*Math.sin(t);
        t+=0.1;
        dc.lineTo(x, 0);
        dc.lineTo(x, height);
        x += 20+9*Math.sin(t);
        t+=0.1;
        dc.lineTo(x, height);
        dc.lineTo(x, 0);
    }
    var t=2*Math.PI*Math.sin(tick/160);
    var y=0;
    dc.moveTo(0, 0);
    for (;y<height;){
        y += 20+9*Math.sin(t);
        t+=0.1;
        dc.lineTo(0,y);
        dc.lineTo(width,y);
        x += 20+9*Math.sin(t);
        t+=0.1;
        dc.lineTo(width,y);
        dc.lineTo(0,y);
    }
    dc.stroke();
    dc.restore();
    tick++;
}

// ===================================================
// Main - Program starts here
// ===================================================

const canvas = document.querySelector("canvas");
const width = canvas.width = window.innerWidth - 10;
const height = canvas.height = window.innerHeight - 10;
const dc = canvas.getContext("2d");

canvas.oncontextmenu = function (e) {
    e.preventDefault();
};
//document.addEventListener("keydown", canvas_keydown, false);
//document.addEventListener("keyup", canvas_keyup, false);
window.setInterval(animateloop, 1000 / 60);