MultiState Automata

let RULE;

let BASE;

​

let palette = 

  // ['#5F464B','#8E4A49','#7DAA92'];

  ['#000F08', '#136F63', '#E0CA3C'];

​

function setup() {

  const aspect_ratio = 9 / 11

  if (windowWidth > windowHeight) {

    createCanvas(aspect_ratio * windowHeight, windowHeight, SVG);

  }

  else {

    createCanvas(windowWidth, windowWidth / aspect_ratio, SVG);

  }

​

  noLoop();

}

​

function rule_length(num_states, neighbourhood_size) {

  return pow(num_states, neighbourhood_size);

}

​

function generate_rule(num_states, neighbourhood_size) {

  const length = rule_length(num_states, neighbourhood_size);

  return Array.apply(null, Array(length)).map(() => floor(random() * num_states));

}

​

function next_state(num_states, rule, neighbourhood) {

  // console.log(neighbourhood);

  const state = neighbourhood

    .map((state) => state.toString())

    .reduce((acc, val) => val + acc)

  const index = parseInt(state, num_states);

​

  return rule[index];

}

​

function rule_to_int(rule, base) {

  return parseInt(rule.reduce((str, x) => x.toString() + str), base);

}

​

function int_to_rule(num, base, rule_length) {

  let rule = num.toString(base);

  rule= Array.from({...rule,length:rule_length}, (v,i) => parseInt(v ?? '0') );

  rule.reverse();

  return rule;

}

​

function draw() {

  BASE = 3;

  RULE = generate_rule(BASE, 3);

  //RULE = int_to_rule(2030455357416, BASE, 27);

  console.log(RULE);

  // console.log(rule);

  //console.log(rule_to_int(RULE, BASE));

  // const num = rule_to_int(RULE,BASE)

  // console.log(num);

  // console.log(int_to_rule(num, BASE, 27));

​

  const square_size = 40;

  const grid_x = 20;

​

  const margin = floor((width - (square_size * grid_x)) / 2);

​

  const grid_y = floor((height - (2 * margin)) / square_size);

​

  // console.log(margin);

​

  translate(margin, margin);

  scale(square_size, square_size);

​

  let curr_state = Array.apply(null, Array(grid_x)).map(() => floor(random() * BASE));

  let new_state = Array.apply(null, Array(grid_x)).map(() => 0);

​

  for (let y = 0; y < grid_y; y++) {

    // console.log(curr_state);

    for (let x = 0; x < grid_x; x++) {

      const left_index = (x - 1) < 0 ? grid_x - 1 : (x - 1);

      const right_index = (x + 1) % grid_x;

​

      const curr = curr_state[x];

​

      const neighbourhood = [curr_state[left_index], curr, curr_state[right_index]];

​

      // console.log(neighbourhood);

​

      const next = next_state(BASE, RULE, neighbourhood);

      new_state[x] = next

​

      // console.log({

      //  x,

      //  y,

      //  left_index,

      //  right_index,

      //  neighbourhood,

      //  next,

      //  curr

      // });

​

//      if (curr === 0) {

//        fill('#233D4D');

//      } else if (curr === 1) {

//        fill('#FE7F2D');

​

//      } else if (curr === 2) {

//        fill('#FCCA46');

//      }

      fill(palette[curr % palette.length]);

      noStroke();

      rect(x, y, 1,1);

​

    }

​

    curr_state = [...new_state];

  }

}

​

function keyTyped() {

  if (key === 's') {

    save(`3s1d_${rule_to_int(RULE, BASE)}`);

  }

}