​

// https://necessarydisorder.wordpress.com/2017/11/15/drawing-from-noise-and-then-making-animated-loopy-gifs-from-there/

// Note: this program has no dependencies, and does not require SimplexNoise. 

// Processing (Java) version: https://gist.github.com/golanlevin/46a8fd29114f7a9f41345a9f0ccfd059

var myScale = 0.015;

var radius = 100.0;

var nSteps = 150;

var noiseImage;

var noiseImage2;

var noiseImage3;

var noiseImage4;

var noiseImage5;

var offset = 0;

var dropoff = 0.4;

var octave = 2;

function setup() {

  createCanvas(500, 400);

  noiseImage = makeNoiseImage(noiseImage);

  noiseImage2 = makeNoiseImage(noiseImage2, 'rgba(66, 99, 64, 1)', threshold=3.02);

  // 42, 56, 39

  offset = 0.3

  noiseImage5 = makeNoiseImage(noiseImage5, 'rgba(42, 56, 39, 1)',

  threshold=2.05);

  offset = 4;

  noiseImage3 = makeNoiseImage(noiseImage2, 'rgba(151, 199, 177, 1)', threshold=2.15);

  offset = 3;

  dropoff = 0.86;

  octave = 3;

  myScale -= 0.002

  noiseImage4 = makeNoiseImage(noiseImage2, 'rgba(93, 162, 168, 1)', threshold=1.17);

}

​

function draw() {

  background(color(79, 62, 69));

  // image(noiseImage, 0,0);

  image(noiseImage2, 0, 0);

  image(noiseImage3, 0, 0);

  image(noiseImage4, 0, 0);

  image(noiseImage5, 0, 0);

​

}

​

​

function makeNoiseImage(im,colorStr='rgba(239, 209, 153, 1)', threshold= 1.9) {

  var noiseAreaSize = width;

  im = createImage(noiseAreaSize, noiseAreaSize);

  im.loadPixels();

  var pipSize = 4;

  noiseDetail(octave, dropoff);

  for (var x = 0; x < noiseAreaSize; x ++) {

    for (var y = 0; y < noiseAreaSize; y ++) {

      var g = 255.0 * 

          noise(myScale * x, myScale * y +offset);

      if(g > 255.0 / threshold){

        g = color(colorStr);

      }

      else{

        g = color('rgba(0, 0, 0, 0.0)');

      }

      var pixelCol = g;

      im.set(x, y, pixelCol);

    }

  }

​

  im.updatePixels();

  return im

}

​

​

​

​

​

​

​

​

​