let r2 = 20;

let img;

​

let currentPage = 1,

  numberOfPages = 2,

  mouseIsClicked = false,

  buttonText = 'next page';

​

​

function preload(){

  img = loadImage('qmark.png')

​

}

function setup(){

  createCanvas(700,700, WEBGL);

  angleMode(DEGREES) // degrees for easier calculations

  colorMode(HSB);// Hue, Saturation, Brightness

  frameRate(30)

  stroke(199, 80, 88)

  strokeWeight(3)

  noFill()

  ball1 = new Ball(100,100);

  ball2 = new Ball(100,0);

  ball3 = new Ball(100, -100)

}

​

function draw(){

  switch (currentPage) {

    case 1:

      drawPage(currentPage);

      // buttonText = 'next page'

      break;

​

    case 2:

      drawPage(currentPage);

      // buttonText = 'prev page';

      break;

  }

​

 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, 0, 0) < 200 / 2 && mouseIsClicked) {

    if (currentPage >= numberOfPages) {

      currentPage = 1;

    } else {

      currentPage++;

    }

  }

}

//___________________________________________________________

//ALL PAGES

function drawPage(page) {

  //PAGE ONE

  switch (page) {

    case 1: //main page

  //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;

}  

​

}