applyMatrix() edit

function draw() {
  background(220);
  fill(0);
  text('X-axis rotation:', 20, 25);
  text('Y-axis rotation:', 20, 55);
  text(xRotation.value(), 250, 25);
  text(yRotation.value(), 250, 55);
  noFill();



  // Math
  // https://math.stackexchange.com/a/3361015/599209

  const a = xRotation.value();
  const b = yRotation.value();

  translate(width / 2, height / 2); // Set origin at center of canvas
  scale(1, -1); // Make y axis point up instead of down
  applyMatrix(cos(b), 0, -sin(a) * sin(b), cos(a), 0, 0); // Apply 2x2 transformation matrix, in column-major order
  ellipse(0, 0, size, size);
  ellipse(0.2*size, 0.2*size, 0.2*size, 0.2*size);
  ellipse(-0.2*size, 0.2*size, 0.2*size, 0.2*size);
  arc(0, 0.2*size, size, size, 1.25*PI, 1.75*PI);

}


let xRotation;
let yRotation;
const size = 200;
function setup() {
  createCanvas(400, 400);

  // X range
  xRotation = createSlider(0, 2*PI, 0, 0.01);
  xRotation.position(110, 10);
  xRotation.style('width', '120px');

  // Y range
  yRotation = createSlider(0, 2*PI, 0, 0.01);
  yRotation.position(110, 40);
  yRotation.style('width', '120px');

}