Perlin Noise

Canvas generator

by Konstantin Cryman

HTML

<!DOCTYPE html>
<html>
 <body>
<canvas title="bonus" id="myCan1" class="miniCan"></canvas>
<canvas title="danger" id="myCan2" class="miniCan"></canvas>
<canvas title="secret" id="myCan3" class="miniCan"></canvas>
<canvas title="flora" id="myCan4" class="miniCan"></canvas>
<canvas title="fauna" id="myCan5" class="miniCan"></canvas>
<canvas title="resources" id="myCan6" class="miniCan"></canvas>
<canvas title="" id="myCan7" class="miniCan"></canvas>
<canvas title="" id="myCan8" class="miniCan"></canvas>
<canvas title="" id="myCan9" class="miniCan"></canvas>

<canvas id="myCanvas"></canvas>
<br/>

bonus: <div class="bar" id="myCan1Bar"><span style="background: #ffff00;"></span></div><br>
danger: <div class="bar" id="myCan2Bar"><span style="background: #ff0000;"></span></div><br>
secret: <div class="bar" id="myCan3Bar"><span style="background: #ff00ff;"></span></div><br>
flora: <div class="bar" id="myCan4Bar"><span style="background: #00ff00;"></span></div><br>
fauna: <div class="bar" id="myCan5Bar"><span style="background: #00ffff;"></span></div><br>
resources: <div class="bar" id="myCan6Bar"><span style="background: #cccccc;"></span></div><br>

<br/>
<input id="T1" type="range" min="1" max="20" step="1" value="20"><span id="T1d"><span/>

<!--<br/>
<input id="T2" type="range" min="-1" max="1" step="0.01" value="0">
<br/>
<input id="T3" type="range" min="-1" max="1" step="0.01" value="0">
<br/>
<input id="T4" type="range" min="-1" max="1" step="0.01" value="0">
 -->
</body>
</html>

CSS

#myCanvas{
  border:1px; 
  solid #d3d3d3; 
  width: 500px;
}
.miniCan{
  width: 50px;
}
.bar{
  width: 300px;
  position: relative;
  border: 1px solid #333;
} 

.bar span{
  display: block;
  height: 20px;
  border: 1px solid #ccc;
}
input{
  display: inline-block;
}

canvas {
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
	//ctx.moveTo(0,0);
  var Noise = {};
  var BuCanvas = document.createElement('canvas');
  var BuImageData = function(){
  	return BuCanvas.getContext('2d').getImageData( 0, 0, BuCanvas.width, BuCanvas.height)
  };
  
var T1 = 20;

    c.width = 50;
    c.height = 50;
    
function randomNoise(canvas, x, y, width, height, alpha) {
    x = x || 0;
    y = y || 0;
    width = width || canvas.width;
    height = height || canvas.height;
    alpha = alpha || 255;
    var g = canvas.getContext("2d"),
        imageData = g.getImageData(x, y, width, height),
        random = Math.random,
        pixels = imageData.data,
        n = pixels.length,
        i = 0;
    while (i < n) {
        pixels[i++] = pixels[i++] = pixels[i++] = (random() * 255) | 0;
        pixels[i++] = alpha;
    }
    g.putImageData(imageData, x, y);
    return canvas;
}

function perlinNoise( canvas, noise, justFilter ) {
    
    var g = canvas.getContext("2d");
      
    if( !justFilter ){
    
      Noise = noise || randomNoise((function(){
        var can = document.createElement('canvas');
        can.width = canvas.width;
        can.height = canvas.height;
        return can;
      })());
      
      for (var size = 4; size <= Noise.width; size *= 2) {
          var x = (Math.random() * (Noise.width - size)) | 0,
              y = (Math.random() * (Noise.height - size)) | 0;
          g.globalAlpha = 4 / size;
          g.drawImage( Noise, x, y, size, size, 0, 0, canvas.width, canvas.height);
      }
      
      BuCanvas.width = canvas.width;
      BuCanvas.height = canvas.height;
      BuCanvas.getContext('2d')
      		.putImageData( g.getImageData( 0, 0, BuCanvas.width, BuCanvas.height), 0, 0 );
      
      var imageData = g.getImageData( 0, 0, canvas.width, canvas.height), 
          pixels = imageData.data, 
          n = pixels.length, 
          i = 0;
           // g.save();
        /* Scale random...