var s1,s2,s3;

var hv;

var wv;

let txt;

 function setup(){

   frameRate(15);

     createCanvas(500,300, WEBGL); 

   var hv=height/2;

   var wv=width/2;

   var vw ="180px";

for (var i=0;i<3; ++i){ //      accounts[i] = "whatever";

   sss[i] =  createSlider(-500,500,0,10);

   sss[i].style("width",vw);

   sss[i].position(hv,20*i+5);

}}

​

function draw(){ 

  background(45);

  for (var i=0;i<3;++i){ window["v"+i] = sss[i].value();}

  //print(v0,v1,v2);

  push();

  fill(0);

  translate(0,0,v0);

  rotateX(radians(v1));

  rotateY(radians(v2));

  var px=500 //1000

  if (rz()){translate(0,-125,-450);px*=3};

  noStroke();

  plane(px,px);

  pop();

  camera();

  ambientLight(50);

  var w=frameCount*0.05;

  var w2=w*2;

  push();

  rotateX(w);rotateY(w2);

  translate(80,0,-200);

  fill(55);

  strokeWeight(1);

  stroke(16,225,70);//(70);

  sphere(50);

  pop();

  push();

  fill(255,0,0);

  directionalLight(200,25,139,10,-200,-60);

  ambientMaterial(150);

  strokeWeight(.5);

  rotateY(w);rotateZ(-w);

  translate(-80,0,200);

  noStroke();//stroke(180);

  sphere(20,8,3);

  pop();

}

function rz(){

     if (keyIsDown(UP_ARROW)) {

         noLoop();

     }

     if (keyIsDown(DOWN_ARROW)) {

       rotateZ(-75);translate(0,0,-246);

       return true;

     }

}

​

function keyPressed() {

     if (keyIsDown(RIGHT_ARROW)) {

           loop();box(200,200,75)}

    if (keyIsDown(DOWN_ARROW)) {

        noLoop();

    }}

​