font = loadFont("https://lgobvciqjnxkpfghvptz.supabase.co/storage/v1/object/public/assets/global/Orbitron-Bold.ttf")

}

​

function setup(){

  createCanvas(450, 450, WEBGL)

  // this should be declared internally, so we have access to the camera and we can use it whenever we need in the text function

  textFont(font)

}

​

function draw(){

  background("black")

  orbitControl()

  newText("Hello Everybody", 50, -75, 25, true)

  draw3DAxes(150, ticks=true, planes=false, [150, 0, 255])

}

​

function draw3DAxes (size, ticks=false, planes = true, clr = "violet") {

  const _clr = color(clr);

  push();

  angleMode(DEGREES);

​

  const sz = size / 30;

  stroke(255);

  fill(_clr);

  drawXAxis(size, sz);

  drawYAxis(size, sz);

  drawZAxis(size, sz);

  if(ticks){

    push()

    scale(-1, -1, -1)

    drawXAxis(size, sz);

    drawYAxis(size, sz);

    drawZAxis(size, sz);

    pop()

    textAlign(CENTER, CENTER)

    textSize(10)

    for(let x = -5; x <= 5; x++){

      newText(x*2*size/10, x*2*size/10, 10, 10, true)

    }

    for(let y = -5; y <= 5; y++){

      newText(y*2*size/10, 10, y*2*size/10, 10, true)

    }

    for(let z = -5; z <= 5; z++){

      newText(z*2*size/10, 10, 10, z*2*size/10, true)

    }

  }

  stroke(_clr);

  drawOrigin(sz);

​

  if (planes){

    const planeSize = 2 * (size + sz);

    _clr.setAlpha(35);

    fill(_clr);

    noStroke();

    plane(planeSize, planeSize);

    rotateX(90);

    plane(planeSize, planeSize);

    rotateY(90);

    plane(planeSize, planeSize);

  }

  pop();

}

// now change to the following four functions

function drawOrigin (size) {

  sphere(size);

}

​

function drawZAxis (length, arrowSize) {

  line(0, 0, 0, 0, 0, length);

  push();

  translate(0, 0, length);

  rotateX(90);

  noStroke();

  cone(arrowSize, 2 * arrowSize);

  pop();

}

​

function drawYAxis (length, arrowSize) {

  line(0, 0, 0, 0, length, 0);

  push();

  translate(0, length, 0);

  noStroke();

  cone(arrowSize, 2 * arrowSize);

  pop();

}

​

function drawXAxis (length, arrowSize) {

  line(0, 0, 0, length, 0, 0);

  push();

  translate(length, 0, 0);

  rotateZ(-90);

  noStroke();

  cone(arrowSize, 2 * arrowSize);

  pop();

}

​

​

let _newTextCam;

// the new text function

function newText(t, x, y, z, Add=true){

  if (!_newTextCam) _newTextCam = createCamera();

  push()

  angleMode(DEGREES)

  translate(x, y, z)

  // rotation scheme

  X = _newTextCam.eyeX - x

  Y = _newTextCam.eyeY - y

  Z = _newTextCam.eyeZ - z

  R = sqrt(X**2+Y**2+Z**2)

  // finding polar angles

  let theta = acos(Z/R) // between vector and z axis

  let phi; // between vector's projection on xy plane and x axis toward y axis in the first quadrant

  if (X == 0){

    phi = Y>=0 ? 90:270

  }else{

    phi = atan(abs(Y/X))

    if (X < 0 && Y >= 0){

      phi = 180-phi

    }else if (X < 0 && Y <= 0){

      phi = 180+phi

    }else if (X > 0 && Y <= 0){

      phi = 360-phi

    }

  }

  // execute the transformation

  rotateZ(phi)

  rotateY(theta)

  // Problem is that text can still rotate about the vector perpendicular on it! But this cannot be fixed, some variables needed for the orientation of the camera are not well defined yet (Possibly UPX and UPY and UPZ are what we need, but that's perfectionism)

  // here is a temporary solution to add more flexiblility to it

  if (Add){

    rotateZ(-phi)

  }

  // end of it

  push()

  // if the text is flipped when you call it in python, just let this be scale(1, -1, 1), I don't know why, possibly we did something when we modified text()

  scale(1, 1, 1)

  text(t, 0, 0)

  pop()

  pop()

}

​

​

​