(function(window, document, undefined) { 
    window.onload = init;
    function init() {
    
        //get the canvas
        var canvas = document.getElementById("mapcanvas");
        var c = canvas.getContext("2d");
        
        //create an empty map
        var map = new Array(canvas.width);
        for(var i = 0; i < canvas.width; i++) {
            map[i] = new Array(canvas.height);
        }
        
        //function for finding if one point is a wall
        function iswall(i,j) {
            if(i >= canvas.width || i < 0 || j >= canvas.height || j < 0) {
                return 1;
            }else{
                return map[i][j];
            }
        }
       
       //functions for finding how many neighbors are walls
        function ncount(i,j) {
            var i1 = i+1;
            var i2 = i-1;
            var j1 = j+1;
            var j2 = j-1;
            var neighbors = 0;
            if(iswall(i1,j1) == 1) {
                neighbors++;
            }
            if(iswall(i,j1) == 1) {
                neighbors++;
            }
            if(iswall(i2,j1) == 1) {
                neighbors++;
            }
            if(iswall(i1,j) == 1) {
                neighbors++;
            }
            if(iswall(i2,j) == 1) {
                neighbors++;
            }
            if(iswall(i1,j2) == 1) {
                neighbors++;
            }
            if(iswall(i,j2) == 1) {
                neighbors++;
            }
            if(iswall(i2,j2) == 1) {
                neighbors++;
            }
            return neighbors;
        }
        
        //when we click, assign values and then paint
        document.getElementById("startbtn").onclick = paint;
        var it = 1;
        function paint() {
            document.getElementById("iter").innerHTML = it;
            if(it == 1) {
                //fill the values
                for(var i = 0; i < canvas.width; i++) {
                    for(var j = 0; j < canvas.height; j++) {
                        if(Math.random() < .40) {
                            map[i][j] = 1;
                        } else {
                            map[i][j] = 0;
                        }
                    }
                }
            } else {
                for(var i = 0; i < canvas.width; i++) {
                    for(var j = 0; j < canvas.height; j++) {
                        var nc = ncount(i,j);
                        if(it <= 4) {
                            if(nc >= 5 || nc <= 2) {
                                map[i][j] = 1;
                            }else{
                                map[i][j] = 0;
                            }
                        }else{
                            if(nc <4) {
                                map[i][j] = 0;
                            }
                        }
                    }
                }
            }
            
            //paint the map
            for(var i = 0; i < canvas.width; i++) {
                for(var j = 0; j < canvas.height; j++) {
                    if(map[i][j] == 1) {
                        c.fillStyle = "#000000";
                        c.fillRect(i, j, 1, 1);
                    }else {
                        c.fillStyle = "#FFFFFF";
                        c.fillRect(i, j, 1, 1);
                    }
                }
            }
            it++;
        }
    }
})(window, document, undefined);

@@ -1770,114 +1770,31 @@
     
-document.getElementById(%22iter%22).innerHTML = it;%0A            if(it == 1) %7B%0A                //fill the value
+//generation interation
 s%0A  
@@ -1795,36 +1795,32 @@
 ons%0A            
- 
-   
 for(var i = 0; i
@@ -1816,33 +1816,25 @@
 ar i
+t
  = 0; i
+t
  %3C 
-canvas.width
+8
 ; i
+t
 ++) 
@@ -1855,309 +1855,91 @@
     
-    for(var j = 0; j %3C canvas.height; j++) %7B%0A                        if(Math.random() %3C .40) %7B%0A                            map%5Bi%5D%5Bj%5D = 1;%0A                        %7D else %7B%0A                            map%5Bi%5D%5Bj%5D = 0;%0A                        %7D%0A                    %7D%0A                %7D%0A            %7D else %7B%0A
+if(it == 0) %7B%0A                    //fill random values for the first iteration%0A    
     
@@ -1982,32 +1982,36 @@
 s.width; i++) %7B%0A
+    
                 
@@ -2083,117 +2083,34 @@
     
-var nc = ncount(i,j);%0A                        if(it %3C= 4) %7B%0A                            if(nc %3E= 5 %7C%7C nc %3C= 2
+    if(Math.random() %3C .40
 ) %7B%0A
@@ -2177,36 +2177,38 @@
                %7D
+ 
 else
+ 
 %7B%0A              
@@ -2287,36 +2287,78 @@
                %7D
+%0A                    %7D%0A                %7D 
 else
+ 
 %7B%0A              
@@ -2367,104 +2367,781 @@
     
-        if(nc %3C4) %7B%0A                                map%5Bi%5D%5Bj%5D = 0;%0A                            %7D
+//on subsequent iterations, create%0A                    for(var i = 0; i %3C canvas.width; i++) %7B%0A                        for(var j = 0; j %3C canvas.height; j++) %7B%0A                            var nc = ncount(i,j);%0A                            //for the first 4 iterations, %0A                            if(it %3C= 4) %7B%0A                                if(nc %3E= 5 %7C%7C nc %3C= 2) %7B%0A                                    map%5Bi%5D%5Bj%5D = 1;%0A                                %7D else %7B%0A                                    map%5Bi%5D%5Bj%5D = 0;%0A                                %7D%0A                            %7D else %7B%0A                                if(nc %3C= 4) %7B%0A                                    map%5Bi%5D%5Bj%5D = 0;%0A                                %7D%0A                            %7D //after the first 4 iterations
 %0A   
@@ -3522,24 +3522,25 @@
            %7D
+ 
 else %7B%0A     
@@ -3663,32 +3663,32 @@
               %7D%0A
+
             %7D%0A  
@@ -3689,26 +3689,8 @@
   %7D%0A
-            it++;%0A
     

Update script.js