numberOfPages = 2,

  mouseIsClicked = false,

  buttonText = 'next page';

​

let r = 200; // r represents the size

let r2 = 20;

let img;

​

function setup() {

  createCanvas(400, 400, WEBGL);

  rectMode(CENTER);

  textAlign(CENTER);

  textSize(30);

  noStroke();

  fill(33);

}

​

function draw() {

  background(220);

​

  switch (currentPage) {

    case 1:

      drawPage(currentPage);

      buttonText = 'next page';

      break;

​

    case 2:

      drawPage(currentPage);

      buttonText = 'prev page';

      break;

  }

​

  customButton(width / 2, height * 0.8, 40);

​

  mouseIsClicked = false;

}

​

function customButton(x, y, r) {

  push();

  fill(100, 130, 200);

  ellipse(x, y, r);

  fill(33);

  textSize(10);

  text(buttonText, x, y);

  pop();

​

  if (dist(mouseX, mouseY, x, y) < r / 2 && mouseIsClicked) {

    if (currentPage >= numberOfPages) {

      currentPage = 1;

    } else {

      currentPage++;

    }

  }

}

​

​

function drawPage(page) {

  switch (page) {

    case 1:

      //rotate only if mouse is on the outside frame

  if(mouseX>600 || mouseX < 100 || mouseY>600 || mouseY<100){

     // rotateX(frameCount%360) // camera rotation

     // rotateY(frameCount%360)

  }

  background(230,50,17)

  orbitControl(4,4) // allows rotation + value 4 is for the speed of the rotation or perhaps how much the camera rotates per "mouse swipe"

  for(let a1 = 0; a1 < 180; a1 += 5 ){ //a1 = phi

    beginShape(POINTS);

    for(let a2 = 0; a2<360; a2 += 5){ //a2 = theta

      let x = r * (1+1*sin(a2*6)*cos(a1*9))*cos(a1)

      let y = r * (1+1*sin(a2*6)*cos(a1*9))*sin(a1) * sin(a2);

      let z = r * (1+1*sin(a2*6)*cos(a1*9))*sin(a1) * cos(a2);

      vertex(x,y,z)

    } 

    endShape(CLOSE)

    //displaying the selection balls

    let Balls = [ball1,ball2, ball3];

    for (let i = 0;i < Balls.length;i++){ 

    Balls[i].display();

    }

  }

      break;

​

    case 2:

      push();

      ellipse(width / 2, height / 2, 100);

​

      text('Page 2', width / 2, height * 0.2);

      pop();

      break;

  }

}

​

function mouseClicked() {

  mouseIsClicked = true;

}