Infinity Cube

let i=0;

let f=0;

let H;

let g;

let myGL; // glContext

let gui;

let rotR=true;

let bgRatio = 1;

let myMouseInc = 1;

​

let ui = {

  bgColor: "#ff9500",

  outline: true,

  infinite: true,

  inverted: false,

  autoRotate: true

};

​

setup =_=> {

  myGL = createCanvas(windowWidth, windowHeight, WEBGL).GL;

  H=windowHeight < windowWidth ? windowHeight/2: windowWidth/2;

  bgRatio = windowWidth / windowHeight;

  g=createGraphics(w=128,w);

  noStroke();

  gui = new dat.gui.GUI();

  gui.addColor(ui, 'bgColor');

  gui.add(ui, 'infinite');

  gui.add(ui, 'inverted');

  gui.add(ui, 'outline');

  gui.add(ui, 'autoRotate');

}

​

draw=_=> {

  let myInc = ui.autoRotate ? myMouseInc : 0;

  f = rotR ? f+myInc: f-myInc;

  orbitControl(1,1,0);

  rotateY(f/300);

  with(g){

    noStroke(background(0))

    for(y=0;y<9;y++){

      for(x=0;x<9;x++){

        circle(x*16-8,y*16-8,sin((x+y+f/9)/10)*17)

      }

    }

  }

  if(!ui.infinite) background(0);

  texture(get());

  push();

  emissiveMaterial(255);

  myGL.enable(2884);

  myGL.cullFace(myGL.BACK);

  if(ui.outline) box(H*1.05);

  pop();

​

  push();

  texture(g);

  if(!ui.inverted) myGL.cullFace(myGL.FRONT);

  box(H);

  pop();

​

  myGL.cullFace(myGL.BACK);

  push();

  texture(get());

  ambientLight(ui.bgColor);

  box(4000, 4000 * bgRatio, 4000,4);

  pop();

}

​

windowResized=_=> {

  resizeCanvas(windowWidth, windowHeight);

  H=windowHeight < windowWidth ? windowHeight/2: windowWidth/2;

  bgRatio = windowWidth / windowHeight;

}

​

mouseDragged=_=> {

  if(pmouseX > mouseX){

    myMouseInc = -1;

  } else if(pmouseX < mouseX){

    myMouseInc = 1;

  }

  return false;

}

​

// touchMoved=_=> {

//  if(pmouseX > mouseX){

//    myMouseInc = -1;

//  } else if(pmouseX < mouseX){

//    myMouseInc = 1;

//  }

//  return false;

// }