// The Coding Train / Daniel Shiffman

// https://thecodingtrain.com/learning/noise/0.4-graphing-1d.html

// https://youtu.be/y7sgcFhk6ZM

​

// Adding Y-Axis: https://editor.p5js.org/codingtrain/sketches/nCYG2SCNq

// Noise Graph: https://editor.p5js.org/codingtrain/sketches/EZeHXBhei

// Noisy Sin: https://editor.p5js.org/codingtrain/sketches/M_kuAXwV2

​

// This example has been updated to use es6 syntax. To learn more about es6 visit: https://thecodingtrain.com/Tutorials/16-javascript-es6

​

let inc = 0.01;

let start = 0;

let out=0;

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(51);

  stroke(255);

  fill(10);

  noiseDetail(10);

  if (out){

    background(200,0,0)

    out=0

  }

  beginShape();

  let l=[];

  let xoff = start;

  vertex(-5, height);

  for (let x = 0; x <= width; x++) {

    stroke(255);

    // let y = random(height);

    let y = map(noise(xoff),0,1,200,height);

    vertex(x, y);

    l.push([x,y])

    if (mouseX == x && mouseY > y){

      out=1;    }

    xoff += inc;

  }

  vertex(width+5, height);

  endShape();

  fill(10);

  beginShape();

  vertex(-5, 0);

  for (let i=0;i<l.length;i++){

    let x=l[i][0];

    let y=l[i][1]-50

    vertex(x,y);

    if (mouseX == x && mouseY < y){

      out=1;    }

  }

  vertex(width+5,0);

  endShape();

  start += -inc;

  //noLoop();

}

​