Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Conway's Game of Life Simulator (gallery-conway) on cdn

Last Updated: 07/12/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 07/7/12
Last CDN Push: 07/11/12
Build Tag: gallery-2012.07.11-21-38
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

A simulator for Conway's Game of Life. The simulator object keeps track of the alive or dead state of each cell in a grid and allows the simulation to run one step at a time. Out of the box it does not provide any way to visually render the grid, but Y.Graphics is a good option for building a custom renderer.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.11-21-38'
}).use('gallery-conway', 'graphics', 'node', function (Y) {
    var circle,
        circles = [],
        graphic = new Y.Graphic({
            render: '#conway'
        }),
        gridHeight = 21,
        gridWidth = 21,
        i,
        j,
        running = false,
        simulation = new Y.Conway({
            height: gridHeight,
            toroidal: true,
            width: gridWidth
        }),
        startStopButtonNode = Y.one('#start-stop-button'),
 
        onClick = function (x, y) {
            return function () {
                simulation.setCell(x, y, !simulation.getCell(x, y));
            };
        },
 
        run = function () {
            if (running) {
                simulation.step(function (updated) {
                    if (!updated.length) {
                        running = false;
                    }
 
                    run();
                });
            }
        };
 
    for (j = 0; j < gridHeight; j += 1) {
        for (i = 0; i < gridWidth; i += 1) {
            circle = graphic.addShape({
                fill: {
                    color: '#FFFFFF'
                },
                height: 12,
                stroke: {
                    color: '#000000',
                    width: 1
                },
                type: 'circle',
                width: 12,
                x: 13 * i,
                y: 13 * j
            });
 
            circles.push(circle);
 
            Y.Node(circle.get('node')).on('click', onClick(i, j));
        }
    }
 
    simulation.after('cellChange', function (eventFacade) {
        circles[eventFacade.index].set('fill', {
            color: eventFacade.cell ? '#000000' : '#FFFFFF'
        });
    });
 
    simulation.setCell(1, 8, true).setCell(2, 8, true).setCell(3, 8, true).setCell(3, 7, true).setCell(2, 6, true);
 
    if (startStopButtonNode) {
        startStopButtonNode.on('click', function () {
            running = !running;
            run();
        });
    }
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.07.11-21-38'
}).use('gallery-conway', 'graphics', 'node', function (Y) {
    var circle,
        circles = [],
        graphic = new Y.Graphic({
            render: '#conway'
        }),
        gridHeight = 21,
        gridWidth = 21,
        i,
        j,
        running = false,
        simulation = new Y.Conway({
            height: gridHeight,
            toroidal: true,
            width: gridWidth
        }),
        startStopButtonNode = Y.one('#start-stop-button'),
        
        onClick = function (x, y) {
            return function () {
                simulation.setCell(x, y, !simulation.getCell(x, y));
            };
        },
        
        run = function () {
            if (running) {
                simulation.step(function (updated) {
                    if (!updated.length) {
                        running = false;
                    }
                    
                    run();
                });
            }
        };
        
    for (j = 0; j < gridHeight; j += 1) {
        for (i = 0; i < gridWidth; i += 1) {
            circle = graphic.addShape({
                fill: {
                    color: '#FFFFFF'
                },
                height: 12,
                stroke: {
                    color: '#000000',
                    width: 1
                },
                type: 'circle',
                width: 12,
                x: 13 * i,
                y: 13 * j
            });
            
            circles.push(circle);
            
            Y.Node(circle.get('node')).on('click', onClick(i, j));
        }
    }
    
    simulation.after('cellChange', function (eventFacade) {
        circles[eventFacade.index].set('fill', {
            color: eventFacade.cell ? '#000000' : '#FFFFFF'
        });
    });
    
    simulation.setCell(1, 8, true).setCell(2, 8, true).setCell(3, 8, true).setCell(3, 7, true).setCell(2, 6, true);
    
    if (startStopButtonNode) {
        startStopButtonNode.on('click', function () {
            running = !running;
            run();
        });
    }
});