let layers = [];

​

function setup() {

  width = 512

  height = width;

  createCanvas(width, height, WEBGL);

  xViewOffset = atan(cos(QUARTER_PI));

  yViewOffset = -QUARTER_PI;

  s = 3;

  r = width / s * 0.3;

  maxCubes = round(height / r);

​

  hue = 0;

    hueIncrement = 180 / (s*s*s);

  console.log(maxCubes);

  setAttributes('antialias', true);

  background(0, 10, 20, 230)

  normalMaterial();

  ortho(-300, 300, 300, -300, 0, 1000);

​

  rotateX(xViewOffset)//PI * 1.5);

  rotateY(yViewOffset);//PI * 1.3);

  rotateZ(PI * 1.8);

  //translate((r + 1) * (s - 1) * 0.75, 0, 0); //(r+1)*(s-1) / 6);

  signs = [-1, -1, 1, 1];

  directions = ['x', 'z'];

    instructions = [];

  for (let layer = 0; layer < s; layer++) {

    if (layer < s-1) {

      beginNextLayer();

    getLayer(layer);

    }

  }

  console.log(instructions, instructions.length);

  console.log(instructions[0]);

  // console.log(instructions);

  // for (let i of instructions) {

  //   console.log(i);

  //   let t = i.translation;

  //   push();

  //   colorMode(HSB, 255);

  //   fill(i.hue, 100, 100);

  //   translate(t[0], t[1], t[2]);

  //   box(r);

  //   pop();

  // }

  colorMode(HSB, 255);

    let index = 0;

  // box(r);

  setInterval(function() {

    let instruction = instructions[index];

    let t = instruction.translation;

    let h = instruction.hue;

    fill(h, 120, 90);

    translate(t[0], t[1], t[2]);

    box(r);

    index++;

    if (index == instructions.length) {

      index = 0;

      clearInterval();

      return;

    }

  }, 300);

}

​

function getLayer(layer) {

  if (layer % 2 == 0) {

    getEvenLayer();

  } else {

    getOddLayer();

  }

}

​

function beginNextLayer() {

  instruction = {

    translation : [0, r + 1, 0],

    hue : hue % 255

  }

  instructions.push(instruction);

  hue += hueIncrement;

}

​

function getEvenLayer() {

  turns = 0;

  maxTurns = 2 * s - 1;

  index = 0;

  timesToMove = s - 1;

  while (turns <= maxTurns) {

    sign = signs[index % 4];

    direction = directions[index % 2];

    let moves = 0;

    while (moves < timesToMove) {

      instruction = {};

      if (direction == 'x') {

        instruction.translation = [sign * (r + 1), 0, 0];

      } else {

        instruction.translation = [0, 0, sign * (r + 1)];

      }

      instruction.hue = hue % 255;

      instructions.push(instruction);

      hue += hueIncrement;

      moves++;

    }

    if (turns > 2 && turns % 2 == 1) {

      timesToMove--;

    }

    turns++;

    index++;

  }

}

​

function getOddLayer() {

  maxTurns = 2 * s - 1;

  turns = 0;

  index = 3;

  timesToMove = 1;

  while (turns < maxTurns) {

    sign = signs[index % 4];

    direction = directions[(index) % 2];

    let moves = 0;

    while (moves < timesToMove) {

      instruction = {};

      if (direction == 'x') {

        instruction.translation = [sign * (r + 1), 0, 0];

      } else {

        instruction.translation = [0, 0, sign * (r + 1)];

      }

      instruction.hue = hue % 255;

      instructions.push(instruction);

      hue += hueIncrement;

      moves++;

    }

    if ((turns < maxTurns - 3) && (turns % 2 == 1)) {

      console.log(turns);

      timesToMove++;

    }

​

    turns++;

    index++;

  }

}

​

// function draw() {

  //background(0, 10, 20, 230)

  //normalMaterial();

  //ortho(-300, 300, 300, -300, 0, 1000);

  // rotateX(xViewOffset);

  // rotateY(yViewOffset);

  // rotateX(PI * 0.8);

  // rotateY(PI * 0.8);

  // rotateZ(PI * .2);

  // box(r);

  // //translate((r + 1) * (s - 1) * 0.75, 0, 0); //(r+1)*(s-1) / 6);

  // if (frameCount % 100 == 0 && index < instructions.length) {

  //    let i = instructions[index];

  //   console.log(i);

  //   let t = i.translation;

  //   let h = i.hue;

  //   colorMode(HSB, 255);

  //   fill(h, 120, 120);

  //   translate(t[0], t[1], t[2]);

  //   console.log(t[0], t[1], t[2]);

  //   console.log(index);

  //   index++;

  // }

// }