377 GOL

Display graphics using the HTML 5 canvas object and JavaScript.

· Come to class as there may be corrections, changes and additions.
· Using Notepad++, create a web page.
· VALIDATE your   HTML   and your   CSS
· Follow these directions to SUBMIT a folder called "CANVAS" to your class account   Significant late penalty.
· Comment! (guidelines)
· Review the HONESTY policy. Document sources both inanimate and animate!.

GOL References


Game of Life (best)     -     Conway GOL     -     Celllular Automata     -     Life Wiki     -     Wired Article on Conway

Create a folder, "GOL", with THREE files (gol.html, gol.css and gol.js) that produces a page similar to the following:

canvas   canvas
canvas   canvas
HTML and CSS: Create ONE 600 x 600 canvas. -- a control panel -- layout using css to float items and centers items and all presentation -- entire layout fits into 1024 width on FireFox with no horizontal scroll -- canvas should be in a container div, but set its w/h using attributes -- css and html must validate

Requirements: ONE "deliverable" : Folder GOL

Generate & display initial random life grid. Give user choice of at least TWO cell sizes (avoid 1-4 pixel cells) GOL generates n generations following these rules: (B3/S23) For a space that is 'populated' (alive): Each cell with one or no neighbors dies Each cell with four or more neighbors dies Each cell with two or three neighbors survives For a space that is 'empty' or 'unpopulated' (dead) Each cell with exactly three neighbors becomes alive NOTE: step and compute all future settings; THEN apply future settings NOTE: There is a variation rule set called B36/S23. Could you make your code switch between rule sets? Display the generation # should at the top - change with each generation Correctly generate and display each generation.

Code and Documentation

Documentation about the game of life as a HEADER in the class - YOUR description of the game - YOUR analysis / approach / high level algorithm Every method has brief explanation Good naming & comments as neeed in code

Data Structures & Control

- 2d array of objects - current status of cell (alive/dead) - next generation status of cell (alive/dead) - age 0 at creation +1 every generation alive upon death maintain value until re-birth A nested loop control structure will be used.