Processing Perlin noise, gaussian

2015-08-22 Perlin noise, gaussian

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/*
 title: Noise PseudoPerlin
 date: 2015-08-22
 */
int index = 0;
int[] clrs = {#d20962, #f47721, #7ac143, #00a78e, #00bce4, #7d3f98, 
  #0079bf, #70b500, #ff9f1a, #eb5a46, #f2d600, #c377e0, #ff78cb, #00c2e0, #51e898, #c4c9cc};
float noiseOff, y;
int num = 0;
color grass = (167, 207, 78);
color water = (67, 198, 198);

              
void setup() {
  size(800, 600);
  frameRate(1);
}
void draw() {
  fill(40, 40, 40, 95);
  rect(0, 0, width, height);
  num = width;

 /* index = (index + 1) % num;
  for (int i=0; i < width/(num-1); i++) { //columns
    for (int j=0; j < height/(num-1); j++) { // rows
      int pos = (index + i) % num;
      fill(clrs[pos]);
      ellipse(20*i, 20*j, 10, 10);
    }
  */
  
  // noise
    translate(0, height-150);
    pushMatrix();
  for (int i=0; i< num; i+=2.5) {
    y = 150*noise(noiseOff); // PERLIN NOISE
  // float y = 50*randomGaussian(); // RANDOM GAUSSIAN
    line(i, 150, i, y);
    //fill(0);
   stroke(67, 198, 198);
	//stroke(167, 207, 78);
      ellipse(i,y, 3, 3);
    noiseOff += 0.05;
  }
    popMatrix();
     // randomGaussian
  for (int i=0; i< num; i+=5) {
    float y = 50*randomGaussian();
    line(i, 540,i, y+540);
    ellipse(i, y+540, 3,3);
  }
}

// Utilities functions
void keyPressed() {
  println("saving picture");
  String name = String.valueOf(year()) + "-" + String.valueOf(month()) + "-" + String.valueOf(day()) + "-frame-"+ frameCount+".png";
  save(name);
  println("picture saved");
}