//

// By Jon Froehlich

// http://makeabilitylab.io

​

let axisColor;

let axisTextColor;

let arrowColor;

let tickSize = 5;

let gridCellSize = 50;

let gridColor;

let textScalar = 0.8;

let arrowLineSize = 15;

let arrowSize = 5;

​

const AxisAlignment = {

    TOPLEFT: 'topleft',

    CENTER: 'center',

}

​

let axisAlignment = AxisAlignment.TOPLEFT; 

​

function setup() {

  createCanvas(600, 400);

  axisColor = color(128);

  axisTextColor = color(200);

  arrowColor = color(80);

  gridColor = color(128, 128, 128, 50);

}

​

function draw() {

  background(10);

​

  drawGrid();

  drawYAxis();

  drawXAxis();

  drawCenterPt();

  drawMousePosition();

}

​

function drawCenterPt(){

  push();

  fill(axisTextColor);

  let x = width / 2;

  let y = height / 2;

  ellipse(x, y, 5);

  noStroke();

  textSize(8);

  fill(axisTextColor);

  text(x + ", " + y, x + 3, y - 2);

  pop();

}

​

function drawGrid(){

  noFill();

  stroke(gridColor);

  for (let x = 0; x < width; x += gridCellSize){

    line(x, 0, x, height);

  }

  for (let y = 0; y < height; y += gridCellSize){

    line(0, y, width, y);

  }

}

​

function drawXAxis(){

  let asc = textAscent() * textScalar;

  let desc = textDescent() * textScalar;

  let strHeight = asc + desc;

  // draw x axis

  stroke(axisColor);

  let xAxisLoc = height / 2;

  if(axisAlignment == AxisAlignment.TOPLEFT){

     xAxisLoc = 0; 

  }

  line(0, xAxisLoc, width, xAxisLoc);

  // draw x values arrow

  let str = "x values";

  let strWidth = textWidth(str);

  let xArrowLine = strWidth + 6;

  let yArrowLine = height / 2 - 10;

  if(axisAlignment == AxisAlignment.CENTER){

    noStroke();

    fill(arrowColor);

    text(str, 3, yArrowLine + asc / 2 - 1);

    stroke(arrowColor);

  }else if(axisAlignment == AxisAlignment.TOPLEFT) {

    let yText = gridCellSize - 1;

    let xText = gridCellSize + 5;

    yArrowLine = yText - asc / 2;

    xArrowLine = xText + strWidth + 6;

    noStroke();

    fill(arrowColor);

    text(str, xText, yText);

    stroke(arrowColor);

  }

  drawLineWithArrow(xArrowLine, yArrowLine, xArrowLine + arrowLineSize, yArrowLine, arrowSize);

​

  // draw ticks along x-axis

  let yTickStart = xAxisLoc - tickSize / 2;

  fill(200);

  for (let x = 0; x < width; x += gridCellSize) {

    stroke(axisColor);

    line(x, yTickStart, x, yTickStart + tickSize);

​

    noStroke();

    fill(axisTextColor);

    let strWidth = textWidth(x);

    if((axisAlignment == AxisAlignment.CENTER && int(x) == int(width / 2)) || 

       (axisAlignment == AxisAlignment.TOPLEFT && x == 0)){ 

      // don't draw text

    }else{

      text(x, x - strWidth / 2, yTickStart + tickSize + strHeight); 

    }

  } 

}

​

function drawYAxis() {

  let asc = textAscent() * textScalar;

  let desc = textDescent() * textScalar;

  let strHeight = asc + desc;

  // draw y axis

  stroke(axisColor); // set color to gray

  let yAxisLoc = width / 2;

  if(axisAlignment == AxisAlignment.TOPLEFT){

     yAxisLoc = 0; 

  }

  line(yAxisLoc, 0, yAxisLoc, height);

  // draw y values arrow

  let xText = width / 2 - strHeight - 2;

  let yText = 3;

  if(axisAlignment == AxisAlignment.TOPLEFT){

    xText = gridCellSize; 

    yText = gridCellSize + 5;

  }

  let str = "y values";

  let strWidth = textWidth(str);

  push();

  noStroke();

  fill(arrowColor);

  rotate(HALF_PI); 

  translate(yText, -xText);

  text(str, 0, 0);

  pop();

  stroke(arrowColor);

  fill(arrowColor);

  let yLine = yText + strWidth + 6;

  let xLine = xText + asc/2 - 1.5;

  drawLineWithArrow(xLine, yLine, xLine, yLine + arrowLineSize, arrowSize);

  // draw ticks along y-axis

  let xTickStart = yAxisLoc - tickSize / 2;

  for (let y = 0; y < height; y += gridCellSize) {

    stroke(axisColor);

    line(xTickStart, y, xTickStart + tickSize, y);

​

    noStroke();

    fill(axisTextColor);

    let strWidth = textWidth(y);

    if((axisAlignment == AxisAlignment.CENTER && int(y) == int(height / 2)) ||

       (axisAlignment == AxisAlignment.TOPLEFT && y == 0)){ 

      // don't draw text

    }else{

       text(y, xTickStart + tickSize + 4, y + asc / 2); 

    }

  }

}

​

function drawMousePosition() {

  push();

  textSize(12);

  let strMouseCoordinates = "x=" + mouseX + ", y=" + mouseY;

  fill(255, 0, 255);

  ellipse(mouseX, mouseY, 5);

​

  fill(230);

  stroke(230);

  strWidth = textWidth(strMouseCoordinates);

  strHeight = textAscent() + textDescent();

  let xPos = mouseX;

  if (mouseX + strWidth > width) {

    xPos = width - strWidth;

  }

  let yPos = mouseY;

  if (mouseY - strHeight < 0) {

    yPos = strHeight - textDescent();

  }

  noStroke();

  text(strMouseCoordinates, xPos, yPos);

  pop();

}

​

function drawLineWithArrow(x1, y1, x2, y2, arrowSize) {

  //from: https://stackoverflow.com/a/44892083

  line(x1, y1, x2, y2); //draw a line beetween the vertices

​

  push() //start new drawing state

  let angle = atan2(y1 - y2, x1 - x2); //gets the angle of the line

  translate(x2, y2); //translates to the destination vertex

  rotate(angle - HALF_PI); //rotates the arrow point

  triangle(-arrowSize * 0.5, arrowSize, arrowSize * 0.5, arrowSize, 0, -arrowSize / 2); //draws the arrow point as a triangle

  pop();

}