box

var angle = 0,
  c = 100;
var img, frms = 400;
var num = 20,
  step = 20,
  offSet = 0,
  rows = 0,
  cols = 0,
  cellSize = 35;
var sz = 0,
  theta = 0;

function setup() {
  createCanvas(750, 540, WEBGL);
  img = createGraphics(350, 350);
  rows = img.width / cellSize;
  cols = img.height/ cellSize;
}

function draw() {
  background(38);

  rotateX(PI + angle);
  rotateZ(angle);
  rotateY(PI - angle);

  drawArcs();
  texture(img);
  box(img.width, img.height);

  angle += TWO_PI / frms;

}

function drawArcs() {
  img.background(238);
  for (var i = 0; i <= rows; i++) {
    for (var j = 0; j < cols; j++) {
      var offSet = PI + PI / rows * i + PI / cols * j;
      var x = (i + .5) * cellSize;
      var y = (j + .5) * cellSize;
      var dx = 0; //mouseX - x;
      var dy = 0; //mouseY - y;
      img.noStroke();
      img.fill(38);
      var r = atan2(dy, dx);
      var arcSize = map(sin(theta / 4 + offSet), -1, 1, radians(30), PI);
      sz = cellSize * .90;
      img.push();
      img.translate(x, y);
      img.rotate(r + theta);
      img.arc(0, 0, sz, sz, 0, arcSize);
      img.pop();
    }
  }
  theta += TWO_PI / frms * 4;
}