// Joey Avalos

​

let angle = 0;

let detailX;

function setup() {

  createCanvas(400, 400,WEBGL);

  detailX = createSlider(2, 24, 12);

  detailX.position(10, height + 5);

  detailX.style('width', '80px');

  colorMode(HSB);

}

​

function draw() {

  background(frameCount%360,100,100);

  push();

  drawEllipse();

pop();

  push();

 drawEarth();

  pop();

  push();

  drawSoid();

  pop();

  push();

  translate(mouseX-width/2, mouseY-height/2);

 drawBox();

  pop();

}

​

function drawBox(){

  fill(frameCount%360,100,100);

  stroke(0);

  strokeWeight(0.5);

  rectMode(CENTER);

  rotateX(angle);

  rotateY(angle*0.5);

  rotateZ(angle*1.2);

  //rect(0,0,150,150);

  box(50);

  angle += 0.05;

}

function drawEllipse(){

  background(random(55));

  translate(-95,-115);

  rotateX(angle*0.05);

  rotateZ(angle* 0.11);

drawBox();

torus(75,10);

}

function drawEarth(){

  translate(50,50);

fill(frameCount%360,150,510);

rotateZ(angle*0.2);

rotateY(angle*0.5);

rotateX(angle);

strokeWeight(0.25);

sphere(50);

torus(80,10);

}

function drawSoid(){

 fill(frameCount%360,100,100);

  translate(95,-125);

  rotateY(angle);

  ellipsoid(30, 40, 40, detailX.value(), 8);

  torus(50,-10);

​

​

​

}