Thejesh GN

A Blog, A Website and A container for all my views with excerpts from technology, travel, films, india, photography, kannada, friends and other interests. I am Thejesh GN. Friends call me Thej

Navigation: Home /

Game of Life with Processing.js

Posted by Thejesh GN On May - 6 - 2011

hacker emblem I was bored. So I thought of playing Game of Life. I got to know about it through hacker logo which is the glider pattern from the Game of Life. While playing I thought let me code it processing.js. Game of life is a simple game with no interaction involved once you start with the initial seed.
From Wikipedia:
The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970.[1]
The “game” is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves.

The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, live or dead. Every cell interacts with its eight neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur:

  1. Any live cell with fewer than two live neighbours dies, as if caused by under-population.
  2. Any live cell with two or three live neighbours lives on to the next generation.
  3. Any live cell with more than three live neighbours dies, as if by overcrowding.
  4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

The initial pattern constitutes the seed of the system. The first generation is created by applying the above rules simultaneously to every cell in the seed—births and deaths occur simultaneously, and the discrete moment at which this happens is sometimes called a tick (in other words, each generation is a pure function of the preceding one). The rules continue to be applied repeatedly to create further generations.

The initial code was borrowed from Ran Tao’s java based program. I rewrote in Javascript version of Processing. Also added player buttons for more control. Also added a way to start with your own seed through it starts with random seed. One more change to the original Life is that you can introduce a living cell while its playing. Just click on the grid. Its kind of against the actual game, but it seemed more fun to me.

Clear it and introduce your own seed using mouse or just intrude, you are God. Go to full page version its more fun. Source code is on GitHub.

Technology

Getting started with Processingjs by writing Analog clock

Posted by Thejesh GN On October - 29 - 2009

As most of you know, I love JavaScript.  Recently I started exploring Processing.js to create some dynamic graphs and animation. I was bowled over by the power of Processing.js.

“Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses JavaScript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.”

The Processing language was originally created by Ben Fry and Casey Reas for Java. In 2008, John Resig ported the 2D context of Processing to JavaScript. It needs Canvas. So make sure you are using HTML5 capable browser like Firefox 1.

Setup: Download the processing.js. That is the only file you need.

Initialize processing: We need to initialize the processing engine on a canvas. We will have that in the init.js and will include that.

<html>
<head>
<script src="init.js"></script>
<script src="processing.min.js"></script>
<title>Analog Clock using Processing.js</title>
</head>
<body>
<script type="application/processing" target="clock">
//your processing code
</script><canvas id="clock">You need HTML5 canvas support.
Try latest Firefox</canvas>
</body>
</html>

The above code snippet shows the basic setup to run. We need to add our processing code inside

<script type="application/processing">
//your processing code
</script>

The init.js code actually searches for all the script tag type=”application/processing” and applies processing the code on the target canvas. init.js was borrowed from JResig‘s code examples.

Logic for the clock:
Circle has 2PI radians. So for each second/minute we have to move 2PI/60 radians. Given the center of the circle (a,b), radius r and angle t radians. we can find any point on the circle, using
x = a+r cos(t);
y = b+r sin(t);
or
x = a + r (1-t2)/(1+t2)
y = b + r (2t)/(1+t2)

I have used the first set of formula. Processing.js supports time and trigonometric functions by default.

But the 0 degrees start at horizontally and I wanted 0th hour to start at 90 degrees. And hence the subtraction of quarterCicrle which equals = PI/2.

The two main important methods are
void setup() – called initially when canvas gets loaded.
void draw() – called at the rate of frameRate.
Read the rest of this entry »

Technology