Perlin Noise 2D as image

by trych

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.12/p5.min.js"></script>

JavaScript

// noise code originally by
// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/ikwNrFvnL3g

var inc = 0.01;
var noiseImg;

function setup() {
  createCanvas(640, 360);
  pixelDensity(1);
	background("red");
  
  var yoff = 0;
	noiseImg = createImage(300, 300);
  noiseImg.loadPixels();
  for (var y = 0; y < height; y++) {
    var xoff = 0;
    for (var x = 0; x < width; x++) {
      var index = (x + y * width) * 4;
      var r = noise(xoff, yoff) * 255;
      noiseImg.pixels[index + 0] = r;
      noiseImg.pixels[index + 1] = r;
      noiseImg.pixels[index + 2] = r;
      noiseImg.pixels[index + 3] = 255;
      xoff += inc;
    }
    yoff += inc;
  }
  noiseImg.updatePixels();
}

function draw() {
  image(noiseImg, 0, 0);
}