createCanvas(640, 480);

  background(255);

}

​

function draw() {

  background(255);

  var range = map(mouseX, 0, width, 0, TWO_PI * 3);

  if (mouseX > width) {

    range = TWO_PI * 3;

  } else if (mouseX < 0) {

    range = 0;

  }

  noFill();

  strokeWeight(5);

  stroke("purple");

  beginShape();

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

    var x1 = i;

    var y1 = map(sin(x1 / width * range), -1, 1, 0, height);

    vertex(x1, y1);

  }

  endShape();

  stroke("black");

  beginShape();

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

    var x2 = j;

    var y2 = map(approxSinSquare(x2 / width * range), -1, 1, 0, height);

    vertex(x2, y2);

  }

  endShape();

  stroke("blue");

  beginShape();

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

    var x3 = k;

    var y3 = map(approxSinCube(x3 / width * range), -1, 1, 0, height);

    vertex(x3, y3);

  }

  endShape();

}

​

function approxSinSquare(x) {

  // var t = x % TWO_PI;

  var t = x * 1 / TWO_PI;

  t = t - floor(t);

  if (t < 0.5) {

    return -16 * t * t + 8 * t;

  } else {

    return 16 * t * t - 16 * t - 8 * t + 8;

  }

}

​

function approxSinCube(x) {

  var t = x * 1 / TWO_PI;

  t = t - floor(t);

  return 4157 / 200 * t * (t - 0.5) * (t - 1);

}