Perlin Noise Generator

Contains class for generating Perlin Noise

by Kaeden

HTML

<div id="container">
    <input id='seed' type='number' value='1288090'>Seed:</input><br/>
    <canvas id="canvas" width="256" height="256">
    </canvas>
    <div style="float: left;">
        <input type='button' value='Start' onclick="javascript:Start();"></input><br />
        <input type='button' value='Stop' onclick="javascript:Stop();"></input><br />
        <input type='button' value='Reset' onclick="javascript:Reset();"></input>
    </div>
</div>

CSS

#canvas {
    border: solid 1px black;
    float: right;
}
#container{
    width:415px;
}
input[type=button]{
    width:70px;
}
input[type=number]{
    float:right;
}

JavaScript

var noise;
var z = 0;
var myTimer = 0;
var seed = 0;

function Start(){
    seed = document.getElementById('seed').value * 1;
    noise = new ImprovedPerlin(seed);
    
    UpdateImg('canvas');
    
    function Loop(){
        UpdateImg('canvas');
    }
    
    myTimer = setInterval(Loop, 50);
}

function Stop(){
    clearInterval(myTimer);
}

function Reset(){
    z = 0;
    var newSeed = document.getElementById('seed').value * 1;
    
    if(newSeed != seed){
        seed = newSeed;
        noise = new ImprovedPerlin(seed);
    }
    
    UpdateImg('canvas');
}

var UpdateImg = function(id){
    var canvas = document.getElementById(id);
    var width = canvas.width;
    var height = canvas.height;
    
    var ctx = canvas.getContext('2d');
    var imgData = ctx.getImageData(0,0,width,height);
    
    var wDiv = 1 / width;
    var hDiv = 1 / height;
    var zDiv = 1 / 64;
    
    for(var i = 0; i < imgData.data.length; i += 4){
        var x = (i / 4) % width;
        var y = (i / 4) / width;
        
        var density = 64 * noise.Noise(4 * x * wDiv, 4 * y * hDiv, z * zDiv) +
                      32 * noise.Noise(8 * x * wDiv, 8 * y * hDiv, z * zDiv) +
                      16 * noise.Noise(16 * x * wDiv, 16 * y * hDiv, z * zDiv) +
                      8 * noise.Noise(32 * x * wDiv, 32 * y * hDiv, z * zDiv) +
                      4 * noise.Noise(64 * x * wDiv, 64 * y * hDiv, z * zDiv) +
                      2 * noise.Noise(128 * x * wDiv, 128 * y * hDiv, z * zDiv);
        
        var val = 64 + density;
        
        imgData.data[i] = val;
        imgData.data[i + 1] = val;
        imgData.data[i + 2] = val;
        imgData.data[i + 3] = 255;
    }
    
    ctx.putImageData(imgData, 0, 0);
    z++;
};

function Rand(seed){
    this.m_w = seed;
    this.m_z = 987654321;
    this.mask = 0xffffffff;
    
    this.Next = function (){
        this.m_z = (36969 * (this.m_z & 65535) + (this.m_z >> 16)) & this.mask;
        this.m_w = (18000 * (this.m_w...