Perlin Noise Generator

Contains class for generating Perlin Noise

by realhunts

HTML

<div id="container">
    <input id='seed' type='number' value='1288090'>Seed:</input><br/>
    <canvas id="canvas" width="128" height="128">
    </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:215px;
}
input[type=button]{
    width:70px;
}
input[type=number]{
    float:right;
}

JavaScript

var noise;
var z = 0;
var myTimer = 0;
var seed = 1;
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 = 128 + 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 & 65535) + (this.m_w >> 16)) & this.mask;
        var result = ((this.m_z << 16) + this.m_w) & this.mask;
        result /= 4294967296;
        return result + 0.5;
    };
}

function ImprovedPerlin(seed){
    this.p = new Array(512);
    this.rand = new Rand(seed);
    
    for(var i = 0; i < 256; i++)
        this.p[i] = i;
    
    for(var i = 255; i > 0; i--){
        var j = Math.floor(this.rand.Next() * (i + 1));
        var tmp =...