Playing with 3D

// slide to see how detailX works

function setup() {

  frameRate(22);

   createCanvas(windowWidth, windowHeight, WEBGL);

  detailX = createAudio(3, 24, 8);

  detailX.position(random(10), height + 5);

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

  detailY = createAudio(3, 24, 4);

  detailY.position(10, height + 5);

  detailY.style('width', '180px');

}

​

function draw() {

  background(255,255,255);

  frameRate(3)

  rotateY(millis() / 4000);

  fill(random(255), random(255), random(255))

  translate(mouseY+5, mouseX+5);

  rotateX(frameCount * -0.01);

  rotateY(frameCount * 0.01);

    sphere(90, detailX.value(), 4);

  translate(mouseY+5*2, mouseX+5*2);

    sphere(90, detailX.value(), 4);

  translate(mouseY+5*4, mouseX+5*4);

    sphere(90, detailX.value(), 4);

  frameRate(20)

  translate(mouseY, mouseX);

    box(110,110, detailX.value(), detailY.value());

  translate(mouseY+9, mouseX+6);

    box(110,110, detailX.value(), detailY.value());

  translate(mouseY+9*2, mouseX+6*2);

    box(110,110, detailX.value(), detailY.value());

  translate(mouseX +15 , mouseY+15 );

    fill(random(255), random(255), random(255))

  translate(mouseY+5, mouseX+5);

  rotateX(frameCount * -0.01);

  rotateY(frameCount * 0.01);

    sphere(90, detailX.value(), 4);

  translate(mouseY+5*2, mouseX+5*2);

    sphere(90, detailX.value(), 4);

  translate(mouseY+5*4, mouseX+5*4);

    sphere(90, detailX.value(), 4);

  frameRate(20)

  translate(mouseY, mouseX);

    box(110,110, detailX.value(), detailY.value());

  translate(mouseY+9, mouseX+6);

    box(110,110, detailX.value(), detailY.value());

  translate(mouseY+9*2, mouseX+6*2);

    box(110,110, detailX.value(), detailY.value());

​

}