let isLights = false

​

let xx=0, nx =0;

let yy=0, ny=0;

​

function preload() {

  font = loadFont("Gen-Shin-Gothic-Bold.ttf");

}

​

function setup() {

  createCanvas(800, 800, WEBGL);

  textFont();

  buffer = createGraphics(200, 200);

  buffer.background(0);

  // buffer.clear(); // use` clear to make the background transparent

  buffer.fill(255);

  buffer.noStroke();

  buffer.ellipse(200, 200, 300, 300);

  noStroke();

}

​

function draw() {

  //Interpolation//

  if(frameCount%100 == 0){

    nx=random(0, 5);

    ny=random(0, 5);

  }

  xx += (nx - xx) * 0.1;

  yy += (ny - yy) * 0.1;

​

  changeBufferFor(buffer);

  background(0)

  if(isLights) {

    ambientLight(120)

    pointLight(0, 255, 0, width/2, height/2, -50)

    directionalLight(0,0,255,width/4, height/2,10)

  }

  //Put boxes into grid//

  texture(buffer)

  let cellX = 130;

  let cellY = 130;

  let y = tan(frameCount*0.01)*100;

  push();

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

  translate(cellX, cellY);

  translate(0,y)

  for (let i = 0; i < 7; i++) {

    for (let j = 0; j < 5; j++) {

      push();

      translate(i*cellX, j*cellY);

      rotateX(xx)

      rotateY(xx)

      box(130);

      pop();

    }

  }

  // for (let i = 0; i < 4; i++) {

  // translate(-width/4 * i, -height/4 * i)

  // rotateX(frameCount*0.03)

  // rotateY(frameCount*0.01)

  // box(120)  

  // }

  pop()

}

​

function changeBufferFor(theBuffer) {

  let x = cos(frameCount*0.02)*100;

  theBuffer.background(0,10);

  // theBuffer.clear();

  theBuffer.push();

  theBuffer.translate(theBuffer.width/2, theBuffer.height/2);

  theBuffer.translate(x,0);

  //theBuffer.ellipse(0,0,20,20);

  theBuffer.textSize(theBuffer.width/2)

  theBuffer.text("弇", 0, 0);

  theBuffer.pop();

}

​

function mousePressed() {

  isLights = !isLights;

}

​

​

/* enter fullscreen-mode via

 * https://editor.p5js.org/kjhollentoo/sketches/H199a0c-x

 */

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

/* prevents the mobile browser from processing some default

 * touch events, like swiping left for "back" or scrolling

 * the page.

 */

document.ontouchmove = function (event) {

  event.preventDefault();

};

​

​