float scaleVal = 150;      // max value for the resulting sine wave (255 = white)
float periods = 4;         // how many periods per window width (will be controlled by mouse Y)
float colorValue;         // holds the result of the sine wave color for each position
float sine_phase = PI;
float increment = PI/8; // how much the phase should shift / redraw; controlled by mouse X.


void setup () {
  //size(screen.width, screen.height);   // uncomment: go full screen
  size(300,300);
  smooth();  // anti-aliasing
  frameRate(30);  // set frame rate
}


void draw() {
  displaySine(sine_phase, periods);     // call the display function
  
  increment = map(mouseX, 0, width, PI/4,-PI/4);  // mouse X controls speed of wave
  periods = map(mouseY, 0, height, 2, 12);        // mouse Y controls how many periods / screen width
  sine_phase = sine_phase + increment;   // increment phase for next drawing loop
  if (sine_phase >= 2*PI) {
    sine_phase = 0.0;
  }
}


// function that displays the sine wave (takes phase and periods as arguments):
void displaySine(float sine_phase, float periods) {
  for (int x = 0; x < (width); x++) { 
    float xValue = x/float(width)*periods;    // location along x axis
    colorValue= ( (sin(2*PI*xValue + sine_phase) * scaleVal) + scaleVal ) / 2.0;   // calculate grey value for each x position
    stroke(colorValue);           // set color to that value
    line(x,0, x, height);         // draw vertical line for each x
  }
}