// y = 5x + 2

​

const span = 100;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textGr = createGraphics(width, height);

  textGr.noStroke();

}

​

function draw() {

  background(255);

  textGr.clear();

  translate(width / 2, height / 2);

  scale(1, -1);

  interactive();

​

  const { x: vx, y: vy, w, h } = getViewport();

  // axes

  strokeWeight(2);

  line(0, vy, 0, vy + h);

  line(vx, 0, vx + w, 0);

​

  circle(-50, -50, 20)

  resetMatrix();  

  const o = toPixelCoords(0,0)

  // console.log(o)

  for (x = 0; x <= vx + w; x += span) {

    textGr.textAlign(RIGHT, TOP);

    const p = toPixelCoords(x,0)

    textGr.text(x / span, p.x, p.y);

  }

  image(textGr, 0, 0);

}

​