-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcell45.html
99 lines (97 loc) · 3.15 KB
/
cell45.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
<!–– HTML ––>
<h1> <b> AJA Group - Project #1 Cella Rule 45 </b> </h1>
<div class="graph">
<ul class="squares">
<!–– CSS ––>
<style>
/*centers the title and makes it pretty*/
h1 {
color: #2E2478;
font-family: Impact;
font-size: 200%;
text-align: center;
}
/*gets rid of the dots from uls*/
ul { list-style-type: none; }
/*creates the grid*/
.graph {
display: inline-grid;
transform: rotateX(180deg) rotate(270deg);
padding: 5px;
border: 1px #e1e4e8 solid;
}
.squares {
display: grid;
--square-size: 4px;
grid-gap: 0.5px;
grid-template-rows: repeat(400, var(--square-size));/*number of rows*/
grid-auto-flow: column;/*columns auto generated*/
grid-auto-columns: var(--square-size);
}
/*square colors*/
.squares li{ background-color: #ebedf0; }/*blank*/
.squares li[data-level="1"] { background-color: #000000; }/*black*/
</style>
<!–– Javascript ––>
<script>
//initialize first gen array
var firstgen = new Array(400).fill(0);
firstgen[200]=1;//seed
//create array of all cells
var cells = new Array(160000).fill(0);
//copy our seeded first gen into allcells
for(var i=0;i<400;i++)
cells[i]=firstgen[i];
//apply elementary cell automata rule 45
for(var gen=0;gen<400;gen++)//for 400 generations
for(var cell=0;cell<400;cell++){//for 400 cells
var c = gen * 400 + cell;//index of current cell
var nextgen = c + 400;//index of corresponding cell in next gen
if(cell==0){//special case for left edge cells
if(cells[c]==1 && cells[c+1]==1)//rule 5
cells[nextgen]=1;
if(cells[c]==1 && cells[c+1]==0)//rule 6
cells[nextgen]=1;
if(cells[c]==0 && cells[c+1]==1)//rule 7
cells[nextgen]=0;
if(cells[c]==0 && cells[c+1]==0)//rule 8
cells[nextgen]=1;
}
else if(cell==399){//special case for right edge cells
if(cells[c-1]==1 && cells[c]==1)//rule 2
cells[nextgen]=0;
if(cells[c-1]==1 && cells[c]==0)//rule 4
cells[nextgen]=0;
if(cells[c-1]==0 && cells[c]==1)//rule 6
cells[nextgen]=1;
if(cells[c-1]==0 && cells[c]==0)//rule 8
cells[nextgen]=1;
}
else{ //for all non-edge cells
if(cells[c-1]==1 && cells[c]==1 && cells[c+1]==1)//rule 1
cells[nextgen]=0;
if(cells[c-1]==1 && cells[c]==1 && cells[c+1]==0)//rule 2
cells[nextgen]=0;
if(cells[c-1]==1 && cells[c]==0 && cells[c+1]==1)//rule 3
cells[nextgen]=1;
if(cells[c-1]==1 && cells[c]==0 && cells[c+1]==0)//rule 4
cells[nextgen]=0;
if(cells[c-1]==0 && cells[c]==1 && cells[c+1]==1)//rule 5
cells[nextgen]=1;
if(cells[c-1]==0 && cells[c]==1 && cells[c+1]==0)//rule 6
cells[nextgen]=1;
if(cells[c-1]==0 && cells[c]==0 && cells[c+1]==1)//rule 7
cells[nextgen]=0;
if(cells[c-1]==0 && cells[c]==0 && cells[c+1]==0)//rule 8
cells[nextgen]=1;
}
}
//add squares
const squares = document.querySelector('.squares');
for(var i = 0; i < 160000; i++) {
const level = cells[i];
squares.insertAdjacentHTML('beforeend', `<li data-level="${level}"></li>`);
}
</script>
</html>