<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#106101' allowfullscreen></iframe>

float xRange = 160;
float yRange = 5.f;

float xDetail = 10;
float yDetail = 10;

float markerStroke = .8f;
float lineStroke = 1.f;
float plotLineStroke = 1f;
float plotPointStroke = 1.f;

float lineStrokeW = 1;
float markerStrokeW = 2;
float plotLineStrokeW = 3;
float plotPointStrokeW = 2;

int plotDetail = 100;

int sideSmall = 1080;  // smaller window axis length
int sideSmallest = 1920/2;  /// bigger window axis length
int sideBig      = 1920;  /// biggest window axis length

public void setup() {
  size(1000,800);
  colorMode(HSB, 1, 1, 1, 1);
  rectMode(CENTER);
  ellipseMode(CENTER);
  textAlign(LEFT, CENTER);
  sideBig = max(width, height);
  sideSmall = min(width, height);
  sideSmallest = min(width, height)*2;
}

public void draw() {
  background(0);
  translate(width/2, height/2);
  drawCoordinateGuide();
  plot();
}

void plot() {
  float lastX = 0;
  float lastY = 0;

  float mx = map(mouseX, width/2- sideSmallest /2, width/2+ sideSmallest /2, -yRange, yRange);
  float my = map(mouseY, height/2- sideSmallest /2, height/2+ sideSmallest /2, yRange, -yRange);
  if (mouseX == 0 && mouseY == 0) {
    mx = 0;
    my = 0;
  }

  //edit eq to explain what's going on
  String eq =
    "a = "+nf(mx, 1, 2)+"\n"+
    "b = "+nf(my, 1, 2)+"\n"+
    "y = sin(x*a)*cos(x*b)";
  fill(.7f);
  textSize(40);
  text(eq, -sideSmall/2, -sideSmall/4);

  for (int i = 0; i < plotDetail; i++) {
    float x = map(i, 0, plotDetail, -xRange, xRange);
    // edit y calculation for awesome visuals but also match eq
    float y = sin(x*mx)*cos(x*my);
    //
    float canvasX = map(x, -xRange, xRange, -sideSmallest /2, sideSmallest /2);
    float canvasY = map(y, -yRange, yRange, -sideSmallest /2, sideSmallest /2)*-1;
    strokeWeight(plotPointStrokeW);
    stroke(plotPointStroke);
    point(canvasX, canvasY);
    if (i%2==0) {
      // fill(1);
      // textSize(20);
      //  text(nf(x,1,1)+", "+nf(y, 1, 1), canvasX+10, canvasY+10);
    }
    if (i > 0) {
      stroke(plotLineStroke);
      strokeWeight(plotLineStrokeW);
      line(canvasX, canvasY, lastX, lastY);
    }
    lastX = canvasX;
    lastY = canvasY;
  }
}

void drawCoordinateGuide() {
  stroke(lineStroke);
  strokeWeight(lineStrokeW);
  fill(1);
  float markerSize = 20;
  line(0, -sideSmallest /2, 0, sideSmallest /2);
  for (int i = 0; i < yDetail; i++) {
    float val = .1f*(round(10*map(i, 0, yDetail, -yRange, yRange))*-1);
    float y = map(i, 0, yDetail, -sideSmallest /2, sideSmallest /2);
    if (i > 0 && val != 0 && i < yDetail) {
      stroke(markerStroke);
      strokeWeight(markerStrokeW);
      line(-markerSize, y, markerSize, y);
      textSize(20);
      text(""+val, markerSize, y+markerSize);
    }
  }
  stroke(lineStroke);
  strokeWeight(lineStrokeW);
  line(-sideSmallest /2, 0, sideSmallest /2, 0);
  for (int i = 0; i < xDetail+1; i++) {
    float val = map(i, 0, xDetail, -xRange, xRange);
    float x = map(i, 0, xDetail, -sideSmallest /2, sideSmallest /2);
    if (i > 0 && val != 0 && i < xDetail) {
      stroke(markerStroke);
      strokeWeight(markerStrokeW);
      line(x, -markerSize, x, markerSize);
      textSize(20);
      text(nf(val, 1, 2), x, markerSize*2);
    }
  }
  textSize(40);

  text("x", -sideSmall /2+80, 80);
  text("y", 80, sideSmall /2-80);
}