Water 3D surface

by AntowaKartowa

HTML

<body>
        <div id="overlay" style="width: 1280px; height: 592px; cursor: -webkit-grab;"></div>
        <div id="ui" style="top: 0px; -webkit-perspective: 512.6870390403877px; width: 1280px; height: 592px;">
            <div id="camera" style="width: 1280px; height: 592px; -webkit-transform: translate3d(0px, 0px, 512.6870390403877px) matrix3d(0.8942415714263916, -0.2992910146713257, -0.33280161023139954, 0, 0, -0.7435500621795654, 0.6686802506446838, 0, 0.4475846588611603, 0.5979616641998291, 0.6649133563041687, 0, -89.70248413085938, -418.6352233886719, -1965.50830078125, 1) translate3d(640px, 296px, 0px);">
                <canvas id="profile" width="350" height="105"></canvas>
                <div id="length"></div>
                <div id="end"></div>
                <div id="wind" style="-webkit-transform: translate3d(-1350px, 0px, 610px) rotateX(90deg);">
                    <span id="wind-speed">14.1</span><span id="wind-unit"> m/s</span>
                    <div id="wind-label">WIND</div>
                </div>

                <div id="size">
                    <span id="size-value">250</span><span id="size-unit"> m</span>
                </div>
                <div id="size-label">SIZE</div>
                <div id="choppiness">1.5</div>
                <div id="choppiness-label">CHOPPINESS</div>
            <div style="position: absolute; width: 66.66666666666666px; height: 3px; background-color: rgb(52, 137, 189); -webkit-transform-origin: 50% 0%; -webkit-transform: translate3d(-200px, 0px, 1100px) rotateX(90deg);"></div><div style="position: absolute; width: 333.33333333333337px; height: 3px; background-color: rgb(153, 153, 153); -webkit-transform-origin: 50% 0%; -webkit-transform: translate3d(-133.33333333333334px, 0px, 1100px) rotateX(90deg);"></div><div style="position: absolute; width: 24px; height: 24px; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px;...

CSS

body {
    overflow: hidden;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
#overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
#ui {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

#camera {
    position: absolute;
    overflow: none;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#error {
    position: absolute;
    display: none;
    top: 20px;
    width: 100%;
    z-index: 2;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400px;
    color: #333333;
    text-align: center;
}
a:link {
    color: #333333;
}
a:visited {
    color: #333333;
}

#length {
    position: absolute;
    width: 2004px;
    height: 2px;
    background-color: #666666;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: translate3d(-1000px, 0, 1068px) rotateX(90deg);
    transform: translate3d(-1000px, 0, 1068px) rotateX(90deg);
}

#end {
    position: absolute;
    width: 2000px;
    height: 30px;
    border-width: 2px;
    border-color: #666666;
    border-style: none solid none solid;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: translate3d(-1000px, 0, 1055px) rotateX(90deg);
    transform: translate3d(-1000px, 0, 1055px) rotateX(90deg);
}

#wind {
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #333333;
    width: 300px;
    text-align: center;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: translate3d(0px, 0pxpx, 160px) rotateX(90deg);
    transform: translate3d(0px, 0pxpx, 160px) rotateX(90deg);
}

#wind-speed {
    font-size: 45px;
}

#wind-unit {
    font-size: 35px;
}

#wind-label {
    position: absolute;
    font-size: 35px;
    font-family:...

JavaScript

(function () {
    'use strict';

    var INITIAL_SIZE = 250,
        INITIAL_WIND = [10.0, 10.0],
        INITIAL_CHOPPINESS = 1.5;

    var UI_COLOR = 'rgb(52, 137, 189)';

    var addToVector = function (out, a, b) {
        out[0] = a[0] + b[0];
        out[1] = a[1] + b[1];
        out[2] = a[2] + b[2];
        return out;
    };

    var subtractFromVector = function (out, a, b) {
        out[0] = a[0] - b[0];
        out[1] = a[1] - b[1];
        out[2] = a[2] - b[2];
        return out;
    };

    var multiplyVectorByScalar = function (out, v, k) {
        out[0] = v[0] * k;
        out[1] = v[1] * k;
        out[2] = v[2] * k;
        return out;
    };

    var makeIdentityMatrix = function (matrix) {
        matrix[0] = 1.0;
        matrix[1] = 0.0;
        matrix[2] = 0.0;
        matrix[3] = 0.0;
        matrix[4] = 0.0;
        matrix[5] = 1.0;
        matrix[6] = 0.0;
        matrix[7] = 0.0;
        matrix[8] = 0.0;
        matrix[9] = 0.0;
        matrix[10] = 1.0;
        matrix[11] = 0.0;
        matrix[12] = 0.0;
        matrix[13] = 0.0;
        matrix[14] = 0.0;
        matrix[15] = 1.0;
        return matrix;
    };

    var makeXRotationMatrix = function (matrix, angle) {
        matrix[0] = 1.0;
        matrix[1] = 0.0;
        matrix[2] = 0.0;
        matrix[3] = 0.0;
        matrix[4] = 0.0;
        matrix[5] = Math.cos(angle);
        matrix[6] = Math.sin(angle);
        matrix[7] = 0.0;
        matrix[8] = 0.0;
        matrix[9] = -Math.sin(angle);
        matrix[10] = Math.cos(angle);
        matrix[11] = 0.0;
        matrix[12] = 0.0;
        matrix[13] = 0.0;
        matrix[14] = 0.0;
        matrix[15] = 1.0;
        return matrix;
    };

    var makeYRotationMatrix = function (matrix, angle) {
        matrix[0] = Math.cos(angle);
        matrix[1] = 0.0
        matrix[2] = -Math.sin(angle);
        matrix[3] = 0.0
        matrix[4] = 0.0
        matrix[5] = 1.0
        matrix[6] = 0.0;
        matrix[7] = 0.0;
        matrix[8]...