int margin = 50;
int backgroundColor = 200;
int xIntervals = 10;
int yIntervals = 10;

int xMin, xMax, yMin, yMax;

float a,b,c,t,u,v;

PFont labelFont;


void setup() {
  graph = this;
  size(400,400);
  frameRate(30);
  noLoop();
}


void draw() {

  background(backgroundColor);
  fill(255);
  noStroke();
  rect(margin, margin, width - (2 * margin), height - (2 * margin));
  drawGrid();
  
  labelFont = createFont("SansSerif", 20);
  textFont(labelFont);

  smooth();
  
  plotFunction();
    
  String leftSide = "f(x) = " + a + " sin(" + b + "x + " + c + ")";
  String rightSide = " + " + t + " cos(" + u + "x + " + v + ")";
  textSize(15);
  fill(0);
  textAlign(RIGHT);
  text(leftSide, width/2, 20);
  textAlign(LEFT);
  text(rightSide, width/2, 20);
}

void drawGrid() {
  xMin = $("#sliderXmin").slider("value");
  xMax = $("#sliderXmax").slider("value");
  yMin = $("#sliderYmin").slider("value");
  yMax = $("#sliderYmax").slider("value");
  stroke(backgroundColor);
  // first draw gridlines, which are independant of the min/max values, really
  float intervalWidth = (width - 2 * margin) / xIntervals;
  float intervalHeight = (height - 2 * margin) / yIntervals;
  // draw the vertical lines
  for (int i = 0; i <= xIntervals; i++) {
    line(margin + intervalWidth * i, margin, margin + intervalWidth * i, height - margin);
    if (i % 2 == 0) {
      textAlign(CENTER);
      drawLabel((int) (margin + intervalWidth * i), height - (margin - 20), xMin + i * ((xMax - xMin) / xIntervals));
    }
  }
  // draw the horizontal lines
  for (int i = 0; i <= yIntervals; i++) {
    line(margin, margin + intervalHeight * i, width - margin, margin + intervalHeight * i);
    textAlign(RIGHT, CENTER);
    drawLabel(margin - 5, (int) (margin + intervalHeight * i), yMax - i * ((yMax - yMin) / yIntervals));
  }
  // draw x and y axes in black
  stroke(0);
  int yValueXaxis = map(0, yMin, yMax, height - margin, margin);
  line(margin, yValueXaxis, width - margin, yValueXaxis);
  int xValueYaxis = map(0, xMin, xMax, margin, width - margin);
  line(xValueYaxis, margin, xValueYaxis, height - margin);
}

void drawLabel(int x, int y, float value) {
  textSize(15);
  text(value, x, y);
}

void plotFunction() {
  stroke(30, 200, 30);
  beginShape();
  strokeWeight(2);
  noFill();
  for (int i = margin; i <= width - margin; i++) {
    float x = map(i, margin, width - margin, xMin, xMax);
    float y = map(evaluateFunction(x), yMin, yMax, height - margin, margin);
    curveVertex(i, y);
  }
  endShape();
}

float evaluateFunction(int x) {
  a = $("#sliderA").slider("value");
  b = $("#sliderB").slider("value");
  c = $("#sliderC").slider("value");
  t = $("#sliderT").slider("value");
  u = $("#sliderU").slider("value");
  v = $("#sliderV").slider("value");

  // float y = (float) (a * Math.pow(x, b) + c * Math.pow(x, 3) + 1 * Math.pow(x, 2) - 5 * Math.pow(x, 1));
  float y = a * sin((b * x) + c) + t * cos((u * x) + v);
 // float y = x + (float) Math.cos(x);
  // float y = (float) ( -2 * Math.cos(x) + Math.cos(2 * x));
  return y;
}