Untitled

<html>
<body>

<script type="text/javascript">


function init(size, polje)
{
	var i, j;
	for (j = 0; j< size; j++)
	{
		var redak = new Array();
		for (i = 0; i < size; i++)
		{
			redak[i] = 0;
		}
		polje[j] = redak;
	}
}

function initiate(polje, koordinate)
{
	var i;
	for (i = 0; i < koordinate.length; i++)
	{
		var x = koordinate[i][0];
		var y = koordinate[i][1];
		polje[x][y] += 1;
	}
}

function broj_zivih_susjeda(polje, x, y)
{
	var count = 0;
	s = polje.length;
	var x1 = x + 1;

	if (x1 >= s){
		x1 = x1 - s;
	}

	var x2 = x - 1;
	if (x2 < 0){
		x2 = x2 + s;
	}
	var y1 = y + 1;

	if (y1 >= s){
		y1 = y1 - s;
	}
	var y2 = y - 1;
	if (y2 < 0){
		y2 = y2 + s;
	}
	count += polje[x1][y];
    count += polje[x2][y];
    count += polje[x][y1];
    count += polje[x][y2];
    count += polje[x1][y2];
    count += polje[x1][y1];
    count += polje[x2][y1];
    count += polje[x2][y2];

    return count;
}

function step(polje)
{
	var polje_tmp = new Array();
	var i, j;
	for (i = 0; i < polje.length; i++)
	{
		var red_tmp = new Array();
		for (j = 0; j < polje.length; j++)
		{
			//document.write('xxx' + i + ' ' + j);
			var za_append = polje[i][j];
			if (polje[i][j] == 1 && broj_zivih_susjeda(polje, i, j) < 2)
			{
                za_append = 0;
            }
            if (polje[i][j] == 1 && (broj_zivih_susjeda(polje, i, j) == 2 || broj_zivih_susjeda(polje, i, j) == 3))
            {
                za_append = polje[i][j];

            }
            if (polje[i][j] == 1 && (broj_zivih_susjeda(polje, i, j) > 3))
            {
                za_append = 0;
            }
            if (polje[i][j] == 0 && (broj_zivih_susjeda(polje, i, j) == 3))
            {
                za_append = 1;
            }
            red_tmp[j] = za_append;
		}
		polje_tmp[i] = red_tmp;
		//document.write('xxx' + red_tmp);
	}

	for (i = 0; i < polje.length; i++)
	{
		for (j = 0; j< polje.length; j++)
		{
			polje[i][j] = polje_tmp[i][j];
		}
	}

	//polje = polje_tmp;
}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();


function animate(polje){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 context.clearRect(0, 0, canvas.width, canvas.height);
var i, j;
	var velicina = polje.length;

	var korak = 500 / velicina;

	//var polje = new Array();

	//init(velicina, polje);

	//blinker = [[2, 1], [2, 2], [2, 3]]

	//initiate(polje, blinker);
	//
//var k;
//for (k = 0; k < 100; k++) {
	step(polje);
	for (i = 0; i < velicina; i++)
	{
		for (j = 0; j < velicina; j++)
		{


			    if (polje[i][j] == 1) {
			    	var topLeftCornerX = i*korak;
		    var topLeftCornerY = j*korak;
		    var width = korak-0;
		    var height = korak-0;

		        context.beginPath();
			    context.rect(topLeftCornerX, topLeftCornerY, width, height);
			    	context.fillStyle = "red";
			    	context.fill();
			    context.lineWidth = 1;
			    context.strokeStyle = "lightgray";
			    context.stroke();
				}


 /*               context.moveTo(0, i*korak);
    context.lineTo(500, i*korak);
    context.strokeStyle = "gray";
    context.stroke();

    context.moveTo(i*korak, 0);
    context.lineTo(i*korak, 500);
    context.stroke();*/

		}
	}


    requestAnimFrame(function(){
        animate(polje);
    });


};

window.onload = function(){
       var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

var i, j;
	var velicina = 100;

	var korak = 500 / velicina;

	var polje = new Array();

	init(velicina, polje);

	blinker = [[2, 1], [2, 2], [2, 3]]

	pulsar = [[1, 5], [1, 11],
          [2, 5], [2, 11],
          [3, 5], [3, 6], [3, 10], [3, 11],
          [5, 1], [5, 2], [5, 3], [5, 6], [5, 7], [5, 9], [5, 10], [5, 13], [5, 14], [5, 15],
          [11, 1], [11, 2], [11, 3], [11, 6], [11, 7], [11, 9], [11, 10], [11, 13], [11, 14], [11, 15],
          [6, 3], [6, 5], [6, 7], [6, 9], [6, 11], [6, 13],
          [10, 3], [10, 5], [10, 7], [10, 9], [10, 11], [10, 13],
          [7, 5], [7, 6], [7, 10], [7, 11],
          [9, 5], [9, 6], [9, 10], [9, 11],
          [13, 5], [13, 6], [13, 10], [13, 11],
          [14, 5], [14, 11],
          [15, 5], [15, 11],
          ]

          gosperGliderGun = [[5, 1], [5, 2], [6, 1], [6, 2],
                   [3, 13], [3, 14], [4, 12], [5, 11], [6, 11], [7, 11], [8, 12], [9, 13], [9, 14], [8, 16],
                   [7, 17], [6, 17], [5, 17], [4, 16], [6, 15], [6, 18],
                   [3, 21], [3, 22], [4, 21], [4, 22], [5, 21], [5, 22], [6, 23], [2, 23], [2, 25], [1, 25],
                   [6, 25], [7, 25], [3, 35], [4, 35], [3, 36], [4, 36] ]

	initiate(polje, gosperGliderGun);


    animate(polje);
};


</script>

<canvas id="myCanvas" width="500" height="500"></canvas>

</body>
</html>