let angleY = 0;

let posX, posY, velocityX, velocityY;

let radius = 100;

let columns = 8; // number of checker columns

let rows = 8;    // number of checker rows

​

function setup() {

  createCanvas(400, 400, WEBGL);

  posX = 0;

  posY = 0;

  velocityX = 2;

  velocityY = 1.5;

}

​

function draw() {

  background(200);

​

  // Draw grid

  stroke(150, 0, 150);

  strokeWeight(1);

  for (let i = -200; i <= 200; i += 20) {

    line(i, -200, i, 200); // Vertical grid lines

    line(-200, i, 200, i); // Horizontal grid lines

  }

​

  // Rotate and draw ball

  push();

  translate(posX, posY, 0);

  rotateX(angleX);

  rotateY(angleY);

  drawBoingBall();

  pop();

​

  // Ball movement

  posX += velocityX;

  posY += velocityY;

​

  if (posX + radius > 200 || posX - radius < -200) {

    velocityX *= -1;

  }

  if (posY + radius > 200 || posY - radius < -200) {

    velocityY *= -1;

  }

​

  // Ball rotation

  angleX += 0.03;

  angleY += 0.04;

}

​

function drawBoingBall() {

  noStroke();

​

  // Loop over each checker section

  for (let i = 0; i < columns; i++) {

    let theta1 = map(i, 0, columns, 0, TWO_PI);

    let theta2 = map(i + 1, 0, columns, 0, TWO_PI);

​

    for (let j = 0; j < rows; j++) {

      let phi1 = map(j, 0, rows, 0, PI);

      let phi2 = map(j + 1, 0, rows, 0, PI);

​

      // Checkered pattern logic

      if ((i + j) % 2 === 0) {

        fill('red');

      } else {

        fill('white');

      }

​

      beginShape();

      vertex(radius * sin(phi1) * cos(theta1), radius * sin(phi1) * sin(theta1), radius * cos(phi1));

      vertex(radius * sin(phi2) * cos(theta1), radius * sin(phi2) * sin(theta1), radius * cos(phi2));

      vertex(radius * sin(phi2) * cos(theta2), radius * sin(phi2) * sin(theta2), radius * cos(phi2));

      vertex(radius * sin(phi1) * cos(theta2), radius * sin(phi1) * sin(theta2), radius * cos(phi1));

      endShape(CLOSE);

    }

  }

}

​