const stButton = document.getElementById('stButton');

// var inputRule=[];

​

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

//  inputRule[i] = document.getElementById('rule' + i);

// }

const inputRule = document.getElementsByClassName('rule');

// console.log(inputRule)

let rule = [30, 30, 30];

let setRule = [];

let gen = [];

let nextGen = [];

let pix = 8;

let cols = 150

let rows = 70

let l = 0 // for draw up down

let go = false

​

function setup() {

  //set canvas

  createCanvas(pix * cols + 1, pix * rows + 1);

  //set frame rate

  frameRate(15);

  //set rule

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

    setRule[i] = makeBinary(rule[i]);

  }

​

  // console.log(setRule);

  //create empty 2d array

  for (i = 0; i < 3; i++) {

    gen.push([]);

    gen[i].push([]);

    nextGen.push([]);

    nextGen[i].push([]);

  }

​

  //create first row array

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

    i == floor(cols / 2) ? gen[0][0].push(1) : gen[0][0].push(0);

    i == floor(cols / 2) ? gen[1][0].push(1) : gen[1][0].push(0);

    i == floor(cols / 2) ? gen[2][0].push(1) : gen[2][0].push(0);

​

  }

  //background grid

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

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

      let x = i * pix;

      let y = j * pix;

      fill(0);

      rect(x, y, pix, pix);

    }

  }

  // console.log(gen);

  // noLoop();

}

​

function draw() {

  //draw pix down up

​

  for (let j = 0; j < gen[0].length; j++) { //y

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

      let x = i * pix

      let y = j * pix

      // gen[j][i] == 1 ? fill(0) : fill(255);

      let col = color(gen[0][j][i] * 255, gen[1][j][i] * 255, gen[2][j][i] * 255);

      fill(col);

      rect(x, height - y - 1, pix, -pix);

    }

  }

​

  //   //draw pix  up down

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

  //       let x = i * pix

  //       let y = l * pix

  //       gen[0][i] == 1 ? fill(0) : fill(255);

  //       rect(x, y , pix, pix);

​

  //     }

  //   l++

  //run rule

  if (go == true) {

    runRule();

  }

}

//run rule function

function runRule() {

  for (let alt = 0; alt < 3; alt++) {

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

      // i = left, j = center, k = right 

      let i = j - 1;

      if (i < 0) {

        i = i + cols

      }

      let k = j + 1;

      if (k >= cols) {

        k = k - cols

      }

      //count = index# to the rule array

      let count = gen[alt][0][i] * 4 + gen[alt][0][j] * 2 + gen[alt][0][k]

      // console.log(j, "\t", i, gen[0][i], j, gen[0][j], k, gen[0][k], count);

      nextGen[alt][j] = setRule[alt][count]

      // console.log(nextGen[alt][j],setRule[alt][count]);

​

    }

    // console.log(nextGen[alt]);

  }

​

  // inheret next gen

  for (i = 0; i < 3; i++) {

    gen[i].unshift(nextGen[i])

  }

  //clean array

  let empt = []

  for (i = 0; i < 3; i++) {

    empt.push([]);

    empt[i].push([]);

  }

  nextGen = empt.slice()

​

  // //delete old array

  // if (gen.length > rows) {

  //   gen.pop();

  //   console.log(rule);

  // }

}

​

//set up rule from binary

function makeBinary(_n) {

  let n = [];

  //reversed array

  for (i = 7; i >= 0; i--) {

    if (Math.pow(2, i) <= _n) {

      n.unshift(1);

      _n = _n - Math.pow(2, i);

    } else {

      n.unshift(0);

    }

  }

  return n;

}

​

​

//true JS below

​

//event listener

// document.addEventListener("keypress",function (e) {

//   if (13 == e.keyCode) {

//      ruleChange();

//   }

// });

​

reButton.addEventListener("click", valReset);

​

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

  inputRule[i].addEventListener("input", valCheck);

  inputRule[i].addEventListener("input", ruleChange);

  inputRule[i].addEventListener("input", console.log(i));

}

// inputRule[1].addEventListener("input", console.log("1",ruleChange(1)));

// inputRule[1].addEventListener("input", console.log("1",inputRule[1]));

stButton.addEventListener("click", st);

​

function ruleChange() {

    index = /\d/g.exec(this.id) 

    // console.log(index)

​

  var ruleVal = [];

  ruleVal[index] = inputRule[index].value;

  // console.log(ruleVal[index]);

  rule[index] = ruleVal[index]

  setRule[index] = makeBinary(rule[index]);

}

​

function valCheck() {

  index = /\d/g.exec(this.id) 

  var ruleVal = inputRule.value;

  if (inputRule[index].value > 255) {

    inputRule[index].value = 255

  }

  if (inputRule[index].value < 0 || inputRule[index].value == null || inputRule[index].value == "") {

    inputRule[index].value = 0

  }

​

}

​

function valReset() {

  var resetVal = [];

  for (i = 0; i < 3; i++) {

    resetVal.push([]);

    resetVal[i].push([]);

  }

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

    i == floor(cols / 2) ? resetVal[0][0].push(1) : resetVal[0][0].push(0);

    i == floor(cols / 2) ? resetVal[1][0].push(1) : resetVal[1][0].push(0);

    i == floor(cols / 2) ? resetVal[2][0].push(1) : resetVal[2][0].push(0);

  }

  for (i = 0; i < 3; i++) {

    // gen[i] = resetVal[i].slice()

     // gen[i].unshift(resetVal[i][0])

        gen[i][0] = resetVal[i][0].slice()

​

  }

  // console.log(gen);

}

​

function st() {

// console.log(go);

  if (go == true) {

    go = false

    stButton.value = "start"

  } else if (go == false) {

    go = true

    stButton.value = "stop"

  }

}