November 17, 2012 12:46
diff --git a/gameoflife.pde b/gameoflife.pde
 int FPS = 4;
 int COUNT = 20;
 int SIZE = 10;
 int MAP_WIDTH = COUNT * SIZE;
 int MAP_HEIGHT = COUNT * SIZE;
 color BACKGROUND_COLOR = color(255, 255, 255, 0);

 /* cells */
 bool DEAD = false;
 bool ALIVE = true;
 color dead_color = BACKGROUND_COLOR;
 color alive_color = color(222, 222, 222, 75);
 /* for toggle cell's status randomly */
 float TOTAL_RANGE = 100;
 float TOGGLE_RATE = 0.15;
 Square[][] cells;

 void setup()
 {
    frameRate(FPS);
    size(MAP_WIDTH, MAP_HEIGHT);
    background(BACKGROUND_COLOR);

    cells = new Square[COUNT][COUNT];
    for (int i = 0;i < COUNT;i++)
        for (int j = 0;j < COUNT;j++)
            cells[i][j] = new Square((j * SIZE), (i * SIZE), SIZE, alive_color, dead_color);
    random_status();
 }

 void draw()
 {
    background(BACKGROUND_COLOR);
    draw_cells();
    update_cells();
    if (is_stable())
        noLoop();
 }

 void draw_cells()
 {
    for (int i = 0;i < COUNT;i++)
        for (int j = 0;j < COUNT;j++)
            cells[i][j].draw();
 }

 int get_status(int dirx, int diry, int x, int y)
 {
    int i = (x + dirx + COUNT) % COUNT;
    int j = (y + diry + COUNT) % COUNT;
    /* center */
    if (dirx == 0 && diry == 0)
        return 0;
    /* upper part */
    if (dirx == -1 || (dirx == 0 && diry == -1))
        return (cells[i][j].prev_status == ALIVE) ? 1 : 0;
    /* down part */
    else
        return (cells[i][j].status == ALIVE) ? 1 : 0;
 }


 bool calculate(int x, int y, bool current)
 {
    int alive_neighbour = 0;
    int rdirs[] = {-1, 0, 1}, cdirs[] = {-1, 0, 1};
    for (int i = 0;i < 3;i++)
        for (int j = 0;j < 3;j++)
            alive_neighbour += get_status(cdirs[i], rdirs[j], x, y);
    if (current == DEAD && alive_neighbour == 3)
        return ALIVE;
    if (current == ALIVE && (alive_neighbour == 2 || alive_neighbour == 3))
        return ALIVE;
    return DEAD;
 }

 void update_cells()
 {
    for (int i = 0;i < COUNT;i++)
        for (int j = 0;j < COUNT;j++) {
        cells[i][j].prev_status = cells[i][j].status;
        cells[i][j].status = calculate(i, j, cells[i][j].status);
    }
 }

 void is_stable()
 {
    for (int i = 0;i < COUNT;i++)
        for (int j = 0;j < COUNT;j++)
            if (cells[i][j].prev_status != cells[i][j].status)
                return false;
    return true;
 }

 void random_status()
 {
    for (int i = 0;i < COUNT;i++)
        for (int j = 0;j < COUNT;j++)
            if (random(0, TOTAL_RANGE) <= (TOTAL_RANGE * TOGGLE_RATE))
                cells[i][j].toggle();
 }

 class Square {
    int x, y;
    int size;
    bool status, prev_status;
    color alive, dead;

    Square(int _x, int _y, int _size, color _alive, color _dead) {
        x = _x; y = _y;
        size = _size;
        alive = _alive;
        dead = _dead;
        status = DEAD;
        prev_status = DEAD;
    }

    void draw() {
        if (status)
            fill(alive);
        else
            fill(dead);
        noStroke();
        rect(x, y, size, size);
    }

    void toggle() {
        status = !status;
    }

    void kill() {
        status = DEAD;
    }

    void born() {
        status = ALIVE;
    }

    bool is_dead() {
        return (status == DEAD);
    }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <meta charset="utf-8" />
    <title>canvas in background test</title>
    <link rel="stylesheet" href="style.css" />
    <script src="processing.js" type="text/javascript"></script>
  </head>
  <body>
    <canvas id="bg" width="500px" height="500px" class="canvas" data-processing-sources="gameoflife.pde"></canvas>
    <div id="main">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum, lectus ut malesuada pharetra, metus sapien euismod massa, sed ultrices lectus quam in odio. Morbi vel nulla vitae tellus convallis ornare. Quisque quis sapien justo, vel sodales mi. Curabitur vel mauris felis. Fusce in velit non augue imperdiet auctor. Aliquam vel libero leo. Aliquam nec sagittis tortor.</p>
    </div>
  </body>
 </html>
diff --git a/style.css b/style.css
 body {
  background: url(bg.png);
 }

 canvas {
  border: 0px none white;
 }

 #bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1000;
 }

 #main {
  width: 900px;
  margin: 120px auto;
 }
	int FPS = 4;
	int COUNT = 20;
	int SIZE = 10;
	int MAP_WIDTH = COUNT * SIZE;
	int MAP_HEIGHT = COUNT * SIZE;
	color BACKGROUND_COLOR = color(255, 255, 255, 0);

	/* cells */
	bool DEAD = false;
	bool ALIVE = true;
	color dead_color = BACKGROUND_COLOR;
	color alive_color = color(222, 222, 222, 75);
	/* for toggle cell's status randomly */
	float TOTAL_RANGE = 100;
	float TOGGLE_RATE = 0.15;
	Square[][] cells;

	void setup()
	{
	frameRate(FPS);
	size(MAP_WIDTH, MAP_HEIGHT);
	background(BACKGROUND_COLOR);

	cells = new Square[COUNT][COUNT];
	for (int i = 0;i < COUNT;i++)
	for (int j = 0;j < COUNT;j++)
	cells[i][j] = new Square((j * SIZE), (i * SIZE), SIZE, alive_color, dead_color);
	random_status();
	}

	void draw()
	{
	background(BACKGROUND_COLOR);
	draw_cells();
	update_cells();
	if (is_stable())
	noLoop();
	}

	void draw_cells()
	{
	for (int i = 0;i < COUNT;i++)
	for (int j = 0;j < COUNT;j++)
	cells[i][j].draw();
	}

	int get_status(int dirx, int diry, int x, int y)
	{
	int i = (x + dirx + COUNT) % COUNT;
	int j = (y + diry + COUNT) % COUNT;
	/* center */
	if (dirx == 0 && diry == 0)
	return 0;
	/* upper part */
	if (dirx == -1 \|\| (dirx == 0 && diry == -1))
	return (cells[i][j].prev_status == ALIVE) ? 1 : 0;
	/* down part */
	else
	return (cells[i][j].status == ALIVE) ? 1 : 0;
	}


	bool calculate(int x, int y, bool current)
	{
	int alive_neighbour = 0;
	int rdirs[] = {-1, 0, 1}, cdirs[] = {-1, 0, 1};
	for (int i = 0;i < 3;i++)
	for (int j = 0;j < 3;j++)
	alive_neighbour += get_status(cdirs[i], rdirs[j], x, y);
	if (current == DEAD && alive_neighbour == 3)
	return ALIVE;
	if (current == ALIVE && (alive_neighbour == 2 \|\| alive_neighbour == 3))
	return ALIVE;
	return DEAD;
	}

	void update_cells()
	{
	for (int i = 0;i < COUNT;i++)
	for (int j = 0;j < COUNT;j++) {
	cells[i][j].prev_status = cells[i][j].status;
	cells[i][j].status = calculate(i, j, cells[i][j].status);
	}
	}

	void is_stable()
	{
	for (int i = 0;i < COUNT;i++)
	for (int j = 0;j < COUNT;j++)
	if (cells[i][j].prev_status != cells[i][j].status)
	return false;
	return true;
	}

	void random_status()
	{
	for (int i = 0;i < COUNT;i++)
	for (int j = 0;j < COUNT;j++)
	if (random(0, TOTAL_RANGE) <= (TOTAL_RANGE * TOGGLE_RATE))
	cells[i][j].toggle();
	}

	class Square {
	int x, y;
	int size;
	bool status, prev_status;
	color alive, dead;

	Square(int _x, int _y, int _size, color _alive, color _dead) {
	x = _x; y = _y;
	size = _size;
	alive = _alive;
	dead = _dead;
	status = DEAD;
	prev_status = DEAD;
	}

	void draw() {
	if (status)
	fill(alive);
	else
	fill(dead);
	noStroke();
	rect(x, y, size, size);
	}

	void toggle() {
	status = !status;
	}

	void kill() {
	status = DEAD;
	}

	void born() {
	status = ALIVE;
	}

	bool is_dead() {
	return (status == DEAD);
	}
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>canvas in background test</title>
	<link rel="stylesheet" href="style.css" />
	<script src="processing.js" type="text/javascript"></script>
	</head>
	<body>
	<canvas id="bg" width="500px" height="500px" class="canvas" data-processing-sources="gameoflife.pde"></canvas>
	<div id="main">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vestibulum, lectus ut malesuada pharetra, metus sapien euismod massa, sed ultrices lectus quam in odio. Morbi vel nulla vitae tellus convallis ornare. Quisque quis sapien justo, vel sodales mi. Curabitur vel mauris felis. Fusce in velit non augue imperdiet auctor. Aliquam vel libero leo. Aliquam nec sagittis tortor.</p>
	</div>
	</body>
	</html>
	body {
	background: url(bg.png);
	}

	canvas {
	border: 0px none white;
	}

	#bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1000;
	}

	#main {
	width: 900px;
	margin: 120px auto;
	}