let r2 = 20; 

​

let img;

let song;

function preload() {

  img = loadImage("qmark.png");

  song = loadSound("song.mp3");

}

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();

​

  song.play();

  song.loop();

​

  //column 1

  ball1 = new Ball(100, 100);

  ball2 = new Ball(100, 0);

  ball3 = new Ball(100, -100);

   //column 2

  ball4 = new Ball(0, 100, -15);

  ball5 = new Ball(0, -100, -15);

   //column 3

  ball6 = new Ball(-100, 100, 185);

  ball7 = new Ball(-100, 0, 185);

  ball8 = new Ball(-100, -100, 185);

}

​

function draw() {

  //rotate only if mouse is outside the main circle

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

    rotateX(frameCount % 360); // camera rotation

    rotateY(frameCount % 360);

    //first column

    let a = createA('https://editor.p5js.org/zuett/full/qV3AUvxga', '.    .');

    let b = createA('https://editor.p5js.org/zuett/full/dUdg51cIB', '.    .');

    let c = createA('https://editor.p5js.org/zuett/full/q6wOnU42q', '.    .');

    a.position(245,240);

    b.position(245,340);

    c.position(245,440);

    //second column

    let d = createA('https://editor.p5js.org/zuett/full/qrmyKppze', '.    .');

    let e = createA('https://editor.p5js.org/zuett/full/ae4Hn6qex', '.    .');

    d.position(345,240);

    e.position(345,440);

    //third column

    let f = createA('https://editor.p5js.org/zuett/full/qznXw3kzy', '.    .');

    let g = createA('https://editor.p5js.org/zuett/full/wHjZ1s-gV', '.    .');

    let h = createA('https://editor.p5js.org/zuett/full/Zu40Rq1nc', '.    .');

    f.position(445,240);

    g.position(445,340);

    h.position(445,440);

  }  

​

  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 += 10) {

    //a1 = phi

    beginShape(POINTS);

    for (let a2 = 0; a2 < 360; a2 += 10) {

      //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, ball4, ball5, ball6, ball7, ball8];

​

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

      //runs through the balls array and displays each obj

      Balls[i].display();

    }

  }

}

​