Scroll-to-rotate, 3D

let p5Inst = new p5()

async function setup() {
  let font = await loadFont("/Raleway-VariableFont_wght.ttf")
  createCanvas(400, 400, WEBGL);
  angleMode(DEGREES)
  textFont(font)
  textWeight(500)
}

let storedMatrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

function saveMatrix() {
  return Array.from(p5Inst._renderer.uModelMatrix.mat4)
}

let timesScrolled = 0

function draw() {
  background(220);
  translate(-width/2, -height/2)
  applyMatrix(storedMatrix)
  fill(255)
  rect(10, 10, 380, 380)
  textAlign(CENTER, CENTER)
  fill(0)
  text("This is a test\nTry scrolling", 200, 200)
  if (timesScrolled > 100) {
    push()
    translate(360, 360)
    rotate(45)
    text("Hint: Go ->", 0, 0)
    pop()
  }
  fill(255)
  rect(600, 600, 100, 100)
  fill(0)
  text("You found me! :o", 650, 650)
  resetMatrix()
  translate(-width/2, -height/2)
  push()
  stroke("red")
  strokeWeight(2)
  let axis = createVector((mouseY - height / 2), -(mouseX - width / 2))
  axis.normalize()
  line(mouseX - axis.x * 100, mouseY - axis.y * 100, mouseX + axis.x * 100, mouseY + axis.y * 100)
  strokeWeight(1)
  clearDepth()
  line(mouseX - axis.x * 100, mouseY - axis.y * 100, mouseX + axis.x * 100, mouseY + axis.y * 100)
  pop()
}
function mouseWheel(e) {
  timesScrolled++
  let a = constrain(e.delta, -100, 100)
  let axis = createVector((mouseY - height / 2), -(mouseX - width / 2), 0)
  resetMatrix()
  translate(mouseX, mouseY)
  rotate(-a / 30, axis)
  translate(-mouseX, -mouseY)
  applyMatrix(storedMatrix)
  storedMatrix = saveMatrix()
}