var rotY = 0.1;

var rotZ = 0.1;

var zoom = 500;

var dropRot = 0;

var dirRight = true;

​

function setup() {

  createCanvas(500, 500, WEBGL);

  frameRate(30);

}

​

function draw() {

  background(0);

  pointLight(255, 255, 255, mouseX, mouseY, 300);

​

  camera(0, 0, zoom);

  push();

  rotateX(rotX);

  rotateY(rotY);

​

  noStroke();

  ambientLight(250);

  ambientMaterial(43, 168, 217);

  sphere(50);

  fill(13, 138, 187, 100);

  sphere(52);

  fill(3, 108, 187, 50);

  sphere(54);

  stroke(255, 243, 138);

  fill(0, 0, 0, 0);

  sphere(65, 6, 4);

  noFill();

  rotateX(PI / 2);

  stroke(133, 243, 255);

  sphere(80, 8, 5);

  pop();

​

  spinRings();

  floaters(-PI/6, 250, 20, 0);

  floaters(PI/6, 250, 20, 1);

  rotX += 0.05;

  rotY += 0.05;

  rotZ += 0.05;

}

​

function spinRings() {

  fill(250, 250, 200, 190);

  stroke(250, 243, 135, 200);

  emissiveMaterial(255, 245, 230, 210);

  push();

  //rotateX(rotX);

  rotateY(rotY*1.5);

  torus(200);

  droplets();  

​

  stroke(250, 243, 135, 200);

  emissiveMaterial(255, 245, 230, 210);

  //rotateX(-rotX);

  rotateY(-rotY*1.5);

  rotateX(-rotX*1.5);

  rotateY((rotY-0.5)*1.5);

  torus(190);

​

  rotateY((-rotY+0.5)*1.5);

  rotateX(rotX*1.5);

  rotateY(rotY*1.5);

​

  rotateX((-rotX+PI/2)*1.5);

  torus(180);

  pop();

}

​

function droplets() {

  //stroke(230,7,43);

  noStroke();

  fill(65, 173, 240);

  //central

  translate(0,220);

  rotateZ(dropRot);

  rotateX(PI);

  cone(15,40);

  rotateX(-PI);

  translate(0,21);

  sphere(15);

  translate(0,-21);

  rotateZ(-dropRot);

  translate(0,-220);

  //right

  translate(120,180);

  rotateZ(dropRot);

  rotateX(PI);

  cone(15,40);

  rotateX(-PI);

  translate(0,21);

  sphere(15);

  translate(0,-21);

  rotateZ(-dropRot);

  translate(-120,-180);

  //left

  translate(-120,180);

  rotateZ(dropRot);

  rotateX(PI);

  cone(15,40);

  rotateX(-PI);

  translate(0,21);

  sphere(15);

  translate(0,-21);

  rotateZ(-dropRot);

  translate(120,-180);

  if(dropRot < 0.40 && dirRight) {

    dropRot += 0.08;

  } else if(dropRot >= 0.40) {

    dropRot -= 0.08;

    dirRight = false;

  } else if (dropRot > -0.40 && dirRight === false) {

    dropRot -= 0.08;

  } else if (dropRot <= -0.40) {

    dropRot += 0.08;

    dirRight = true;

  }

}

​

function mouseDragged() {

  if (mouseX > 0 && mouseX < 400) {

    zoom = mouseX + 300;

  }

}

​

function floaters(rot, dist, size, rotDir) {

  //rotDir = 0 (ccw), 1 (cw)

  emissiveMaterial(2, 204, 240);

  noStroke();

  push();

  rotateZ(rot);

  if (rotDir === 0) {

    rotateY(rotY*1.75+10);

  } else if(rotDir === 1) {

    rotateY(-(rotY*1.75+10));

  }

  translate(dist,0,0);

  ellipsoid(size/2,size/2,size,5,4);

  pop();

}