Description:

    A p5.js example of random() vs noise(), and how to use noise()

    Click play to see the output

*/

​

var step;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  step = 0;

  background(0);

}

​

function draw() {

  //background(0);

  //beginShape lets you draw more complex shapes by specifying coordinates for points

  //the coordinates are connected based on what mode beginShape is passed as a parameter

  //using random to draw generates a "chaotic" output

  /*

  beginShape(LINES);

  for(var i=0;i<width;i++){

    var x = map(i, 0, width, 0, 10);

    var y = height * random(x);

    vertex(i, y);

  }

  endShape();

  */

  /*

  //using perlin noise to draw instead of random generates a smoother output

  beginShape();

  for(var i=0;i<width;i++){

    var x = map(i, 0, width, 0, 10);

    var y = height * noise(x);

    vertex(i, y);

  }

  endShape();

  */

  //the larger the "steps" in the noise seed to more variable(more random appearing) the result

  //adding to the step value to get a different noise value for each color

  var x = width*noise(step);

  var y = height*noise(step + 5);

  var red = 255 * noise(step + 10);

  var blue = 255 * noise(step + 15);

  var green = 255 * noise(step + 20);

  var alpha = 255 * noise(step + 25);

  noStroke();

  fill(red, green, blue, alpha);

  ellipse(x, y, 100, 100);

  //since we're not using a for loop here, we need to increment the step value every frame

  //if we don't, the output of noise(step) will always be the same!

  step = step + 0.01; //try changing this value!!

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  background(0);

}