// Create a canvas

  createCanvas(400, 400);

  // Create a slider

  stepSlider = createSlider(0, 100, 50);

  stepSlider.position(10, 10);

  stepSlider.style('width', '200px');

  // Set up our variables

  howmany = 400; // number of points in line

  scaling = 100; // height of points

  // Set up starting point

  start = 0;

}

​

function draw() {

  // Empty the numbers array

  numbers = [];

  closenumbers = [];

  // Get the step length from the slider

  step = map(stepSlider.value(),0,100,0.005,0.03);

  // Loop over number of points for numbers

  for (let i = 0; i < howmany; i++) {

    // Generate a random number

    number = noise(start + i*step);

    // Put that number in the numbers array

    numbers.push(number);

  }

  // Loop over number of points for closenumbers

  for (let i = 0; i < howmany; i++) {

    // Generate a random number

    number = noise(1000 + start + i*step*0.5);

    // Put that number in the numbers array

    closenumbers.push(number);

  }

  // Colour the background

  background(50,50,150);

  //  -------------------------

  //  DRAW NUMBERS

  // Colour the line

  fill(255,150,150);

  noStroke();

  // Start drawing the line

  beginShape();

  vertex(0,height)

  // Loop over our numbers array

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

    // Calculate the x value

    let x = i * width/(numbers.length-1);

    // Calculate the y value

    let y = scaling * (numbers[i] - 0.5) + height / 2

    // Draw a vertex of the shape

    vertex(x,y);

  }

  // Go to bottom right

  vertex(width, height)

  // End the shape

  endShape();

  //  -------------------------

  //  DRAW CLOSENUMBERS

  // Colour the line

  fill(255,200,200);

  noStroke();

  // Start drawing the line

  beginShape();

  vertex(0,height)

  // Loop over our closenumbers array

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

    // Calculate the x value

    let x = i * width/(closenumbers.length-1);

    // Calculate the y value

    let y = scaling * (closenumbers[i] - 0.5) + 3 * height / 4

    // Draw a vertex of the shape

    vertex(x,y);

  }

  // Go to bottom right

  vertex(width, height)

  // End the shape

  endShape();

  start += step;

}