See graphWindow.js and func.js for custom class definitions.

Note use of math.js library (linked to from index.html)

for formula parsing, and 

use of p5.clickable.js library for zoom buttons.

*/

​

let can, win, f;

let xMin, xMax, yMin, yMax; //bounds for displayed window

let digits = 2;

let submit, textInput, zoomPlus, zoomMinus;

let formula = 'x*sin(x)';

let xDisp, yDisp; //graph coordinates of displayed point

let lightGreen, mediumBlue, magenta, darkGray;

​

function setup() {

  //Set colors

  lightGreen = color(229, 255, 234, 125);

  mediumBlue = color(32, 110, 245);

  magenta = color(232, 51, 232);

  darkGray = 75;

​

  //Create objects

  can = createCanvas(400, 400);

  win = createGraphWindow(width / 2, height - 150, 20, 20);

  f = createFunc(formula, -10, 10);

  textInput = createInput(formula);

  submit = createButton('Submit');

  createP(''); //temporary hack to move zoom buttons down

  zoomPlus = new Clickable();

  zoomMinus = new Clickable();

  //Attach event listeners

  can.mouseOver(cursorToGrab);

  can.mousePressed(cursorToGrabbing);

  can.mouseReleased(cursorToGrab);

  submit.mousePressed(updateFormula);

  zoomPlus.onPress = zoomIn;

  zoomPlus.onHover = plusHover;

  zoomPlus.onRelease = function() {cursor(ARROW)};

  zoomMinus.onPress = zoomOut;

  zoomMinus.onHover = minusHover;

  zoomMinus.onRelease = function() {cursor(ARROW)};

​

  zoomPlus.onOutside = function() {

    if (!mouseIsPressed) {cursor('grab')}

    zoomPlus.color = mediumBlue;

  };

  zoomMinus.onOutside = function() {

    if (!mouseIsPressed) {cursor('grab')}

    zoomMinus.color = mediumBlue;

  };

  //Set zoom button properties

  zoomPlus.locate(10, 10);

  zoomPlus.resize(20, 20);

  zoomPlus.color = mediumBlue;

  zoomPlus.cornerRadius = 5;  

  zoomPlus.strokeWeight = 0;

  zoomPlus.text = "+";

  zoomPlus.textColor = 255;

  zoomPlus.textSize = 24;

  zoomPlus.textFont = "sans-serif";

  zoomMinus.locate(10, 33);

  zoomMinus.resize(20, 20);

  zoomMinus.color = mediumBlue;

  zoomMinus.cornerRadius = 5;  

  zoomMinus.strokeWeight = 0;

  zoomMinus.text = "-";

  zoomMinus.textColor = 255;

  zoomMinus.textSize = 24;

  zoomMinus.textFont = "sans-serif";

​

  //Initialize coordinates of displayed point on graph

  xDisp = 0;

  yDisp = f.evaluate(xDisp);

}

​

function draw() {

  clear(); //clear canvas (lightGreen is partly transparent)

  background(lightGreen);

​

  //BOUNDS FOR DISPLAYED WINDOW

  //.x() and .y() convert canvas to graph coordinates

  xMin = win.x(0);

  xMax = win.x(width);

  yMin = win.y(height);

  yMax = win.y(0);

  //AXES

  stroke(150);

  strokeWeight(2);

  win.axis('horizontal');

  win.axis('vertical');

  //FUNCTION

  stroke(magenta);

  strokeWeight(2);

  f.xMin = xMin;

  f.xMax = xMax;

  f.draw(win);

​

  //DISPLAYED POINT ON GRAPH

  fill(mediumBlue);

  stroke(mediumBlue);

  strokeWeight(8);

  if (onCanvas(mouseX, mouseY)) {

    xDisp = win.x(mouseX); //convert mouse's X to x (canvas to graph)

    yDisp = f.evaluate(xDisp);  

  }

  win.point(xDisp, yDisp); //draw point and label it

  //ZOOM BUTTONS

  zoomPlus.draw();

  zoomMinus.draw();

  //TEXT STYLING (bounds and graph label)

  fill(darkGray);

  stroke(darkGray);

  strokeWeight(1);

  textSize(16);

​

  //BOUNDS

  textAlign(LEFT);

  text(`x: ${xMin.toFixed(digits)} to ${xMax.toFixed(digits)}`, 40, 20);

  text(`y: ${yMin.toFixed(digits)} to ${yMax.toFixed(digits)}`, 40, 45);

  //GRAPH LABEL

  text('y = ' + f.formula, 10, height - 10);

}

​

//CALLBACK FUNCTIONS

function updateFormula() {

  f.formula = textInput.value();

  //update coordinates of displayed point

  xDisp = 0;

  yDisp = f.evaluate(xDisp);

}

​

//increase or decrease zoom by delta percent

function zoom(delta) {

  win.zoom(100 * (win.xScale / win.xScale0) + delta);

}

​

let zoomIn = function() {

  zoom(10);

  cursor(ARROW);

}

​

let zoomOut = function() {

  zoom(-10);

  cursor(ARROW);

}

​

let plusHover = function() {

  zoomPlus.color = magenta;

  cursor(ARROW);

};

​

let minusHover = function() {

  zoomMinus.color = magenta;

  cursor(ARROW);

};

​

function cursorToGrab() {

  cursor('grab');

}

​

function cursorToGrabbing() {  

    cursor('grabbing'); 

}

​

//CHECK IF (X,Y) IN CANVAS COORDINATES IS ON CANVAS

function onCanvas(X, Y) {

  let onCanvasX = 0 < X && X < width;

  let onCanvasY = 0 < Y && Y < height;

  return onCanvasX && onCanvasY;

}

​

//GENERAL EVENTS (NOT SPECIFIC TO AN HTML ELEMENT)

function mouseDragged() {

  if (onCanvas(mouseX, mouseY)) {

    cursor('grabbing');

    win.xOrigin += movedX;

    win.yOrigin += movedY;

  }

}

​

function mouseWheel(event) {

  zoom(event.delta / 5);

  return false; //blocks page scrolling

}