Wavy menu

by Christian Sonne

HTML

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

CSS

body {
    background-color:#ffffff;
    color:#333333;
}
h4 {
    font-family: sans-serif;
    color:#333333;
    font-size:16px;
}
h3 {
    font-family: sans-serif;
    color:#333333;
}
p {
    font-family: sans-serif;
    color:#333333;
    font-size:14px;
}
#caption {
    position:absolute;
    width:1024px;
    text-align:center;
    top:520px;
    z-index:1
}
a {
    font-family: sans-serif;
    color:#d15423;
    text-decoration:none;
}
canvas {
}
#displayCanvas {
    
    top:10px;
    z-index:0;
}
div {
}
#container {
    width:1024px;
    height:576px;
    margin: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();

       ...