Cellular automata is one fascinating subject and none other than the Game of Life to demonstrate it. This presentation explores the origins and rules of Life and how to implement it using Angular 6.

1. Game of Life
Life of Games

2. Gil Steiner
Front end developer
Game developer & designer
gilsteiner.com
gamesgil@github

3. If I can make games
with it - it can’t
be all bad
(Gil Steiner, 2018)

4. Cellular Automaton
● Spatial structure
● Cell state / representation
● Inter cell interaction
● Cell state v structure state

5. John Horton Conway

6. Conway’s Game of Life
NxN Grid: each cell is evaluated by its neighbors
Living Cell
0-1: Loneliness
2-3: Survival
4-8: Overpopulation
Empty Cell
3: Spawns new “life”

7. Conway’s Game of Life
NxN Grid: each cell is evaluated by its neighbors
Living Cell
0-1: Loneliness
2-3: Survival
4-8: Overpopulation
Empty Cell
3: New “life”

8. Example
1 1 1 0 0
2 3 2 1 0
1 2 1 1 0
2 3 2 1 0
1 1 1 0 0

9. Elements

10. The Pleasure DOM - Grid
<table>
<tbody>
<tr *ngFor="let row of getArray(HEIGHT)">
<td #cell *ngFor="let cell of getArray(WIDTH)"
(click)="mark($event, cell, row)"></td>
</tr>
</tbody>
</table>

11. The Pleasure DOM - Controls
<button (click)="clear()">Clear</button>
<button (click)="analyze()">Analyze</button>
<button (click)="next()">Next</button>
<button (click)="playPause()">{{otherState}}</button>
<br>
<input type="range" max="100" min="1"
(change)="onChangeSpeed($event)">

12. Code Gotchas
ngOnInit() {
this.cells = this.tds.map(e => e.nativeElement);
}
ngAfterViewInit() {
this.cells = this.tds.map(e => e.nativeElement);
}

13. Functional Array Initialization
getArray(size) {
return new Array(size)
.fill(0)
.map((item, idx) => idx);
} Easy Peasy!

14. Animation “Trick”
autoplay() {
this.next();
if (this.state === 'Play') {
// old school
// this.timeout = setTimeout(this.autoplay.bind(this),
this.speed);
this.timeout = setTimeout(_ => this.autoplay(), this.speed);
}
}

15. // Code Review

16. Showcase

17. Grid Gotchas

18. Painting the pixels is harder!
Grid Gotchas