//  

// Generates a pattern using sin function and user input

// Adapted from Processing handbook. 

​

let sldScaleVal;

let sldAngleInc;

let sldBgColor;

​

function setup() {

  createCanvas(700, 100);

  angleMode(DEGREES);

  strokeWeight(2);

  // Create two sliders to allow user to control parameters

  sldScaleVal = createSlider(-200, 200, -50, 0.001);

  sldAngleInc = createSlider(-5, 5, -2, 0.001); 

  sldBgColor = createSlider(0, 255, 127);

}

​

function draw(){

  // Set the background colour according to the sldBgColor slider value

  let bgCol = sldBgColor.value();

  background(bgCol);

  // How much to scale the sin wave pattern in the x-direction

  // (the amplitude). Get this from the slider value.

  let scaleVal = sldScaleVal.value();

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

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

  // which also comes from the slider value.

  let angle = 0;

  let angleInc = sldAngleInc.value();

  // Loop over a grid of the canvas

  for (let i = -10; i < width + 10; i = i +  5) {

    for (let j = 0; j <= height; j = j + 2) {

      // Calculate a stroke colour based on the angle

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

      stroke(greyAmt);

      // Calculate x, y based on i, j values and draw a point

      let x = i + (sin(angle) * scaleVal);

      let y = j;

      point(x, y);

​

      // Increase the angle each step.

      angle = angle + angleInc;

    }

    // Step the angle forward by PI radians for the next row

    angle = angle + PI;

  }

}