/*
 Title: Geometric Komposition
 Date: 1950s
 Artist: Richard Paul Lohse
 Code: Alberto García Ariza
 Original: https://assets.catawiki.nl/assets/2018/12/10/6/3/3/633ccdb7-700f-4b59-9383-3fb90908f401.jpg
 */


//setup numbers
const stage = 500;
const nCols = 15;
const nRows = nCols;
const modSize = stage / nRows;

//color setups
const spectrum = [
  '#FED016',
  '#FF9E01',
  '#FF6E1F',
  '#DC3F30',
  '#B32642',
  '#933F7A',
  '#5B4686',
  '#3966BB',
  '#4184B9',
  '#5AAA87',
  '#78C75D',
  '#9FD947',
  '#C9F339',
  '#FFFF43',
  '#FFFF43'
];
let colorOffsets = [0, 8, 2, 10, 4, 12, 6, 14, 7, 1, 9, 3, 11, 5, 13];
//objects
let cols = []; //will store the objects
for (let i = 0; i < nCols; i++) {
  cols[i] = {
    colors: [],
    offset: undefined,
    isMoving: false,
    movement: undefined,
    initH: -modSize * nRows,
    target: -modSize * nRows,
    ease: undefined
  };
}

//moving stuff
let colMoving = []
let direction;
let pyIni = [];

function setup() {
  //setup data Board and objects
  for (let i = 0; i < nCols; i++) {
    let col = cols[i];
    col.offset = colorOffsets[i];
    let colorIndex = col.offset;
    for (let j = 0; j <= nRows * 3 + 1; j++) {
      col.colors[j] = colorIndex;
      colorIndex = getNextColor(colorIndex);
      col.ease = 0.2 + Math.random() * 0.5;
    }
  }

  //setup visual
  createCanvas(stage, stage);
  background(0);
  noSmooth();
  noStroke();
  // frameRate(1);
}

function draw() {
  //MODELO
  updatePositions()
  //REPRESENTACION
  background(0);
  for (let i = 0; i < nCols; i++) {
    drawColumn(i);
  }
  stroke(255);
  noFill();
  rect(0, modSize * 15, modSize * 15, modSize * 15);
  noStroke();
}

function mouseClicked() {
  //lets call the columns to shuffle
  //even
  let amount = Math.ceil(Math.random() * nRows);
  let direction = (Math.random() >= 0.5) ? -1 : 1;
  for (let i = 0; i < nCols; i += 2) {
    shuffleCol(cols[i], amount * direction);
  }
  //odds
  amount = Math.ceil(Math.random() * nRows);
  direction = direction * -1;
  for (let i = 1; i < nCols; i += 2) {
    shuffleCol(cols[i], amount * direction);
  }
}

getNextColor = a => { return (a == (spectrum.length - 1)) ? 0 : (a + 1); }

getPrevColor = a => { return (a == 0) ? (spectrum.length - 1) : (a - 1); }

function getNewColor(current, step) {
  let newValue = current + step;
  let result = newValue;
  if (newValue < 0) {
    result = nRows + newValue;
  } else if (newValue >= nRows) {
    result = newValue - nRows;
  }
  return result;
}

function shuffleCol(colMoving, direction) {
  colMoving.isMoving = true;
  colMoving.movement = direction;
}
function updatePositions() {
  for (let i = 0; i < nCols; i++) {
    if (cols[i].isMoving) {
      moveCol(cols[i]);
    }
  }
}

function moveCol(column) {
  let dir = column.movement;
  column.target = (-modSize * nRows) - column.movement * modSize;
  let dist = (column.target - column.initH);
  column.initH = column.initH + dist * column.ease;
  if (Math.abs(dist) < 1) {
    column.initH = column.target;
    updateColors(column);
  }
}

function updateColors(column) {
  for (let i = 0; i <= column.colors.length - 1; i++) {
    let myColor = column.colors[i];
    column.colors[i] = getNewColor(column.colors[i], column.movement);
  }
  //reset values
  column.isMoving = false;
  column.initH = -modSize * nRows;
  column.target = -modSize * nRows;
}

function drawColumn(index) {
  let myCol = cols[index];
  let px = modSize * index;
  let py = myCol.initH;
  for (let i = 0; i < nRows * 3; i++) {
    let colorIndex = myCol.colors[i];
    let myColor = color(spectrum[colorIndex]);
    fill(myColor);
    rect(px, py, modSize, modSize);
    py += modSize;
  }
}