Contest: Post the longest running screenshot of a random universe that is still chaotic
(Use the comments button to link to the this projects post page)

Software project: Create a Javascript Version of Mathematician John Conway's Famous Game of Life

Like to teach your kids programming? Here's a project you can work on together. It pulls in a little graphics work as well as some simple logic to build an interesting sim

What's interesting here:

  1. Work with some simple graphical tools - see the interesting visual results of your work
  2. Mathematical curiosity - create a Turing Complete machine capable of computing any algorithm (learn what a Turing Complete machine is :) )
  3. Philosophy and Physics - Explore how complexity and order can be naturally emergent from only a few relatively simple rules (much like the universe you live in!)
  4. Biology - in many ways simulates the action of microbial colonies. Also demonstrates the way complexities such as life can emerge from a small number of fixed rules.
The list goes on an on - fundamentally its a cool little sim you can wind up and watch it go. There's plenty of reading to be done on the subject - and it branches into many different areas of interest and study. There's your motivation.

Project Chapter #1: Create a Graphical Grid

Step 1: Write a basic HTML wrapper for your page. Include HTML, HEAD, TITLE, and BODY tags. Test out your page, make sure you can view it. Create a CANVAS element within the body. Place SCRIPT tags to hold your javascript at the bottom of the page.

Step 2: Write a function which can draw a square of any of 5 colors (including white) The function should make the squares the size of your grid squares and should be able to outline as well as color the squares. It should be able to place the squares anywhere within the canvas (accepts x and y coordinates)

Step 3: Draw a graphical grid that is static but which will serve as the background to your Game of Life simulation.

Some of these pointers are fairly basic (sorry experienced programmers!!) But the pointers start at the very beginning. Here's what you need to know:

    Enclose all Javascript programming inside:
    <script type = 'text/javascript'>
    You'll need to to place a <canvas> HTML object outside the script tags
    <canvas id="game-canvas"> </canvas>
    Where you place the canvas is where the grid will go.  The ID is how you'll reference this in Javascript.
    HTML canvas drawing commands:
    Get the canvas:
    var canvas = document.getElementById("game-canvas");
    Get the canvas graphics context so you can draw:
    var ctx = canvas.getContext("2d");
    drawing commands to know:
    ctx.beginPath();   ---> use before you begin stroking lines
    context.moveTo(x,y); Moves to point without drawing
    context.lineTo(x,y); Draws a line from the point you're at to the new point specified
    context.fillStyle = hexColor;  hex color is a number like '#000000' which is a hex number specifying color
    context.fillRect(x,y,w,h); Fills a rectangle with the fill style at the coordinates with height h and width w
    context.stroke(); complete a list of lineTo commands with this to actually stroke the lines

When you're done and you run your function it should draw a blank grid of squares something like the below. You should write your code to have a variable width and length if possible. For example below I've just passed a 10x10 x, y dimension variable to my drawing routine instead of the 750x500 grid above.

Project Chapter #2: Create a data structure to hold your universe

You will need to manage the current state of every square at the same time you'll need to separately hold the result of each square's 'game of life' calculation (the next-state). You can't simply write over and update the current state of a square when it's calculation is performed since the current state of that square affects more than the square itself (it affects all its neighbors). Essentially you need to hold 2 full states - the current state of each square and the calculated next state. Once all calculation is done you can commit the next-state to the current state by writing over the square's 'current state' with its next state data.

Step 1: Devise a variable which will be able to hold all the necessary state information for each square on your grid. To include its color, its location, and its next-state.

Step 2: Populate the variable with each cell's appropriate x and y location as well as a zero value to represent an initial fully dead state for current and next-state values for each cell.

Helpful hints for making this happen:

			To create an object in Javascript use:
			var thisNewObject = {};
			To create a 2D variable you need to create objects inside the object ie:
			thisNewObject[1] = {};
			thisNewObject[2] = {};
			Addressing an 2D object in Javascript takes the form:
			var myValue = thisNewObject[var1][var2];
			Assigning a value to a 2D object is acheived in the reverse:
			thisNewObject[var1][var2] = myValue;
			For loop format in Javascript is:
			for (var i=0; i<10; i++) {

Chapter 3: Generate and Display a random initial state

Generating an initial state is as simple as assigning each square in your universe variable a random color value. White cells are dead. In some versions of the game of life there is only one other color "alive.". In the version I have coded above there are 4 "species" of alive cells corresponding to each of 4 different colors. Once you've assigned a color to each cell you need to use your square writing function to show each square's new color on the screen.

Step 1:Write a function that populates the initial conditions into your universe's data structure variable which your created in Chapter 2. At this point just make modification to the variable's data.

Step 2:Visualize your variable by iterating through each square and coloring it by using the square-writing function you wrote in Chapter 1. Each square in the variable should have associated x,y and color values which you can pass to the square-writing function.

Helpful hints for making this happen:

    		My square-writing function looks like:
    		function strokeRect(context, x=0, y=0, color = 0, w=10, h=10, outline=true)
    		myRandom = Math.floor((Math.random()*4))   // Generates a random number between 0 and 4

Chapter 4: Make and Visualize the Calculation to the Next Time State

The final step is to implement the rules of the game of life. The rules are as follows:

  1. Any live cell with fewer than two live neighbors dies, as if caused by underpopulation.
  2. Any live cell with two or three live neighbors lives on to the next generation.
  3. Any live cell with more than three live neighbors dies, as if by overpopulation.
  4. Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.
Additional rules to allow for evolution
  1. live cell created by 3 neighbors takes on the majority color
  2. if all 3 neighbors are different colors it takes on the 4th color

Your job is to implement these rules for each and every cell in your grid. iterate through each cell and using its value and the values of its neighbors you'll have to arrive at a decision for the "next state" of that cell. You'll need to write the "next state" for that cell to your data variable and then move to the next. Only after all the cells "next states" are calculated should you commit and over-write the current state with the next-states. Once this is done all you have left is to visualize the result! Fortunately you've already done this in chapter 3 - Just re-run the data through your function from chapter 3.

Step 1: Write a function which follows the rules above and calculates the next-state value for every cell in your data structure. The function should complete and then commit the changes to the current-state thereby advancing time.

Step 2: Visualize the result by calling the function you wrote in chapter 3 to change the visual state of the entire graph based on the calculations of step 1.

Step 3: Write a main routine which can be started and stopped via buttons and loops infinitely while running. The loop should include calling the evolution to next-state function and displaying the result. Then proceeding to the next calculation.

Helpful hints for making this happen:

    		One way to connect a button to an function is:
    		<button onclick="myFunction">
    		Retreiving the value from a 2D object in Javascript looks like:
    		thisValue = myObject[x][y];
    		You can include math in the brackets of the variable
    		thisValue = myObject[x-1][y];
    		You can choose to implement or not implement border conditions.
    		If you want to compute in a wrap-around fashion you need to do special
    		calculations for all the cells around the edge

You can download just the final solution here:

Download Solution Here

Help me

Post best run