JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="http://mythstable.epizy.com/perlin.js"></script>
noise seed.<br>
<canvas id='canvas'></canvas>

CSS

body, html { width: 100%; height: 100%; padding: 0; margin: 0; }
canvas {
  box-shadow: 0 0 10px #777;
  width: 400px;
  height: 400px;
}
body {
  background-color: #eee;
}

JavaScript

var canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;

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

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

noise.seed(seed);

for (var x = 0; x < canvas.width; x++) {
  for (var y = 0; y < canvas.height; y++) {

    var value = Math.abs(noise.perlin2(x / 100, y / 100));
    value *= 256;
    
    //image[x][y].r = Math.abs(value) * 256;

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

  }
}

/*
noise.seed(Math.random());

for (var x = 0; x < canvas.width; x++) {
  for (var y = 0; y < canvas.height; y++) {
    // All noise functions return values in the range of -1 to 1.

    // noise.simplex2 and noise.perlin2 for 2d noise
    //var value = noise.simplex2(x / 100, y / 100);
    
    image[x][y].r = Math.abs(value) * 256; // Or whatever. Open demo.html to see it used with canvas.
   
   
  }
}
*/

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