Wavy menu

by Christian Sonne

HTML

<canvas id="displayCanvas" width="1024px" height="576px"></canvas>
<div class="container">
    <form>
        <input type="button" id="btnNormalize" value="normalize" />
        <input type="button" id="btnRegenerate" value="regenerate"/>
     </form>
</div>
<div class="container">
    Foo
</div>

CSS

body {
    background-color:#ffffff;
    color:#333333;
}

html, body {
    padding: 0;
    margin: 0;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
}

#displayCanvas {  
    top:0;
    position: fixed;
    z-index: 1;
}
.container {
    z-index: 2;
    width:1024px;
    height:100vh;
    margin:0 auto;
}

JavaScript

canvasApp();
var normalize = false;
var last = 0;
function canvasApp() {

    var displayCanvas = document.getElementById("displayCanvas");
    var context = displayCanvas.getContext("2d");
    var displayWidth = displayCanvas.width;
    var displayHeight = displayCanvas.height;

    //buttons

    var btnRegenerate = document.getElementById("btnRegenerate");
    btnRegenerate.addEventListener("click", regeneratePressed, false);
    
    var btnNormalize = document.getElementById("btnNormalize");
    btnNormalize.addEventListener("click", function() {normalize = true;}, false);

    var numCircles;
    var maxMaxRad;
    var minMaxRad;
    var minRadFactor;
    var circles;
    var iterations;
    var numPoints;
    var timer;
    var drawsPerFrame;
    var drawCount;
    var bgColor, urlColor;
    var lineWidth;
    var colorParamArray;
    var colorArray;
    var dataLists;
    var minX, maxX, minY, maxY;
    var xSpace, ySpace;
    var lineNumber;
    var twistAmount;
    var fullTurn;
    var lineAlpha;
    var maxColorValue;
    //console.log("A");
    init();

    function init() {
        numCircles = 3;
        maxMaxRad = 200;
        minMaxRad = 200;
        minRadFactor = 0;
        iterations = 4;
        numPoints = Math.pow(2, iterations) + 1;
        drawsPerFrame = numPoints;

        fullTurn = Math.PI * 2 * numPoints / (1 + numPoints);

        minX = -maxMaxRad;
        maxX = displayWidth + maxMaxRad;
        minY = displayHeight / 2 - 50;
        maxY = displayHeight / 2 + 50;

        twistAmount = 0.6 * Math.PI * 2;

        stepsPerSegment = Math.floor(200 / numCircles);

        maxColorValue = 180;
        lineAlpha = 0.06;

        bgColor = "#ffffff";
        urlColor = "#cccccc";

        lineWidth = 30.25;
        startGenerate();
    }

    function startGenerate() {
        drawCount = 0;
        context.setTransform(1, 0, 0, 1, 0, 0);

        context.clearRect(0, 0, displayWidth, displayHeight);

        setCircles();

       ...