//

// Use sin to generate a pattern.

// Adapted from the Processing handbook.

​

function setup() {

  createCanvas(700, 100);

  background(220);

  strokeWeight(2);

  // The angle that we will sample the value of sin for.

  // This will increase along the x-axis by 'angleInc' each step. 

  let angle = 0;

  let angleInc = 0.42;

  // Loop across the width of the canvas, drawing a line each time

  for (let x = -52; x <= width; x += 5) {

    // Calculate a stroke color based on the sin value of angle

    let greyAmt = map(sin(angle), 0, 1, 0, 255);

    stroke(greyAmt);

    // Draw a sloping line at the x position

    line(x, 0, x + 50, height);

    // Increment the angle

    angle = angle + angleInc;

  }

}