demo3d.html

<!DOCTYPE html>
<title>Perlin noise</title>
<style>
.centerbox {
  /* flexbox, por favor */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  width: 100%;
  height: 100%;
  margin: 0; padding: 0;
}
body, html { width: 100%; height: 100%; padding: 0; margin: 0; }
canvas {
  /* border-radius: 30px;  Border radiuses don't seem to work with putImageData */
  box-shadow: 0 0 10px #777;
  width: 1024px;
  height: 768px;
}
body {
  background-color: #eee;
}
</style>
<div class='centerbox'><canvas></canvas></div>
<script src='perlin.js'></script>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 1024;
canvas.height = 768;

var ctx = canvas.getContext('2d');

var image = ctx.createImageData(canvas.width, canvas.height);
var data = image.data;

var height = 0;

var fn = 'simplex'

function drawFrame() {
  var start = Date.now();
  // Cache width and height values for the canvas.
  var cWidth = canvas.width;
  var cHeight = canvas.height;

  var max = -Infinity, min = Infinity;
  var noisefn = fn === 'simplex' ? noise.simplex3 : noise.perlin3;

  for (var x = 0; x < cWidth; x++) {
    for (var y = 0; y < cHeight; y++) {
      var value = noisefn(x / 50, y / 50, height);

      if (max < value) max = value;
      if (min > value) min = value;

      value = (1 + value) * 1.1 * 128;

      var cell = (x + y * cWidth) * 4;
      data[cell] = data[cell + 1] = data[cell + 2] = value;
      //data[cell] += Math.max(0, (25 - value) * 8);
      data[cell + 3] = 255; // alpha.
    }
  }

  var end = Date.now();

  ctx.fillColor = 'black';
  ctx.fillRect(0, 0, 100, 100);
  ctx.putImageData(image, 0, 0);

  ctx.font = '16px sans-serif'
  ctx.textAlign = 'center';
  ctx.fillText(fn + ' rendered in ' + (end - start) + ' ms', cWidth / 2, cHeight - 20);

  if(console) {
    console.log(fn + ' rendered in ' + (end - start) + ' ms', 'range: ' + min + ' to ' + max);
  }

  height += 0.05;
  requestAnimationFrame(drawFrame);
}

document.onclick = function() {
  // Swap noise function on click.
  fn = fn === 'simplex' ? 'perlin' : 'simplex';
};

requestAnimationFrame(drawFrame);

</script>