var sliderAmplitude;

var sliderFrequency;

var sliderPhase;

​

function setup() {

  createCanvas(400, 400);

  sliderOffset = createSlider(0, 400, 100).position(10, 10).value(200);

  sliderAmplitude = createSlider(0, 100, 100).position(10, 30).value(40);

  sliderFrequency = createSlider(0, 10, 100, 0.1).position(10, 50).value(2);

  sliderPhase = createSlider(0, 360, 100).position(10, 70).value(0);

}

​

​

​

function draw() {

  background(230);

  var offset = sliderOffset.value();

  var amplitude = sliderAmplitude.value();

  var phase = sliderPhase.value();

  var frequency = sliderFrequency.value();

​

  noFill(); 

  stroke("black"); 

  strokeWeight (2.0);

  beginShape();

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

    var x = i; 

    var t = map(i,0, width, 0, TWO_PI); 

    var y = offset - amplitude * sin(t * frequency + radians(phase));

    vertex(i, y); 

  }

  endShape();

​

​

  // Draw debug information

  stroke(0,0,0, 80); 

  strokeWeight(1); 

  // offset

  line(0, offset, width, offset);

  // amplitude

  var oma = offset - amplitude;

  var opa = offset + amplitude;

  line(0, oma, width, oma);

  line(0, opa, width, opa);

  // frequency

  line(0, oma, 0, opa);

  var x1 = width/frequency;

  line(x1, oma, x1, opa);

  // phase

  var x1p = x1 - x1 * radians(phase)/TWO_PI;

  line(x1p, oma, x1p, opa);

  // Text

  noStroke();

  fill("black"); 

  text("offset (pixels) = " + offset, 150, 23); 

  text("amplitude (pixels) = " + amplitude, 150, 43); 

  text("frequency (cycles) = " + frequency, 150, 63);

  text("phase (degrees) = " + phase, 150, 83); 

  fill(0,0,0, 80);

  text("period = 1.0/frequency (pixels) = " + nf(x1,1,1), 10, height - 10); 

  stroke(0,0,0, 80); 

  line(x1, opa, 200, height-30);

}

​

​

​

​

​

​

​