/* 
 * A coding sketch created as footage  
 * for: https://vimeo.com/644878742
 *
 * p5.js documentation:
 * https://p5js.org/reference 
 */

let cnvs;

let blockWidth;
let blockHeight;
let squareColors = [];
let blocks = [];

let font;
let fontsize;

function preload() {
  font = loadFont('https://res.cloudinary.com/dbyvpsrju/raw/upload/v1643209419/fonts/RecursiveSansLnrSt-Bold_um5m1o.otf');
}

function setSizes(cnvsSize) {
  // set measurements based on canvas size
  blockWidth = cnvsSize/4;
  blockHeight = blockWidth/12 * 7;
  fontsize = blockWidth/2.4;
}

// Pick colors, used in setup and shuffleColors
function setColors() {
  const colourList = ['#9E00FD', '#9F85FF', '#00FF80'];
  for (let i = 0; i < 16; i++) {
    // choose a color for each block
    squareColors[i] = random(colourList);
  }
}

function setup() {
  // let cnvs;
  let cnvsSize;
  // basically, set canvas width to 68vmin
  if (windowHeight < windowWidth) {
    cnvsSize = windowHeight/100 * 68;
  } else {
    cnvsSize = windowWidth/100 * 68;
  }

  cnvs = createCanvas(cnvsSize, cnvsSize * 0.88);
  cnvs.parent('canvasWrapper');
 
  // don't loop draw function
  noLoop();
  // call function that will setup stuff
  setSizes(cnvsSize);
  setColors();
  // get rid of stroke once and for all
  noStroke();
}

function draw() {
  background(255);
  
  for (let i = 0; i < 16; i++) {
    /* a block will be drawn if random is >= 1
     * it's between 0 and 3 so that it is less
     * likely that only a few blocks are drawn
     */
    blocks[i] = round(random(0, 3));
  }
  // draw each block
  for (var i = 0; i < 16; i++) {
    if ( blocks[i] >= 1 ) {
      let b = new Block(i);
      b.show(i);
    }
  }
  drawText();
}

// Separate function for text
function drawText(){
  // Text
  push();
  translate( 0, blockHeight * 4.95)
  fill(0);
  textSize(fontsize);
  textFont(font);
  text('Institute of', 0, 0);
  text('Generative Design', 0, fontsize * 1.08);
  pop();
}

// Separate function to shuffle block alignment
function shuffleAlignment() {
  redraw();
}

// Separate function to shuffle colors via button
function shuffleColors() {
  setColors();
  
  background(255);
  // redraw blocks
  for (var i = 0; i < 16; i++) {
    if ( blocks[i] >= 1 ) {
      let b = new Block(i);
      b.show(i);
    }
  }
  
  drawText();
}

class Block {
  constructor(i) {
    this.w = blockWidth - blockWidth/6;
    this.h = blockHeight - blockWidth/6;

    // x positions for the blocks
    this.xPos = [
      0, blockWidth, blockWidth * 2, blockWidth * 3,
      0, blockWidth, blockWidth * 2, blockWidth * 3,
      0, blockWidth, blockWidth * 2, blockWidth * 3,
      0, blockWidth, blockWidth * 2, blockWidth * 3
    ];

    // y positions for the blocks
    this.yPos = [
      0, 0, 0, 0,
      blockHeight, blockHeight, blockHeight, blockHeight,
      blockHeight * 2, blockHeight * 2, blockHeight * 2, blockHeight * 2,
      blockHeight * 3, blockHeight * 3, blockHeight * 3, blockHeight * 3
    ];

    this.x = this.xPos[i];
    this.y = this.yPos[i];
  }

  show(j) {
    fill(squareColors[j]);
    rect(this.x, this.y, this.w, this.h);
  }
}

// Recalculates all the sizes when window is resized
function windowResized() {
  let cnvsSize;
  if (windowHeight < windowWidth) {
    cnvsSize = windowHeight/100 * 68;
  } else {
    cnvsSize = windowWidth/100 * 68;
  }
  cnvs = resizeCanvas(cnvsSize, cnvsSize * 0.88);
  // Sizes also need to be reset each time
  setSizes(cnvsSize);
  redraw();
};