now it actually evolves according to the rules

index.html

@@ -7,14 +7,8 @@
           padding: 0;
       }
 
-      body {
-          /* background: rgb(159,121,30); */
-          /* background: linear-gradient(90deg, rgba(159,121,30,1) 0%, rgba(230,64,27,1) 34%, rgba(255,119,0,1) 100%); */
-      }
-
-      canvas {
-          background: rgb(238,174,202);
-          background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
+      canvas {
+          border: solid black 5px;
       }
     </style>
   </head>

main.js

@@ -5,10 +5,10 @@ const rules = {
   "110": "1",
   "101": "0",
   "100": "1",
-  "011": "0",
+  "011": "1",
   "010": "0",
-  "001": "0",
-  "000": "1"
+  "001": "1",
+  "000": "0"
 }
 
 function getRandomInt(min, max) {
@@ -24,9 +24,8 @@ function sleep(ms) {
 
 function evolve(state, acc) {
   const [x, y, z, ...xs] = state;
-
   if (!xs.length) {
-    return acc + x + acc[0] + acc[1]
+    return acc[0] + acc + acc[acc.length - 1]
   }
   else {
     const rule = x + y + z;
@@ -40,10 +39,16 @@ function draw(state, context, acc) {
 
   Object.keys(state).forEach(
     function (key) {
-      if(state[key] == "1") {
-        context.fillStyle="black";
       context.moveTo(key * cell_dim, acc * cell_dim)
       context.fillRect(key * cell_dim, acc * cell_dim, cell_dim, cell_dim)
+      if(state[key] == "1") {
+        context.fillStyle="black";
+      }else {
+        if (acc % 2) {
+          context.fillStyle="white";
+        }else {
+          context.fillStyle="white";
+        }
       }
     })
 }
@@ -58,6 +63,8 @@ window.addEventListener("load", async function() {
     _=> getRandomInt(0, 2).toString()
   ).join("")
 
+  console.log("initial state length : ", initial_state.length)
+
   var new_state = evolve(initial_state, "")
   var acc = 0