Waveform Generator

HTML

<div class="wrapper">
    
    <!-- Header -->
    <section>
            <span class="btnStartStop button">Stop/Start</span>
    </section>
    
    <!-- Feedback -->
    <section style="overflow: visible">
        <div class="waveformContainer">
            
            <div class="legend">
                <div>255</div>
                <div>-</div>
                <div>128</div>
                <div>-</div>
                <div>0</div>
            </div>
            
            <div class="waveformMask"></div>
            
            <svg width="640" height="256">
                <polyline class="plRed" />
            </svg>
            
            <div class="rule"></div>
            <div class="center"></div>
            
            <div class="values">
                <var>0</var>&nbsp;&middot
            </div>
            
            <div class="ribbonContainer"></div>
        </div>
    </section>
    
    <!-- Settings -->
    <section>
        
        <!-- Presets Management -->
        <div class="panel">
            <h2>Presets</h2>
        
            <input type="text" class="sPresets" />&nbsp;
            <div class="btnLoadPreset button">Load</div>
            <div class="btnCreatePreset button">Create</div>
        </div>
        
        <div class="clear"></div>
        
        <!-- Waveform Settings -->
        <div class="panel">
            <div class="left">
                <h2>Waveform</h2>
        
                <select class="sWaveformType jForm">
                    <option value="WAVEFORM_SINE" selected>Sine</option>
                </select>
            </div>
            
            <div class="left">
                <h2>Width</h2>
        
                <input type="number" class="nWaveformWidth jForm" value="127" min="0" max="255" />
            </div>
            
            <div class="left">
                <h2>Center</h2>
        
                <input type="number" class="nWaveformCenter jForm" value="128"...

CSS

@import url(http://fonts.googleapis.com/css?family=Francois+One);

body {
    font: 11pt/1.2em sans-serif;
    color: #fff;
    background: #222;
}

section {
    overflow: hidden;
    clear: both;
}

.left { float: left; }

.right { float: right; }

.button {
    display: inline-block;
    border: solid 2px #666;
    padding: 0 13px;
    line-height: 26px;
    margin-right: 3px;
    border-radius: 100px;
    font-size: 10pt;
    cursor: pointer;
    color: #ccc;
}

.button:hover {
    border-color: #aaa;
    color: #fff;
}

.button[disabled] {
    cursor: default;
    opacity: 0.5;
}

.button[disabled]:hover {
    border-color: #666;
    color: #ccc;
}

input[type=number] {
    line-height: 26px;
    height: 26px;
    border-radius: 2px;
    border: none;
    padding: 2px 4px;
}

input[type=text] {
    line-height: 26px;
    height: 26px;
    border-radius: 2px;
    border: none;
    padding: 2px 4px;
    width: 325px;
}

select {
    line-height: 32px;
    height: 32px;
    padding: 2px;
    border-radius: 2px;
    border: none;
}

.clear:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clear {
    display: inline-block;
}
 
html[xmlns] .clear {
    display: block;
}
 
* html .clear {
    height: 1%;
}

.wrapper {
    background-color: #333;
    background-image: linear-gradient(bottom, #333333 0%, #333333 80%, #555555 100%);
    background-image: -o-linear-gradient(bottom, #333333 0%, #333333 80%, #555555 100%);
    background-image: -moz-linear-gradient(bottom, #333333 0%, #333333 80%, #555555 100%);
    background-image: -webkit-linear-gradient(bottom, #333333 0%, #333333 80%, #555555 100%);
    background-image: -ms-linear-gradient(bottom, #333333 0%, #333333 80%, #555555 100%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #333333),
        color-stop(0.8, #333333),
        color-stop(1, #555555)
    );
 ...

JavaScript

/* neat presets:
Horizon - WAVEFORM_SINE,150,160,0.2,0,0.2,0.55,0.2,1.15
Rainbow - WAVEFORM_SINE,255,128,0.1,0,0.1,2,0.1,4
Vibrant Rainbow - WAVEFORM_SINE,127,128,0.2,0,0.2,-1.5,0.2,3
Police Lights - WAVEFORM_SINE,255,128,0.3,0,0,-1.5,0.3,-3
Rastafarian - WAVEFORM_SINE,255,128,0.2,1.65,0.2,2.85,0,-1.5
*/

//waveform parameters
var params = {
    preset: $(".sPresets").val(),
    animationSpeed: 33,
    waveform: {
        type: $(".sWaveformType").val(),
        width: Number($(".nWaveformWidth ").val()),
        center: Number($(".nWaveformCenter ").val()),
        red: {
            frequency: Number($(".nFrequencyRed").val()),
            offset: Number(0)
        }
    },
    update: function() {
        params.waveform.type = $(".sWaveformType").val();
        params.waveform.width = Number(100);
        params.waveform.center = Number(128);
        params.waveform.red.frequency = Number(100);
        params.waveform.red.offset = Number(10);
    }
};

//run-time initalizations
function init() {
    runTimer();
}
 
//polyline pseudo-objects        
var polyline = {
    red: {
        points: "",
        setPoints: function() {
            $(".plRed").attr("points", polyline.red.points);
        },
        reset: function() {
            polyline.red.points = "";
            $(".plRed").attr("points", "");
        }
    },
    setPoints: function() {
        $(".plRed").attr("points", polyline.red.points);
    },
    reset: function() {
        polyline.red.points = "";
        $(".plRed").attr("points", "");
    }
};

//keep colour value within bounds
function fixBounds(value) {
    if(value < 0)
        return 0;
    else if(value > 255)
        return 255;
    else
        return value;
}

//returns rgb css string
function getRGBString(red, green, blue) {
    return "rgb(" + red + "," +  green + "," +  blue + ")";
}

//set colour value legend
function setLegend(red, green, blue, color) {
    $("em").text(green);
    $("del").text(blue);
   ...