let generation = 0;

// cell size

let w = 3;

let slider;

//state

let isComplete = false;

​

// starting rule

let ruleset = [0, 1, 1, 0, 1, 0, 1, 1];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

  textFont("Arial");

​

  //   make slider to change cell size

  slider = createSlider(2, 20, w);

  slider.position(25, 25);

  slider.style("width", "100px");

​

  // save button

  saveButton = createButton("Save Canvas");

  saveButton.position(160, 5);

  saveButton.mousePressed(saveCanvasImage);

​

  // reset button

  resetButton = createButton("Reset");

  resetButton.position(290, 5); // Place it next to the save button

  resetButton.mousePressed(resetCanvas);

​

  //array of 0s and 1s

  cells = new Array(floor(width / w));

  for (let i = 0; i < cells.length; i++) {

    cells[i] = 0;

  }

  cells[floor(cells.length / 2)] = 1;

}

​

function draw() {

  //slider w value

  w = slider.value();

  fill(240);

  stroke(0);

​

//   for slider text 

  rect(25, 5, 104, 20,2);

  fill(0);

  stroke(255);

  textSize(13);

  textFont("Arial");

  text("Adjust Cell Size:", 30, 20);

//   for resitting ruleset text 

  fill(240);

  stroke(0);

  rect(385, 5, 240, 20,2);

  fill(0);

  stroke(255);

  textSize(13);

  textFont("Arial");

  text("Press Mouse to Generate a new pattern ", 390, 20);

​

  for (let i = 1; i < cells.length - 1; i++) {

    //drawing the cells with a state of 1

    if (cells[i] == 1) {

      noFill();

      stroke(random(180), random(180), random(250));

      //y-position according to the generation

      square(i * w, generation * w, random(w));

    }

  }

​

  //next generation.

  let nextgen = cells.slice();

  for (let i = 1; i < cells.length - 1; i++) {

    let left = cells[i - 1];

    let me = cells[i];

    let right = cells[i + 1];

    nextgen[i] = rules(left, me, right);

  }

  cells = nextgen;

​

  // gen + 1

  generation++;

​

  // stop when it reaches bottom of the canvas

  if (generation * w > height) {

    noLoop();

    isComplete = true;

  }

}

​

// a new state from the ruleset.

function rules(a, b, c) {

  let s = "" + a + b + c;

  let index = parseInt(s, 2);

  return ruleset[7 - index];

}

​

// mouse is pressed

function mousePressed() {

  // make new ruleset with random 0s and 1s

  ruleset = [];

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

    ruleset.push(floor(random(2))); // Random 0 or

    //  fill(255);

    // square(i *w, generation * w, w);

  }

  //https://p5js.org/reference/p5/console/ for debugging

  console.log("New Ruleset: ", ruleset);

​

  // restart with the new ruleset

  cells = new Array(floor(width / w));

  for (let i = 0; i < cells.length; i++) {

    cells[i] = 0;

    noStroke();

​

    let x1 = 5 * i * cos(i);

    let y1 = i * sin(i);

    fill(205, 220, random(90, 155), 10);

    circle(x1, y1, w * random(150));

  }

  cells[floor(cells.length / 2)] = 1;

  generation = 0;

  loop();

}

​

// save image

function saveCanvasImage() {

  saveCanvas("cellularAutomata", "png");

}

​

// restart

function resetCanvas() {

  background(255);

  cells = new Array(floor(width / w));

  for (let i = 0; i < cells.length; i++) {

    cells[i] = 0;

  }

  cells[floor(cells.length / 2)] = 1;

  generation = 0;

  loop(); //

}

​