Flevopink

 
let ca; set1 = true; set2 = false; set3 = false; set4 = false; set5 = false;
        obj1 = true; obj2 = false; obj3 = false; obj4 = false;
function setup() {
  createCanvas(1800, windowHeight);
 button1 = createButton('126');
 button1.position(20,40);button1.style('width','40px');
 button1.mouseClicked(buttonSet1Action);
 button2 = createButton('110');
 button2.position(20,80);button2.style('width','40px');
 button2.mouseClicked(buttonSet2Action);
 button3 = createButton('62');
 button3.position(20,120);button3.style('width','40px');
 button3.mouseClicked(buttonSet3Action);
 button4= createButton('54');
 button4.position(20,160);button4.style('width','40px');
 button4.mouseClicked(buttonSet4Action);
 button5= createButton('150');
 button5.position(20,200);button5.style('width','40px');
 button5.mouseClicked(buttonSet5Action);
 button6= createButton('obj1');
 button6.position(80,40);button6.style('width','40px');
 button6.mouseClicked(buttonObj1Action);
 button7= createButton('obj2');
 button7.position(80,80);button7.style('width','40px');
 button7.mouseClicked(buttonObj2Action);
 button8= createButton('obj3');
 button8.position(80,120);button8.style('width','40px');
 button8.mouseClicked(buttonObj3Action);
 button9= createButton('obj4');
 button9.position(80,160);button9.style('width','40px');
 button9.mouseClicked(buttonObj4Action);
 buttonD = createButton('downloaden');
 buttonD.position(20,240);buttonD.style('width','100px');
 buttonD.mouseClicked(buttonDAction);
  if (obj1) ca = new CA(3,0.5,0.5,0.5);
  if (obj2) ca = new CA(3,0.25,0.5,0.75);
  if (obj3) ca = new CA(30,0.5,0.5,0.5);
  if (obj4) ca = new CA(30,0.25,0.5,0.75);
  if (set1) ca.ruleset = [0, 1, 1, 1, 1, 1, 1, 0];
  if (set2) ca.ruleset = [0, 1, 1, 0, 1, 1, 1, 0];
  if (set3) ca.ruleset = [0, 0, 1, 1, 1, 1, 1, 0];
  if (set4) ca.ruleset = [0, 0, 1, 1, 0, 1, 1, 0];
  if (set5) ca.ruleset = [1, 0, 0, 1, 0, 1, 1, 0];
}
 
function draw() {
  ca.display();
  if (ca.generation < height/ca.w) {ca.generate();}
  }
 
  function buttonSet1Action()
      {set1 = true; set2 = false; set3 = false; set4 = false; set5 = false;setup();}
  function buttonSet2Action()
      {set1 = false; set2 = true; set3 = false; set4 = false; set5 = false;setup();}
  function buttonSet3Action()
      {set1 = false; set2 = false; set3 = true;  set4 = false;set5 = false;setup();}
  function buttonSet4Action()
      {set1 = false; set2 = false; set3 = false; set4 = true; set5 = false;setup();}
  function buttonSet5Action()
      {set1 = false; set2 = false; set3 = false; set4 = false;set5 = true;setup();}
  function buttonObj1Action()
      {obj1 = true; obj2 = false; obj3 = false; obj4 = false; setup();}
  function buttonObj2Action()
      {obj1 = false; obj2 = true; obj3 = false; obj4 = false; setup();}
  function buttonObj3Action()
      {obj1 = false; obj2 = false; obj3 = true; obj4 = false; setup();}
  function buttonObj4Action()
      {obj1 = false; obj2 = false; obj3 = false; obj4 = true; setup();}
  function buttonDAction(){save('cellular automata.png');}
 

 
class CA {
  constructor(w,l1,l2,l3) {
  this.w = w; this.l1 = l1; this.l2 = l2; this.l3 = l3;
//cells is een array object van de Array class
//het is niet nodig om let cells = [] te declareren
  this.cells = new Array(width/this.w);
//als start bevatten alle cellen van cells alleen nullen
for (let i = 0; i < this.cells.length; i++) {
  this.cells[i] = 0
}
//een aantal cellen van cells wordt een "1
//dus alle cellular automata schetsen starten me dit array
  this.cells[this.cells.length*l1] = 1;
  this.cells[this.cells.length*l2] = 1;
  this.cells[this.cells.length*l3] = 1;
  this.generation = 0; //start met generatie "0"
}
//de methoden generate(), en display()
//met generate wordt de lengte van de volgende generatie array bepaald
//en komen er in alle cellen nullen
generate() {
let nextgen = [];
nextgen.length = this.cells.length;
 for (let i = 0; i < this.cells.length; i++) {
    nextgen[i] = 0;
  }
// de cells array wordt nagelopen het resultaat wordt aan rules gegeven
  for (let i = 1; i < this.cells.length-1; i++) {
    let left   = this.cells[i-1]; // linker nabuur cel
    let me     = this.cells[i];   // huidige cel
    let right  = this.cells[i+1]; // rechter nabuur cellular
// de resultaten van rules worden aan de nextgen array gegeven
    nextgen[i] = this.rules(left, me, right);
  }
  //de inhoud van nextgen array wordt weer aan cells gegeven
  //zodat de daarop volgende nextgen kan worden berekend
  this.cells = nextgen;
  this.generation++;
}
 
rules(a, b, c) {
  if (a == 1 && b == 1 && c == 1) return this.ruleset[0];
  if (a == 1 && b == 1 && c == 0) return this.ruleset[1];
  if (a == 1 && b == 0 && c == 1) return this.ruleset[2];
  if (a == 1 && b == 0 && c == 0) return this.ruleset[3];
  if (a == 0 && b == 1 && c == 1) return this.ruleset[4];
  if (a == 0 && b == 1 && c == 0) return this.ruleset[5];
  if (a == 0 && b == 0 && c == 1) return this.ruleset[6];
  if (a == 0 && b == 0 && c == 0) return this.ruleset[7];
  return 0;
}
 
display () {
  for (let i = 0; i < this.cells.length; i++) {
    if (this.cells[i] == 1) fill(random(100,200),random(50,250),random(100,200));
    else                    fill('rgba(255,255,255, 0)');
    noStroke();
    rect(i*this.w, this.generation*this.w, this.w, this.w);
    }
  }
}