const r = 200;

function setup() {

  createCanvas(700, 700, WEBGL);

}

​

function draw() {

  background(220);

  push();

  //rotateX(frameCount*0.1);

  //rotateY(frameCount*0.1*sqrt(2));

  stroke(50);

  strokeWeight(2);

  fill(0,255,0,100);

  drawCircle(r,createVector(0,0,1),0.2);

  pop();

  push();

  //rotateX(frameCount*0.1);

  //rotateY(frameCount*0.1*sqrt(2));

  noStroke();

  fill(255,0,0,100);

  ellipsoid(r,r,r);

  pop();

}

​

function drawCircle(r, p0, alpha) {

  p0.normalize();

  p0.setMag(r);

  let theta = asin(p0.z / r);

  let phi = atan2(p0.x, p0.y);

  let p1 = new createVector(

    r * cos(theta-alpha) * cos(phi),

    r * cos(theta-alpha) * sin(phi),

    r * sin(theta-alpha));

  p0.normalize();

  let d = sqrt(p0.y * p0.y + p0.z * p0.z);

  let Rx, Rxi;  

  if (d != 0) {

    Rx = math.matrix([

      [1, 0, 0],

      [0, p0.z / d, -p0.y / d],

      [0, p0.y / d, p0.z / d]

    ]);

    Rxi = math.matrix([

      [1, 0, 0],

      [0, p0.z / d, p0.y / d],

      [0, -p0.y / d, p0.z / d]

    ]);

  } else {

    Rx = math.identity(3);

    Rxi = math.identity(3);

  }

  let Ry = math.matrix([

    [d, 0, -p0.x],

    [0, 1, 0],

    [p0.x, 0, d]

  ]);

  let Ryi = math.matrix([

    [d, 0, p0.x],

    [0, 1, 0],

    [-p0.x, 0, d]

  ]);

  let Rz = math.matrix([

    [cos(dgamma), -sin(dgamma),0],

    [sin(dgamma), cos(dgamma),0],

    [0,0,1]

    ]);

  let M = math.multiply(Rxi,Ryi,Rz,Ry,Rx);

  let y = math.matrix([

    [p1.x],

    [p1.y],

    [p1.z]]);

  beginShape();

  for (let gamma = 0; gamma <= 2 * PI+dgamma; gamma += dgamma) {

    vertex(y._data[0][0],y._data[1][0],y._data[2][0]);

    y = math.multiply(M,y);

  }

  endShape();

}